'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import {
  TrendingUp,
  TrendingDown,
  CircleDollarSign,
  Clock,
  AlertTriangle,
  CalendarCheck2,
  ArrowRight,
  BarChart3,
  CheckCircle2,
  XCircle,
  Banknote,
  ChevronRight,
  RefreshCw,
} from 'lucide-react';

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

type DashboardStats = {
  overall: {
    totalAmount: number;
    paidAmount: number;
    pendingAmount: number;
    overdueAmount: number;
    paidCount: number;
    pendingCount: 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 ─────────────────────────────────────────────────

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

function fmtInt(v: number) {
  return v.toLocaleString('tr-TR');
}

function periodLabel(period: string) {
  if (!period) return '—';
  const [y, m] = period.split('-');
  const months = ['', 'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'];
  return `${months[parseInt(m)] ?? m} ${y}`;
}

// ─── Sub-components ───────────────────────────────────────────

function Skeleton({ className = '' }: { className?: string }) {
  return <div className={`animate-pulse rounded-lg bg-slate-100 dark:bg-zinc-800 ${className}`} />;
}

function CollectionBar({ rate, paid, total }: { rate: number; paid: number; total: number }) {
  const color =
    rate >= 80 ? 'from-emerald-500 to-emerald-400'
    : rate >= 50 ? 'from-amber-500 to-amber-400'
    : 'from-red-500 to-red-400';
  const textColor =
    rate >= 80 ? 'text-emerald-600 dark:text-emerald-400'
    : rate >= 50 ? 'text-amber-600 dark:text-amber-400'
    : 'text-red-600 dark:text-red-400';

  return (
    <div className="space-y-2">
      <div className="flex items-end justify-between">
        <span className={`text-3xl font-bold tabular-nums ${textColor}`}>%{rate}</span>
        <span className="text-xs text-slate-500 dark:text-zinc-400">
          {fmt(paid)} / {fmt(total)} ₺
        </span>
      </div>
      <div className="relative h-3 overflow-hidden rounded-full bg-slate-100 dark:bg-zinc-800">
        <div
          className={`absolute inset-y-0 left-0 rounded-full bg-gradient-to-r transition-all duration-1000 ${color}`}
          style={{ width: `${Math.min(rate, 100)}%` }}
        />
      </div>
      <div className="flex items-center justify-between text-[11px] text-slate-400 dark:text-zinc-500">
        <span>Tahsilat oranı</span>
        <span className={rate >= 80 ? 'text-emerald-500' : rate >= 50 ? 'text-amber-500' : 'text-red-500'}>
          {rate >= 80 ? 'İyi' : rate >= 50 ? 'Orta' : 'Düşük'}
        </span>
      </div>
    </div>
  );
}

function KpiCard({
  label,
  value,
  suffix = '₺',
  sub,
  icon,
  accent = 'slate',
}: {
  label: string;
  value: string | number;
  suffix?: string;
  sub?: string;
  icon: React.ReactNode;
  accent?: 'slate' | 'emerald' | 'amber' | 'red' | 'violet';
}) {
  const accentMap: Record<string, string> = {
    slate: 'bg-slate-100 dark:bg-zinc-800',
    emerald: 'bg-emerald-50 dark:bg-emerald-950/30',
    amber: 'bg-amber-50 dark:bg-amber-950/30',
    red: 'bg-red-50 dark:bg-red-950/30',
    violet: 'bg-violet-50 dark:bg-violet-950/30',
  };
  const valueMap: Record<string, string> = {
    slate: 'text-slate-900 dark:text-white',
    emerald: 'text-emerald-700 dark:text-emerald-400',
    amber: 'text-amber-700 dark:text-amber-400',
    red: 'text-red-600 dark:text-red-400',
    violet: 'text-violet-700 dark:text-violet-400',
  };

  return (
    <div className="rounded-2xl bg-white p-5 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="flex items-start justify-between gap-3">
        <p className="text-xs font-semibold uppercase tracking-[0.08em] text-slate-500 dark:text-zinc-400">{label}</p>
        <div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${accentMap[accent]}`}>
          {icon}
        </div>
      </div>
      <p className={`mt-3 text-2xl font-bold tabular-nums tracking-tight ${valueMap[accent]}`}>
        {value}
        {suffix && <span className="ml-1 text-sm font-normal text-slate-400 dark:text-zinc-500">{suffix}</span>}
      </p>
      {sub && <p className="mt-1 text-xs text-slate-400 dark:text-zinc-500">{sub}</p>}
    </div>
  );
}

function StatusSegment({ label, count, amount, color }: { label: string; count: number; amount: number; color: string }) {
  return (
    <div className={`flex items-center justify-between rounded-xl p-4 ${color}`}>
      <div>
        <p className="text-xs font-semibold uppercase tracking-[0.07em] text-current opacity-70">{label}</p>
        <p className="mt-1 text-xl font-bold tabular-nums">{fmtInt(count)} <span className="text-sm font-normal opacity-60">adet</span></p>
      </div>
      <p className="text-sm font-semibold tabular-nums opacity-80">{fmt(amount)} ₺</p>
    </div>
  );
}

// Yatay dağılım çubuğu (paid / pending / overdue)
function DistributionBar({ paid, pending, overdue, total }: { paid: number; pending: number; overdue: number; total: number }) {
  if (total === 0) return null;
  const paidPct = Math.round((paid / total) * 100);
  const pendingPct = Math.round((pending / total) * 100);
  const overduePct = 100 - paidPct - pendingPct;

  return (
    <div className="space-y-3">
      <div className="flex h-4 w-full overflow-hidden rounded-full">
        {paidPct > 0 && (
          <div className="bg-emerald-500 transition-all duration-1000" style={{ width: `${paidPct}%` }} title={`Ödendi: %${paidPct}`} />
        )}
        {pendingPct > 0 && (
          <div className="bg-amber-400 transition-all duration-1000" style={{ width: `${pendingPct}%` }} title={`Bekliyor: %${pendingPct}`} />
        )}
        {overduePct > 0 && (
          <div className="bg-red-400 transition-all duration-1000" style={{ width: `${overduePct}%` }} title={`Vadesi geçti: %${overduePct}`} />
        )}
      </div>
      <div className="flex flex-wrap gap-x-5 gap-y-1">
        <span className="flex items-center gap-1.5 text-xs text-slate-600 dark:text-zinc-400">
          <span className="inline-block h-2.5 w-2.5 rounded-sm bg-emerald-500" />
          Ödendi %{paidPct}
        </span>
        <span className="flex items-center gap-1.5 text-xs text-slate-600 dark:text-zinc-400">
          <span className="inline-block h-2.5 w-2.5 rounded-sm bg-amber-400" />
          Bekliyor %{pendingPct}
        </span>
        <span className="flex items-center gap-1.5 text-xs text-slate-600 dark:text-zinc-400">
          <span className="inline-block h-2.5 w-2.5 rounded-sm bg-red-400" />
          Vadesi geçti %{overduePct}
        </span>
      </div>
    </div>
  );
}

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

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

export default function FinanceReportPage() {
  const [data, setData] = useState<DashboardStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [lastRefreshed, setLastRefreshed] = useState<Date | null>(null);

  const load = async () => {
    setLoading(true);
    setError('');
    const res = await apiFetchJson<DashboardStats>('/v1/admin/finance/dashboard');
    if (res.error) setError(res.error);
    else { setData(res.data as DashboardStats); setLastRefreshed(new Date()); }
    setLoading(false);
  };

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

  const o = data?.overall;
  const cm = data?.currentMonth;

  return (
    <div className="space-y-8">
      <PageHeader
        title="Finansal Rapor"
        description="Tüm dönemlere ait tahsilat özeti ve güncel finans durumu."
        backHref="/school/finance"
        actions={
          <button
            onClick={load}
            disabled={loading}
            className="inline-flex h-9 items-center gap-2 rounded-full border border-slate-900/12 bg-white px-4 text-sm font-medium text-slate-700 shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-colors hover:bg-slate-50 disabled:opacity-50 dark:border-white/12 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
          >
            <RefreshCw className={`size-3.5 ${loading ? 'animate-spin' : ''}`} />
            Yenile
          </button>
        }
      />

      {error ? (
        <div className="flex items-center gap-3 rounded-2xl bg-red-50 p-4 text-sm text-red-700 ring-1 ring-red-100 dark:bg-red-950/20 dark:text-red-400 dark:ring-red-900/30">
          <XCircle className="size-4 shrink-0" />
          {error}
        </div>
      ) : null}

      {/* ─── Loading skeletons ──────────────────────────────── */}
      {loading && !data && (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-28" />)}
        </div>
      )}

      {data && o && cm && (
        <>
          {/* ─── Bu Ay Özet ──────────────────────────────────── */}
          <section>
            <div className="mb-3 flex items-center justify-between">
              <h2 className="text-sm font-semibold text-slate-900 dark:text-white">
                Bu Ay —{' '}
                <span className="font-normal text-slate-500 dark:text-zinc-400">{periodLabel(cm.period)}</span>
              </h2>
              <Link
                href="/school/finance/tuition"
                className="flex items-center gap-1 text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
              >
                Aidat yönetimi <ChevronRight className="size-3.5" />
              </Link>
            </div>

            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <KpiCard
                label="Bu Ay Kesildi"
                value={fmt(cm.totalAmount)}
                sub={`${fmtInt(cm.totalInvoices)} fatura`}
                icon={<CalendarCheck2 className="size-5 text-violet-600" />}
                accent="violet"
              />
              <KpiCard
                label="Bu Ay Tahsil"
                value={fmt(cm.paidAmount)}
                sub={`${fmtInt(cm.paidCount)} öğrenci ödedi`}
                icon={<TrendingUp className="size-5 text-emerald-600" />}
                accent="emerald"
              />
              <KpiCard
                label="Bu Ay Bekleyen"
                value={fmt(cm.pendingAmount)}
                icon={<Clock className="size-5 text-amber-600" />}
                accent="amber"
              />
              <KpiCard
                label="Bu Ay Vadesi Geçmiş"
                value={fmt(cm.overdueAmount)}
                icon={<AlertTriangle className="size-5 text-red-600" />}
                accent="red"
              />
            </div>
          </section>

          {/* ─── Tahsilat Oranı + Dağılım ─────────────────────── */}
          <div className="grid gap-4 lg:grid-cols-3">
            {/* Bu Ay Tahsilat */}
            <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">
              <p className="mb-4 text-xs font-semibold uppercase tracking-[0.08em] text-slate-500 dark:text-zinc-400">
                Bu Ay Tahsilat Oranı
              </p>
              <CollectionBar rate={cm.collectionRate} paid={cm.paidAmount} total={cm.totalAmount} />
            </div>

            {/* Genel Tahsilat */}
            <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">
              <p className="mb-4 text-xs font-semibold uppercase tracking-[0.08em] text-slate-500 dark:text-zinc-400">
                Genel Tahsilat Oranı
              </p>
              <CollectionBar rate={o.collectionRate} paid={o.paidAmount} total={o.totalAmount} />
            </div>

            {/* Fatura dağılımı */}
            <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">
              <p className="mb-4 text-xs font-semibold uppercase tracking-[0.08em] text-slate-500 dark:text-zinc-400">
                Fatura Dağılımı (Tüm Dönemler)
              </p>
              <DistributionBar
                paid={o.paidCount}
                pending={o.pendingCount ?? Math.max(0, o.totalInvoices - o.paidCount - o.overdueCount)}
                overdue={o.overdueCount}
                total={o.totalInvoices}
              />
            </div>
          </div>

          {/* ─── Genel Durum Kartları ─────────────────────────── */}
          <section>
            <h2 className="mb-3 text-sm font-semibold text-slate-900 dark:text-white">
              Genel Özet —{' '}
              <span className="font-normal text-slate-500 dark:text-zinc-400">Tüm dönemler</span>
            </h2>

            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <KpiCard
                label="Toplam Fatura"
                value={fmtInt(o.totalInvoices)}
                suffix="adet"
                icon={<BarChart3 className="size-5 text-slate-600 dark:text-zinc-300" />}
                accent="slate"
              />
              <KpiCard
                label="Toplam Tutar"
                value={fmt(o.totalAmount)}
                icon={<CircleDollarSign className="size-5 text-slate-600 dark:text-zinc-300" />}
                accent="slate"
              />
              <KpiCard
                label="Tahsil Edilen"
                value={fmt(o.paidAmount)}
                sub={`${fmtInt(o.paidCount)} fatura ödendi`}
                icon={<CheckCircle2 className="size-5 text-emerald-600" />}
                accent="emerald"
              />
              <KpiCard
                label="Vadesi Geçmiş Tutar"
                value={fmt(o.overdueAmount)}
                sub={`${fmtInt(o.overdueCount)} fatura bekliyor`}
                icon={<TrendingDown className="size-5 text-red-600" />}
                accent="red"
              />
            </div>
          </section>

          {/* ─── Durum Segmentleri + Son Ödemeler ────────────── */}
          <div className="grid gap-4 lg:grid-cols-5">
            {/* Fatura Durumları */}
            <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">
              <h3 className="mb-4 text-sm font-bold text-slate-900 dark:text-white">Durum Dökümü</h3>
              <div className="space-y-2.5">
                <StatusSegment
                  label="Ödendi"
                  count={o.paidCount}
                  amount={o.paidAmount}
                  color="rounded-xl bg-emerald-50 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300"
                />
                <StatusSegment
                  label="Bekliyor"
                  count={o.pendingCount ?? Math.max(0, o.totalInvoices - o.paidCount - o.overdueCount)}
                  amount={o.pendingAmount}
                  color="rounded-xl bg-amber-50 text-amber-800 dark:bg-amber-950/30 dark:text-amber-300"
                />
                <StatusSegment
                  label="Vadesi Geçmiş"
                  count={o.overdueCount}
                  amount={o.overdueAmount}
                  color="rounded-xl bg-red-50 text-red-800 dark:bg-red-950/30 dark:text-red-300"
                />
              </div>
            </div>

            {/* Son Ödemeler */}
            <div className="lg:col-span-3 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"
                  className="flex items-center gap-1 text-xs font-medium text-violet-600 hover:underline dark:text-violet-400"
                >
                  Tüm faturalar <ChevronRight className="size-3.5" />
                </Link>
              </div>

              {data.recentPayments.length === 0 ? (
                <div className="flex flex-col items-center justify-center py-8 text-center">
                  <Banknote className="mb-2 size-8 text-slate-300 dark:text-zinc-600" />
                  <p className="text-sm text-slate-400 dark:text-zinc-500">Henüz ödeme kaydı yok.</p>
                </div>
              ) : (
                <ul className="divide-y divide-slate-100 dark:divide-zinc-800">
                  {data.recentPayments.map((p) => (
                    <li key={p.id} className="flex items-center justify-between gap-3 py-3">
                      <div className="flex min-w-0 items-center gap-3">
                        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-slate-50 dark:bg-zinc-800">
                          <Banknote className="size-4 text-slate-500 dark:text-zinc-400" />
                        </div>
                        <div className="min-w-0">
                          <p className="truncate text-sm font-medium text-slate-900 dark:text-white">{p.studentName}</p>
                          <p className="truncate text-xs text-slate-400 dark:text-zinc-500">
                            {p.invoiceTitle} · {paymentMethodLabel[p.paymentMethod] ?? p.paymentMethod}
                          </p>
                        </div>
                      </div>
                      <div className="shrink-0 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>

          {/* ─── Hızlı Erişim ────────────────────────────────── */}
          <div className="grid gap-3 sm:grid-cols-3">
            <Link
              href="/school/finance"
              className="group flex items-center justify-between rounded-2xl bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)] ring-1 ring-slate-900/8 transition-shadow hover:shadow-md dark:bg-zinc-900 dark:ring-white/8"
            >
              <div>
                <p className="text-sm font-semibold text-slate-900 dark:text-white">Fatura Listesi</p>
                <p className="mt-0.5 text-xs text-slate-500 dark:text-zinc-400">Tüm faturaları görüntüle ve yönet</p>
              </div>
              <ArrowRight className="size-4 text-slate-400 transition-transform group-hover:translate-x-0.5 dark:text-zinc-500" />
            </Link>
            <Link
              href="/school/finance/tuition"
              className="group flex items-center justify-between rounded-2xl bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)] ring-1 ring-slate-900/8 transition-shadow hover:shadow-md dark:bg-zinc-900 dark:ring-white/8"
            >
              <div>
                <p className="text-sm font-semibold text-slate-900 dark:text-white">Aidat Yönetimi</p>
                <p className="mt-0.5 text-xs text-slate-500 dark:text-zinc-400">Aylık aidat tablosu ve fatura üretimi</p>
              </div>
              <ArrowRight className="size-4 text-slate-400 transition-transform group-hover:translate-x-0.5 dark:text-zinc-500" />
            </Link>
            <Link
              href="/school/finance/invoices/new"
              className="group flex items-center justify-between rounded-2xl bg-violet-600 p-5 shadow-[0_1px_2px_rgba(15,23,42,0.1)] transition-shadow hover:shadow-md hover:bg-violet-700"
            >
              <div>
                <p className="text-sm font-semibold text-white">Yeni Fatura</p>
                <p className="mt-0.5 text-xs text-violet-200">Tekil fatura oluştur</p>
              </div>
              <ArrowRight className="size-4 text-violet-200 transition-transform group-hover:translate-x-0.5" />
            </Link>
          </div>

          {lastRefreshed && (
            <p className="text-center text-xs text-slate-400 dark:text-zinc-600">
              Son güncelleme: {lastRefreshed.toLocaleTimeString('tr-TR')}
            </p>
          )}
        </>
      )}
    </div>
  );
}