"use client";

import { ActionForm } from "@/components/action-form";
import { useActionState, useState } from "react";
import { useFormStatus } from "react-dom";
import { saveCourseAction, deactivateCourseAction, type CourseState } from "./actions";

export type CourseRow = {
  id: string;
  name: string;
  description: string | null;
  schedule: string | null;
  conditions: string | null;
  format: string | null;
  hasCertificate: boolean;
  isActive: boolean;
  /** Số khách đã học khoá này (từ hồ sơ khách hàng). */
  attendedCount?: number;
};

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

function CourseFormFields({ editing }: { editing?: CourseRow }) {
  const [state, formAction] = useActionState<CourseState, FormData>(saveCourseAction, {});

  return (
    // key theo thông báo thành công: thêm xong thì form được dựng lại trống (không còn giữ chữ vừa nhập → khỏi bấm thêm trùng).
    <form key={state.ok ?? "form"} action={formAction} className="card flex flex-col gap-3 p-4">
      {editing && <input type="hidden" name="id" value={editing.id} />}
      <div className="grid gap-3 lg:grid-cols-2">
        <div>
          <label className="label-caps mb-1.5 block">Tên khóa học</label>
          <input
            name="name"
            required
            defaultValue={editing?.name}
            className="input"
            placeholder="Quy trình sử dụng Filler HA"
          />
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Mô tả</label>
          <input name="description" defaultValue={editing?.description ?? ""} className="input" />
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Thời gian chuyển giao</label>
          <input name="schedule" defaultValue={editing?.schedule ?? ""} className="input" placeholder="1 buổi · 3 giờ" />
        </div>
        <div>
          <label className="label-caps mb-1.5 block">Hình thức</label>
          <input name="format" defaultValue={editing?.format ?? ""} className="input" placeholder="Trực tiếp / Trực tuyến / Tại cơ sở khách" />
        </div>
        <div className="lg:col-span-2">
          <label className="label-caps mb-1.5 block">Điều kiện</label>
          <input
            name="conditions"
            defaultValue={editing?.conditions ?? ""}
            className="input"
            placeholder="Miễn phí khi đơn từ 5 triệu hoặc NVKD hỗ trợ; nếu không thì thu phí"
          />
        </div>
        <label className="flex items-center gap-2 text-sm text-ink-600">
          <input type="checkbox" name="hasCertificate" defaultChecked={editing?.hasCertificate} className="h-4 w-4" />
          Có cấp chứng nhận
        </label>
      </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 khóa học"} pendingLabel="Đang lưu…" />
      </div>
    </form>
  );
}

export function CourseManager({ rows, canEdit = true }: { rows: CourseRow[]; canEdit?: boolean }) {
  const [editingId, setEditingId] = useState<string | null>(null);
  const editing = rows.find((r) => r.id === editingId);

  return (
    <div className="flex flex-col gap-4">
      {canEdit && <CourseFormFields key={editing?.id ?? "new"} editing={editing} />}

      <div className="card overflow-x-auto">
        <table className="data-table">
          <thead>
            <tr>
              <th>Tên khoá chuyển giao</th>
              <th>Thời gian</th>
              <th>Điều kiện</th>
              <th>Hình thức</th>
              <th>Chứng nhận</th>
              <th className="text-right">Khách đã học</th>
              {canEdit && <th />}
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row.id}>
                <td>
                  <div className="font-medium text-ink-700">{row.name}</div>
                  {row.description && <div className="text-xs text-ink-400">{row.description}</div>}
                </td>
                <td className="text-ink-500">{row.schedule ?? "—"}</td>
                <td className="max-w-xs text-ink-500">{row.conditions ?? "—"}</td>
                <td className="text-ink-500">{row.format ?? "—"}</td>
                <td className="text-ink-500">{row.hasCertificate ? "Có" : "Không"}</td>
                <td className="tnum text-right text-ink-500">{row.attendedCount ?? 0}</td>
                {canEdit && (
                <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={deactivateCourseAction} success="Đã ngừng khoá học." confirm="Ngừng khoá học này?">
                      <input type="hidden" name="id" value={row.id} />
                      <button type="submit" className="btn-ghost px-2 py-1 text-xs text-red-600">
                        Gỡ
                      </button>
                    </ActionForm>
                  </div>
                </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}