'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 } from '@/components/school/data-table';
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 { TableToolbarSearch } from '@/components/school/list-data-card';
import { useToast } from '@/components/school/toast-context';
import { cn } from '@/lib/utils';
import { GraduationCap, Mail, Plus, UserRound, Users } from 'lucide-react';
import { BranchSelector } from '@/components/school/branch-selector';
import { useSearchParams } from 'next/navigation';

type Teacher = { id: string; fullName?: string; email?: string };

export default function SchoolTeachersPage() {
  const { toast } = useToast();
  const searchParams = useSearchParams();
  const branchId = searchParams.get('branchId') ?? 'all';
  const [items, setItems] = useState<Teacher[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [search, setSearch] = useState('');
  const [sortOrder, setSortOrder] = useState<'az' | 'za'>('az');
  const [selected, setSelected] = useState<Record<string, boolean>>({});

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    const q = new URLSearchParams();
    q.set('role', 'TEACHER');
    q.set('limit', '200');
    if (branchId !== 'all') q.set('branchId', branchId);
    const res = await apiFetchJson<{ data?: Teacher[]; items?: Teacher[] } | Teacher[]>(`/v1/admin/staff?${q.toString()}`);
    if (res.error) {
      setError(res.statusCode === 429 ? 'Çok hızlı istek gönderildi. Birkaç saniye sonra tekrar deneyin.' : res.error);
    } else {
      const payload = res.data as { data?: Teacher[]; items?: Teacher[] } | Teacher[] | null;
      const list = Array.isArray(payload)
        ? payload
        : Array.isArray(payload?.data)
          ? payload.data
          : Array.isArray(payload?.items)
            ? payload.items
            : [];
      setItems(list);
    }
    setLoading(false);
  }, [branchId]);

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

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    let list = items;
    if (q) {
      list = items.filter(
        (t) =>
          (t.fullName ?? '').toLowerCase().includes(q) || (t.email ?? '').toLowerCase().includes(q),
      );
    }
    const sorted = [...list].sort((a, b) => {
      const an = (a.fullName ?? '').toLocaleLowerCase('tr');
      const bn = (b.fullName ?? '').toLocaleLowerCase('tr');
      return sortOrder === 'az' ? an.localeCompare(bn, 'tr') : bn.localeCompare(an, 'tr');
    });
    return sorted;
  }, [items, search, sortOrder]);

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

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

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

  const withEmail = useMemo(() => items.filter((t) => (t.email ?? '').trim()).length, [items]);
  const withoutEmail = items.length - withEmail;

  const columns = useMemo<ColumnDef<Teacher>[]>(
    () => [
      {
        id: 'select',
        enableSorting: false,
        meta: {
          headerClassName: 'w-[52px] pl-6',
          cellClassName: 'pl-6',
        },
        header: () => (
          <SellzyTableCheckboxHeader
            checked={allVisibleSelected}
            indeterminate={someVisibleSelected}
            disabled={filtered.length === 0}
            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: 'Öğretmen',
        cell: ({ row }) => {
          const name = row.original.fullName ?? 'İsimsiz';
          const initials = name
            .split(/\s+/)
            .filter(Boolean)
            .slice(0, 2)
            .map((p) => p[0]?.toUpperCase() ?? '')
            .join('');
          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">{name}</span>
            </div>
          );
        },
      },
      {
        accessorKey: 'email',
        header: 'E-posta',
        cell: ({ row }) => (
          <span className="whitespace-nowrap text-sm text-light-secondary-text dark:text-zinc-400">
            {row.original.email ?? '—'}
          </span>
        ),
      },
      {
        id: 'actions',
        header: () => <span className="pr-6">İşlem</span>,
        enableSorting: false,
        meta: { cellClassName: 'pr-6' },
        cell: ({ row }) => {
          const em = row.original.email?.trim();
          return (
            <div className="flex flex-wrap items-center gap-2">
              {em ? (
                <a href={`mailto:${em}`} className={sellzyRowPillPrimaryClass}>
                  İletişim
                </a>
              ) : (
                <span className={cn(sellzyRowPillPrimaryClass, 'pointer-events-none opacity-40')}>İletişim</span>
              )}
              <button
                type="button"
                className={sellzyRowPillOutlineClass}
                disabled={!em}
                onClick={() => {
                  if (!em) return;
                  void navigator.clipboard.writeText(em);
                  toast({ title: 'Kopyalandı', description: em });
                }}
              >
                Kopyala
              </button>
            </div>
          );
        },
      },
    ],
    [allVisibleSelected, filtered, someVisibleSelected, selected, toggleAllVisible, toggleOne, toast],
  );

  return (
    <div className="space-y-6 font-urbanist">
      <PageHeader
        eyebrow="Personel"
        title="Öğretmenler"
        description="Sınıf öğretmeni atamaları ve iletişim."
      />
      {error ? <p className="text-sm text-red-600 dark:text-red-400">{error}</p> : null}

      <SellzyListCard>
        <SellzyListSection>
          <SellzyListHeader
            title="Öğretmen listesi"
            actions={
              <>
                <TableExportMenu triggerClassName={sellzyPillOutlineClass} />
                <Link href="/school/teachers/new" className={sellzyPillPrimaryClass}>
                  <span className="inline-flex items-center gap-1.5">
                    <Plus className="size-3.5 shrink-0" strokeWidth={2.5} />
                    Öğretmen ekle
                  </span>
                </Link>
              </>
            }
          />
          <SellzyStatGrid>
            <SellzyStatCard
              bgClass="bg-[#D3F3F1] dark:bg-teal-950/40"
              icon={<Users className="size-6" strokeWidth={1.25} />}
              label="Toplam öğretmen"
              value={items.length}
            />
            <SellzyStatCard
              bgClass="bg-[#FFF8C5] dark:bg-amber-950/30"
              icon={<Mail className="size-6" strokeWidth={1.25} />}
              label="E-posta tanımlı"
              value={withEmail}
            />
            <SellzyStatCard
              bgClass="bg-[#C5F2A8] dark:bg-lime-950/30"
              icon={<UserRound className="size-6" strokeWidth={1.25} />}
              label="E-posta eksik"
              value={withoutEmail}
            />
            <SellzyStatCard
              bgClass="bg-[#FDDEEF] dark:bg-pink-950/30"
              icon={<GraduationCap className="size-6" strokeWidth={1.25} />}
              label="Görünümde"
              value={filtered.length}
            />
          </SellzyStatGrid>
        </SellzyListSection>

        <SellzyToolbar>
          <TableToolbarSearch
            placeholder="Ara…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="sm:w-[300px]"
            aria-label="Öğretmen ara"
          />
          <div className="flex flex-wrap items-center gap-3">
            <BranchSelector />
            <SellzyFilterSelect
              placeholder="Sırala"
              value={sortOrder}
              showBlankOption={false}
              onChange={(v) => setSortOrder(v === 'za' ? 'za' : 'az')}
              options={[
                { value: 'az', label: 'Ad (A–Z)' },
                { value: 'za', label: 'Ad (Z–A)' },
              ]}
              minWidthClass="min-w-[140px]"
            />
          </div>
        </SellzyToolbar>

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