"use client";

import { ActionForm } from "@/components/action-form";
import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { saveEventAction, type EventState } from "./actions";
import { formatVndShort } from "@/lib/format";
import { kindOptions } from "@/lib/event-kinds";

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

export type EventRow = {
  id: string;
  name: string;
  eventDate: string;
  kind: string;
  territoryId: string | null;
  ownerId: string | null;
  invitedCount: number;
  attendedCount: number;
  resultOrderCount: number;
  resultRevenue: number;
  note: string | null;
};

function Submit({ label }: { label: string }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className="btn-primary" disabled={pending}>
      {pending ? "Đang lưu…" : label}
    </button>
  );
}

export function EventForm({
  territories,
  staff,
  today,
  editing,
  onDone,
  ownerLocked = false,
}: {
  territories: Option[];
  staff: Option[];
  today: string;
  editing?: EventRow;
  onDone?: () => void;
  /** Nhân viên chuyên môn chỉ ghi lớp của chính mình: người phụ trách cố định, không có mục "Chưa phân công". */
  ownerLocked?: boolean;
}) {
  const [state, formAction] = useActionState<EventState, FormData>(saveEventAction, {});
  const [invited, setInvited] = useState(editing?.invitedCount ?? 0);
  const [attended, setAttended] = useState(editing?.attendedCount ?? 0);
  const [revenue, setRevenue] = useState(editing?.resultRevenue ?? 0);

  const attendanceRate = invited > 0 ? Math.round((attended / invited) * 100) : null;

  return (
    <form action={formAction} className="card flex flex-col gap-4 p-4">
      {editing && <input type="hidden" name="id" value={editing.id} />}

      <div className="flex items-start justify-between gap-3">
        <h2 className="text-base font-bold text-ink-700">
          {editing ? "Sửa chuyên đề / lớp học" : "Thêm chuyên đề / lớp học"}
        </h2>
        {editing && onDone && (
          <button type="button" onClick={onDone} className="btn-ghost px-3 py-1 text-xs">
            Đóng
          </button>
        )}
      </div>

      <div className="grid gap-4 lg:grid-cols-4">
        <div className="lg:col-span-2">
          <label className="label-caps mb-1.5 block">Tên chuyên đề / lớp học *</label>
          <input
            name="name"
            required
            defaultValue={editing?.name}
            className="input"
            placeholder="Chuyên đề ứng dụng Mesotherapy trong điều trị"
          />
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Loại</label>
          <select name="kind" defaultValue={editing?.kind ?? "Chuyên đề"} className="input">
            {kindOptions(editing?.kind).map((kind) => (
              <option key={kind} value={kind}>
                {kind}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Ngày tổ chức *</label>
          <input
            name="eventDate"
            type="date"
            required
            defaultValue={editing?.eventDate ?? today}
            className="input"
          />
        </div>

        <div>
          <label className="label-caps mb-1.5 block">Khu vực</label>
          <select name="territoryId" defaultValue={editing?.territoryId ?? ""} className="input">
            <option value="">— Toàn quốc —</option>
            {territories.map((territory) => (
              <option key={territory.id} value={territory.id}>
                {territory.name}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Người phụ trách</label>
          <select name="ownerId" defaultValue={editing?.ownerId ?? (ownerLocked ? (staff[0]?.id ?? "") : "")} className="input">
            {!ownerLocked && <option value="">— Chưa phân công —</option>}
            {staff.map((person) => (
              <option key={person.id} value={person.id}>
                {person.name}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Số lượng mời *</label>
          <input
            name="invitedCount"
            type="number"
            min={0}
            required
            value={invited || ""}
            onChange={(event) => setInvited(Number(event.target.value))}
            className="input tnum"
          />
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Số lượng tham dự *</label>
          <input
            name="attendedCount"
            type="number"
            min={0}
            required
            value={attended || ""}
            onChange={(event) => setAttended(Number(event.target.value))}
            className="input tnum"
          />
          {attendanceRate != null && (
            <div className="mt-1 text-[11px] text-ink-400">Tỷ lệ tham dự {attendanceRate}%</div>
          )}
        </div>

        <div>
          <label className="label-caps mb-1.5 block">Số đơn chốt được</label>
          <input
            name="resultOrderCount"
            type="number"
            min={0}
            defaultValue={editing?.resultOrderCount ?? 0}
            className="input tnum"
          />
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Doanh thu phát sinh (đ)</label>
          <input
            name="resultRevenue"
            type="number"
            min={0}
            value={revenue || ""}
            onChange={(event) => setRevenue(Number(event.target.value))}
            className="input tnum"
          />
          {revenue > 0 && <div className="mt-1 text-[11px] text-ink-400">{formatVndShort(revenue)}</div>}
        </div>
        <div className="lg:col-span-2">
          <label className="label-caps mb-1.5 block">Kết quả đạt được / ghi chú</label>
          <input
            name="note"
            defaultValue={editing?.note ?? ""}
            className="input"
            placeholder="Nội dung, phản hồi của khách, hướng theo dõi tiếp…"
          />
        </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.ok && <p className="rounded-lg bg-ink-100 px-3 py-2 text-sm text-brand-600">{state.ok}</p>}

      <div>
        <Submit label={editing ? "Lưu thay đổi" : "Thêm chuyên đề"} />
      </div>
    </form>
  );
}

export function EventManager({
  rows,
  territories,
  staff,
  today,
  territoryNames,
  staffNames,
  onDelete,
  ownerLocked = false,
}: {
  rows: EventRow[];
  territories: Option[];
  staff: Option[];
  today: string;
  territoryNames: Record<string, string>;
  staffNames: Record<string, string>;
  onDelete: (formData: FormData) => Promise<unknown>;
  ownerLocked?: boolean;
}) {
  const [editingId, setEditingId] = useState<string | null>(null);
  const editing = rows.find((row) => row.id === editingId);

  return (
    <div className="flex flex-col gap-5">
      {editing ? (
        <EventForm
          key={editing.id}
          editing={editing}
          territories={territories}
          staff={staff}
          today={today}
          onDone={() => setEditingId(null)}
          ownerLocked={ownerLocked}
        />
      ) : (
        <EventForm territories={territories} staff={staff} today={today} ownerLocked={ownerLocked} />
      )}

      <div className="card overflow-x-auto">
        <table className="data-table">
          <thead>
            <tr>
              <th>Chuyên đề / lớp học</th>
              <th>Ngày</th>
              <th>Khu vực</th>
              <th>Phụ trách</th>
              <th className="text-right">Mời</th>
              <th className="text-right">Dự</th>
              <th className="text-right">Tỷ lệ</th>
              <th className="text-right">Doanh thu</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr>
                <td colSpan={9} className="py-10 text-center text-ink-400">
                  Chưa có chuyên đề hay lớp học nào.
                </td>
              </tr>
            )}
            {rows.map((row) => {
              const rate = row.invitedCount > 0 ? Math.round((row.attendedCount / row.invitedCount) * 100) : null;
              return (
                <tr key={row.id}>
                  <td>
                    <div className="font-medium text-ink-700">{row.name}</div>
                    <div className="text-[11px] text-ink-400">{row.kind}</div>
                  </td>
                  <td className="tnum whitespace-nowrap text-ink-500">
                    {row.eventDate.split("-").reverse().join("/")}
                  </td>
                  <td className="text-ink-500">
                    {row.territoryId ? (territoryNames[row.territoryId] ?? "—") : "Toàn quốc"}
                  </td>
                  <td className="text-ink-500">{row.ownerId ? (staffNames[row.ownerId] ?? "—") : "—"}</td>
                  <td className="tnum text-right text-ink-500">{row.invitedCount}</td>
                  <td className="tnum text-right font-medium">{row.attendedCount}</td>
                  <td className="tnum text-right text-ink-500">{rate != null ? `${rate}%` : "—"}</td>
                  <td className="tnum text-right font-semibold">{formatVndShort(row.resultRevenue)}</td>
                  <td>
                    <div className="flex justify-end gap-2">
                      <button
                        type="button"
                        onClick={() => setEditingId(row.id === editingId ? null : row.id)}
                        className="btn-ghost px-2 py-1 text-xs"
                      >
                        Sửa
                      </button>
                      <ActionForm action={onDelete} success="Đã xoá." confirm="Xoá mục này? Thao tác không thể hoàn tác.">
                        <input type="hidden" name="id" value={row.id} />
                        <button type="submit" className="btn-ghost px-2 py-1 text-xs text-red-600">
                          Xoá
                        </button>
                      </ActionForm>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}