"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { AppShell } from "@/components/app/AppShell";
import { PageHeader } from "@/components/layout/PageHeader";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Select, Textarea } from "@/components/ui/Field";
import { PersianDatePicker } from "@/components/ui/PersianDatePicker";
import { ApiError, DeskApplication, Paginated, apiGet, apiPost } from "@/lib/api";
import { STATUS_LABELS } from "@/lib/labels";

type InterviewRow = DeskApplication & {
  applicant_name?: string | null;
  applicant_national_code?: string | null;
  grade_level?: { id: number; name: string } | null;
  evaluations?: Array<{ step_type: string; status: string; notes?: string | null }>;
};

function applicantLabel(item: InterviewRow): string {
  const fromForm = `${String(item.form_data?.first_name ?? "")} ${String(item.form_data?.last_name ?? "")}`.trim();
  return item.applicant_name || item.student_name || fromForm || "—";
}

export default function PreRegistrationInterviewPage() {
  const [items, setItems] = useState<InterviewRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [statusFilter, setStatusFilter] = useState("");
  const [schedulingId, setSchedulingId] = useState<number | null>(null);
  const [scheduledAt, setScheduledAt] = useState("");
  const [stepType, setStepType] = useState<"interview" | "entrance_exam">("interview");
  const [notes, setNotes] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const qs = statusFilter ? `?status=${encodeURIComponent(statusFilter)}` : "";
      const data = await apiGet<Paginated<InterviewRow>>(`/admissions/interview-queue${qs}`);
      setItems(data.data ?? []);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری");
    } finally {
      setLoading(false);
    }
  }, [statusFilter]);

  useEffect(() => {
    load();
  }, [load]);

  const schedule = async (applicationId: number) => {
    if (!scheduledAt) {
      setError("زمان مصاحبه را وارد کنید.");
      return;
    }
    setSubmitting(true);
    setMessage(null);
    try {
      await apiPost(`/pre-registrations/${applicationId}/schedule-interview`, {
        scheduled_at: scheduledAt,
        step_type: stepType,
        notes: notes || undefined,
      });
      setSchedulingId(null);
      setScheduledAt("");
      setNotes("");
      setMessage("زمان‌بندی ثبت شد.");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <AppShell title="زمان‌بندی مصاحبه" subtitle="پیش‌ثبت‌نام — مصاحبه و آزمون ورودی">
      <PageHeader
        title="زمان‌بندی مصاحبه و آزمون"
        subtitle="متقاضیان در انتظار ارزیابی حضوری یا آزمون ورودی"
      />

      {error ? <Alert tone="error">{error}</Alert> : null}
      {message ? <Alert tone="success">{message}</Alert> : null}

      <div className="mb-4 flex flex-wrap items-end gap-3">
        <Field label="فیلتر وضعیت">
          <Select value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
            <option value="">همه</option>
            <option value="under_review">در حال بررسی</option>
            <option value="interview_scheduled">مصاحبه تعیین‌شده</option>
            <option value="entrance_exam_scheduled">آزمون تعیین‌شده</option>
            <option value="documents_requested">مدارک درخواستی</option>
          </Select>
        </Field>
        <Button variant="secondary" onClick={() => void load()}>
          بروزرسانی
        </Button>
      </div>

      <DataTable
        loading={loading}
        columns={[
          { key: "applicant", label: "متقاضی" },
          { key: "grade", label: "پایه" },
          { key: "branch", label: "مدرسه" },
          { key: "status", label: "وضعیت" },
          { key: "ops", label: "عملیات" },
        ]}
      >
        {items.length === 0 ? (
          <DataTableEmpty colSpan={5} message="موردی در صف مصاحبه نیست." />
        ) : (
          items.map((item) => (
            <tr key={item.id} className="hover:bg-slate-50">
              <td className="px-3 py-3 text-sm">
                <div className="font-semibold">{applicantLabel(item)}</div>
                <div className="text-xs text-[var(--muted)]">
                  {item.applicant_national_code ?? item.applicant_national_code}
                </div>
              </td>
              <td className="px-3 py-3 text-sm">
                {item.grade_level?.name ?? item.grade_level?.name ?? "—"}
              </td>
              <td className="px-3 py-3 text-sm">{item.branch?.name ?? "—"}</td>
              <td className="px-3 py-3 text-sm">{STATUS_LABELS[item.status] ?? item.status}</td>
              <td className="px-3 py-3 text-sm">
                <div className="flex flex-wrap gap-2">
                  <Link
                    href={`/pre-registration/admissions/${item.id}`}
                    className="text-xs font-semibold text-primary underline"
                  >
                    جزئیات
                  </Link>
                  <Button
                    variant="secondary"
                    className="!px-3 !py-1.5 text-xs"
                    onClick={() => {
                      setSchedulingId(item.id);
                      setStepType("interview");
                    }}
                  >
                    زمان‌بندی
                  </Button>
                </div>
              </td>
            </tr>
          ))
        )}
      </DataTable>

      {schedulingId ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
          <div className="w-full max-w-md rounded-2xl bg-white p-4 shadow-lg">
            <h3 className="mb-3 text-sm font-bold">زمان‌بندی ارزیابی</h3>
            <div className="space-y-3">
              <Field label="نوع">
                <Select
                  value={stepType}
                  onChange={(e) => setStepType(e.target.value as "interview" | "entrance_exam")}
                >
                  <option value="interview">مصاحبه</option>
                  <option value="entrance_exam">آزمون ورودی</option>
                </Select>
              </Field>
              <Field label="زمان">
                <PersianDatePicker withTime value={scheduledAt} onChange={setScheduledAt} />
              </Field>
              <Field label="یادداشت">
                <Textarea rows={2} value={notes} onChange={(e) => setNotes(e.target.value)} />
              </Field>
            </div>
            <div className="mt-4 flex justify-end gap-2">
              <Button variant="secondary" onClick={() => setSchedulingId(null)}>
                انصراف
              </Button>
              <Button loading={submitting} onClick={() => void schedule(schedulingId)}>
                ثبت
              </Button>
            </div>
          </div>
        </div>
      ) : null}
    </AppShell>
  );
}