'use client';

import { useCallback, useEffect, useState } from 'react';
import { apiFetchJson } from '@/lib/auth';
import { useToast } from '@/components/school/toast-context';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { ConfirmDialog } from '@/components/school/confirm-dialog';
import {
  ChevronDown,
  ChevronRight,
  Plus,
  Pencil,
  Trash2,
  CheckCircle2,
  GraduationCap,
  CalendarRange,
  Layers,
  Sparkles,
  Loader2,
} from 'lucide-react';

/* ── Tipler ──────────────────────────────────────────────────── */
type AcademicTerm = {
  id: string;
  name: string;
  startDate: string;
  endDate: string;
  isActive: boolean;
};

type AcademicYear = {
  id: string;
  name: string;
  startDate: string;
  endDate: string;
  isActive: boolean;
  terms: AcademicTerm[];
};

/* ── Yardımcı ────────────────────────────────────────────────── */
function fmtDate(d: string) {
  return new Date(d).toLocaleDateString('tr-TR', {
    day: '2-digit',
    month: 'short',
    year: 'numeric',
  });
}

function fmtDateShort(d: string) {
  return new Date(d).toLocaleDateString('tr-TR', {
    day: '2-digit',
    month: 'short',
  });
}

/* ── Ana Sayfa ───────────────────────────────────────────────── */
export default function AcademicPage() {
  const { toast } = useToast();

  const [years, setYears] = useState<AcademicYear[]>([]);
  const [loading, setLoading] = useState(true);
  const [expandedYearId, setExpandedYearId] = useState<string | null>(null);

  /* Eğitim yılı dialog */
  const [yearDialog, setYearDialog] = useState(false);
  const [editingYear, setEditingYear] = useState<AcademicYear | null>(null);
  const [yearForm, setYearForm] = useState({ name: '', startDate: '', endDate: '' });
  const [yearSaving, setYearSaving] = useState(false);

  /* Dönem dialog */
  const [termDialog, setTermDialog] = useState(false);
  const [termYearId, setTermYearId] = useState('');
  const [termYearName, setTermYearName] = useState('');
  const [editingTerm, setEditingTerm] = useState<AcademicTerm | null>(null);
  const [termForm, setTermForm] = useState({ name: '', startDate: '', endDate: '' });
  const [termSaving, setTermSaving] = useState(false);

  /* Silme onayı */
  const [confirmDelete, setConfirmDelete] = useState<{
    type: 'year' | 'term';
    id: string;
    name: string;
  } | null>(null);

  /* ── Yükle ───────────────────────────────────────────────── */
  const loadYears = useCallback(async () => {
    setLoading(true);
    const res = await apiFetchJson<AcademicYear[]>('/v1/admin/academic-years');
    if (!res.error && res.data) {
      setYears(res.data);
      setExpandedYearId((prev) => {
        if (prev) return prev;
        const active = res.data!.find((y) => y.isActive);
        return active?.id ?? res.data![0]?.id ?? null;
      });
    } else {
      toast({ title: res.error ?? 'Yüklenemedi', variant: 'destructive' });
    }
    setLoading(false);
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

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

  /* ── Eğitim Yılı ─────────────────────────────────────────── */
  const openYearCreate = () => {
    setEditingYear(null);
    setYearForm({ name: '', startDate: '', endDate: '' });
    setYearDialog(true);
  };

  const openYearEdit = (y: AcademicYear, e: React.MouseEvent) => {
    e.stopPropagation();
    setEditingYear(y);
    setYearForm({ name: y.name, startDate: y.startDate.slice(0, 10), endDate: y.endDate.slice(0, 10) });
    setYearDialog(true);
  };

  const saveYear = async () => {
    if (!yearForm.name.trim() || !yearForm.startDate || !yearForm.endDate) {
      toast({ title: 'Tüm alanları doldurun', variant: 'destructive' });
      return;
    }
    setYearSaving(true);
    const isEdit = !!editingYear;
    const res = await apiFetchJson<AcademicYear>(
      isEdit ? `/v1/admin/academic-years/${editingYear!.id}` : '/v1/admin/academic-years',
      { method: isEdit ? 'PATCH' : 'POST', body: JSON.stringify(yearForm) },
    );
    setYearSaving(false);
    if (!res.error) {
      toast({ title: isEdit ? 'Eğitim yılı güncellendi' : 'Eğitim yılı oluşturuldu' });
      setYearDialog(false);
      await loadYears();
    } else {
      toast({ title: res.error, variant: 'destructive' });
    }
  };

  const activateYear = async (yearId: string, e: React.MouseEvent) => {
    e.stopPropagation();
    const res = await apiFetchJson(`/v1/admin/academic-years/${yearId}/activate`, { method: 'POST' });
    if (!res.error) {
      toast({ title: 'Yıl aktifleştirildi' });
      await loadYears();
    } else {
      toast({ title: res.error, variant: 'destructive' });
    }
  };

  const deleteYear = async (yearId: string) => {
    const res = await apiFetchJson(`/v1/admin/academic-years/${yearId}`, { method: 'DELETE' });
    if (!res.error) {
      toast({ title: 'Eğitim yılı silindi' });
      setConfirmDelete(null);
      await loadYears();
    } else {
      toast({ title: res.error, variant: 'destructive' });
    }
  };

  /* ── Dönem ───────────────────────────────────────────────── */
  const openTermCreate = (yearId: string, yearName: string, e: React.MouseEvent) => {
    e.stopPropagation();
    setTermYearId(yearId);
    setTermYearName(yearName);
    setEditingTerm(null);
    setTermForm({ name: '', startDate: '', endDate: '' });
    setTermDialog(true);
  };

  const openTermEdit = (yearId: string, yearName: string, t: AcademicTerm, e: React.MouseEvent) => {
    e.stopPropagation();
    setTermYearId(yearId);
    setTermYearName(yearName);
    setEditingTerm(t);
    setTermForm({ name: t.name, startDate: t.startDate.slice(0, 10), endDate: t.endDate.slice(0, 10) });
    setTermDialog(true);
  };

  const saveTerm = async () => {
    if (!termForm.name.trim() || !termForm.startDate || !termForm.endDate) {
      toast({ title: 'Tüm alanları doldurun', variant: 'destructive' });
      return;
    }
    setTermSaving(true);
    const isEdit = !!editingTerm;
    const res = await apiFetchJson<AcademicTerm>(
      isEdit ? `/v1/admin/academic-terms/${editingTerm!.id}` : `/v1/admin/academic-years/${termYearId}/terms`,
      { method: isEdit ? 'PATCH' : 'POST', body: JSON.stringify(termForm) },
    );
    setTermSaving(false);
    if (!res.error) {
      toast({ title: isEdit ? 'Dönem güncellendi' : 'Dönem oluşturuldu' });
      setTermDialog(false);
      await loadYears();
    } else {
      toast({ title: res.error, variant: 'destructive' });
    }
  };

  const activateTerm = async (termId: string, e: React.MouseEvent) => {
    e.stopPropagation();
    const res = await apiFetchJson(`/v1/admin/academic-terms/${termId}/activate`, { method: 'POST' });
    if (!res.error) {
      toast({ title: 'Dönem aktifleştirildi' });
      await loadYears();
    } else {
      toast({ title: res.error, variant: 'destructive' });
    }
  };

  const deleteTerm = async (termId: string) => {
    const res = await apiFetchJson(`/v1/admin/academic-terms/${termId}`, { method: 'DELETE' });
    if (!res.error) {
      toast({ title: 'Dönem silindi' });
      setConfirmDelete(null);
      await loadYears();
    } else {
      toast({ title: res.error, variant: 'destructive' });
    }
  };

  /* ── İstatistikler ───────────────────────────────────────── */
  const activeYear = years.find((y) => y.isActive);
  const allTerms = years.flatMap((y) => y.terms);
  const activeTerm = allTerms.find((t) => t.isActive);

  /* ── Render ──────────────────────────────────────────────── */
  return (
    <div className="space-y-6">

      {/* ── Hero Header ───────────────────────────────────── */}
      <div className="relative overflow-hidden rounded-2xl border border-indigo-100 bg-gradient-to-br from-indigo-50 via-white to-violet-50 p-6 dark:border-indigo-900/40 dark:from-indigo-950/50 dark:via-zinc-900 dark:to-violet-950/30">
        {/* Dekoratif daireler */}
        <div className="pointer-events-none absolute -right-8 -top-8 h-40 w-40 rounded-full bg-indigo-100/60 blur-2xl dark:bg-indigo-900/20" />
        <div className="pointer-events-none absolute -bottom-6 right-24 h-28 w-28 rounded-full bg-violet-100/60 blur-2xl dark:bg-violet-900/20" />

        <div className="relative flex flex-wrap items-start justify-between gap-4">
          <div className="flex items-center gap-4">
            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-600 shadow-lg shadow-indigo-200 dark:shadow-indigo-900/40">
              <GraduationCap className="h-6 w-6 text-white" />
            </div>
            <div>
              <p className="text-xs font-semibold uppercase tracking-widest text-indigo-500 dark:text-indigo-400">
                Akademik Yapı
              </p>
              <h1 className="mt-0.5 text-2xl font-bold text-zinc-900 dark:text-white">
                Eğitim Yılları & Dönemler
              </h1>
              <p className="mt-0.5 text-sm text-zinc-500 dark:text-zinc-400">
                Akademik takvim ve dönem yönetimi
              </p>
            </div>
          </div>
          <Button
            onClick={openYearCreate}
            className="gap-2 bg-indigo-600 px-5 shadow-md shadow-indigo-200 hover:bg-indigo-700 dark:shadow-indigo-900/30"
          >
            <Plus className="h-4 w-4" />
            Eğitim Yılı Ekle
          </Button>
        </div>

        {/* Stat pill'leri */}
        <div className="relative mt-5 flex flex-wrap gap-3">
          <div className="flex items-center gap-2 rounded-xl border border-indigo-100 bg-white/80 px-4 py-2 shadow-sm backdrop-blur-sm dark:border-indigo-900/30 dark:bg-zinc-800/60">
            <CalendarRange className="h-4 w-4 text-indigo-500" />
            <span className="text-xs text-zinc-500 dark:text-zinc-400">Toplam Yıl</span>
            <span className="text-sm font-bold text-zinc-900 dark:text-white">{years.length}</span>
          </div>
          <div className="flex items-center gap-2 rounded-xl border border-emerald-100 bg-white/80 px-4 py-2 shadow-sm backdrop-blur-sm dark:border-emerald-900/30 dark:bg-zinc-800/60">
            <Sparkles className="h-4 w-4 text-emerald-500" />
            <span className="text-xs text-zinc-500 dark:text-zinc-400">Aktif Yıl</span>
            <span className="text-sm font-bold text-zinc-900 dark:text-white">
              {activeYear?.name ?? '—'}
            </span>
          </div>
          <div className="flex items-center gap-2 rounded-xl border border-violet-100 bg-white/80 px-4 py-2 shadow-sm backdrop-blur-sm dark:border-violet-900/30 dark:bg-zinc-800/60">
            <Layers className="h-4 w-4 text-violet-500" />
            <span className="text-xs text-zinc-500 dark:text-zinc-400">Toplam Dönem</span>
            <span className="text-sm font-bold text-zinc-900 dark:text-white">{allTerms.length}</span>
          </div>
          <div className="flex items-center gap-2 rounded-xl border border-amber-100 bg-white/80 px-4 py-2 shadow-sm backdrop-blur-sm dark:border-amber-900/30 dark:bg-zinc-800/60">
            <CheckCircle2 className="h-4 w-4 text-amber-500" />
            <span className="text-xs text-zinc-500 dark:text-zinc-400">Aktif Dönem</span>
            <span className="text-sm font-bold text-zinc-900 dark:text-white">
              {activeTerm?.name ?? '—'}
            </span>
          </div>
        </div>
      </div>

      {/* ── Yıl Listesi ───────────────────────────────────── */}
      {loading ? (
        <div className="flex items-center justify-center gap-2 py-20 text-zinc-400">
          <Loader2 className="h-5 w-5 animate-spin" />
          <span className="text-sm">Yükleniyor…</span>
        </div>
      ) : years.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-zinc-200 bg-zinc-50/50 py-20 text-center dark:border-zinc-700 dark:bg-zinc-800/20">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800">
            <GraduationCap className="h-8 w-8 text-zinc-400" />
          </div>
          <p className="text-sm font-semibold text-zinc-600 dark:text-zinc-400">
            Henüz eğitim yılı eklenmedi
          </p>
          <p className="mt-1 text-xs text-zinc-400">
            Başlamak için yukarıdaki butonu kullanın
          </p>
          <Button onClick={openYearCreate} variant="secondary" className="mt-5 gap-2">
            <Plus className="h-4 w-4" />
            İlk Yılı Ekle
          </Button>
        </div>
      ) : (
        <div className="space-y-3">
          {years.map((year) => {
            const isExpanded = expandedYearId === year.id;
            const termCount = year.terms.length;
            const activeTermInYear = year.terms.find((t) => t.isActive);

            return (
              <div
                key={year.id}
                className={`overflow-hidden rounded-2xl border bg-white shadow-sm transition-all dark:bg-zinc-800/60 ${
                  year.isActive
                    ? 'border-indigo-200 dark:border-indigo-800/60'
                    : 'border-zinc-200 dark:border-zinc-700'
                }`}
              >
                {/* ── Yıl Başlık ── */}
                <div
                  className={`flex cursor-pointer select-none items-center gap-3 px-5 py-4 transition-colors ${
                    year.isActive
                      ? 'hover:bg-indigo-50/50 dark:hover:bg-indigo-950/20'
                      : 'hover:bg-zinc-50 dark:hover:bg-zinc-700/30'
                  }`}
                  onClick={() =>
                    setExpandedYearId((prev) => (prev === year.id ? null : year.id))
                  }
                >
                  {/* Chevron */}
                  <span className="text-zinc-400 transition-transform">
                    {isExpanded
                      ? <ChevronDown className="h-4 w-4" />
                      : <ChevronRight className="h-4 w-4" />
                    }
                  </span>

                  {/* Renk nokta */}
                  <div className={`h-2.5 w-2.5 shrink-0 rounded-full ${year.isActive ? 'bg-indigo-500' : 'bg-zinc-300 dark:bg-zinc-600'}`} />

                  {/* Yıl adı */}
                  <span className={`flex-1 text-[15px] font-semibold ${year.isActive ? 'text-indigo-700 dark:text-indigo-300' : 'text-zinc-800 dark:text-zinc-200'}`}>
                    {year.name}
                  </span>

                  {/* Tarih aralığı */}
                  <span className="hidden text-xs text-zinc-400 sm:inline">
                    {fmtDate(year.startDate)} — {fmtDate(year.endDate)}
                  </span>

                  {/* Dönem sayısı pill */}
                  <span className="hidden rounded-full border border-zinc-200 bg-zinc-100 px-2.5 py-0.5 text-[11px] font-medium text-zinc-500 sm:inline dark:border-zinc-700 dark:bg-zinc-700 dark:text-zinc-400">
                    {termCount} dönem
                  </span>

                  {/* Aktif badge */}
                  {year.isActive && (
                    <span className="inline-flex items-center gap-1 rounded-full bg-indigo-100 px-2.5 py-0.5 text-[11px] font-semibold text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300">
                      <CheckCircle2 className="h-3 w-3" />
                      Aktif yıl
                    </span>
                  )}

                  {/* İşlemler */}
                  <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
                    {!year.isActive && (
                      <button
                        onClick={(e) => activateYear(year.id, e)}
                        className="rounded-lg px-2.5 py-1 text-xs font-medium text-indigo-600 transition hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-950/50"
                      >
                        Aktifleştir
                      </button>
                    )}
                    <button
                      onClick={(e) => openYearEdit(year, e)}
                      title="Düzenle"
                      className="rounded-lg p-1.5 text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-700 dark:hover:text-zinc-200"
                    >
                      <Pencil className="h-3.5 w-3.5" />
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        setConfirmDelete({ type: 'year', id: year.id, name: year.name });
                      }}
                      title="Sil"
                      className="rounded-lg p-1.5 text-zinc-400 transition hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-950/30 dark:hover:text-red-400"
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </button>
                  </div>
                </div>

                {/* ── Dönem Listesi ── */}
                {isExpanded && (
                  <div className={`border-t ${year.isActive ? 'border-indigo-100 dark:border-indigo-900/30' : 'border-zinc-100 dark:border-zinc-700/60'}`}>

                    {year.terms.length === 0 ? (
                      <div className="px-8 py-6 text-center">
                        <p className="text-sm text-zinc-400">Bu yılda henüz dönem yok.</p>
                      </div>
                    ) : (
                      <div className="divide-y divide-zinc-100 dark:divide-zinc-700/50">
                        {year.terms.map((term, idx) => (
                          <div
                            key={term.id}
                            className={`group flex items-center gap-4 px-8 py-3.5 transition-colors hover:bg-zinc-50/80 dark:hover:bg-zinc-700/20 ${
                              term.isActive ? 'bg-emerald-50/40 dark:bg-emerald-950/10' : ''
                            }`}
                          >
                            {/* Sıra numarası */}
                            <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-zinc-100 text-[11px] font-bold text-zinc-500 dark:bg-zinc-700 dark:text-zinc-400">
                              {idx + 1}
                            </span>

                            {/* Dönem adı */}
                            <span className={`flex-1 text-sm font-medium ${term.isActive ? 'text-emerald-800 dark:text-emerald-300' : 'text-zinc-700 dark:text-zinc-300'}`}>
                              {term.name}
                            </span>

                            {/* Tarih */}
                            <span className="hidden text-xs text-zinc-400 sm:inline">
                              {fmtDateShort(term.startDate)} — {fmtDate(term.endDate)}
                            </span>

                            {/* Aktif badge */}
                            {term.isActive ? (
                              <span className="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-[11px] font-semibold text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
                                <CheckCircle2 className="h-3 w-3" />
                                Aktif
                              </span>
                            ) : (
                              <span className="inline-flex items-center gap-1 rounded-full bg-zinc-100 px-2.5 py-0.5 text-[11px] font-medium text-zinc-400 dark:bg-zinc-700 dark:text-zinc-500">
                                Pasif
                              </span>
                            )}

                            {/* İşlemler */}
                            <div className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
                              {!term.isActive && (
                                <button
                                  onClick={(e) => activateTerm(term.id, e)}
                                  className="rounded-lg px-2.5 py-1 text-xs font-medium text-emerald-600 transition hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/50"
                                >
                                  Aktifleştir
                                </button>
                              )}
                              <button
                                onClick={(e) => openTermEdit(year.id, year.name, term, e)}
                                title="Düzenle"
                                className="rounded-lg p-1.5 text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-700 dark:hover:text-zinc-200"
                              >
                                <Pencil className="h-3.5 w-3.5" />
                              </button>
                              <button
                                onClick={(e) => {
                                  e.stopPropagation();
                                  setConfirmDelete({ type: 'term', id: term.id, name: term.name });
                                }}
                                title="Sil"
                                className="rounded-lg p-1.5 text-zinc-400 transition hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-950/30 dark:hover:text-red-400"
                              >
                                <Trash2 className="h-3.5 w-3.5" />
                              </button>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}

                    {/* Dönem ekle butonu */}
                    <div className={`border-t px-8 py-3 ${year.isActive ? 'border-indigo-100/60 dark:border-indigo-900/20' : 'border-zinc-100/80 dark:border-zinc-700/40'}`}>
                      <button
                        onClick={(e) => openTermCreate(year.id, year.name, e)}
                        className="flex items-center gap-2 rounded-lg px-3 py-1.5 text-xs font-medium text-zinc-400 transition hover:bg-indigo-50 hover:text-indigo-600 dark:hover:bg-indigo-950/30 dark:hover:text-indigo-400"
                      >
                        <Plus className="h-3.5 w-3.5" />
                        Dönem Ekle
                      </button>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}

      {/* ── Eğitim Yılı Dialog ──────────────────────────────── */}
      <Dialog open={yearDialog} onOpenChange={setYearDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <div className="flex items-center gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-100 dark:bg-indigo-900/40">
                <CalendarRange className="h-4.5 w-4.5 text-indigo-600 dark:text-indigo-400" />
              </div>
              <DialogTitle className="text-base">
                {editingYear ? 'Eğitim Yılını Düzenle' : 'Yeni Eğitim Yılı'}
              </DialogTitle>
            </div>
          </DialogHeader>

          <div className="space-y-4 pt-1">
            <div className="space-y-1.5">
              <Label htmlFor="year-name" className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
                Yıl Adı
              </Label>
              <Input
                id="year-name"
                placeholder="ör. 2025-2026"
                value={yearForm.name}
                onChange={(e) => setYearForm((f) => ({ ...f, name: e.target.value }))}
                className="h-10"
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label htmlFor="year-start" className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
                  Başlangıç
                </Label>
                <Input
                  id="year-start"
                  type="date"
                  value={yearForm.startDate}
                  onChange={(e) => setYearForm((f) => ({ ...f, startDate: e.target.value }))}
                  className="h-10"
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="year-end" className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
                  Bitiş
                </Label>
                <Input
                  id="year-end"
                  type="date"
                  value={yearForm.endDate}
                  onChange={(e) => setYearForm((f) => ({ ...f, endDate: e.target.value }))}
                  className="h-10"
                />
              </div>
            </div>
          </div>

          <DialogFooter className="mt-2 gap-2">
            <Button variant="secondary" onClick={() => setYearDialog(false)} className="flex-1">
              İptal
            </Button>
            <Button
              onClick={saveYear}
              disabled={yearSaving}
              className="flex-1 bg-indigo-600 hover:bg-indigo-700"
            >
              {yearSaving ? <><Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />Kaydediliyor…</> : 'Kaydet'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Dönem Dialog ────────────────────────────────────── */}
      <Dialog open={termDialog} onOpenChange={setTermDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <div className="flex items-center gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-violet-100 dark:bg-violet-900/40">
                <Layers className="h-4.5 w-4.5 text-violet-600 dark:text-violet-400" />
              </div>
              <div>
                <DialogTitle className="text-base">
                  {editingTerm ? 'Dönemi Düzenle' : 'Yeni Dönem'}
                </DialogTitle>
                {termYearName && (
                  <p className="mt-0.5 text-xs text-zinc-400">{termYearName}</p>
                )}
              </div>
            </div>
          </DialogHeader>

          <div className="space-y-4 pt-1">
            <div className="space-y-1.5">
              <Label htmlFor="term-name" className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
                Dönem Adı
              </Label>
              <Input
                id="term-name"
                placeholder="ör. 1. Dönem"
                value={termForm.name}
                onChange={(e) => setTermForm((f) => ({ ...f, name: e.target.value }))}
                className="h-10"
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label htmlFor="term-start" className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
                  Başlangıç
                </Label>
                <Input
                  id="term-start"
                  type="date"
                  value={termForm.startDate}
                  onChange={(e) => setTermForm((f) => ({ ...f, startDate: e.target.value }))}
                  className="h-10"
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="term-end" className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
                  Bitiş
                </Label>
                <Input
                  id="term-end"
                  type="date"
                  value={termForm.endDate}
                  onChange={(e) => setTermForm((f) => ({ ...f, endDate: e.target.value }))}
                  className="h-10"
                />
              </div>
            </div>
          </div>

          <DialogFooter className="mt-2 gap-2">
            <Button variant="secondary" onClick={() => setTermDialog(false)} className="flex-1">
              İptal
            </Button>
            <Button
              onClick={saveTerm}
              disabled={termSaving}
              className="flex-1 bg-violet-600 hover:bg-violet-700"
            >
              {termSaving ? <><Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />Kaydediliyor…</> : 'Kaydet'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Silme Onayı ─────────────────────────────────────── */}
      {confirmDelete && (
        <ConfirmDialog
          open
          onOpenChange={(o) => !o && setConfirmDelete(null)}
          title={`"${confirmDelete.name}" silinsin mi?`}
          description={
            confirmDelete.type === 'year'
              ? 'Eğitim yılı kalıcı olarak silinir. Önce tüm dönemlerini silmeniz gerekir.'
              : 'Dönem kalıcı olarak silinir. Bu işlem geri alınamaz.'
          }
          confirmLabel="Sil"
          variant="destructive"
          onConfirm={() => {
            if (confirmDelete.type === 'year') deleteYear(confirmDelete.id);
            else deleteTerm(confirmDelete.id);
          }}
        />
      )}
    </div>
  );
}