"use client";

import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { RequireAcademicAdmin } from "@/components/auth/RequirePermission";
import { ListExportActions } from "@/components/export/ListExportActions";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Select } from "@/components/ui/Field";
import { CardListSkeleton, PageContentSkeleton } from "@/components/ui/Skeleton";
import {
  AcademicYear,
  ApiError,
  apiGet,
  apiPost,
  getAcademicYearId,
} from "@/lib/api";

interface PreviewRow {
  enrollment_id: number;
  student?: { first_name?: string; last_name?: string };
  outcome: string;
  gpa?: number;
  reason?: string;
}

const OUTCOME_LABELS: Record<string, string> = {
  promoted: "ارتقا",
  conditional_pass: "قبول مشروط",
  summer_remedial: "شهریور",
  grade_retained: "تکرار پایه",
  unknown: "نامشخص",
};

export default function PromotionPage() {
  const [years, setYears] = useState<AcademicYear[]>([]);
  const [yearId, setYearId] = useState<number | null>(null);
  const [preview, setPreview] = useState<PreviewRow[]>([]);
  const [summary, setSummary] = useState<Record<string, number>>({});
  const [batchId, setBatchId] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [booting, setBooting] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  useEffect(() => {
    apiGet<AcademicYear[]>("/academic-years")
      .then((y) => {
        setYears(y);
        setYearId(getAcademicYearId() ?? y.find((i) => i.is_current)?.id ?? y[0]?.id ?? null);
      })
      .catch(() => setError("خطا در بارگذاری سال‌ها"))
      .finally(() => setBooting(false));
  }, []);

  const runPreview = useCallback(async () => {
    if (!yearId) return;
    setLoading(true);
    setError(null);
    try {
      const result = await apiPost<{ preview: PreviewRow[]; summary: Record<string, number> }>(
        "/promotions/preview",
        { academic_year_id: yearId },
      );
      setPreview(result.preview);
      setSummary(result.summary);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [yearId]);

  const evaluate = async (phase: "khordad" | "shahrivar") => {
    if (!yearId) return;
    setLoading(true);
    setError(null);
    setMessage(null);
    try {
      const batch = await apiPost<{ id: number; summary?: Record<string, number> }>(
        `/promotions/evaluate-${phase}`,
        { academic_year_id: yearId },
      );
      setBatchId(batch.id);
      setSummary(batch.summary ?? {});
      setMessage(`ارزیابی ${phase === "khordad" ? "خرداد" : "شهریور"} ثبت شد (batch #${batch.id}).`);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  };

  const execute = async () => {
    if (!batchId) return;
    setLoading(true);
    try {
      const result = await apiPost<{ promoted_count: number; retained_count: number }>(
        "/promotions/execute",
        { promotion_batch_id: batchId },
      );
      setMessage(`اجرا شد: ارتقا ${result.promoted_count} · تکرار ${result.retained_count}`);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  };

  if (booting) {
    return (
      <RequireAcademicAdmin>
        <AppShell title="ارتقای پایه" subtitle="پیش‌نمایش → ارزیابی → اجرا">
          <PageContentSkeleton rows={4} />
        </AppShell>
      </RequireAcademicAdmin>
    );
  }

  return (
    <RequireAcademicAdmin>
    <AppShell title="ارتقای پایه" subtitle="پیش‌نمایش → ارزیابی → اجرا">
      {error ? <Alert tone="error">{error}</Alert> : null}
      {message ? <Alert tone="success">{message}</Alert> : null}
      <div className="mb-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
        <Field label="سال تحصیلی">
          <Select value={yearId ?? ""} onChange={(e) => setYearId(Number(e.target.value))}>
            {years.map((y) => (
              <option key={y.id} value={y.id}>{y.title}</option>
            ))}
          </Select>
        </Field>
        <div className="flex flex-wrap gap-2">
          <Button onClick={runPreview} disabled={loading || !yearId}>پیش‌نمایش</Button>
          <Button variant="secondary" onClick={() => evaluate("khordad")} disabled={loading || !yearId}>ارزیابی خرداد</Button>
          <Button variant="secondary" onClick={() => evaluate("shahrivar")} disabled={loading || !yearId}>ارزیابی شهریور</Button>
          <Button onClick={execute} disabled={loading || !batchId}>اجرای نهایی</Button>
          <ListExportActions
            exportPath="/promotions/preview/export"
            filters={{ academic_year_id: yearId ?? undefined }}
            filenameBase="promotions-preview-export"
            onError={setError}
          />
        </div>
      </div>

      {Object.keys(summary).length ? (
        <div className="mb-4 flex flex-wrap gap-2">
          {Object.entries(summary).map(([key, count]) => (
            <span key={key} className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium">
              {OUTCOME_LABELS[key] ?? key}: {count}
            </span>
          ))}
        </div>
      ) : null}

      {loading && !preview.length ? (
        <CardListSkeleton rows={5} />
      ) : (
        <div className="space-y-2">
          {preview.map((row) => (
            <div key={row.enrollment_id} className="rounded-2xl border border-[var(--border)] bg-white p-4">
              <div className="font-semibold">
                {row.student ? `${row.student.first_name ?? ""} ${row.student.last_name ?? ""}`.trim() : `ثبت‌نام #${row.enrollment_id}`}
              </div>
              <div className="text-xs text-[var(--muted)]">
                {OUTCOME_LABELS[row.outcome] ?? row.outcome}
                {row.gpa != null ? ` · معدل ${row.gpa}` : ""}
                {row.reason ? ` · ${row.reason}` : ""}
              </div>
            </div>
          ))}
        </div>
      )}
    </AppShell>
    </RequireAcademicAdmin>
  );
}