'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { type ColumnDef } from '@tanstack/react-table';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import { DataTable, PaginationBar } from '@/components/school/data-table';
import {
  ListDataCard,
  ListDataCardBody,
  ListDataCardHeader,
  ListDataCardTitleBlock,
  ListDataCardToolbar,
  ListPrimaryButton,
  ListTableActions,
  listRowIconClass,
  listRowIconDangerClass,
} from '@/components/school/list-data-card';
import { TableExportMenu } from '@/components/school/table-toolbar';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { SelectNative } from '@/components/ui/select-native';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { ConfirmDialog } from '@/components/school/confirm-dialog';
import { useToast } from '@/components/school/toast-context';
import { Plus, Pencil, Trash2 } from 'lucide-react';
import { BranchSelector } from '@/components/school/branch-selector';
import { useSearchParams } from 'next/navigation';

type Branch = { id: string; name: string };
type Teacher = { id: string; fullName: string; email: string };
type Classroom = {
  id: string;
  name: string;
  capacity: number;
  ageGroup?: string | null;
  branchId: string;
  branchName?: string;
  studentCount?: number;
  homeroomTeacher?: { id: string; fullName: string; email: string } | null;
};
type Meta = { page: number; limit: number; total: number; totalPages: number };

export default function SchoolClassroomsPage() {
  const { toast } = useToast();
  const searchParams = useSearchParams();
  const branchId = searchParams.get('branchId') ?? 'all';
  const [items, setItems] = useState<Classroom[]>([]);
  const [meta, setMeta] = useState<Meta | null>(null);
  const [page, setPage] = useState(1);
  const [branches, setBranches] = useState<Branch[]>([]);
  const [teachers, setTeachers] = useState<Teacher[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<Classroom | null>(null);
  const [form, setForm] = useState({
    name: '',
    branchId: '',
    capacity: 20,
    ageGroup: '',
    homeroomTeacherId: '',
  });
  const [saving, setSaving] = useState(false);
  const [deleteId, setDeleteId] = useState<string | null>(null);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    const q = new URLSearchParams();
    q.set('page', String(page));
    q.set('limit', '15');
    if (branchId !== 'all') q.set('branchId', branchId);
    const res = await apiFetchJson<Classroom[]>(`/v1/admin/classrooms?${q.toString()}`);
    if (res.error) {
      setError(res.error);
      setItems([]);
    } else {
      setItems(Array.isArray(res.data) ? res.data : []);
      setMeta((res.meta as Meta) ?? null);
    }
    setLoading(false);
  }, [page, branchId]);

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

  useEffect(() => {
    (async () => {
      const [b, t] = await Promise.all([
        apiFetchJson<Branch[]>('/v1/admin/branches?limit=200'),
        apiFetchJson<Teacher[]>('/v1/admin/staff?role=TEACHER&limit=200'),
      ]);
      setBranches(Array.isArray(b.data) ? b.data : []);
      setTeachers(Array.isArray(t.data) ? t.data : []);
    })();
  }, []);

  const openCreate = () => {
    setEditing(null);
    setForm({
      name: '',
      branchId: branches[0]?.id ?? '',
      capacity: 20,
      ageGroup: '',
      homeroomTeacherId: '',
    });
    setDialogOpen(true);
  };

  const openEdit = (c: Classroom) => {
    setEditing(c);
    setForm({
      name: c.name,
      branchId: c.branchId,
      capacity: c.capacity,
      ageGroup: c.ageGroup ?? '',
      homeroomTeacherId: c.homeroomTeacher?.id ?? '',
    });
    setDialogOpen(true);
  };

  const save = async () => {
    setSaving(true);
    const payload = {
      name: form.name,
      branchId: form.branchId,
      capacity: form.capacity,
      ageGroup: form.ageGroup || undefined,
      homeroomTeacherId: form.homeroomTeacherId || undefined,
    };
    if (editing) {
      const res = await apiFetchJson(`/v1/admin/classrooms/${editing.id}`, {
        method: 'PATCH',
        body: JSON.stringify({
          name: payload.name,
          capacity: payload.capacity,
          ageGroup: payload.ageGroup,
          homeroomTeacherId: form.homeroomTeacherId ? form.homeroomTeacherId : null,
        }),
      });
      setSaving(false);
      if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
      else {
        toast({ title: 'Sınıf güncellendi' });
        setDialogOpen(false);
        load();
      }
    } else {
      const res = await apiFetchJson('/v1/admin/classrooms', {
        method: 'POST',
        body: JSON.stringify(payload),
      });
      setSaving(false);
      if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
      else {
        toast({ title: 'Sınıf oluşturuldu' });
        setDialogOpen(false);
        load();
      }
    }
  };

  const columns = useMemo<ColumnDef<Classroom>[]>(
    () => [
      {
        accessorKey: 'name',
        header: 'Sınıf',
        cell: ({ row }) => <span className="font-medium text-slate-900 dark:text-white">{row.original.name}</span>,
      },
      {
        accessorKey: 'branchName',
        header: 'Şube',
        cell: ({ row }) => (
          <span className="text-sm text-slate-600 dark:text-zinc-400">{row.original.branchName ?? '—'}</span>
        ),
      },
      {
        accessorKey: 'homeroomTeacher',
        header: 'Öğretmen',
        cell: ({ row }) => (
          <span className="text-sm text-slate-600 dark:text-zinc-400">
            {row.original.homeroomTeacher?.fullName ?? '—'}
          </span>
        ),
      },
      {
        accessorKey: 'studentCount',
        header: 'Öğrenci',
        cell: ({ row }) => (
          <span className="text-sm font-semibold text-brand-600 dark:text-brand-400">
            {row.original.studentCount ?? 0} / {row.original.capacity}
          </span>
        ),
      },
      {
        id: 'a',
        header: () => <span className="pr-4">İşlem</span>,
        cell: ({ row }) => (
          <ListTableActions>
            <button type="button" className={listRowIconClass} aria-label="Düzenle" onClick={() => openEdit(row.original)}>
              <Pencil className="size-4" strokeWidth={2} />
            </button>
            <button type="button" className={listRowIconDangerClass} aria-label="Sil" onClick={() => setDeleteId(row.original.id)}>
              <Trash2 className="size-4" strokeWidth={2} />
            </button>
          </ListTableActions>
        ),
      },
    ],
    [],
  );

  return (
    <div className="space-y-8">
      <PageHeader eyebrow="Yapı" title="Sınıflar" description="Kapasite, yaş grubu ve sorumlu öğretmen ataması." />
      {!branches.length ? (
        <div className="admin-callout">
          <p className="font-medium text-amber-950 dark:text-amber-50">Önce şube oluşturun</p>
          <p className="mt-1 text-[13px] leading-relaxed opacity-90">
            Sınıf açmak için en az bir şube tanımlı olmalı. Şubeler sayfasından ekleyebilirsiniz.
          </p>
        </div>
      ) : null}
      {error ? <div className="admin-callout-error text-[13px]">{error}</div> : null}
      <ListDataCard>
        <ListDataCardHeader>
          <ListDataCardTitleBlock
            title="Sınıf listesi"
            description="Kapasite, öğretmen ve şube bilgileri."
            action={
              <ListPrimaryButton type="button" onClick={openCreate} disabled={!branches.length} className="gap-1.5">
                <Plus className="size-4 shrink-0" strokeWidth={2.5} />
                Yeni sınıf
              </ListPrimaryButton>
            }
          />
          <ListDataCardToolbar>
            <div className="flex flex-wrap items-center gap-3 lg:ml-auto">
              <BranchSelector />
              <TableExportMenu />
            </div>
          </ListDataCardToolbar>
        </ListDataCardHeader>
        <ListDataCardBody>
          <DataTable
            columns={columns}
            data={items}
            isLoading={loading}
            emptyMessage={branches.length ? 'Henüz sınıf yok' : 'Kayıt bulunamadı'}
            emptyDescription={
              branches.length ? 'Yeni sınıf ekleyerek kapasite ve öğretmen ataması yapın.' : undefined
            }
          />
        </ListDataCardBody>
        {meta && meta.total > 0 ? (
          <PaginationBar
            page={meta.page}
            totalPages={meta.totalPages}
            total={meta.total}
            limit={meta.limit}
            onPageChange={setPage}
          />
        ) : null}
      </ListDataCard>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editing ? 'Sınıf düzenle' : 'Yeni sınıf'}</DialogTitle>
          </DialogHeader>
          <div className="grid gap-3">
            <div className="space-y-1">
              <Label>Ad</Label>
              <Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
            </div>
            {!editing ? (
              <div className="space-y-1">
                <Label>Şube</Label>
                <SelectNative value={form.branchId} onChange={(e) => setForm({ ...form, branchId: e.target.value })} required>
                  {branches.map((b) => (
                    <option key={b.id} value={b.id}>
                      {b.name}
                    </option>
                  ))}
                </SelectNative>
              </div>
            ) : null}
            <div className="space-y-1">
              <Label>Kapasite</Label>
              <Input
                type="number"
                min={1}
                value={form.capacity}
                onChange={(e) => setForm({ ...form, capacity: Number(e.target.value) || 1 })}
              />
            </div>
            <div className="space-y-1">
              <Label>Yaş grubu</Label>
              <Input value={form.ageGroup} onChange={(e) => setForm({ ...form, ageGroup: e.target.value })} placeholder="örn. 3-4 yaş" />
            </div>
            <div className="space-y-1">
              <Label>Sorumlu öğretmen</Label>
              <SelectNative value={form.homeroomTeacherId} onChange={(e) => setForm({ ...form, homeroomTeacherId: e.target.value })}>
                <option value="">Atanmadı</option>
                {teachers.map((t) => (
                  <option key={t.id} value={t.id}>
                    {t.fullName} ({t.email})
                  </option>
                ))}
              </SelectNative>
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setDialogOpen(false)}>
              İptal
            </Button>
            <Button type="button" disabled={saving || !form.name.trim() || (!editing && !form.branchId)} onClick={save}>
              {saving ? 'Kaydediliyor…' : 'Kaydet'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ConfirmDialog
        open={!!deleteId}
        onOpenChange={(o) => !o && setDeleteId(null)}
        title="Sınıfı pasifleştir"
        description="Sınıf listeden düşer; mevcut öğrenci atamalarını kontrol edin."
        confirmLabel="Pasifleştir"
        variant="destructive"
        onConfirm={async () => {
          if (!deleteId) return;
          const res = await apiFetchJson(`/v1/admin/classrooms/${deleteId}`, { method: 'DELETE' });
          if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
          else {
            toast({ title: 'Sınıf pasif' });
            setDeleteId(null);
            load();
          }
        }}
      />
    </div>
  );
}