"use client";

import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { PageHeader } from "@/components/layout/PageHeader";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input } from "@/components/ui/Field";
import { ApiError, apiDelete, apiGet, apiPatch, apiPost } from "@/lib/api";

type GradeLevelRow = {
  id: number;
  name: string;
  order: number;
  education_stage_id: number;
  evaluation_mode?: "numeric" | "descriptive";
};

type EducationStageRow = {
  id: number;
  name: string;
  slug: string;
  order: number;
  grade_levels?: GradeLevelRow[];
};

export default function EducationStagesPage() {
  const [stages, setStages] = useState<EducationStageRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [newStageName, setNewStageName] = useState("");
  const [newGradeNames, setNewGradeNames] = useState<Record<number, string>>({});
  const [saving, setSaving] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const rows = await apiGet<EducationStageRow[]>("/education-stages");
      setStages(rows);
      setError(null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری");
    } finally {
      setLoading(false);
    }
  }, []);

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

  const addStage = async () => {
    if (!newStageName.trim()) return;
    setSaving(true);
    setMessage(null);
    try {
      await apiPost("/education-stages", { name: newStageName.trim() });
      setNewStageName("");
      setMessage("مقطع اضافه شد.");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  const addGrade = async (stageId: number) => {
    const name = (newGradeNames[stageId] ?? "").trim();
    if (!name) return;
    setSaving(true);
    setMessage(null);
    try {
      await apiPost("/grade-levels", { education_stage_id: stageId, name });
      setNewGradeNames((prev) => ({ ...prev, [stageId]: "" }));
      setMessage("پایه اضافه شد.");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    } finally {
      setSaving(false);
    }
  };

  const renameStage = async (stage: EducationStageRow, name: string) => {
    if (!name.trim() || name === stage.name) return;
    try {
      await apiPatch(`/education-stages/${stage.id}`, { name: name.trim() });
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const renameGrade = async (grade: GradeLevelRow, name: string) => {
    if (!name.trim() || name === grade.name) return;
    try {
      await apiPatch(`/grade-levels/${grade.id}`, { name: name.trim() });
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const setGradeEvaluation = async (grade: GradeLevelRow, evaluation_mode: "numeric" | "descriptive") => {
    if (grade.evaluation_mode === evaluation_mode) return;
    try {
      await apiPatch(`/grade-levels/${grade.id}`, { evaluation_mode });
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const removeStage = async (stageId: number) => {
    if (!confirm("این مقطع حذف شود؟")) return;
    try {
      await apiDelete(`/education-stages/${stageId}`);
      setMessage("مقطع حذف شد.");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  const removeGrade = async (gradeId: number) => {
    if (!confirm("این پایه حذف شود؟")) return;
    try {
      await apiDelete(`/grade-levels/${gradeId}`);
      setMessage("پایه حذف شد.");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا");
    }
  };

  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-2 rounded-2xl border border-[var(--border)] bg-white p-4">
        <div className="min-w-[200px] flex-1">
          <Field label="مقطع جدید">
            <Input value={newStageName} onChange={(e) => setNewStageName(e.target.value)} placeholder="مثلاً متوسطه دوم" />
          </Field>
        </div>
        <Button onClick={addStage} disabled={saving || !newStageName.trim()}>
          افزودن مقطع
        </Button>
      </div>

      {loading ? (
        <p className="text-sm text-[var(--muted)]">در حال بارگذاری…</p>
      ) : (
        <div className="space-y-4">
          {stages.map((stage) => (
            <div key={stage.id} className="rounded-2xl border border-[var(--border)] bg-white p-4">
              <div className="mb-3 flex flex-wrap items-center gap-2">
                <Input
                  defaultValue={stage.name}
                  className="max-w-xs font-medium"
                  onBlur={(e) => renameStage(stage, e.target.value)}
                />
                <span className="text-xs text-[var(--muted)]">{stage.slug}</span>
                <Button variant="ghost" onClick={() => removeStage(stage.id)}>
                  حذف مقطع
                </Button>
              </div>

              <ul className="mb-3 space-y-2">
                {(stage.grade_levels ?? []).map((grade) => (
                  <li key={grade.id} className="flex flex-wrap items-center gap-2">
                    <Input
                      defaultValue={grade.name}
                      className="max-w-[180px]"
                      onBlur={(e) => renameGrade(grade, e.target.value)}
                    />
                    <select
                      className="rounded-xl border border-[var(--border)] px-3 py-2 text-sm"
                      value={grade.evaluation_mode ?? "numeric"}
                      onChange={(e) =>
                        setGradeEvaluation(grade, e.target.value as "numeric" | "descriptive")
                      }
                    >
                      <option value="numeric">نمره‌ای</option>
                      <option value="descriptive">توصیفی</option>
                    </select>
                    <Button variant="ghost" onClick={() => removeGrade(grade.id)}>
                      حذف
                    </Button>
                  </li>
                ))}
              </ul>

              <div className="flex flex-wrap items-end gap-2">
                <div className="min-w-[160px]">
                  <Field label="پایه جدید">
                    <Input
                      value={newGradeNames[stage.id] ?? ""}
                      onChange={(e) =>
                        setNewGradeNames((prev) => ({ ...prev, [stage.id]: e.target.value }))
                      }
                      placeholder="مثلاً دهم"
                    />
                  </Field>
                </div>
                <Button variant="secondary" onClick={() => addGrade(stage.id)} disabled={saving}>
                  افزودن پایه
                </Button>
              </div>
            </div>
          ))}
        </div>
      )}
    </AppShell>
  );
}