"use client";

import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import Link from "next/link";
import { createCustomerAction, updateCustomerAction, type CustomerFormState } from "../actions";
import { STAGE_LABEL } from "@/lib/format";

type Option = { id: string; name: string };

export type CustomerFormValues = {
  id: string;
  code: string;
  orgName: string;
  contactName: string;
  contactPosition: string;
  contactBirthDate: string;
  phone: string;
  email: string;
  taxCode: string;
  channelId: string;
  territoryId: string;
  ward: string;
  address: string;
  receiverName: string;
  receiverPhone: string;
  receiverAddress: string;
  leadNeed: string;
  leadSource: string;
  stage: string;
  ownerId: string;
  note: string;
};

function SubmitButton({ editing }: { editing: boolean }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary" disabled={pending}>
      {pending ? "Đang lưu…" : editing ? "Lưu thay đổi" : "Lưu khách hàng"}
    </button>
  );
}

/** Dùng cho cả tạo mới (không có `initial`) và chỉnh sửa (có `initial`). */
export function CustomerForm({
  channels,
  territories,
  staff,
  canAssignOwner,
  allowUnassigned = true,
  initial,
}: {
  channels: Option[];
  territories: Option[];
  staff: Option[];
  canAssignOwner: boolean;
  /** Chỉ Ban giám đốc được để khách chưa phân công; cấp dưới bắt buộc chọn người phụ trách. */
  allowUnassigned?: boolean;
  initial?: CustomerFormValues;
}) {
  const editing = !!initial;
  const [stage, setStage] = useState(initial?.stage ?? "LEAD");
  // Khách tiềm năng (MKT chuyển sang) chưa chắc có địa chỉ đầy đủ; từ "Đang" trở đi bắt buộc đủ số nhà, phường.
  const addressRequired = stage !== "LEAD";
  const [state, formAction] = useActionState<CustomerFormState, FormData>(
    editing ? updateCustomerAction : createCustomerAction,
    {},
  );
  // Sau mỗi lần gửi React xoá trắng form; khi lỗi, máy chủ trả lại những gì đã nhập để điền lại thay vì bắt gõ lại từ đầu.
  const v = (name: keyof CustomerFormValues): string => state.values?.[name] ?? (initial?.[name] as string | undefined) ?? "";

  return (
    // key đổi theo dữ liệu máy chủ trả lại: React không cập nhật lại defaultValue của ô chọn (select) sau khi đã hiển thị,
    // nên phải dựng lại form để cả ô chọn lẫn ô nhập được điền đúng những gì người dùng đã nhập.
    <form key={state.values ? JSON.stringify(state.values) : "moi"} action={formAction} className="flex flex-col gap-4">
      {initial && <input type="hidden" name="id" value={initial.id} />}

      <div className="card grid gap-4 p-4 lg:grid-cols-2">
        <div className="lg:col-span-2 text-xs text-ink-400">
          Mã khách hàng:{" "}
          <span className="font-semibold text-ink-600">{initial?.code ?? "hệ thống tự tạo khi lưu (KH + số thứ tự)"}</span> · dấu{" "}
          <span className="text-red-600">*</span> là bắt buộc.
        </div>
        <div className="lg:col-span-2">
          <label htmlFor="orgName" className="label-caps mb-1.5 block">
            Tên cơ sở {addressRequired && <span className="text-red-600">*</span>}
          </label>
          <input
            id="orgName"
            name="orgName"
            required={addressRequired}
            defaultValue={v("orgName")}
            className="input"
            placeholder={addressRequired ? "Phòng khám / TMV / Spa…" : "Phòng khám / TMV / Spa… (khách tiềm năng chưa có thì để trống)"}
          />
        </div>

        <div>
          <label htmlFor="contactName" className="label-caps mb-1.5 block">
            Họ tên người liên hệ chính <span className="text-red-600">*</span>
          </label>
          <input id="contactName" name="contactName" required defaultValue={v("contactName")} className="input" placeholder="Chị Lan" />
        </div>

        <div>
          <label htmlFor="contactPosition" className="label-caps mb-1.5 block">
            Chức vụ
          </label>
          <input id="contactPosition" name="contactPosition" defaultValue={v("contactPosition")} className="input" placeholder="Chủ cơ sở, Giám đốc…" />
        </div>

        <div>
          <label htmlFor="contactBirthDate" className="label-caps mb-1.5 block">
            Ngày sinh người liên hệ
          </label>
          <input id="contactBirthDate" name="contactBirthDate" type="date" defaultValue={v("contactBirthDate")} className="input" />
        </div>

        <div>
          <label htmlFor="phone" className="label-caps mb-1.5 block">
            Điện thoại <span className="text-red-600">*</span>
          </label>
          <input id="phone" name="phone" type="tel" inputMode="tel" required defaultValue={v("phone")} className="input" placeholder="0901234567" />
        </div>

        <div>
          <label htmlFor="taxCode" className="label-caps mb-1.5 block">
            Mã số thuế
          </label>
          <input id="taxCode" name="taxCode" defaultValue={v("taxCode")} className="input" placeholder="0312345678" />
        </div>

        <div>
          <label htmlFor="channelId" className="label-caps mb-1.5 block">
            Loại (Spa, TMV, Bệnh viện…) <span className="text-red-600">*</span>
          </label>
          <select id="channelId" name="channelId" required className="input" defaultValue={v("channelId")}>
            <option value="">— Chọn loại —</option>
            {channels.map((channel) => (
              <option key={channel.id} value={channel.id}>
                {channel.name}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label htmlFor="territoryId" className="label-caps mb-1.5 block">
            Tỉnh / thành <span className="text-red-600">*</span>
          </label>
          <select id="territoryId" name="territoryId" required className="input" defaultValue={v("territoryId")}>
            <option value="">— Chọn tỉnh / thành —</option>
            {territories.map((territory) => (
              <option key={territory.id} value={territory.id}>
                {territory.name}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label htmlFor="ward" className="label-caps mb-1.5 block">
            Phường / xã {addressRequired && <span className="text-red-600">*</span>}
          </label>
          <input id="ward" name="ward" required={addressRequired} defaultValue={v("ward")} className="input" placeholder="Phường Bến Nghé" />
        </div>

        <div>
          <label htmlFor="address" className="label-caps mb-1.5 block">
            Địa chỉ (số nhà, đường) {addressRequired && <span className="text-red-600">*</span>}
          </label>
          <input id="address" name="address" required={addressRequired} defaultValue={v("address")} className="input" placeholder="12 Lê Lợi" />
        </div>

        {!editing && (
          <div>
            <label htmlFor="stage" className="label-caps mb-1.5 block">
              Trạng thái
            </label>
            <select id="stage" name="stage" className="input" defaultValue={v("stage") || "LEAD"} onChange={(event) => setStage(event.target.value)}>
              <option value="LEAD">{STAGE_LABEL.LEAD} — đã tiếp cận</option>
              <option value="PROSPECT">{STAGE_LABEL.PROSPECT} — đã tham dự CT công ty</option>
              <option value="DEALER">{STAGE_LABEL.DEALER} — mở code chính thức</option>
            </select>
          </div>
        )}
        {editing && <input type="hidden" name="stage" value={initial?.stage} />}

        {canAssignOwner && (
          <div>
            <label htmlFor="ownerId" className="label-caps mb-1.5 block">
              NVKD phụ trách
            </label>
            <select id="ownerId" name="ownerId" className="input" defaultValue={v("ownerId")} required={!allowUnassigned}>
              <option value="">{allowUnassigned ? "— Chưa phân công —" : "— Chọn NVKD —"}</option>
              {staff.map((person) => (
                <option key={person.id} value={person.id}>
                  {person.name}
                </option>
              ))}
            </select>
          </div>
        )}

        <div className="lg:col-span-2">
          <label htmlFor="email" className="label-caps mb-1.5 block">
            Email
          </label>
          <input id="email" name="email" type="email" defaultValue={v("email")} className="input" placeholder="lienhe@donvi.vn" />
        </div>
      </div>

      <div className="card grid gap-4 p-4 lg:grid-cols-3">
        <div className="lg:col-span-3">
          <div className="text-sm font-semibold text-ink-700">Người nhận hàng</div>
          <p className="text-xs text-ink-400">
            Thông tin giao hàng mặc định — để trống nếu nhận tại địa chỉ trên.
          </p>
        </div>
        <div>
          <label htmlFor="receiverName" className="label-caps mb-1.5 block">
            Họ tên người nhận
          </label>
          <input id="receiverName" name="receiverName" defaultValue={v("receiverName")} className="input" />
        </div>
        <div>
          <label htmlFor="receiverPhone" className="label-caps mb-1.5 block">
            Điện thoại người nhận
          </label>
          <input id="receiverPhone" name="receiverPhone" type="tel" defaultValue={v("receiverPhone")} className="input" />
        </div>
        <div>
          <label htmlFor="receiverAddress" className="label-caps mb-1.5 block">
            Chành xe / địa chỉ nhận
          </label>
          <input id="receiverAddress" name="receiverAddress" defaultValue={v("receiverAddress")} className="input" />
        </div>
      </div>

      <div className="card grid gap-4 p-4 lg:grid-cols-2">
        <div className="lg:col-span-2">
          <div className="text-sm font-semibold text-ink-700">Nhu cầu &amp; nguồn khách</div>
          <p className="text-xs text-ink-400">Dành cho khách tiềm năng do Marketing chuyển sang.</p>
        </div>
        <div>
          <label htmlFor="leadNeed" className="label-caps mb-1.5 block">
            Nhu cầu tư vấn
          </label>
          <input id="leadNeed" name="leadNeed" defaultValue={v("leadNeed")} className="input" placeholder="Sản phẩm / dịch vụ quan tâm" />
        </div>
        <div>
          <label htmlFor="leadSource" className="label-caps mb-1.5 block">
            Nguồn khách
          </label>
          <input id="leadSource" name="leadSource" defaultValue={v("leadSource")} className="input" placeholder="Facebook, hội thảo, giới thiệu…" />
        </div>
        <div className="lg:col-span-2">
          <label htmlFor="note" className="label-caps mb-1.5 block">
            Ghi chú
          </label>
          <input id="note" name="note" defaultValue={v("note")} className="input" placeholder="Nhu cầu, sản phẩm quan tâm…" />
        </div>
      </div>

      {state.error && (
        <p role="alert" className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">
          {state.error}
        </p>
      )}
      {state.info && <p className="rounded-lg bg-ink-50 px-3 py-2 text-sm text-ink-600">{state.info}</p>}

      <div className="flex flex-wrap items-center gap-3">
        <SubmitButton editing={editing} />
        <Link href={initial ? `/khach-hang/${initial.id}` : "/khach-hang"} className="btn-ghost">
          Huỷ
        </Link>
        {!editing && <span className="text-xs text-ink-400">Mã khách hàng do hệ thống tự sinh.</span>}
      </div>
    </form>
  );
}