"use client";

import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { RequireAcademicAdmin } from "@/components/auth/RequirePermission";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";
import {
  AcademicYear,
  ApiError,
  BranchItem,
  apiGet,
  apiPost,
  getAcademicYearId,
  getAcademicYears,
} from "@/lib/api";
import { canCreateOfficialReportCard } from "@/lib/permissions";
import {
  CHART_OPTIONS,
  ChartKey,
  ReportCardItem,
  ReportCardKind,
  reportCardsListHref,
} from "@/lib/report-cards";

export default function NewReportCardPage() {
  const router = useRouter();
  const [branches, setBranches] = useState<BranchItem[]>([]);
  const [unofficials, setUnofficials] = useState<ReportCardItem[]>([]);
  const [activeYear, setActiveYear] = useState<AcademicYear | null>(null);
  const [kind, setKind] = useState<ReportCardKind>("unofficial");
  const [name, setName] = useState("");
  const [branchIds, setBranchIds] = useState<number[]>([]);
  const [sourceIds, setSourceIds] = useState<number[]>([]);
  const [charts, setCharts] = useState<ChartKey[]>(
    CHART_OPTIONS.map((c) => c.key),
  );
  const [error, setError] = useState<string | null>(null);
  const [saving, setSaving] = useState(false);

  const yearId = activeYear?.id ?? null;
  const yearTitle = activeYear?.title ?? "";
  const canOfficial = canCreateOfficialReportCard();
  const kinds: ReportCardKind[] = canOfficial
    ? ["official", "unofficial", "composite"]
    : ["unofficial", "composite"];

  const officialDefaultName = useMemo(
    () => (yearTitle ? `کارنامه رسمی سال تحصیلی ${yearTitle}` : "کارنامه رسمی سال تحصیلی"),
    [yearTitle],
  );

  useEffect(() => {
    (async () => {
      try {
        const contextId = getAcademicYearId();
        let years = getAcademicYears();
        if (!years.length) {
          years = await apiGet<AcademicYear[]>("/academic-years");
        }
        const year =
          years.find((y) => y.id === contextId) ??
          years.find((y) => y.is_current) ??
          years[0] ??
          null;
        setActiveYear(year);

        if (!year) {
          setError("سال تحصیلی فعالی انتخاب نشده است.");
          return;
        }

        const [b, list] = await Promise.all([
          apiGet<BranchItem[]>("/branches"),
          apiGet<ReportCardItem[]>(
            `/report-cards?academic_year_id=${year.id}&kind=unofficial`,
          ),
        ]);
        setBranches(b);
        setUnofficials(list);
      } catch (err) {
        setError(err instanceof ApiError ? err.message : "خطا در بارگذاری");
      }
    })();
  }, []);

  useEffect(() => {
    if (kind === "official") {
      setCharts(["bar_subjects", "line_progress"]);
      setName(officialDefaultName);
    } else if (kind === "composite") {
      setCharts(CHART_OPTIONS.map((c) => c.key));
      setName((prev) => (prev.startsWith("کارنامه رسمی") || !prev ? "کارنامه ترکیبی پیشرفت" : prev));
    } else {
      setCharts(CHART_OPTIONS.map((c) => c.key));
      setName((prev) => (prev.startsWith("کارنامه رسمی") || prev === "کارنامه ترکیبی پیشرفت" ? "" : prev));
    }
  }, [kind, officialDefaultName]);

  useEffect(() => {
    if (kind === "official" && !canOfficial) {
      setKind("unofficial");
    }
  }, [kind, canOfficial]);

  const toggleBranch = (id: number) => {
    setBranchIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
  };

  const toggleSource = (id: number) => {
    setSourceIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
  };

  const toggleChart = (key: ChartKey) => {
    setCharts((prev) => (prev.includes(key) ? prev.filter((x) => x !== key) : [...prev, key]));
  };

  const submit = async () => {
    if (!yearId) {
      setError("سال تحصیلی فعالی انتخاب نشده است.");
      return;
    }
    if (!name.trim()) return;
    if (kind === "official" && !canCreateOfficialReportCard()) {
      setError("ایجاد و مدیریت کارنامه رسمی فقط برای مدیر کل مجاز است.");
      return;
    }
    setSaving(true);
    setError(null);
    try {
      const card = await apiPost<ReportCardItem>("/report-cards", {
        academic_year_id: yearId,
        kind,
        name: name.trim(),
        enabled_charts: charts,
        branch_ids: kind === "official" ? undefined : branchIds,
        source_report_card_ids: kind === "composite" ? sourceIds : undefined,
      });
      router.push(`/academic/report-cards/${card.id}`);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ثبت");
    } finally {
      setSaving(false);
    }
  };

  return (
    <RequireAcademicAdmin>
    <AppShell title="ایجاد کارنامه" subtitle="رسمی هلدینگ‌سراسری یا غیررسمی/ترکیبی">
      <div className="space-y-4 rounded-2xl border border-[var(--border)] bg-white p-4">
        {yearTitle ? (
          <p className="rounded-xl border border-[var(--border)] bg-slate-50 px-3 py-2 text-sm text-[var(--muted)]">
            سال فعال: <span className="font-semibold text-foreground">{yearTitle}</span>
          </p>
        ) : null}

        <Field label="نوع کارنامه">
          <div className="flex flex-wrap gap-2">
            {kinds.map((k) => (
              <button
                key={k}
                type="button"
                onClick={() => setKind(k)}
                className={`rounded-xl px-3 py-1.5 text-sm ${
                  kind === k ? "bg-primary text-white" : "border border-[var(--border)]"
                }`}
              >
                {k === "official" ? "رسمی" : k === "unofficial" ? "غیررسمی" : "ترکیبی"}
              </button>
            ))}
          </div>
        </Field>

        <Field label="عنوان">
          <Input value={name} onChange={(e) => setName(e.target.value)} />
        </Field>

        {kind === "official" ? (
          <Alert tone="info">
            کارنامه رسمی برای همه پایه‌ها و کل هلدینگ ثبت می‌شود و تا انتشار برای دانش‌آموز قابل مشاهده نیست. پنج مرحله (مستمر و پایانی نوبت اول و دوم و شهریور) ساخته می‌شوند.
          </Alert>
        ) : (
          <Field label="مدارس">
            <div className="grid max-h-48 gap-2 overflow-auto rounded-xl border border-[var(--border)] p-3 sm:grid-cols-2">
              {branches.map((b) => (
                <label key={b.id} className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={branchIds.includes(b.id)}
                    onChange={() => toggleBranch(b.id)}
                  />
                  {b.name}
                </label>
              ))}
            </div>
          </Field>
        )}

        {kind === "composite" ? (
          <Field label="کارنامه‌های غیررسمی برای ترکیب">
            <div className="grid max-h-48 gap-2 overflow-auto rounded-xl border border-[var(--border)] p-3">
              {unofficials.map((u) => (
                <label key={u.id} className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={sourceIds.includes(u.id)}
                    onChange={() => toggleSource(u.id)}
                  />
                  {u.name}
                </label>
              ))}
              {!unofficials.length ? (
                <p className="text-xs text-[var(--muted)]">ابتدا کارنامه غیررسمی بسازید.</p>
              ) : null}
            </div>
          </Field>
        ) : null}

        <Field label="نمودارهای تحلیلی">
          <div className="grid gap-2 sm:grid-cols-2">
            {CHART_OPTIONS.map((c) => (
              <label key={c.key} className="flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  checked={charts.includes(c.key)}
                  onChange={() => toggleChart(c.key)}
                />
                {c.label}
              </label>
            ))}
          </div>
        </Field>

        <div className="flex gap-2">
          <Button onClick={submit} disabled={saving || !name.trim() || !yearId} className="min-w-[8rem] bg-[#0d9488] hover:bg-[#0d9488] hover:brightness-100">
            {saving ? "در حال ثبت…" : "ثبت کارنامه"}
          </Button>
          <Button variant="secondary" onClick={() => router.push(reportCardsListHref())}>
            بازگشت
          </Button>
        </div>
        {error ? <Alert tone="error">{error}</Alert> : null}
      </div>
    </AppShell>
    </RequireAcademicAdmin>
  );
}