"use client";

import { ActionForm } from "@/components/action-form";
import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { addGuestAction, addGuestBatchAction, updateGuestAction, deleteGuestAction, type FormState } from "../actions";
import { Badge } from "@/components/ui";
import { formatDate } from "@/lib/format";

/** Ngày hôm nay theo giờ của thiết bị người dùng (không phải giờ quốc tế). */
function localToday(): string {
  const d = new Date();
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}

export type TerritoryOption = { id: string; name: string };
export type GuestRow = {
  id: string;
  guestName: string;
  guestType: string | null;
  invitedDate: string;
  attended: boolean | null;
  wantsCme: boolean;
  wantsCertificate: boolean;
  note: string | null;
  invitedBy: string | null;
  invitedByName: string | null;
  territoryId: string;
  territoryName: string | null;
};

function Submit({ label, pendingLabel }: { label: string; pendingLabel: string }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary" disabled={pending}>
      {pending ? pendingLabel : label}
    </button>
  );
}

export function AddGuestForm({ eventId, territories }: { eventId: string; territories: TerritoryOption[] }) {
  const [state, formAction] = useActionState<FormState, FormData>(addGuestAction, {});
  const today = localToday();

  return (
    <form action={formAction} className="card flex flex-wrap items-end gap-3 p-4">
      <input type="hidden" name="eventId" value={eventId} />
      <div>
        <label className="label-caps mb-1.5 block">Khu vực</label>
        {territories.length === 1 ? (
          <>
            <input type="hidden" name="territoryId" value={territories[0].id} />
            <input className="input" value={territories[0].name} disabled />
          </>
        ) : (
          <select name="territoryId" required className="input">
            {territories.map((t) => (
              <option key={t.id} value={t.id}>
                {t.name}
              </option>
            ))}
          </select>
        )}
      </div>
      <div className="flex-1" style={{ minWidth: 160 }}>
        <label className="label-caps mb-1.5 block">Tên khách</label>
        <input name="guestName" required className="input" placeholder="BS. Nguyễn Văn A" />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Loại khách</label>
        <input name="guestType" className="input" placeholder="Bác sĩ / Chủ spa..." style={{ width: 150 }} />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Ngày mời</label>
        <input name="invitedDate" type="date" defaultValue={today} required className="input" />
      </div>
      <div className="flex-1" style={{ minWidth: 160 }}>
        <label className="label-caps mb-1.5 block">Ghi chú (tuỳ chọn)</label>
        <input name="note" className="input" />
      </div>
      <Submit label="+ Ghi nhận" pendingLabel="Đang lưu…" />
      {state.error && <p role="alert" className="w-full text-sm text-red-700">{state.error}</p>}
      {state.ok && <p className="w-full text-sm text-brand-600">{state.ok}</p>}
    </form>
  );
}

/** Ghi nhanh theo số lượng: "hôm nay mời 10 bác sĩ" — chưa cần tên từng người, bổ sung tên sau. */
export function AddGuestBatchForm({ eventId, territories }: { eventId: string; territories: TerritoryOption[] }) {
  const [state, formAction] = useActionState<FormState, FormData>(addGuestBatchAction, {});
  const today = localToday();

  return (
    <form action={formAction} className="card flex flex-wrap items-end gap-3 p-4">
      <input type="hidden" name="eventId" value={eventId} />
      <div className="w-full text-sm font-semibold text-ink-700">Báo cáo nhanh theo số lượng</div>
      <div>
        <label className="label-caps mb-1.5 block">Khu vực</label>
        {territories.length === 1 ? (
          <>
            <input type="hidden" name="territoryId" value={territories[0].id} />
            <input className="input" value={territories[0].name} disabled />
          </>
        ) : (
          <select name="territoryId" required className="input">
            {territories.map((t) => (
              <option key={t.id} value={t.id}>
                {t.name}
              </option>
            ))}
          </select>
        )}
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Loại khách</label>
        <input name="guestType" required className="input" placeholder="Bác sĩ / Chủ spa..." style={{ width: 150 }} />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Số lượng</label>
        <input name="count" type="number" min={1} max={200} required defaultValue={1} className="input tnum" style={{ width: 90 }} />
      </div>
      <div>
        <label className="label-caps mb-1.5 block">Ngày mời</label>
        <input name="invitedDate" type="date" defaultValue={today} required className="input" />
      </div>
      <Submit label="+ Ghi nhanh" pendingLabel="Đang lưu…" />
      {state.error && <p role="alert" className="w-full text-sm text-red-700">{state.error}</p>}
      {state.ok && <p className="w-full text-sm text-brand-600">{state.ok}</p>}
    </form>
  );
}

function GuestDecisionForm({ eventId, guest }: { eventId: string; guest: GuestRow }) {
  return (
    <ActionForm action={updateGuestAction} success="Đã cập nhật khách mời." className="flex flex-wrap items-center gap-2 text-xs">
      <input type="hidden" name="eventId" value={eventId} />
      <input type="hidden" name="guestId" value={guest.id} />
      <input name="guestName" defaultValue={guest.guestName} aria-label="Tên khách" className="input py-1 text-xs" style={{ width: 150 }} />
      <select name="attended" defaultValue={guest.attended === true ? "yes" : guest.attended === false ? "no" : "unknown"} className="input py-1 text-xs">
        <option value="unknown">Chưa rõ</option>
        <option value="yes">Có đi</option>
        <option value="no">Không đi</option>
      </select>
      <label className="flex items-center gap-1">
        <input type="checkbox" name="wantsCme" defaultChecked={guest.wantsCme} className="h-3.5 w-3.5" /> CME
      </label>
      <label className="flex items-center gap-1">
        <input type="checkbox" name="wantsCertificate" defaultChecked={guest.wantsCertificate} className="h-3.5 w-3.5" /> Chứng nhận
      </label>
      <input name="note" defaultValue={guest.note ?? ""} placeholder="Ghi chú" className="input py-1 text-xs" style={{ width: 130 }} />
      <button type="submit" className="btn-ghost px-2 py-1 text-xs">
        Lưu
      </button>
    </ActionForm>
  );
}

export function GuestList({
  eventId,
  guests,
  currentUserId,
  manageableInviters,
}: {
  eventId: string;
  guests: GuestRow[];
  currentUserId: string;
  /** Những người mà người xem được sửa/xoá khách của họ; null = tất cả. */
  manageableInviters: string[] | null;
}) {
  const canManage = (invitedBy: string | null) =>
    manageableInviters === null || invitedBy === currentUserId || (invitedBy !== null && manageableInviters.includes(invitedBy));
  const [onlyCmeOrCert, setOnlyCmeOrCert] = useState(false);
  const rows = onlyCmeOrCert ? guests.filter((g) => g.wantsCme || g.wantsCertificate) : guests;

  return (
    <div>
      <label className="mb-2 flex items-center gap-2 text-sm text-ink-600">
        <input
          type="checkbox"
          checked={onlyCmeOrCert}
          onChange={(e) => setOnlyCmeOrCert(e.target.checked)}
          className="h-4 w-4 accent-brand-500"
        />
        Chỉ hiện khách mua CME hoặc chứng nhận tham dự
      </label>
      {/* Điện thoại: mỗi khách một thẻ, phần cập nhật/xoá gập trong "Cập nhật" — bảng 9 cột không dùng được trên màn nhỏ. */}
      <div className="flex flex-col gap-2 md:hidden">
        {rows.length === 0 && (
          <div className="card px-4 py-8 text-center text-sm text-ink-400">Chưa có khách nào.</div>
        )}
        {rows.map((g) => {
          const canEdit = canManage(g.invitedBy);
          return (
            <div key={g.id} className="card p-3.5">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <div className="font-semibold text-ink-700">{g.guestName}</div>
                  <div className="mt-0.5 text-[11px] text-ink-400">
                    {g.guestType || "Chưa rõ loại"} · {g.territoryName ?? "—"}
                  </div>
                </div>
                {g.attended === true ? (
                  <Badge tone="green">Có đi</Badge>
                ) : g.attended === false ? (
                  <Badge tone="red">Không đi</Badge>
                ) : (
                  <Badge>Chưa rõ</Badge>
                )}
              </div>
              {(g.wantsCme || g.wantsCertificate) && (
                <div className="mt-2 flex gap-1">
                  {g.wantsCme && <Badge tone="gold">CME</Badge>}
                  {g.wantsCertificate && <Badge tone="brand">Chứng nhận</Badge>}
                </div>
              )}
              <div className="mt-2 text-xs text-ink-400">
                {g.invitedByName ?? "—"} mời ngày {formatDate(g.invitedDate)}
                {g.note ? ` · ${g.note}` : ""}
              </div>
              {canEdit && (
                <details className="mt-2.5 border-t border-line pt-2.5">
                  <summary className="cursor-pointer text-xs font-semibold text-brand-600">Cập nhật / xoá</summary>
                  <div className="mt-2 flex flex-col gap-2">
                    <GuestDecisionForm eventId={eventId} guest={g} />
                    <ActionForm action={deleteGuestAction} success="Đã xoá khách mời." confirm="Xoá khách mời này?">
                      <input type="hidden" name="eventId" value={eventId} />
                      <input type="hidden" name="guestId" value={g.id} />
                      <button type="submit" className="btn-ghost px-2 py-1 text-xs text-red-600">
                        Xoá khách này
                      </button>
                    </ActionForm>
                  </div>
                </details>
              )}
            </div>
          );
        })}
      </div>

      <div className="card hidden overflow-x-auto md:block">
        <table className="data-table">
          <thead>
            <tr>
              <th>Khách</th>
              <th>Loại</th>
              <th>Khu vực</th>
              <th>Người mời</th>
              <th>Ngày mời</th>
              <th>Tham dự</th>
              <th>CME / Chứng nhận</th>
              <th>Ghi chú</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr>
                <td colSpan={9} className="py-8 text-center text-ink-400">
                  Chưa có khách nào.
                </td>
              </tr>
            )}
            {rows.map((g) => {
              const canEdit = canManage(g.invitedBy);
              return (
                <tr key={g.id}>
                  <td className="font-medium text-ink-700">{g.guestName}</td>
                  <td className="text-ink-500">{g.guestType || "—"}</td>
                  <td className="text-ink-500">{g.territoryName ?? "—"}</td>
                  <td className="text-ink-500">{g.invitedByName ?? "—"}</td>
                  <td className="tnum whitespace-nowrap text-ink-500">{formatDate(g.invitedDate)}</td>
                  <td>
                    {g.attended === true ? (
                      <Badge tone="green">Có đi</Badge>
                    ) : g.attended === false ? (
                      <Badge tone="red">Không đi</Badge>
                    ) : (
                      <Badge>Chưa rõ</Badge>
                    )}
                  </td>
                  <td>
                    <div className="flex gap-1">
                      {g.wantsCme && <Badge tone="gold">CME</Badge>}
                      {g.wantsCertificate && <Badge tone="brand">Chứng nhận</Badge>}
                      {!g.wantsCme && !g.wantsCertificate && <span className="text-ink-300">—</span>}
                    </div>
                  </td>
                  <td className="text-ink-500">{g.note || "—"}</td>
                  <td>
                    {canEdit ? (
                      <div className="flex flex-col gap-1">
                        <GuestDecisionForm eventId={eventId} guest={g} />
                        <ActionForm action={deleteGuestAction} success="Đã xoá khách mời." confirm="Xoá khách mời này?">
                          <input type="hidden" name="eventId" value={eventId} />
                          <input type="hidden" name="guestId" value={g.id} />
                          <button type="submit" className="btn-ghost px-2 py-1 text-xs text-red-600">
                            Xoá
                          </button>
                        </ActionForm>
                      </div>
                    ) : (
                      <span className="text-ink-300">—</span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}