'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { type ColumnDef } from '@tanstack/react-table';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import { DataTable } from '@/components/school/data-table';
import {
  ListDataCard,
  ListDataCardBody,
  ListDataCardHeader,
  ListDataCardTitleBlock,
  ListDataCardToolbar,
} from '@/components/school/list-data-card';
import {
  FloatingOutlineDate,
  FloatingOutlineSelect,
  FloatingOutlineText,
  FloatingOutlineTextarea,
  OutlineFormCard,
  OutlinePhotoDropzone,
} from '@/components/school/floating-outline-fields';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { ConfirmDialog } from '@/components/school/confirm-dialog';
import { useToast } from '@/components/school/toast-context';
import {
  Plus, Trash2, Edit, Eye, EyeOff, UserPlus, UserCheck,
} from 'lucide-react';
import {
  GUARDIAN_RELATION_PRESETS,
  PARENTS_FAMILY_STATUS_OPTIONS,
} from '../../_lib/student-form-options';

// ─── Tipler ────────────────────────────────────────────────────

type ParentRow = {
  parentId: string;
  isPrimary: boolean;
  canPickup: boolean;
  parent: { user: { id: string; fullName: string; email: string; phone?: string | null } };
};

type PickupRow = { id: string; fullName: string; relation: string; phone: string };

type GuardianContactApi = {
  id: string;
  relation: string;
  fullName?: string | null;
  phone?: string | null;
  address?: string | null;
};

type GuardianRow = {
  key: string;
  relation: string;
  fullName: string;
  phone: string;
  address: string;
};

function newGuardianRow(): GuardianRow {
  return {
    key: `g-${Date.now()}-${Math.random().toString(36).slice(2)}`,
    relation: '',
    fullName: '',
    phone: '',
    address: '',
  };
}

type StudentDetail = {
  id: string;
  firstName: string;
  lastName: string;
  birthDate?: string | null;
  gender?: string | null;
  classroomId?: string | null;
  bloodType?: string | null;
  allergies?: string | null;
  medicalNotes?: string | null;
  photoUrl?: string | null;
  address?: string | null;
  parentsFamilyStatus?: string | null;
  enrolledAt?: string | null;
  isActive?: boolean;
  classroom?: { name: string; branch?: { name: string } };
  parents: ParentRow[];
  authorizedPickups: PickupRow[];
  guardianContacts?: GuardianContactApi[];
};

type ClassroomOpt = { id: string; name: string; branchName?: string };

// ─── Veli formu ───────────────────────────────────────────────

type ParentFormState = {
  fullName: string;
  email: string;
  phone: string;
  password: string;
  isPrimary: boolean;
  canPickup: boolean;
};

const emptyParentForm = (): ParentFormState => ({
  fullName: '',
  email: '',
  phone: '',
  password: '',
  isPrimary: false,
  canPickup: true,
});

// ─── Breadcrumb ───────────────────────────────────────────────

function BreadcrumbChevron() {
  return (
    <svg className="shrink-0 stroke-current text-gray-400" width={17} height={16} viewBox="0 0 17 16" fill="none" aria-hidden>
      <path
        d="M6.0765 12.667L10.2432 8.50033L6.0765 4.33366"
        strokeWidth={1.2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

// ─── Bileşen ──────────────────────────────────────────────────

export default function StudentDetailPage() {
  const params = useParams();
  const id = String(params.id ?? '');
  const { toast } = useToast();

  const [tab, setTab] = useState<'info' | 'parents'>('info');
  const [student, setStudent] = useState<StudentDetail | null>(null);
  const [classrooms, setClassrooms] = useState<ClassroomOpt[]>([]);
  const [loading, setLoading] = useState(true);
  const [savingInfo, setSavingInfo] = useState(false);
  const [guardianRows, setGuardianRows] = useState<GuardianRow[]>([]);
  const [photoPreview, setPhotoPreview] = useState('');

  // Veli dialog
  const [parentDialogOpen, setParentDialogOpen] = useState(false);
  const [parentDialogMode, setParentDialogMode] = useState<'add' | 'edit'>('add');
  const [editingParentId, setEditingParentId] = useState<string | null>(null);
  const [parentForm, setParentForm] = useState<ParentFormState>(emptyParentForm());
  const [showPassword, setShowPassword] = useState(false);
  const [savingParent, setSavingParent] = useState(false);

  // Diğer dialog'lar
  const [unlinkParentId, setUnlinkParentId] = useState<string | null>(null);
  const [pickupOpen, setPickupOpen] = useState(false);
  const [pickupForm, setPickupForm] = useState({ fullName: '', relation: '', phone: '' });

  // ─── Yükle ────────────────────────────────────────────────

  const load = useCallback(async () => {
    setLoading(true);
    const res = await apiFetchJson<StudentDetail>(`/v1/admin/students/${id}`);
    if (!res.error && res.data) {
      const s = res.data as StudentDetail;
      setStudent(s);
      setPhotoPreview(s.photoUrl ?? '');
      setGuardianRows(
        (s.guardianContacts ?? []).map((g) => ({
          key: g.id,
          relation: g.relation ?? '',
          fullName: g.fullName ?? '',
          phone: g.phone ?? '',
          address: g.address ?? '',
        })),
      );
    }
    setLoading(false);
  }, [id]);

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

  useEffect(() => {
    (async () => {
      const res = await apiFetchJson<ClassroomOpt[]>('/v1/admin/classrooms?limit=200');
      if (!res.error) setClassrooms(Array.isArray(res.data) ? res.data : []);
    })();
  }, []);

  // ─── Veli dialog ─────────────────────────────────────────

  const openAddParent = (prefill?: Partial<ParentFormState>) => {
    setParentDialogMode('add');
    setEditingParentId(null);
    setParentForm({ ...emptyParentForm(), ...prefill });
    setShowPassword(false);
    setParentDialogOpen(true);
  };

  const openEditParent = (row: ParentRow) => {
    setParentDialogMode('edit');
    setEditingParentId(row.parentId);
    setParentForm({
      fullName: row.parent.user.fullName,
      email: row.parent.user.email,
      phone: row.parent.user.phone ?? '',
      password: '',
      isPrimary: row.isPrimary,
      canPickup: row.canPickup,
    });
    setShowPassword(false);
    setParentDialogOpen(true);
  };

  const handleParentSave = async () => {
    if (!parentForm.fullName.trim() || !parentForm.email.trim()) {
      toast({ title: 'Uyarı', description: 'Ad soyad ve e-posta zorunludur', variant: 'destructive' });
      return;
    }
    if (parentDialogMode === 'add' && !parentForm.password.trim()) {
      toast({ title: 'Uyarı', description: 'Şifre zorunludur', variant: 'destructive' });
      return;
    }
    setSavingParent(true);

    let res;
    if (parentDialogMode === 'add') {
      res = await apiFetchJson(`/v1/admin/students/${id}/parents/invite`, {
        method: 'POST',
        body: JSON.stringify({
          email: parentForm.email.trim(),
          fullName: parentForm.fullName.trim(),
          phone: parentForm.phone.trim() || undefined,
          password: parentForm.password.trim(),
          isPrimary: parentForm.isPrimary,
          canPickup: parentForm.canPickup,
        }),
      });
    } else {
      res = await apiFetchJson(`/v1/admin/students/${id}/parents/${editingParentId}`, {
        method: 'PATCH',
        body: JSON.stringify({
          email: parentForm.email.trim(),
          fullName: parentForm.fullName.trim(),
          phone: parentForm.phone.trim() || undefined,
          ...(parentForm.password.trim() ? { password: parentForm.password.trim() } : {}),
          isPrimary: parentForm.isPrimary,
          canPickup: parentForm.canPickup,
        }),
      });
    }

    setSavingParent(false);
    if (res.error) {
      toast({ title: 'Hata', description: res.error, variant: 'destructive' });
      return;
    }
    toast({ title: parentDialogMode === 'add' ? 'Veli eklendi' : 'Veli güncellendi' });
    setParentDialogOpen(false);
    load();
  };

  // ─── Tablo tanımları ─────────────────────────────────────

  const parentColumns = useMemo<ColumnDef<ParentRow>[]>(
    () => [
      {
        id: 'name',
        header: 'Veli',
        cell: ({ row }) => (
          <div>
            <p className="font-medium text-zinc-900 dark:text-white">
              {row.original.parent.user.fullName}
            </p>
            <p className="text-xs text-zinc-500">{row.original.parent.user.email}</p>
            {row.original.parent.user.phone && (
              <p className="text-xs text-zinc-400">{row.original.parent.user.phone}</p>
            )}
          </div>
        ),
      },
      {
        accessorKey: 'isPrimary',
        header: 'Birincil',
        cell: ({ row }) =>
          row.original.isPrimary ? (
            <span className="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400">
              Evet
            </span>
          ) : (
            <span className="text-zinc-400">—</span>
          ),
      },
      {
        accessorKey: 'canPickup',
        header: 'Teslim Yetkisi',
        cell: ({ row }) =>
          row.original.canPickup ? (
            <span className="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
              Var
            </span>
          ) : (
            <span className="text-zinc-400">—</span>
          ),
      },
      {
        id: 'actions',
        header: '',
        cell: ({ row }) => (
          <div className="flex items-center justify-end gap-1">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => openEditParent(row.original)}
              className="h-8 w-8 p-0 text-zinc-400 hover:text-brand-600"
            >
              <Edit className="h-4 w-4" />
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="h-8 w-8 p-0 text-zinc-400 hover:text-red-600"
              onClick={() => setUnlinkParentId(row.original.parentId)}
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          </div>
        ),
      },
    ],
    [], // eslint-disable-line
  );

  const pickupColumns = useMemo<ColumnDef<PickupRow>[]>(
    () => [
      {
        accessorKey: 'fullName',
        header: 'Ad Soyad',
        cell: ({ row }) => (
          <span className="font-medium text-zinc-900 dark:text-white">{row.original.fullName}</span>
        ),
      },
      {
        accessorKey: 'relation',
        header: 'Yakınlık',
        cell: ({ row }) => (
          <span className="text-zinc-600 dark:text-zinc-400">{row.original.relation}</span>
        ),
      },
      {
        accessorKey: 'phone',
        header: 'Telefon',
        cell: ({ row }) => (
          <span className="text-zinc-600 dark:text-zinc-400">{row.original.phone}</span>
        ),
      },
      {
        id: 'actions',
        header: '',
        cell: ({ row }) => (
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="h-8 w-8 p-0 text-zinc-400 hover:text-red-600"
            onClick={async () => {
              const res = await apiFetchJson(
                `/v1/admin/students/${id}/authorized-pickups/${row.original.id}`,
                { method: 'DELETE' },
              );
              if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
              else { toast({ title: 'Kaldırıldı' }); load(); }
            }}
          >
            <Trash2 className="h-4 w-4" />
          </Button>
        ),
      },
    ],
    [id, load, toast],
  );

  // ─── Guardian rows ────────────────────────────────────────

  const addGuardian = () => setGuardianRows((g) => [...g, newGuardianRow()]);
  const removeGuardian = (key: string) =>
    setGuardianRows((g) => g.filter((x) => x.key !== key));
  const updateGuardian = (key: string, patch: Partial<GuardianRow>) =>
    setGuardianRows((g) => g.map((x) => (x.key === key ? { ...x, ...patch } : x)));

  const onPhotoChange = (file: File | undefined) => {
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      const value = String(reader.result || '');
      setPhotoPreview(value);
      setStudent((prev) => (prev ? { ...prev, photoUrl: value } : null));
    };
    reader.readAsDataURL(file);
  };

  async function saveInfo(e: React.FormEvent) {
    e.preventDefault();
    if (!student) return;
    setSavingInfo(true);
    const guardianContacts = guardianRows
      .filter((r) => r.relation.trim())
      .map((r) => ({
        relation: r.relation.trim(),
        fullName: r.fullName.trim() || undefined,
        phone: r.phone.trim() || undefined,
        address: r.address.trim() || undefined,
      }));
    const res = await apiFetchJson(`/v1/admin/students/${id}`, {
      method: 'PATCH',
      body: JSON.stringify({
        firstName: student.firstName,
        lastName: student.lastName,
        birthDate: student.birthDate?.slice(0, 10) || undefined,
        gender: student.gender || undefined,
        classroomId: student.classroomId || null,
        bloodType: student.bloodType || undefined,
        allergies: student.allergies || undefined,
        medicalNotes: student.medicalNotes || undefined,
        address: student.address || undefined,
        parentsFamilyStatus: student.parentsFamilyStatus || undefined,
        photoUrl: student.photoUrl || undefined,
        enrolledAt: student.enrolledAt?.slice(0, 10) || undefined,
        isActive: student.isActive !== false,
        guardianContacts,
      }),
    });
    setSavingInfo(false);
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else { toast({ title: 'Kaydedildi' }); load(); }
  }

  if (loading || !student) {
    return (
      <div className="space-y-4">
        <PageHeader title="Öğrenci" description="Yükleniyor…" backHref="/school/students" />
      </div>
    );
  }

  const studentName = `${student.firstName} ${student.lastName}`;

  return (
    <div className="space-y-6 font-urbanist">
      <PageHeader
        eyebrow="Öğrenci kartı"
        title={studentName}
        description={
          student.classroom
            ? `${student.classroom.name}${student.classroom.branch ? ` · ${student.classroom.branch.name}` : ''}`
            : 'Sınıf atanmamış'
        }
        backHref="/school/students"
        actions={
          student.isActive === false ? (
            <span className="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-800">
              Pasif
            </span>
          ) : null
        }
      />

      <div className="mx-auto w-full max-w-[1536px] pb-20 md:pb-24">
        {/* Breadcrumb */}
        <div className="mb-6 flex flex-wrap items-center justify-end gap-3">
          <nav aria-label="Breadcrumb">
            <ol className="flex flex-wrap items-center gap-1.5">
              <li>
                <Link href="/school/dashboard" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
                  Panel
                  <BreadcrumbChevron />
                </Link>
              </li>
              <li>
                <Link href="/school/students" className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
                  Öğrenciler
                  <BreadcrumbChevron />
                </Link>
              </li>
              <li className="text-sm text-gray-800 dark:text-white/90">{studentName}</li>
            </ol>
          </nav>
        </div>

        {/* Sekmeler */}
        <div className="mb-6 flex flex-wrap gap-2 border-b border-zinc-200 pb-2 dark:border-zinc-700">
          {(['info', 'parents'] as const).map((t) => (
            <button
              key={t}
              type="button"
              onClick={() => setTab(t)}
              className={`rounded-lg px-4 py-2 text-sm font-semibold transition ${
                tab === t
                  ? 'bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900'
                  : 'text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800'
              }`}
            >
              {t === 'info' ? 'Bilgiler' : 'Veli Hesapları'}
            </button>
          ))}
        </div>

        {/* ── Bilgiler sekmesi ── */}
        {tab === 'info' && (
          <form onSubmit={saveInfo} className="space-y-4">
            <OutlineFormCard title="Öğrenci bilgileri">
              <div className="flex flex-col gap-6 xl:flex-row">
                <div className="w-full shrink-0 xl:aspect-square xl:w-[376px]">
                  <OutlinePhotoDropzone
                    previewUrl={photoPreview}
                    onFile={onPhotoChange}
                    title="Öğrenci fotoğrafı"
                  />
                </div>
                <div className="grid w-full min-w-0 grid-cols-1 gap-x-6 gap-y-4 lg:grid-cols-2">
                  <FloatingOutlineText
                    id="fn"
                    label="Ad"
                    value={student.firstName}
                    onChange={(v) => setStudent({ ...student, firstName: v })}
                    required
                  />
                  <FloatingOutlineText
                    id="ln"
                    label="Soyad"
                    value={student.lastName}
                    onChange={(v) => setStudent({ ...student, lastName: v })}
                    required
                  />
                  <FloatingOutlineDate
                    id="bd"
                    label="Doğum tarihi"
                    value={student.birthDate?.slice(0, 10) ?? ''}
                    onChange={(v) => setStudent({ ...student, birthDate: v })}
                  />
                  <FloatingOutlineSelect
                    id="g"
                    label="Cinsiyet"
                    value={student.gender ?? ''}
                    onChange={(v) => setStudent({ ...student, gender: v || null })}
                  >
                    <option value="">Seçin</option>
                    <option value="MALE">Erkek</option>
                    <option value="FEMALE">Kız</option>
                  </FloatingOutlineSelect>
                </div>
              </div>
            </OutlineFormCard>

            <OutlineFormCard title="Okul ve kayıt">
              <div className="grid min-w-0 grid-cols-1 gap-x-6 gap-y-4 lg:grid-cols-2">
                <FloatingOutlineSelect
                  id="cl"
                  label="Sınıf"
                  value={student.classroomId ?? ''}
                  onChange={(v) => setStudent({ ...student, classroomId: v || null })}
                >
                  <option value="">Atama yok</option>
                  {classrooms.map((c) => (
                    <option key={c.id} value={c.id}>
                      {c.name}{c.branchName ? ` · ${c.branchName}` : ''}
                    </option>
                  ))}
                </FloatingOutlineSelect>
                <FloatingOutlineDate
                  id="enr"
                  label="Kayıt tarihi"
                  value={student.enrolledAt?.slice(0, 10) ?? ''}
                  onChange={(v) => setStudent({ ...student, enrolledAt: v })}
                />
                <FloatingOutlineSelect
                  id="st"
                  label="Öğrenci durumu"
                  value={student.isActive === false ? 'PASSIVE' : 'ACTIVE'}
                  onChange={(v) => setStudent({ ...student, isActive: v === 'ACTIVE' })}
                >
                  <option value="ACTIVE">Aktif</option>
                  <option value="PASSIVE">Pasif</option>
                </FloatingOutlineSelect>
                <FloatingOutlineSelect
                  id="fam"
                  label="Anne / baba durumu"
                  value={student.parentsFamilyStatus ?? ''}
                  onChange={(v) => setStudent({ ...student, parentsFamilyStatus: v || null })}
                >
                  <option value="">Seçin</option>
                  {PARENTS_FAMILY_STATUS_OPTIONS.map((o) => (
                    <option key={o.value} value={o.value}>{o.label}</option>
                  ))}
                </FloatingOutlineSelect>
              </div>
            </OutlineFormCard>

            <OutlineFormCard title="Adres ve sağlık">
              <div className="space-y-4">
                <FloatingOutlineTextarea
                  id="addr"
                  label="Öğrenci adresi"
                  value={student.address ?? ''}
                  onChange={(v) => setStudent({ ...student, address: v })}
                  rows={5}
                />
                <div className="grid grid-cols-1 gap-x-6 gap-y-4 lg:grid-cols-2">
                  <FloatingOutlineText
                    id="bt"
                    label="Kan grubu"
                    value={student.bloodType ?? ''}
                    onChange={(v) => setStudent({ ...student, bloodType: v })}
                  />
                  <div className="lg:col-span-2">
                    <FloatingOutlineTextarea
                      id="al"
                      label="Alerjiler"
                      value={student.allergies ?? ''}
                      onChange={(v) => setStudent({ ...student, allergies: v })}
                      rows={4}
                    />
                  </div>
                  <div className="lg:col-span-2">
                    <FloatingOutlineTextarea
                      id="mn"
                      label="Tıbbi notlar"
                      value={student.medicalNotes ?? ''}
                      onChange={(v) => setStudent({ ...student, medicalNotes: v })}
                      rows={4}
                    />
                  </div>
                </div>
              </div>
            </OutlineFormCard>

            <OutlineFormCard title="Veli / yakın iletişim">
              <p className="mb-4 text-sm text-light-secondary-text dark:text-zinc-400">
                Sistem hesabı olmayan yakınlar. &quot;Veli Hesapları&quot; sekmesindeki iletişim kişilerinden veli hesabı açılabilir.
              </p>
              <div className="space-y-5">
                {guardianRows.length === 0 && (
                  <p className="text-sm text-light-secondary-text dark:text-zinc-500">Henüz satır yok.</p>
                )}
                {guardianRows.map((row, idx) => (
                  <div
                    key={row.key}
                    className="rounded-lg border border-l-4 border-slate-200 border-l-teal-500 bg-teal-50/50 p-5 shadow-sm dark:border-slate-700 dark:border-l-teal-400 dark:bg-teal-950/20"
                  >
                    <div className="mb-4 flex items-center justify-between">
                      <span className="text-xs font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-400">
                        İlgili {idx + 1}
                      </span>
                      <div className="flex items-center gap-1">
                        {row.fullName.trim() && (
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            className="h-7 gap-1 px-2 text-xs text-brand-600 hover:bg-brand-50 hover:text-brand-700 dark:text-brand-400 dark:hover:bg-brand-950/30"
                            onClick={() => openAddParent({ fullName: row.fullName, phone: row.phone })}
                            title="Bu kişi için veli hesabı oluştur"
                          >
                            <UserPlus size={12} strokeWidth={2} />
                            Veli hesabı ekle
                          </Button>
                        )}
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          className="h-7 w-7 p-0 text-zinc-400 hover:text-red-600"
                          onClick={() => removeGuardian(row.key)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                    <div className="grid gap-5 sm:grid-cols-2">
                      <div className="sm:col-span-2">
                        <FloatingOutlineText
                          id={`rel-${row.key}`}
                          label="Yakınlık"
                          value={row.relation}
                          onChange={(v) => updateGuardian(row.key, { relation: v })}
                          list={`relations-${row.key}`}
                        />
                        <datalist id={`relations-${row.key}`}>
                          {GUARDIAN_RELATION_PRESETS.map((r) => (
                            <option key={r} value={r} />
                          ))}
                        </datalist>
                      </div>
                      <div className="sm:col-span-2">
                        <FloatingOutlineText
                          id={`name-${row.key}`}
                          label="Ad soyad (isteğe bağlı)"
                          value={row.fullName}
                          onChange={(v) => updateGuardian(row.key, { fullName: v })}
                        />
                      </div>
                      <div>
                        <FloatingOutlineText
                          id={`phone-${row.key}`}
                          label="Telefon"
                          value={row.phone}
                          onChange={(v) => updateGuardian(row.key, { phone: v })}
                          type="tel"
                        />
                      </div>
                      <div className="sm:col-span-2">
                        <FloatingOutlineTextarea
                          id={`gaddr-${row.key}`}
                          label="Adres"
                          value={row.address}
                          onChange={(v) => updateGuardian(row.key, { address: v })}
                          rows={3}
                        />
                      </div>
                    </div>
                  </div>
                ))}
                <Button type="button" variant="secondary" onClick={addGuardian} className="w-full sm:w-auto">
                  <Plus className="h-4 w-4" />
                  İlgili ekle
                </Button>
              </div>
            </OutlineFormCard>

            <div className="flex flex-col items-stretch justify-end gap-3 pt-2 sm:flex-row sm:items-center">
              <Link
                href="/school/students"
                className="inline-flex h-9 cursor-pointer items-center justify-center rounded-full border border-gray-300 px-5 text-sm font-bold leading-6 text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800"
              >
                Geri dön
              </Link>
              <button
                type="submit"
                disabled={savingInfo}
                className="inline-flex h-9 cursor-pointer items-center justify-center rounded-full bg-primary px-5 text-sm font-bold leading-6 text-white transition-colors hover:bg-primary-dark focus:outline-none disabled:pointer-events-none disabled:opacity-50"
              >
                {savingInfo ? 'Kaydediliyor…' : 'Değişiklikleri kaydet'}
              </button>
            </div>
          </form>
        )}

        {/* ── Veli hesapları sekmesi ── */}
        {tab === 'parents' && (
          <div className="space-y-6">
            <div className="grid gap-6 lg:grid-cols-2">
              {/* Veli hesapları */}
              <ListDataCard>
                <ListDataCardHeader>
                  <ListDataCardTitleBlock
                    title="Veli Hesapları"
                    description="Öğrenciye bağlı veli hesapları."
                  />
                  <ListDataCardToolbar>
                    <Button type="button" onClick={() => openAddParent()} className="gap-1.5">
                      <UserPlus className="h-4 w-4" />
                      Veli Ekle
                    </Button>
                  </ListDataCardToolbar>
                </ListDataCardHeader>
                <ListDataCardBody>
                  <DataTable
                    columns={parentColumns}
                    data={student.parents ?? []}
                    emptyMessage="Henüz veli hesabı bağlanmamış."
                  />
                </ListDataCardBody>
              </ListDataCard>

              {/* Teslim yetkilileri */}
              <ListDataCard>
                <ListDataCardHeader>
                  <ListDataCardTitleBlock
                    title="Teslim Yetkilileri"
                    description="Çocuğu okuldan almaya yetkili kişiler."
                  />
                  <ListDataCardToolbar>
                    <Button type="button" onClick={() => setPickupOpen(true)} className="gap-1.5">
                      <Plus className="h-4 w-4" />
                      Ekle
                    </Button>
                  </ListDataCardToolbar>
                </ListDataCardHeader>
                <ListDataCardBody>
                  <DataTable
                    columns={pickupColumns}
                    data={student.authorizedPickups ?? []}
                    emptyMessage="Kayıtlı teslim yetkili yok."
                  />
                </ListDataCardBody>
              </ListDataCard>
            </div>

            {student.parents.length === 0 && (
              <div className="flex items-start gap-3 rounded-xl border border-brand-200 bg-brand-50 p-4 dark:border-brand-800 dark:bg-brand-950/20">
                <UserCheck size={16} strokeWidth={2} className="mt-0.5 shrink-0 text-brand-600" />
                <div>
                  <p className="text-sm font-semibold text-brand-800 dark:text-brand-300">
                    Henüz veli hesabı yok
                  </p>
                  <p className="mt-0.5 text-xs text-brand-700 dark:text-brand-400">
                    &quot;Veli Ekle&quot; butonunu kullanarak veli hesabı oluşturun veya &quot;Bilgiler&quot;
                    sekmesindeki iletişim kişilerinden veli hesabı açın.
                  </p>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      {/* ── Veli ekle / düzenle dialog ── */}
      <Dialog open={parentDialogOpen} onOpenChange={(o) => !o && setParentDialogOpen(false)}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              {parentDialogMode === 'add' ? (
                <><UserPlus size={17} strokeWidth={2} className="text-brand-600" /> Veli Ekle</>
              ) : (
                <><Edit size={17} strokeWidth={2} className="text-brand-600" /> Veli Düzenle</>
              )}
            </DialogTitle>
          </DialogHeader>

          <div className="space-y-4">
            <div className="space-y-1.5">
              <Label>Ad Soyad <span className="text-red-500">*</span></Label>
              <Input
                value={parentForm.fullName}
                onChange={(e) => setParentForm({ ...parentForm, fullName: e.target.value })}
                placeholder="Ahmet Yılmaz"
                autoFocus
              />
            </div>
            <div className="space-y-1.5">
              <Label>E-posta <span className="text-red-500">*</span></Label>
              <Input
                type="email"
                value={parentForm.email}
                onChange={(e) => setParentForm({ ...parentForm, email: e.target.value })}
                placeholder="ornek@mail.com"
              />
            </div>
            <div className="space-y-1.5">
              <Label>Telefon</Label>
              <Input
                value={parentForm.phone}
                onChange={(e) => setParentForm({ ...parentForm, phone: e.target.value })}
                placeholder="05xx xxx xx xx"
              />
            </div>
            <div className="space-y-1.5">
              <Label>
                {parentDialogMode === 'add' ? (
                  <>Şifre <span className="text-red-500">*</span></>
                ) : (
                  <>Yeni Şifre <span className="text-xs font-normal text-zinc-400">(boş bırakılırsa değişmez)</span></>
                )}
              </Label>
              <div className="relative">
                <Input
                  type={showPassword ? 'text' : 'password'}
                  value={parentForm.password}
                  onChange={(e) => setParentForm({ ...parentForm, password: e.target.value })}
                  placeholder={parentDialogMode === 'add' ? 'En az 6 karakter' : 'Değiştirmek için girin'}
                  className="pr-10"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword((v) => !v)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600"
                >
                  {showPassword ? <EyeOff size={15} strokeWidth={2} /> : <Eye size={15} strokeWidth={2} />}
                </button>
              </div>
            </div>
            <div className="flex flex-col gap-2 rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800/50">
              <label className="flex cursor-pointer items-center gap-3 text-sm">
                <input
                  type="checkbox"
                  checked={parentForm.isPrimary}
                  onChange={(e) => setParentForm({ ...parentForm, isPrimary: e.target.checked })}
                  className="h-4 w-4 rounded border-zinc-300 accent-brand-600"
                />
                <div>
                  <span className="font-medium text-zinc-800 dark:text-zinc-200">Birincil veli</span>
                  <p className="text-xs text-zinc-400">Birincil olarak işaretlenirse diğerleri birincil olmaktan çıkar.</p>
                </div>
              </label>
              <label className="flex cursor-pointer items-center gap-3 text-sm">
                <input
                  type="checkbox"
                  checked={parentForm.canPickup}
                  onChange={(e) => setParentForm({ ...parentForm, canPickup: e.target.checked })}
                  className="h-4 w-4 rounded border-zinc-300 accent-brand-600"
                />
                <div>
                  <span className="font-medium text-zinc-800 dark:text-zinc-200">Teslim yetkisi</span>
                  <p className="text-xs text-zinc-400">Öğrenciyi okuldan alabilir.</p>
                </div>
              </label>
            </div>
          </div>

          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setParentDialogOpen(false)}>
              İptal
            </Button>
            <Button type="button" disabled={savingParent} onClick={handleParentSave} className="gap-1.5">
              {savingParent ? 'Kaydediliyor…' : parentDialogMode === 'add' ? 'Veli Ekle' : 'Kaydet'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Teslim yetkili dialog ── */}
      <Dialog open={pickupOpen} onOpenChange={setPickupOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Yetkili Teslim Kişisi Ekle</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="space-y-1.5">
              <Label>Ad Soyad <span className="text-red-500">*</span></Label>
              <Input
                value={pickupForm.fullName}
                onChange={(e) => setPickupForm({ ...pickupForm, fullName: e.target.value })}
                placeholder="Ad Soyad"
              />
            </div>
            <div className="space-y-1.5">
              <Label>Yakınlık <span className="text-red-500">*</span></Label>
              <Input
                value={pickupForm.relation}
                onChange={(e) => setPickupForm({ ...pickupForm, relation: e.target.value })}
                placeholder="Anne, Baba, Büyükanne…"
              />
            </div>
            <div className="space-y-1.5">
              <Label>Telefon</Label>
              <Input
                value={pickupForm.phone}
                onChange={(e) => setPickupForm({ ...pickupForm, phone: e.target.value })}
                placeholder="05xx xxx xx xx"
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setPickupOpen(false)}>
              İptal
            </Button>
            <Button
              type="button"
              disabled={!pickupForm.fullName.trim() || !pickupForm.relation.trim()}
              onClick={async () => {
                const res = await apiFetchJson(
                  `/v1/admin/students/${id}/authorized-pickups`,
                  { method: 'POST', body: JSON.stringify(pickupForm) },
                );
                if (res.error) {
                  toast({ title: 'Hata', description: res.error, variant: 'destructive' });
                } else {
                  toast({ title: 'Eklendi' });
                  setPickupOpen(false);
                  setPickupForm({ fullName: '', relation: '', phone: '' });
                  load();
                }
              }}
            >
              Ekle
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* ── Veli bağlantı kaldır ── */}
      <ConfirmDialog
        open={!!unlinkParentId}
        onOpenChange={(o) => !o && setUnlinkParentId(null)}
        title="Veli bağlantısını kaldır"
        description="Veli hesabı silinmez; yalnızca bu öğrenci ile ilişki kesilir."
        confirmLabel="Kaldır"
        variant="destructive"
        onConfirm={async () => {
          if (!unlinkParentId) return;
          const res = await apiFetchJson(
            `/v1/admin/students/${id}/parents/${unlinkParentId}`,
            { method: 'DELETE' },
          );
          if (res.error) {
            toast({ title: 'Hata', description: res.error, variant: 'destructive' });
          } else {
            toast({ title: 'Bağlantı kaldırıldı' });
            setUnlinkParentId(null);
            load();
          }
        }}
      />
    </div>
  );
}