"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, Input } from "@/components/ui/Field";
import { CardListSkeleton } from "@/components/ui/Skeleton";
import { ApiError, apiGet, apiPost } from "@/lib/api";

interface AcademyTerm {
  id: number;
  name: string;
  order: number;
  capacity?: number | null;
}

interface AcademyCourse {
  id: number;
  name: string;
  terms?: AcademyTerm[];
}

interface AcademyProgram {
  id: number;
  name: string;
  courses?: AcademyCourse[];
}

export default function AcademyPage() {
  const [programs, setPrograms] = useState<AcademyProgram[]>([]);
  const [programName, setProgramName] = useState("");
  const [courseName, setCourseName] = useState("");
  const [termName, setTermName] = useState("");
  const [selectedProgram, setSelectedProgram] = useState<number | null>(null);
  const [selectedCourse, setSelectedCourse] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      setPrograms(await apiGet<AcademyProgram[]>("/academy/programs"));
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, []);

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

  const createProgram = async () => {
    if (!programName.trim()) return;
    try {
      await apiPost("/academy/programs", { name: programName.trim() });
      setProgramName("");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const createCourse = async () => {
    if (!selectedProgram || !courseName.trim()) return;
    try {
      await apiPost(`/academy/programs/${selectedProgram}/courses`, { name: courseName.trim() });
      setCourseName("");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const createTerm = async () => {
    if (!selectedCourse || !termName.trim()) return;
    try {
      await apiPost(`/academy/courses/${selectedCourse}/terms`, { name: termName.trim(), order: 1 });
      setTermName("");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  return (
    <RequireAcademicAdmin>
    <AppShell title="آکادمی" subtitle="برنامه، دوره، ترم">
      {error ? <Alert tone="error">{error}</Alert> : null}

      <div className="mb-4 flex flex-wrap items-center justify-end gap-2">
        <ListExportActions
          exportPath="/academy/programs/export"
          filters={{}}
          filenameBase="academy-programs-export"
          onError={setError}
        />
      </div>

      <div className="mb-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
        <Field label="برنامه جدید"><Input value={programName} onChange={(e) => setProgramName(e.target.value)} placeholder="مثلاً زبان" /></Field>
        <Button onClick={createProgram}>افزودن برنامه</Button>
      </div>

      <div className="mb-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
        <Field label="برنامه">
          <select value={selectedProgram ?? ""} onChange={(e) => setSelectedProgram(Number(e.target.value))} className="w-full rounded-xl border px-3 py-2 text-sm">
            <option value="">انتخاب…</option>
            {programs.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
        </Field>
        <Field label="دوره جدید"><Input value={courseName} onChange={(e) => setCourseName(e.target.value)} /></Field>
        <Button onClick={createCourse} disabled={!selectedProgram}>افزودن دوره</Button>
      </div>

      <div className="mb-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
        <Field label="دوره">
          <select value={selectedCourse ?? ""} onChange={(e) => setSelectedCourse(Number(e.target.value))} className="w-full rounded-xl border px-3 py-2 text-sm">
            <option value="">انتخاب…</option>
            {programs.flatMap((p) => p.courses ?? []).map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </Field>
        <Field label="ترم جدید"><Input value={termName} onChange={(e) => setTermName(e.target.value)} /></Field>
        <Button onClick={createTerm} disabled={!selectedCourse}>افزودن ترم</Button>
      </div>

      {loading ? (
        <CardListSkeleton rows={4} />
      ) : (
        <div className="space-y-3">
          {programs.map((program) => (
            <div key={program.id} className="rounded-2xl border border-[var(--border)] bg-white p-4">
              <div className="font-bold">{program.name}</div>
              {(program.courses ?? []).map((course) => (
                <div key={course.id} className="mt-2 mr-3 border-r-2 border-primary/30 pr-3">
                  <div className="text-sm font-semibold">{course.name}</div>
                  <div className="mt-1 space-y-1">
                    {(course.terms ?? []).map((term) => (
                      <div key={term.id} className="text-xs text-[var(--muted)]">· {term.name}</div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      )}
    </AppShell>
    </RequireAcademicAdmin>
  );
}