'use client';

import { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { format, parseISO, isPast, isToday } from 'date-fns';
import { tr } from 'date-fns/locale';
import {
  Receipt,
  CheckCircle2,
  AlertCircle,
  Clock,
  XCircle,
  TrendingUp,
  ChevronRight,
  Loader2,
  Baby,
  CalendarDays,
  CreditCard,
  Filter,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';

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

type Student = {
  firstName: string;
  lastName: string;
};

type Invoice = {
  id: string;
  title: string;
  invoiceType: 'MONTHLY_TUITION' | 'EXTRA_FEE';
  billingPeriod?: string | null;
  amount: number | string;
  taxAmount: number | string;
  totalAmount: number | string;
  paidAmount: number | string;
  dueDate: string;
  status: 'PENDING' | 'PAID' | 'OVERDUE' | 'CANCELLED';
  paidAt?: string | null;
  notes?: string | null;
  createdAt: string;
  student?: Student;
};

type FilterStatus = 'ALL' | 'PENDING' | 'PAID' | 'OVERDUE' | 'CANCELLED';

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

function toNumber(val: number | string | undefined | null): number {
  if (val == null) return 0;
  return typeof val === 'number' ? val : parseFloat(String(val)) || 0;
}

function formatCurrency(val: number | string | undefined | null): string {
  return new Intl.NumberFormat('tr-TR', {
    style: 'currency',
    currency: 'TRY',
    maximumFractionDigits: 2,
  }).format(toNumber(val));
}

function parseDateSafe(dateStr: string) {
  try {
    return parseISO(dateStr);
  } catch {
    return new Date(dateStr);
  }
}

function formatBillingPeriod(period?: string | null): string {
  if (!period) return '';
  try {
    const [year, month] = period.split('-');
    const d = new Date(parseInt(year), parseInt(month) - 1, 1);
    return format(d, 'MMMM yyyy', { locale: tr });
  } catch {
    return period;
  }
}

function isDueSoon(dueDate: string): boolean {
  try {
    const d = parseDateSafe(dueDate);
    const threeDays = new Date();
    threeDays.setDate(threeDays.getDate() + 3);
    return !isPast(d) && d <= threeDays;
  } catch {
    return false;
  }
}

// ─── Status Config ────────────────────────────────────────────

const STATUS_CONFIG = {
  PENDING: {
    label: 'Bekliyor',
    icon: Clock,
    badge: 'bg-amber-100 text-amber-700',
    dot: 'bg-amber-500',
    card: 'border-amber-200/60 bg-amber-50/30',
  },
  PAID: {
    label: 'Ödendi',
    icon: CheckCircle2,
    badge: 'bg-emerald-100 text-emerald-700',
    dot: 'bg-emerald-500',
    card: 'border-zinc-200/80 bg-white',
  },
  OVERDUE: {
    label: 'Gecikmiş',
    icon: AlertCircle,
    badge: 'bg-red-100 text-red-700',
    dot: 'bg-red-500',
    card: 'border-red-200/60 bg-red-50/30',
  },
  CANCELLED: {
    label: 'İptal',
    icon: XCircle,
    badge: 'bg-zinc-100 text-zinc-500',
    dot: 'bg-zinc-400',
    card: 'border-zinc-200/80 bg-white',
  },
};

// ─── Invoice Type Label ───────────────────────────────────────

function invoiceTypeLabel(type: Invoice['invoiceType']): string {
  return type === 'MONTHLY_TUITION' ? 'Aylık Aidat' : 'Ek Ücret';
}

// ─── Summary Card ─────────────────────────────────────────────

function SummaryCard({ icon: Icon, label, value, sub, accent }: {
  icon: React.ElementType;
  label: string;
  value: string;
  sub?: string;
  accent: string;
}) {
  return (
    <div className="flex items-start gap-4 rounded-2xl border border-zinc-200/80 bg-white p-5 shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
      <div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${accent}`}>
        <Icon className="size-5" strokeWidth={1.8} />
      </div>
      <div className="min-w-0">
        <p className="text-xs font-semibold uppercase tracking-[0.08em] text-zinc-400">{label}</p>
        <p className="mt-1 text-xl font-bold tabular-nums text-zinc-900 leading-tight">{value}</p>
        {sub && <p className="mt-0.5 text-xs text-zinc-400">{sub}</p>}
      </div>
    </div>
  );
}

// ─── Invoice Row ──────────────────────────────────────────────

function InvoiceRow({ invoice }: { invoice: Invoice }) {
  const cfg = STATUS_CONFIG[invoice.status];
  const StatusIcon = cfg.icon;
  const paid = toNumber(invoice.paidAmount);
  const total = toNumber(invoice.totalAmount);
  const remaining = Math.max(total - paid, 0);
  const paidPct = total > 0 ? Math.round((paid / total) * 100) : 0;
  const dueSoon = invoice.status === 'PENDING' && isDueSoon(invoice.dueDate);
  const dueDate = parseDateSafe(invoice.dueDate);

  return (
    <div className={`group overflow-hidden rounded-2xl border shadow-[0_1px_2px_rgba(15,23,42,0.05)] transition-shadow hover:shadow-md ${cfg.card}`}>
      <div className="p-5">
        {/* Top row */}
        <div className="flex items-start gap-3">
          <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl
            ${invoice.status === 'PAID' ? 'bg-emerald-100' :
              invoice.status === 'OVERDUE' ? 'bg-red-100' :
              invoice.status === 'CANCELLED' ? 'bg-zinc-100' :
              'bg-amber-100'}`}
          >
            <StatusIcon className={`size-5
              ${invoice.status === 'PAID' ? 'text-emerald-600' :
                invoice.status === 'OVERDUE' ? 'text-red-600' :
                invoice.status === 'CANCELLED' ? 'text-zinc-400' :
                'text-amber-600'}`}
              strokeWidth={1.8}
            />
          </div>

          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-2">
              <h3 className="truncate text-sm font-bold text-zinc-900">{invoice.title}</h3>
              {dueSoon && (
                <span className="inline-flex items-center rounded-full bg-orange-100 px-2 py-0.5 text-[10px] font-bold text-orange-700">
                  Son 3 gün
                </span>
              )}
            </div>
            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-zinc-400">
              <span className="flex items-center gap-1">
                <Receipt className="size-3" />
                {invoiceTypeLabel(invoice.invoiceType)}
              </span>
              {invoice.billingPeriod && (
                <>
                  <span className="text-zinc-200">·</span>
                  <span className="flex items-center gap-1">
                    <CalendarDays className="size-3" />
                    {formatBillingPeriod(invoice.billingPeriod)}
                  </span>
                </>
              )}
              {invoice.student && (
                <>
                  <span className="text-zinc-200">·</span>
                  <span className="flex items-center gap-1">
                    <Baby className="size-3" />
                    {invoice.student.firstName} {invoice.student.lastName}
                  </span>
                </>
              )}
            </div>
          </div>

          {/* Status badge + Amount */}
          <div className="flex shrink-0 flex-col items-end gap-1.5">
            <p className="text-base font-bold tabular-nums text-zinc-900">
              {formatCurrency(invoice.totalAmount)}
            </p>
            <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold ${cfg.badge}`}>
              <span className={`h-1.5 w-1.5 rounded-full ${cfg.dot}`} />
              {cfg.label}
            </span>
          </div>
        </div>

        {/* Progress bar (partial payment) */}
        {invoice.status !== 'CANCELLED' && paid > 0 && total > 0 && (
          <div className="mt-4">
            <div className="mb-1.5 flex items-center justify-between text-xs text-zinc-400">
              <span>Ödenen: {formatCurrency(paid)}</span>
              <span>Kalan: {formatCurrency(remaining)}</span>
            </div>
            <div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-100">
              <div
                className={`h-full rounded-full transition-all duration-500
                  ${invoice.status === 'PAID' ? 'bg-emerald-500' : 'bg-amber-500'}`}
                style={{ width: `${paidPct}%` }}
              />
            </div>
          </div>
        )}

        {/* Due date line */}
        <div className="mt-4 flex items-center justify-between">
          <div className="flex items-center gap-1.5 text-xs">
            <Clock className={`size-3.5 ${
              invoice.status === 'OVERDUE' ? 'text-red-500' :
              dueSoon ? 'text-orange-500' :
              'text-zinc-400'
            }`} />
            <span className={
              invoice.status === 'OVERDUE' ? 'font-semibold text-red-600' :
              dueSoon ? 'font-semibold text-orange-600' :
              'text-zinc-500'
            }>
              {invoice.status === 'OVERDUE'
                ? `Vade geçti: ${format(dueDate, 'd MMM yyyy', { locale: tr })}`
                : invoice.status === 'PAID' && invoice.paidAt
                ? `Ödeme: ${format(parseDateSafe(invoice.paidAt), 'd MMM yyyy', { locale: tr })}`
                : `Vade: ${format(dueDate, 'd MMM yyyy', { locale: tr })}`
              }
            </span>
          </div>

          {(invoice.status === 'PENDING' || invoice.status === 'OVERDUE') && (
            <Link
              href="/parent/invoices"
              className="flex items-center gap-1 rounded-lg bg-indigo-600 px-3 py-1.5 text-[11px] font-semibold text-white transition-colors hover:bg-indigo-700"
            >
              <CreditCard className="size-3" />
              Ödeme Yap
            </Link>
          )}
        </div>

        {invoice.notes && (
          <p className="mt-3 rounded-lg border border-zinc-100 bg-zinc-50 px-3 py-2 text-xs text-zinc-500">
            {invoice.notes}
          </p>
        )}
      </div>
    </div>
  );
}

// ─── Filter Tab ───────────────────────────────────────────────

function FilterTab({
  value,
  active,
  label,
  count,
  onClick,
}: {
  value: FilterStatus;
  active: boolean;
  label: string;
  count: number;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={`flex shrink-0 items-center gap-2 rounded-xl px-3.5 py-2 text-sm font-semibold transition-all
        ${active
          ? 'bg-indigo-600 text-white shadow-sm'
          : 'bg-white text-zinc-500 ring-1 ring-zinc-200 hover:bg-zinc-50 hover:text-zinc-800'
        }`}
    >
      {label}
      {count > 0 && (
        <span className={`rounded-full px-1.5 py-0.5 text-[10px] font-bold
          ${active ? 'bg-white/20 text-white' : 'bg-zinc-100 text-zinc-500'}`}>
          {count}
        </span>
      )}
    </button>
  );
}

function Skeleton({ className }: { className?: string }) {
  return <div className={`animate-pulse rounded-2xl bg-zinc-100 ${className}`} />;
}

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

export default function ParentInvoicesPage() {
  const [invoices, setInvoices] = useState<Invoice[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [filter, setFilter] = useState<FilterStatus>('ALL');

  useEffect(() => {
    (async () => {
      setLoading(true);
      const res = await apiFetchJson<{ items?: Invoice[] } | Invoice[]>('/v1/parent/invoices');
      if (res.error) {
        setError(res.error);
      } else {
        const data = res.data;
        setInvoices(Array.isArray(data) ? data : (data as { items?: Invoice[] })?.items ?? []);
      }
      setLoading(false);
    })();
  }, []);

  // ─── Computed ───────────────────────────────────────────────
  const summary = useMemo(() => {
    const pending = invoices.filter((i) => i.status === 'PENDING');
    const overdue = invoices.filter((i) => i.status === 'OVERDUE');
    const paid = invoices.filter((i) => i.status === 'PAID');

    const totalOwed = [...pending, ...overdue].reduce((s, i) => s + toNumber(i.totalAmount) - toNumber(i.paidAmount), 0);
    const totalPaid = paid.reduce((s, i) => s + toNumber(i.paidAmount), 0);

    return { pending: pending.length, overdue: overdue.length, paid: paid.length, totalOwed, totalPaid };
  }, [invoices]);

  const counts: Record<FilterStatus, number> = useMemo(() => ({
    ALL: invoices.length,
    PENDING: invoices.filter((i) => i.status === 'PENDING').length,
    PAID: invoices.filter((i) => i.status === 'PAID').length,
    OVERDUE: invoices.filter((i) => i.status === 'OVERDUE').length,
    CANCELLED: invoices.filter((i) => i.status === 'CANCELLED').length,
  }), [invoices]);

  const filtered = useMemo(() =>
    filter === 'ALL' ? invoices : invoices.filter((i) => i.status === filter),
    [invoices, filter],
  );

  return (
    <div className="space-y-6 pb-8 font-urbanist">

      {/* ─── Hero Banner ──────────────────────────────────────── */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-amber-500 via-orange-500 to-rose-600 p-6 text-white shadow-lg">
        <div className="pointer-events-none absolute -right-10 -top-10 h-48 w-48 rounded-full bg-white/[0.06]" />
        <div className="pointer-events-none absolute -bottom-8 right-20 h-32 w-32 rounded-full bg-white/[0.04]" />

        <div className="relative flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-100">
              Veli Paneli
            </p>
            <h1 className="mt-1.5 text-2xl font-bold tracking-tight">Faturalar</h1>
            <p className="mt-1 text-sm text-amber-100/70">
              Aidat, ödeme geçmişi ve borç takibi
            </p>
          </div>

          {!loading && (
            <div className="flex shrink-0 flex-col gap-2 sm:items-end">
              {summary.overdue > 0 ? (
                <div className="flex items-center gap-2.5 rounded-2xl border border-red-400/30 bg-red-500/20 px-4 py-3 backdrop-blur-sm">
                  <AlertCircle className="size-4 text-red-300" />
                  <div>
                    <p className="text-[10px] font-semibold uppercase tracking-wide text-red-200">Gecikmiş</p>
                    <p className="text-base font-bold">{summary.overdue} fatura</p>
                  </div>
                </div>
              ) : summary.pending > 0 ? (
                <div className="flex items-center gap-2.5 rounded-2xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur-sm">
                  <Clock className="size-4 text-amber-200" />
                  <div>
                    <p className="text-[10px] font-semibold uppercase tracking-wide text-amber-200/70">Bekleyen</p>
                    <p className="text-base font-bold">{summary.pending} fatura</p>
                  </div>
                </div>
              ) : (
                <div className="flex items-center gap-2.5 rounded-2xl border border-white/15 bg-white/10 px-4 py-3 backdrop-blur-sm">
                  <CheckCircle2 className="size-4 text-emerald-300" />
                  <div>
                    <p className="text-[10px] font-semibold uppercase tracking-wide text-amber-200/70">Durum</p>
                    <p className="text-sm font-bold">Tüm ödemeler tamam</p>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* ─── Error ──────────────────────────────────────────────── */}
      {error && (
        <div className="flex items-center gap-3 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <AlertCircle className="size-4 shrink-0" />
          {error}
        </div>
      )}

      {/* ─── Summary Cards ──────────────────────────────────────── */}
      {!loading && invoices.length > 0 && (
        <div className="grid gap-3 sm:grid-cols-3">
          <SummaryCard
            icon={TrendingUp}
            label="Toplam Borç"
            value={formatCurrency(summary.totalOwed)}
            sub={summary.overdue > 0 ? `${summary.overdue} gecikmiş dahil` : `${summary.pending} bekleyen`}
            accent="bg-amber-50 text-amber-600"
          />
          <SummaryCard
            icon={CheckCircle2}
            label="Toplam Ödenen"
            value={formatCurrency(summary.totalPaid)}
            sub={`${summary.paid} fatura ödendi`}
            accent="bg-emerald-50 text-emerald-600"
          />
          <SummaryCard
            icon={Receipt}
            label="Toplam Fatura"
            value={`${invoices.length} adet`}
            sub={`${summary.pending + summary.overdue} aktif`}
            accent="bg-indigo-50 text-indigo-600"
          />
        </div>
      )}

      {/* ─── Loading ───────────────────────────────────────────── */}
      {loading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => <Skeleton key={i} className="h-36" />)}
        </div>
      ) : invoices.length === 0 ? (
        /* ─── Empty ──────────────────────────────────────────── */
        <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-zinc-200 py-20 text-center">
          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-50">
            <Receipt className="size-8 text-amber-400" strokeWidth={1.5} />
          </div>
          <p className="mt-4 font-semibold text-zinc-600">Henüz fatura yok</p>
          <p className="mt-1 text-sm text-zinc-400">
            Oluşturulan faturalar burada görünecektir.
          </p>
          <Link
            href="/parent/dashboard"
            className="mt-5 inline-flex items-center gap-2 rounded-xl bg-amber-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-amber-600"
          >
            Panele dön
          </Link>
        </div>
      ) : (
        <>
          {/* ─── Filter Tabs ─────────────────────────────────── */}
          <div>
            <div className="mb-3 flex items-center gap-2">
              <Filter className="size-3.5 text-zinc-400" />
              <span className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Filtrele</span>
            </div>
            <div className="flex gap-2 overflow-x-auto pb-1">
              {(
                [
                  { value: 'ALL' as FilterStatus, label: 'Tümü' },
                  { value: 'OVERDUE' as FilterStatus, label: 'Gecikmiş' },
                  { value: 'PENDING' as FilterStatus, label: 'Bekliyor' },
                  { value: 'PAID' as FilterStatus, label: 'Ödendi' },
                  { value: 'CANCELLED' as FilterStatus, label: 'İptal' },
                ] as const
              ).map((tab) => (
                <FilterTab
                  key={tab.value}
                  value={tab.value}
                  active={filter === tab.value}
                  label={tab.label}
                  count={counts[tab.value]}
                  onClick={() => setFilter(tab.value)}
                />
              ))}
            </div>
          </div>

          {/* ─── Invoice List ─────────────────────────────────── */}
          {filtered.length === 0 ? (
            <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-200 py-14 text-center">
              <Receipt className="size-8 text-zinc-200" />
              <p className="mt-3 text-sm text-zinc-400">Bu filtrede fatura bulunamadı.</p>
              <button
                type="button"
                onClick={() => setFilter('ALL')}
                className="mt-3 text-xs font-medium text-indigo-600 hover:underline"
              >
                Filtreyi temizle
              </button>
            </div>
          ) : (
            <div className="space-y-3">
              {filtered.map((inv) => (
                <InvoiceRow key={inv.id} invoice={inv} />
              ))}
            </div>
          )}

          {/* ─── Footer Link ──────────────────────────────────── */}
          <div className="flex items-center justify-between rounded-2xl border border-zinc-200/80 bg-white px-5 py-4 shadow-[0_1px_2px_rgba(15,23,42,0.05)]">
            <div className="flex items-center gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-50">
                <CreditCard className="size-4 text-indigo-600" strokeWidth={1.8} />
              </div>
              <div>
                <p className="text-sm font-semibold text-zinc-800">Ödeme yapmak için</p>
                <p className="text-xs text-zinc-400">Okul yönetimiyle iletişime geçin</p>
              </div>
            </div>
            <Link
              href="/parent/notifications"
              className="flex items-center gap-1.5 text-xs font-semibold text-indigo-600 hover:underline"
            >
              Mesajlar
              <ChevronRight className="size-3.5" />
            </Link>
          </div>
        </>
      )}

      {loading && (
        <div className="flex items-center justify-center gap-2 py-4 text-sm text-zinc-400">
          <Loader2 className="size-4 animate-spin" />
          Yükleniyor…
        </div>
      )}
    </div>
  );
}