'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 {
  ListDataCard,
  ListDataCardBody,
  ListDataCardHeader,
  ListDataCardTitleBlock,
  ListDataCardToolbar,
  ListPrimaryLink,
  ListStatusBadge,
  ListTableActions,
  listRowIconClass,
} from '@/components/school/list-data-card';
import { TableDownloadAllButton, TableExportMenu } from '@/components/school/table-toolbar';
import { Button } from '@/components/ui/button';
import { SelectNative } from '@/components/ui/select-native';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { useToast } from '@/components/school/toast-context';
import {
  BarChart3,
  CalendarCheck2,
  CircleDollarSign,
  Clock,
  TrendingUp,
  Pencil,
  Plus,
  AlertTriangle,
  Banknote,
  CreditCard,
  ArrowRightLeft,
  RefreshCw,
} from 'lucide-react';
import { BranchSelector } from '@/components/school/branch-selector';
import { useSearchParams } from 'next/navigation';

// ─── Types ────────────────────────────────────────────────────

type Invoice = {
  id: string;
  title: string;
  totalAmount: string | number;
  paidAmount?: string | number;
  status: string;
  dueDate: string;
  billingPeriod?: string | null;
  invoiceType?: string;
  student?: { firstName: string; lastName: string; classroom?: { name: string } | null };
};

type Meta = { page: number; limit: number; total: number; totalPages: number };
type StudentOpt = { id: string; firstName: string; lastName: string };

type DashboardStats = {
  overall: { totalAmount: number; paidAmount: number; pendingAmount: number; overdueAmount: number; paidCount: number; overdueCount: number; collectionRate: number; totalInvoices: number };
  currentMonth: { period: string; totalAmount: number; paidAmount: number; pendingAmount: number; overdueAmount: number; collectionRate: number; totalInvoices: number; paidCount: number };
  recentPayments: Array<{ id: string; amount: number; paymentMethod: string; paidAt: string; invoiceTitle: string; studentName: string }>;
};

// ─── Helpers ─────────────────────────────────────────────────

const paymentMethodIcon = (m: string) => {
  if (m === 'CASH') return <Banknote className="size-3.5 text-emerald-600" />;
  if (m === 'CREDIT_CARD') return <CreditCard className="size-3.5 text-violet-600" />;
  if (m === 'BANK_TRANSFER') return <ArrowRightLeft className="size-3.5 text-blue-600" />;
  return <CircleDollarSign className="size-3.5 text-slate-500" />;
};

const paymentMethodLabel: Record<string, string> = {
  CASH: 'Nakit',
  BANK_TRANSFER: 'Havale',
  CREDIT_CARD: 'Kredi Kartı',
  OTHER: 'Diğer',
};

function fmt(v: number) {
  return v.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

const pillClass =
  'inline-flex h-9 items-center justify-center gap-1.5 rounded-full border border-slate-900/15 bg-white px-4 text-sm font-bold text-slate-800 transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/25 dark:border-white/15 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800';

// ─── Stat Card Component ──────────────────────────────────────

function StatCard({
  label,
  value,
  suffix = '₺',
  icon,
  trend,
  toneClass = 'text-slate-900 dark:text-white',
  bgClass = 'bg-white dark:bg-zinc-900',
}: {
  label: string;
  value: string | number;
  suffix?: string;
  icon: React.ReactNode;
  trend?: string;
  toneClass?: string;
  bgClass?: string;
}) {
  return (
    <div className={`flex items-start justify-between rounded-2xl p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)] ring-1 ring-slate-900/8 dark:ring-white/8 ${bgClass}`}>
      <div>
        <p className="text-xs font-semibold uppercase tracking-[0.08em] text-slate-500 dark:text-zinc-400">{label}</p>
        <p className={`mt-2 text-2xl font-bold tabular-nums tracking-tight ${toneClass}`}>
          {value}
          {suffix && <span className="ml-1 text-base font-normal text-slate-500 dark:text-zinc-400">{suffix}</span>}
        </p>
        {trend && <p className="mt-1 text-xs text-slate-400 dark:text-zinc-500">{trend}</p>}
      </div>
      <div className="ml-4 shrink-0 rounded-xl bg-slate-100 p-2.5 dark:bg-zinc-800">{icon}</div>
    </div>
  );
}

// ─── Collection Rate Bar ──────────────────────────────────────

function CollectionRateBar({ rate }: { rate: number }) {
  const color = rate >= 80 ? 'bg-emerald-500' : rate >= 50 ? 'bg-amber-500' : 'bg-red-500';
  return (
    <div className="flex items-center gap-3">
      <div className="h-2 flex-1 overflow-hidden rounded-full bg-slate-100 dark:bg-zinc-800">
        <div
          className={`h-full rounded-full transition-all duration-700 ${color}`}
          style={{ width: `${Math.min(rate, 100)}%` }}
        />
      </div>
      <span className={`min-w-[3rem] text-right text-sm font-bold tabular-nums ${rate >= 80 ? 'text-emerald-600' : rate >= 50 ? 'text-amber-600' : 'text-red-600'}`}>
        %{rate}
      </span>
    </div>
  );
}

// ─── Main Page ────────────────────────────────────────────────

export default function SchoolFinancePage() {
  const { toast } = useToast();
  const searchParams = useSearchParams();
  const branchId = searchParams.get('branchId') ?? 'all';

  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [statsLoading, setStatsLoading] = useState(true);

  const [items, setItems] = useState<Invoice[]>([]);
  const [meta, setMeta] = useState<Meta | null>(null);
  const [page, setPage] = useState(1);
  const [status, setStatus] = useState('');
  const [invoiceType, setInvoiceType] = useState('');
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const [bulkOpen, setBulkOpen] = useState(false);
  const [students, setStudents] = useState<StudentOpt[]>([]);
  const [bulkForm, setBulkForm] = useState({ amount: '', dueDate: '', description: '', selected: new Set<string>() });
  const [bulkSaving, setBulkSaving] = useState(false);
  const [markingOverdue, setMarkingOverdue] = useState(false);

  // Stats yükle
  useEffect(() => {
    (async () => {
      setStatsLoading(true);
      const res = await apiFetchJson<DashboardStats>('/v1/admin/finance/dashboard');
      if (!res.error) setStats(res.data as DashboardStats);
      setStatsLoading(false);
    })();
  }, []);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    const q = new URLSearchParams();
    q.set('page', String(page));
    q.set('limit', '15');
    if (status) q.set('status', status);
    if (invoiceType) q.set('invoiceType', invoiceType);
    if (search) q.set('search', search);
    if (branchId !== 'all') q.set('branchId', branchId);
    const res = await apiFetchJson<Invoice[]>(`/v1/admin/invoices?${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, status, invoiceType, search, branchId]);

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

  useEffect(() => {
    if (!bulkOpen) return;
    (async () => {
      const res = await apiFetchJson<StudentOpt[]>('/v1/admin/students?limit=500&isActive=true');
      setStudents(Array.isArray(res.data) ? res.data : []);
    })();
  }, [bulkOpen]);

  const handleMarkOverdue = async () => {
    setMarkingOverdue(true);
    const res = await apiFetchJson<{ updated: number }>('/v1/admin/finance/mark-overdue', { method: 'POST' });
    setMarkingOverdue(false);
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else {
      toast({ title: `${(res.data as { updated: number }).updated} fatura "vadesi geçmiş" olarak işaretlendi` });
      load();
    }
  };

  const columns = useMemo<ColumnDef<Invoice>[]>(
    () => [
      {
        id: 'student',
        header: 'Öğrenci',
        cell: ({ row }) => {
          const s = row.original.student;
          return (
            <div>
              <p className="text-sm font-semibold text-slate-900 dark:text-white">
                {s ? `${s.firstName} ${s.lastName}` : '—'}
              </p>
              {s?.classroom && <p className="text-xs text-slate-500 dark:text-zinc-400">{s.classroom.name}</p>}
            </div>
          );
        },
      },
      {
        accessorKey: 'title',
        header: 'Başlık',
        cell: ({ row }) => (
          <div>
            <p className="text-sm text-slate-700 dark:text-zinc-300">{row.original.title}</p>
            {row.original.billingPeriod && (
              <p className="text-xs text-slate-400 dark:text-zinc-500">{row.original.billingPeriod}</p>
            )}
          </div>
        ),
      },
      {
        id: 'amounts',
        header: 'Tutar / Ödenen',
        cell: ({ row }) => {
          const total = parseFloat(String(row.original.totalAmount));
          const paid = parseFloat(String(row.original.paidAmount ?? 0));
          const remaining = total - paid;
          return (
            <div className="tabular-nums">
              <p className="text-sm font-semibold text-slate-900 dark:text-white">{fmt(total)} ₺</p>
              {paid > 0 && paid < total && (
                <p className="text-xs text-amber-600 dark:text-amber-400">Kalan: {fmt(remaining)} ₺</p>
              )}
              {paid >= total && paid > 0 && (
                <p className="text-xs text-emerald-600 dark:text-emerald-400">Tam ödendi</p>
              )}
            </div>
          );
        },
      },
      {
        accessorKey: 'status',
        header: 'Durum',
        cell: ({ row }) => {
          const s = row.original.status;
          if (s === 'PAID') return <ListStatusBadge tone="success">Ödendi</ListStatusBadge>;
          if (s === 'OVERDUE') return <ListStatusBadge tone="warning">Vadesi geçti</ListStatusBadge>;
          if (s === 'CANCELLED') return <ListStatusBadge tone="neutral">İptal</ListStatusBadge>;
          return <ListStatusBadge tone="primary">Bekliyor</ListStatusBadge>;
        },
      },
      {
        accessorKey: 'dueDate',
        header: 'Vade',
        cell: ({ row }) => (
          <span className="text-sm text-slate-600 dark:text-zinc-400">{row.original.dueDate?.slice(0, 10) ?? '—'}</span>
        ),
      },
      {
        id: 'actions',
        header: () => <span className="pr-4">İşlem</span>,
        cell: ({ row }) => (
          <ListTableActions>
            <Link href={`/school/finance/invoices/${row.original.id}`} className={listRowIconClass} aria-label="Düzenle">
              <Pencil className="size-4" strokeWidth={2} />
            </Link>
          </ListTableActions>
        ),
      },
    ],
    [],
  );

  const toggleStudent = (id: string) => {
    setBulkForm((f) => {
      const next = new Set(f.selected);
      if (next.has(id)) next.delete(id); else next.add(id);
      return { ...f, selected: next };
    });
  };

  return (
    <div className="space-y-8">
      <PageHeader
        eyebrow="Finans"
        title="Finans Merkezi"
        description="Aidatlar, ödemeler ve finansal durum tek ekranda."
      />

      {/* ─── Stats Grid ─────────────────────────────────────── */}
      {!statsLoading && stats && (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <StatCard
            label="Bu Ay Beklenen"
            value={fmt(stats.currentMonth.totalAmount)}
            icon={<CalendarCheck2 className="size-5 text-brand-600" />}
            trend={`${stats.currentMonth.totalInvoices} fatura`}
          />
          <StatCard
            label="Bu Ay Tahsil"
            value={fmt(stats.currentMonth.paidAmount)}
            icon={<TrendingUp className="size-5 text-emerald-600" />}
            toneClass="text-emerald-600 dark:text-emerald-400"
            trend={`${stats.currentMonth.paidCount} öğrenci ödedi`}
          />
          <StatCard
            label="Bekleyen"
            value={fmt(stats.currentMonth.pendingAmount)}
            icon={<Clock className="size-5 text-amber-600" />}
            toneClass="text-amber-700 dark:text-amber-400"
          />
          <StatCard
            label="Vadesi Geçmiş"
            value={fmt(stats.overall.overdueAmount)}
            icon={<AlertTriangle className="size-5 text-red-600" />}
            toneClass="text-red-600 dark:text-red-400"
            trend={`${stats.overall.overdueCount} fatura`}
          />
        </div>
      )}

      {/* ─── Collection Rate + Recent Payments ──────────────── */}
      {!statsLoading && stats && (
        <div className="grid gap-4 lg:grid-cols-3">
          {/* Tahsilat oranı */}
          <div className="rounded-2xl bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.05)] ring-1 ring-slate-900/8 dark:bg-zinc-900 dark:ring-white/8">
            <h3 className="mb-4 text-sm font-bold text-slate-900 dark:text-white">Tahsilat Oranı</h3>
            <div className="space-y-4">
              <div>
                <div className="mb-1.5 flex justify-between text-xs text-slate-500 dark:text-zinc-400">
                  <span>Bu Ay</span>
                  <span>{fmt(stats.currentMonth.paidAmount)} / {fmt(stats.currentMonth.totalAmount)} ₺</span>
                </div>
                <CollectionRateBar rate={stats.currentMonth.collectionRate} />
              </div>
              <div>
                <div className="mb-1.5 flex justify-between text-xs text-slate-500 dark:text-zinc-400">
                  <span>Genel Toplam</span>
                  <span>{fmt(stats.overall.paidAmount)} / {fmt(stats.overall.totalAmount)} ₺</span>
                </div>
                <CollectionRateBar rate={stats.overall.collectionRate} />
              </div>
            </div>
            <div className="mt-4 border-t border-slate-100 pt-4 dark:border-zinc-800">
              <Link href="/school/finance/report" className="flex items-center gap-1.5 text-xs font-medium text-brand-600 hover:underline dark:text-brand-400">
                <BarChart3 className="size-3.5" /> Detaylı rapor görüntüle
              </Link>
            </div>
          </div>

          {/* Son ödemeler */}
          <div className="lg:col-span-2 rounded-2xl bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.05)] ring-1 ring-slate-900/8 dark:bg-zinc-900 dark:ring-white/8">
            <div className="mb-4 flex items-center justify-between">
              <h3 className="text-sm font-bold text-slate-900 dark:text-white">Son Ödemeler</h3>
              <Link href="/school/finance/tuition" className="text-xs font-medium text-brand-600 hover:underline dark:text-brand-400">
                Aidat yönetimi →
              </Link>
            </div>
            {stats.recentPayments.length === 0 ? (
              <p className="text-sm text-slate-400 dark:text-zinc-500">Henüz ödeme kaydı yok.</p>
            ) : (
              <ul className="divide-y divide-slate-100 dark:divide-zinc-800">
                {stats.recentPayments.map((p) => (
                  <li key={p.id} className="flex items-center justify-between gap-3 py-2.5">
                    <div className="flex items-center gap-2.5">
                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-slate-50 dark:bg-zinc-800">
                        {paymentMethodIcon(p.paymentMethod)}
                      </div>
                      <div>
                        <p className="text-sm font-medium text-slate-900 dark:text-white">{p.studentName}</p>
                        <p className="text-xs text-slate-500 dark:text-zinc-400">{p.invoiceTitle} · {paymentMethodLabel[p.paymentMethod] ?? p.paymentMethod}</p>
                      </div>
                    </div>
                    <div className="text-right">
                      <p className="text-sm font-semibold tabular-nums text-emerald-600 dark:text-emerald-400">+{fmt(p.amount)} ₺</p>
                      <p className="text-xs text-slate-400 dark:text-zinc-500">{new Date(p.paidAt).toLocaleDateString('tr-TR')}</p>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      )}

      {/* ─── Invoice Table ───────────────────────────────────── */}
      {error ? <p className="text-sm text-red-600">{error}</p> : null}

      <ListDataCard>
        <ListDataCardHeader>
          <ListDataCardTitleBlock
            title="Fatura listesi"
            description="Tüm ödemeler ve durumları"
            action={
              <div className="flex flex-wrap items-center justify-end gap-2">
                <button type="button" className={pillClass} onClick={handleMarkOverdue} disabled={markingOverdue}>
                  <RefreshCw className={`size-4 shrink-0 ${markingOverdue ? 'animate-spin' : ''}`} strokeWidth={2} />
                  {markingOverdue ? 'Kontrol ediliyor…' : 'Vadesi geçenleri işaretle'}
                </button>
                <Link href="/school/finance/report" className={pillClass}>
                  <BarChart3 className="size-4 shrink-0" strokeWidth={2} />
                  Rapor
                </Link>
                <button type="button" className={pillClass} onClick={() => setBulkOpen(true)}>
                  Toplu fatura
                </button>
                <ListPrimaryLink href="/school/finance/invoices/new" className="gap-1.5">
                  <Plus className="size-4 shrink-0" strokeWidth={2.5} />
                  Yeni fatura
                </ListPrimaryLink>
              </div>
            }
          />
          <ListDataCardToolbar>
            <div className="flex flex-wrap items-center gap-3">
              <div className="min-w-[140px]">
                <SelectNative
                  className="h-9 w-full rounded-full border-none bg-gray-200 py-2 pr-8 pl-3 text-sm text-slate-600 ring-1 ring-slate-900/10 focus:ring-2 focus:ring-brand-500/25 dark:bg-zinc-800 dark:text-zinc-300 dark:ring-white/10"
                  value={status}
                  onChange={(e) => { setPage(1); setStatus(e.target.value); }}
                >
                  <option value="">Tüm Durumlar</option>
                  <option value="PENDING">Bekliyor</option>
                  <option value="PAID">Ödendi</option>
                  <option value="OVERDUE">Vadesi geçti</option>
                  <option value="CANCELLED">İptal</option>
                </SelectNative>
              </div>
              <div className="min-w-[140px]">
                <SelectNative
                  className="h-9 w-full rounded-full border-none bg-gray-200 py-2 pr-8 pl-3 text-sm text-slate-600 ring-1 ring-slate-900/10 focus:ring-2 focus:ring-brand-500/25 dark:bg-zinc-800 dark:text-zinc-300 dark:ring-white/10"
                  value={invoiceType}
                  onChange={(e) => { setPage(1); setInvoiceType(e.target.value); }}
                >
                  <option value="">Tüm Tipler</option>
                  <option value="MONTHLY_TUITION">Aylık Aidat</option>
                  <option value="EXTRA_FEE">Ek Ücret</option>
                </SelectNative>
              </div>
              <Input
                placeholder="Öğrenci ara…"
                value={search}
                onChange={(e) => { setPage(1); setSearch(e.target.value); }}
                className="h-9 w-48 rounded-full border-none bg-gray-200 text-sm ring-1 ring-slate-900/10 focus:ring-2 focus:ring-brand-500/25 dark:bg-zinc-800 dark:ring-white/10"
              />
            </div>
            <div className="flex flex-wrap items-center gap-3 lg:ml-auto">
              <BranchSelector />
              <TableExportMenu />
              <TableDownloadAllButton label="Tüm faturaları indir" />
            </div>
          </ListDataCardToolbar>
        </ListDataCardHeader>
        <ListDataCardBody>
          <DataTable columns={columns} data={items} isLoading={loading} emptyMessage="Fatura yok." />
        </ListDataCardBody>
        {meta && meta.total > 0 ? (
          <PaginationBar page={meta.page} totalPages={meta.totalPages} total={meta.total} limit={meta.limit} onPageChange={setPage} />
        ) : null}
      </ListDataCard>

      {/* ─── Bulk Invoice Dialog ─────────────────────────────── */}
      <Dialog open={bulkOpen} onOpenChange={setBulkOpen}>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>Toplu fatura oluştur</DialogTitle>
          </DialogHeader>
          <div className="grid gap-3">
            <div className="space-y-1.5">
              <Label>Tutar (₺)</Label>
              <Input type="number" min={0} step="0.01" value={bulkForm.amount} onChange={(e) => setBulkForm({ ...bulkForm, amount: e.target.value })} />
            </div>
            <div className="space-y-1.5">
              <Label>Vade tarihi</Label>
              <Input type="date" value={bulkForm.dueDate} onChange={(e) => setBulkForm({ ...bulkForm, dueDate: e.target.value })} />
            </div>
            <div className="space-y-1.5">
              <Label>Açıklama</Label>
              <Input value={bulkForm.description} onChange={(e) => setBulkForm({ ...bulkForm, description: e.target.value })} />
            </div>
            <p className="text-xs text-slate-500">Öğrenci seçin ({bulkForm.selected.size} seçili)</p>
            <ul className="max-h-48 space-y-1 overflow-auto rounded-xl border border-slate-100 p-2 text-sm dark:border-zinc-800">
              {students.map((s) => (
                <li key={s.id}>
                  <label className="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-slate-50 dark:hover:bg-zinc-800">
                    <input type="checkbox" checked={bulkForm.selected.has(s.id)} onChange={() => toggleStudent(s.id)} className="rounded" />
                    {s.firstName} {s.lastName}
                  </label>
                </li>
              ))}
            </ul>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setBulkOpen(false)}>İptal</Button>
            <Button
              type="button"
              disabled={bulkSaving || !bulkForm.amount || !bulkForm.dueDate || bulkForm.selected.size === 0}
              onClick={async () => {
                setBulkSaving(true);
                const res = await apiFetchJson('/v1/admin/invoices/generate', {
                  method: 'POST',
                  body: JSON.stringify({ studentIds: [...bulkForm.selected], amount: parseFloat(bulkForm.amount), dueDate: bulkForm.dueDate, description: bulkForm.description || undefined }),
                });
                setBulkSaving(false);
                if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
                else {
                  toast({ title: 'Faturalar oluşturuldu' });
                  setBulkOpen(false);
                  setBulkForm({ amount: '', dueDate: '', description: '', selected: new Set() });
                  load();
                }
              }}
            >
              {bulkSaving ? 'Oluşturuluyor…' : 'Oluştur'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}