"use client";

import { useCallback, useEffect, useState } from "react";
import { CurriculumNav } from "@/components/academic/CurriculumNav";
import { SubjectImageField } from "@/components/academic/SubjectImageField";
import { AppShell } from "@/components/app/AppShell";
import { RequireAcademicAdmin } from "@/components/auth/RequirePermission";
import { ListExportActions } from "@/components/export/ListExportActions";
import { DataTable, DataTableEmpty } from "@/components/layout/DataTable";
import { Pagination } from "@/components/layout/Pagination";
import { nextHeaderSort, type SortDir } from "@/components/layout/TableSort";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Select } from "@/components/ui/Field";
import { SubjectAvatar } from "@/components/ui/SubjectAvatar";
import { ApiError, GradeLevel, Paginated, apiGet, apiPatch, apiPost } from "@/lib/api";
import { canManageOrgSubjects } from "@/lib/permissions";

interface SubjectRow {
  id: number;
  name: string;
  code?: string | null;
  image_url?: string | null;
  coefficient: number;
  grade_level_id?: number | null;
  grade_level?: { id: number; name: string } | null;
}

const emptyForm = {
  name: "",
  code: "",
  coefficient: "1",
  grade_level_id: "",
};

const PAGE_SIZE = 20;

export default function ExtraSubjectsPage() {
  const canEdit = canManageOrgSubjects();
  const [subjects, setSubjects] = useState<SubjectRow[]>([]);
  const [grades, setGrades] = useState<GradeLevel[]>([]);
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [sortBy, setSortBy] = useState("grade");
  const [sortDir, setSortDir] = useState<SortDir>("asc");
  const [form, setForm] = useState(emptyForm);
  const [editId, setEditId] = useState<number | null>(null);
  const [editImageUrl, setEditImageUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  const loadGrades = useCallback(async () => {
    try {
      setGrades(await apiGet<GradeLevel[]>("/grade-levels"));
    } catch {
      setGrades([]);
    }
  }, []);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({
        type: "extra",
        active_only: "1",
        page: String(page),
        per_page: String(PAGE_SIZE),
        sort_by: sortBy,
        sort_dir: sortDir,
      });
      const result = await apiGet<Paginated<SubjectRow>>(`/subjects?${params.toString()}`);
      setSubjects(result.data);
      setLastPage(result.last_page);
      if (result.data.length === 0 && page > 1 && result.last_page > 0) {
        setPage(result.last_page);
      }
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setLoading(false);
    }
  }, [page, sortBy, sortDir]);

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

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

  const resetForm = () => {
    setForm(emptyForm);
    setEditId(null);
    setEditImageUrl(null);
  };

  const save = async () => {
    if (!canEdit || !form.name.trim()) return;
    setSaving(true);
    setSuccess(null);
    try {
      const body = {
        name: form.name.trim(),
        code: form.code || null,
        type: "extra" as const,
        coefficient: Number(form.coefficient) || 1,
        grade_level_id: form.grade_level_id ? Number(form.grade_level_id) : null,
      };
      if (editId) {
        await apiPatch(`/subjects/${editId}`, body);
        setSuccess("درس فوق‌العاده به‌روزرسانی شد.");
      } else {
        await apiPost("/subjects", body);
        setSuccess("درس فوق‌العاده اضافه شد.");
      }
      resetForm();
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  const applyHeaderSort = (key: string) => {
    const next = nextHeaderSort(sortBy, sortDir, key);
    setSortBy(next.sortBy);
    setSortDir(next.sortDir);
    setPage(1);
  };

  return (
    <RequireAcademicAdmin>
      <AppShell
        title="دروس فوق‌العاده"
        subtitle="دروسی که در برنامه پیش‌فرض پایه نیستند؛ فقط در کارنامه غیررسمی قابل افزودن‌اند"
      >
        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
          <CurriculumNav current="extras" className="" />
          <ListExportActions
            exportPath="/subjects/export"
            filters={{ type: "extra", sort_by: sortBy, sort_dir: sortDir }}
            contextKeys={["type", "sort_by", "sort_dir"]}
            filenameBase="subjects-extra-export"
            onError={setError}
          />
        </div>

        <div className="mb-4">
          <Alert tone="info">
            این دروس به‌صورت پیش‌فرض در هیچ پایه‌ای نیستند. در کارنامه غیررسمی می‌توانید آن‌ها را
            به‌صورت اختیاری اضافه کنید.
          </Alert>
        </div>

        {error ? <div className="mb-4"><Alert tone="error">{error}</Alert></div> : null}
        {success ? <div className="mb-4"><Alert tone="success">{success}</Alert></div> : null}

        {!canEdit ? (
          <div className="mb-4">
            <Alert tone="info">
              ویرایش دروس فوق‌العاده سازمانی فقط با دسترسی اختصاصی برنامه درسی هلدینگ ممکن است.
            </Alert>
          </div>
        ) : null}

        {canEdit ? (
        <div className="mb-4 space-y-3 rounded-2xl border border-[var(--border)] bg-white p-4">
          <h2 className="font-bold text-primary">{editId ? "ویرایش" : "افزودن درس فوق‌العاده"}</h2>
          <div className="grid gap-3 md:grid-cols-2">
            <Field label="نام درس">
              <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
            </Field>
            <Field label="کد">
              <Input value={form.code} onChange={(e) => setForm({ ...form, code: e.target.value })} />
            </Field>
            <Field label="ضریب">
              <Input
                type="number"
                min="0"
                step="0.5"
                value={form.coefficient}
                onChange={(e) => setForm({ ...form, coefficient: e.target.value })}
              />
            </Field>
            <Field label="پایه (اختیاری — برای فیلتر)" hint="خالی = همه پایه‌ها">
              <Select
                value={form.grade_level_id}
                onChange={(e) => setForm({ ...form, grade_level_id: e.target.value })}
              >
                <option value="">همه پایه‌ها</option>
                {grades.map((g) => (
                  <option key={g.id} value={g.id}>{g.name}</option>
                ))}
              </Select>
            </Field>
          </div>
          {editId ? (
            <SubjectImageField
              subjectId={editId}
              subjectName={form.name || "درس"}
              imageUrl={editImageUrl}
              onUpdated={(url) => {
                setEditImageUrl(url);
                void load();
              }}
            />
          ) : null}
          <div className="flex gap-2">
            <Button onClick={save} disabled={saving}>{editId ? "ذخیره" : "افزودن"}</Button>
            {editId ? <Button variant="secondary" onClick={resetForm}>انصراف</Button> : null}
          </div>
        </div>
        ) : null}

        <DataTable
          columns={[
            { key: "name", label: "نام درس", sortable: true },
            { key: "code", label: "کد", sortable: true },
            { key: "coefficient", label: "ضریب", sortable: true },
            { key: "grade", label: "پایه", sortable: true },
            { key: "ops", label: "عملیات", className: "w-16" },
          ]}
          loading={loading}
          sortBy={sortBy}
          sortDir={sortDir}
          onSort={applyHeaderSort}
        >
          {!loading && subjects.length === 0 ? (
            <DataTableEmpty colSpan={5} message="هنوز درس فوق‌العاده‌ای تعریف نشده است." />
          ) : (
            subjects.map((s) => (
              <tr key={s.id} className="hover:bg-slate-50/80">
                <td className="px-3 py-2.5">
                  <div className="flex min-w-0 items-center gap-2">
                    <SubjectAvatar name={s.name} imageUrl={s.image_url} size="sm" />
                    <span className="font-semibold">{s.name}</span>
                    <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] text-amber-800">
                      فوق‌العاده
                    </span>
                  </div>
                </td>
                <td className="px-3 py-2.5">{s.code ?? "—"}</td>
                <td className="px-3 py-2.5">{s.coefficient.toLocaleString("fa-IR")}</td>
                <td className="px-3 py-2.5">{s.grade_level?.name ?? "همه پایه‌ها"}</td>
                <td className="px-3 py-2.5">
                  {canEdit ? (
                    <Button
                      variant="secondary"
                      className="!px-3 !py-1 text-xs"
                      onClick={() => {
                        setEditId(s.id);
                        setEditImageUrl(s.image_url ?? null);
                        setForm({
                          name: s.name,
                          code: s.code ?? "",
                          coefficient: String(s.coefficient),
                          grade_level_id: s.grade_level_id ? String(s.grade_level_id) : "",
                        });
                      }}
                    >
                      ویرایش
                    </Button>
                  ) : null}
                </td>
              </tr>
            ))
          )}
        </DataTable>
        <Pagination page={page} lastPage={lastPage} onPageChange={setPage} />
      </AppShell>
    </RequireAcademicAdmin>
  );
}