'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
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 { TableToolbarSearch } from '@/components/school/list-data-card';
import {
  SellzyFilterSelect,
  SellzyListCard,
  SellzyListHeader,
  SellzyListSection,
  SellzyStatCard,
  SellzyStatGrid,
  SellzyTableCheckboxCell,
  SellzyTableCheckboxHeader,
  SellzyToolbar,
  sellzyPillOutlineClass,
  sellzyPillPrimaryClass,
  sellzyRowPillOutlineClass,
  sellzyRowPillPrimaryClass,
} from '@/components/school/sellzy-inventory-list';
import { TableExportMenu } from '@/components/school/table-toolbar';
import { EmptyState } from '@/components/school/empty-state';
import { ConfirmDialog } from '@/components/school/confirm-dialog';
import { useToast } from '@/components/school/toast-context';
import { Button } from '@/components/ui/button';
import { Building2, GraduationCap, Plus, UserCheck, UserRound, Users } from 'lucide-react';
import { BranchSelector } from '@/components/school/branch-selector';
import { useSearchParams } from 'next/navigation';

type AcademicTermOpt = { id: string; name: string; isActive: boolean };
type AcademicYearOpt = { id: string; name: string; isActive: boolean; terms: AcademicTermOpt[] };

type StudentRow = {
  id: string;
  firstName: string;
  lastName: string;
  isActive?: boolean;
  classroomName?: string;
  branchName?: string;
};

type PageMeta = { page: number; limit: number; total: number; totalPages: number };

export default function SchoolStudentsPage() {
  const { toast } = useToast();
  const searchParams = useSearchParams();
  const branchId = searchParams.get('branchId') ?? 'all';
  const [items, setItems] = useState<StudentRow[]>([]);
  const [meta, setMeta] = useState<PageMeta | null>(null);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [searchDebounced, setSearchDebounced] = useState('');
  const [activeFilter, setActiveFilter] = useState<'all' | 'active' | 'inactive'>('all');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [deactivateId, setDeactivateId] = useState<string | null>(null);
  const [deactivateLoading, setDeactivateLoading] = useState(false);
  const [selected, setSelected] = useState<Record<string, boolean>>({});
  const [academicYears, setAcademicYears] = useState<AcademicYearOpt[]>([]);
  const [academicTermId, setAcademicTermId] = useState<string>(''); // '' = tümü

  useEffect(() => {
    const t = window.setTimeout(() => setSearchDebounced(search), 350);
    return () => window.clearTimeout(t);
  }, [search]);

  // Eğitim yıllarını yükle, aktif dönemi varsayılan seç
  useEffect(() => {
    apiFetchJson<AcademicYearOpt[]>('/v1/admin/academic-years').then((res) => {
      if (!res.error && res.data) {
        setAcademicYears(res.data);
        const activeYear = res.data.find((y) => y.isActive);
        const activeTerm = activeYear?.terms.find((t) => t.isActive);
        if (activeTerm) setAcademicTermId(activeTerm.id);
      }
    });
  }, []);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    const q = new URLSearchParams();
    q.set('page', String(page));
    q.set('limit', '15');
    if (searchDebounced.trim()) q.set('search', searchDebounced.trim());
    if (activeFilter === 'active') q.set('isActive', 'true');
    if (activeFilter === 'inactive') q.set('isActive', 'false');
    if (branchId !== 'all') q.set('branchId', branchId);
    if (academicTermId) q.set('academicTermId', academicTermId);
    const res = await apiFetchJson<StudentRow[]>(`/v1/admin/students?${q.toString()}`);
    if (res.error) {
      setError(res.error);
      setItems([]);
      setMeta(null);
    } else {
      const list = Array.isArray(res.data) ? res.data : [];
      setItems(list);
      const m = res.meta as PageMeta | undefined;
      if (m) setMeta(m);
      else
        setMeta({
          page: 1,
          limit: 15,
          total: list.length,
          totalPages: 1,
        });
    }
    setLoading(false);
  }, [page, searchDebounced, activeFilter, branchId, academicTermId]);

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

  useEffect(() => {
    setSelected({});
  }, [page, searchDebounced, activeFilter, academicTermId]);

  const selectedIds = useMemo(() => new Set(Object.keys(selected).filter((k) => selected[k])), [selected]);
  const allVisibleSelected =
    items.length > 0 && !loading && items.every((t) => selectedIds.has(t.id));
  const someVisibleSelected = items.some((t) => selectedIds.has(t.id)) && !allVisibleSelected;

  const toggleAllVisible = useCallback(
    (on: boolean) => {
      setSelected((prev) => {
        const next = { ...prev };
        for (const t of items) {
          if (on) next[t.id] = true;
          else delete next[t.id];
        }
        return next;
      });
    },
    [items],
  );

  const toggleOne = useCallback((id: string, on: boolean) => {
    setSelected((prev) => {
      const next = { ...prev };
      if (on) next[id] = true;
      else delete next[id];
      return next;
    });
  }, []);

  const activeOnPage = useMemo(() => items.filter((i) => i.isActive !== false).length, [items]);
  const passiveOnPage = useMemo(() => items.filter((i) => i.isActive === false).length, [items]);
  const withClassroomOnPage = useMemo(() => items.filter((i) => (i.classroomName ?? '').trim()).length, [items]);

  const columns = useMemo<ColumnDef<StudentRow>[]>(
    () => [
      {
        id: 'select',
        enableSorting: false,
        meta: { headerClassName: 'w-[52px] pl-6', cellClassName: 'pl-6' },
        header: () => (
          <SellzyTableCheckboxHeader
            checked={allVisibleSelected}
            indeterminate={someVisibleSelected}
            disabled={items.length === 0 || loading}
            onChange={toggleAllVisible}
          />
        ),
        cell: ({ row }) => (
          <SellzyTableCheckboxCell
            checked={!!selected[row.original.id]}
            onChange={(on) => toggleOne(row.original.id, on)}
          />
        ),
      },
      {
        id: 'shortId',
        accessorKey: 'id',
        header: 'ID',
        cell: ({ row }) => (
          <span className="whitespace-nowrap text-sm text-light-secondary-text dark:text-zinc-400">
            #{row.original.id.slice(0, 8)}
          </span>
        ),
      },
      {
        id: 'name',
        header: 'Öğrenci',
        cell: ({ row }) => {
          const full = `${row.original.firstName} ${row.original.lastName}`.trim();
          const initials = `${row.original.firstName?.[0] ?? ''}${row.original.lastName?.[0] ?? ''}`.toUpperCase();
          return (
            <div className="flex min-w-0 items-center gap-3">
              <div className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md bg-gray-100 text-xs font-semibold text-light-primary-text dark:bg-zinc-800 dark:text-zinc-200">
                {initials || <UserRound className="size-4 opacity-60" strokeWidth={1.5} />}
              </div>
              <span className="truncate text-sm font-medium text-light-primary-text dark:text-zinc-100">{full}</span>
            </div>
          );
        },
      },
      {
        accessorKey: 'classroomName',
        header: 'Sınıf',
        cell: ({ row }) => (
          <span className="whitespace-nowrap text-sm text-light-secondary-text dark:text-zinc-400">
            {row.original.classroomName ?? '—'}
          </span>
        ),
      },
      {
        accessorKey: 'branchName',
        header: 'Şube',
        cell: ({ row }) => (
          <span className="whitespace-nowrap text-sm text-light-secondary-text dark:text-zinc-400">
            {row.original.branchName ?? '—'}
          </span>
        ),
      },
      {
        id: 'status',
        header: 'Durum',
        enableSorting: false,
        cell: ({ row }) =>
          row.original.isActive !== false ? (
            <span className="inline-flex h-[22px] items-center justify-center rounded-full bg-brand-500/15 px-2 text-xs font-medium text-primary-dark dark:bg-brand-500/20 dark:text-brand-300">
              Aktif
            </span>
          ) : (
            <span className="inline-flex h-[22px] items-center justify-center rounded-full bg-amber-500/15 px-2 text-xs font-medium text-amber-900 dark:bg-amber-500/20 dark:text-amber-200">
              Pasif
            </span>
          ),
      },
      {
        id: 'actions',
        header: () => <span className="pr-6">İşlem</span>,
        enableSorting: false,
        meta: { cellClassName: 'pr-6' },
        cell: ({ row }) => (
          <div className="flex flex-wrap items-center gap-2">
            <Link href={`/school/students/${row.original.id}`} className={sellzyRowPillPrimaryClass}>
              Görüntüle
            </Link>
            {row.original.isActive !== false ? (
              <button type="button" className={sellzyRowPillOutlineClass} onClick={() => setDeactivateId(row.original.id)}>
                Pasifleştir
              </button>
            ) : null}
          </div>
        ),
      },
    ],
    [allVisibleSelected, items.length, loading, selected, someVisibleSelected, toggleAllVisible, toggleOne],
  );

  const totalRecords = meta?.total ?? 0;
  const showOnboardingEmpty =
    !loading &&
    !error &&
    items.length === 0 &&
    !searchDebounced.trim() &&
    activeFilter === 'all' &&
    !academicTermId &&
    (meta?.total === 0 || meta === null);

  return (
    <div className="space-y-6 font-urbanist">
      <PageHeader
        eyebrow="Öğrenci yönetimi"
        title="Öğrenciler"
        description="Kayıtları arayın, detaydan veli ve teslim kişilerini yönetin."
      />

      {error ? <p className="text-sm text-red-600 dark:text-red-400">{error}</p> : null}

      {showOnboardingEmpty ? (
        <EmptyState
          icon={UserRound}
          title="Henüz öğrenci yok"
          description="İlk kaydı oluşturarak veli eşlemesi ve yoklamaya başlayın."
          action={
            <Button asChild>
              <Link href="/school/students/new">Öğrenci ekle</Link>
            </Button>
          }
        />
      ) : (
        <SellzyListCard>
          <SellzyListSection>
            <SellzyListHeader
              title="Öğrenci listesi"
              actions={
                <>
                  <TableExportMenu triggerClassName={sellzyPillOutlineClass} />
                  <button
                    type="button"
                    className={sellzyPillOutlineClass}
                    onClick={() =>
                      toast({ title: 'Yakında', description: 'Toplu indirme yakında eklenecek.' })
                    }
                  >
                    Tümünü indir
                  </button>
                  <Link href="/school/students/new" className={sellzyPillPrimaryClass}>
                    <span className="inline-flex items-center gap-1.5">
                      <Plus className="size-3.5 shrink-0" strokeWidth={2.5} />
                      Yeni öğrenci
                    </span>
                  </Link>
                </>
              }
            />
            <SellzyStatGrid>
              <SellzyStatCard
                bgClass="bg-[#D3F3F1] dark:bg-teal-950/40"
                icon={<Users className="size-6" strokeWidth={1.25} />}
                label="Toplam kayıt"
                value={totalRecords}
              />
              <SellzyStatCard
                bgClass="bg-[#FFF8C5] dark:bg-amber-950/30"
                icon={<UserCheck className="size-6" strokeWidth={1.25} />}
                label="Aktif (bu sayfa)"
                value={activeOnPage}
              />
              <SellzyStatCard
                bgClass="bg-[#C5F2A8] dark:bg-lime-950/30"
                icon={<UserRound className="size-6" strokeWidth={1.25} />}
                label="Pasif (bu sayfa)"
                value={passiveOnPage}
              />
              <SellzyStatCard
                bgClass="bg-[#FDDEEF] dark:bg-pink-950/30"
                icon={<Building2 className="size-6" strokeWidth={1.25} />}
                label="Sınıflı (bu sayfa)"
                value={withClassroomOnPage}
              />
            </SellzyStatGrid>
          </SellzyListSection>

          {/* Dönem bilgi bandı */}
          {academicYears.length > 0 && (() => {
            const allTerms = academicYears.flatMap((y) => y.terms.map((t) => ({ ...t, yearName: y.name })));
            const current = allTerms.find((t) => t.id === academicTermId);
            return (
              <div className="flex items-center gap-2 border-b border-zinc-100 bg-indigo-50/60 px-5 py-2.5 dark:border-zinc-700 dark:bg-indigo-950/20">
                <GraduationCap className="h-3.5 w-3.5 shrink-0 text-indigo-500" />
                <p className="text-xs text-zinc-600 dark:text-zinc-400">
                  {current
                    ? <><span className="font-semibold text-indigo-700 dark:text-indigo-300">{current.yearName} · {current.name}</span> dönemi görüntüleniyor</>
                    : <span className="font-semibold text-zinc-500">Tüm dönemler</span>
                  }
                </p>
              </div>
            );
          })()}

          <SellzyToolbar>
            <TableToolbarSearch
              placeholder="Ara…"
              value={search}
              onChange={(e) => {
                setPage(1);
                setSearch(e.target.value);
              }}
              className="sm:w-[300px]"
              aria-label="Öğrenci ara"
            />
            <div className="flex flex-wrap items-center gap-3">
              <BranchSelector />
              {/* Dönem seçici */}
              {academicYears.length > 0 && (() => {
                const allTermOpts = [
                  { value: '', label: 'Tüm dönemler' },
                  ...academicYears.flatMap((y) =>
                    y.terms.map((t) => ({
                      value: t.id,
                      label: `${y.name} · ${t.name}${t.isActive ? ' ✓' : ''}`,
                    }))
                  ),
                ];
                return (
                  <SellzyFilterSelect
                    placeholder="Dönem"
                    value={academicTermId}
                    showBlankOption={false}
                    onChange={(v) => {
                      setPage(1);
                      setAcademicTermId(v);
                    }}
                    options={allTermOpts}
                    minWidthClass="min-w-[200px]"
                  />
                );
              })()}
              <SellzyFilterSelect
                placeholder="Durum"
                value={activeFilter}
                showBlankOption={false}
                onChange={(v) => {
                  setPage(1);
                  setActiveFilter(v === 'active' ? 'active' : v === 'inactive' ? 'inactive' : 'all');
                }}
                options={[
                  { value: 'all', label: 'Tümü' },
                  { value: 'active', label: 'Aktif' },
                  { value: 'inactive', label: 'Pasif' },
                ]}
                minWidthClass="min-w-[120px]"
              />
            </div>
          </SellzyToolbar>

          <div className="relative w-full overflow-x-auto">
            <DataTable
              columns={columns}
              data={items}
              isLoading={loading}
              variant="sellzy"
              emptyMessage="Kayıt bulunamadı."
            />
          </div>

          {meta && meta.total > 0 ? (
            <PaginationBar
              page={meta.page}
              totalPages={meta.totalPages}
              total={meta.total}
              limit={meta.limit}
              onPageChange={setPage}
              appearance="sellzy"
            />
          ) : null}
        </SellzyListCard>
      )}

      <ConfirmDialog
        open={!!deactivateId}
        onOpenChange={(o) => !o && setDeactivateId(null)}
        title="Öğrenciyi pasifleştir"
        description="Bu işlem kaydı siler değil; öğrenci listelerinde pasif görünür."
        confirmLabel="Pasifleştir"
        variant="destructive"
        loading={deactivateLoading}
        onConfirm={async () => {
          if (!deactivateId) return;
          setDeactivateLoading(true);
          const res = await apiFetchJson(`/v1/admin/students/${deactivateId}`, { method: 'DELETE' });
          setDeactivateLoading(false);
          if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
          else {
            toast({ title: 'Güncellendi', description: 'Öğrenci pasif yapıldı.' });
            setDeactivateId(null);
            load();
          }
        }}
      />
    </div>
  );
}