'use client';

import { useEffect, useState } from 'react';
import { apiFetchJson } from '@/lib/auth';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';

interface FinanceSummary {
  totalInvoices: number;
  pendingInvoices: number;
  paidInvoices: number;
  overdueInvoices: number;
  cancelledInvoices: number;
  totalPaidAmount: number;
  monthlyRevenue: number;
  recentInvoices: Invoice[];
}

interface Invoice {
  id: string;
  title: string;
  status: string;
  totalAmount: number | null;
  amount: number | null;
  dueDate: string | null;
  paidAt: string | null;
  createdAt: string;
  tenant: { name: string; slug: string } | null;
}

interface PaymentsData {
  items: Invoice[];
  meta: { page: number; limit: number; total: number; totalPages: number };
}

const STATUS_BADGE: Record<string, string> = {
  PAID: 'bg-emerald-100 text-emerald-700',
  PENDING: 'bg-amber-100 text-amber-700',
  OVERDUE: 'bg-red-100 text-red-700',
  CANCELLED: 'bg-slate-100 text-slate-500',
};

const STATUS_LABELS: Record<string, string> = {
  PAID: 'Ödendi',
  PENDING: 'Bekliyor',
  OVERDUE: 'Gecikmiş',
  CANCELLED: 'İptal',
};

function fmt(n: number | null | undefined) {
  return (n ?? 0).toLocaleString('tr-TR', { minimumFractionDigits: 2 }) + ' ₺';
}

function fmtDate(d: string | null) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('tr-TR', { day: '2-digit', month: 'short', year: 'numeric' });
}

const MONTH_NAMES = ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'];

function buildMonthlyData(invoices: Invoice[]) {
  const map: Record<string, number> = {};
  for (const inv of invoices) {
    if (inv.status === 'PAID' && inv.paidAt) {
      const d = new Date(inv.paidAt);
      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
      map[key] = (map[key] || 0) + Number(inv.totalAmount ?? inv.amount ?? 0);
    }
  }
  // Last 6 months
  const result = [];
  for (let i = 5; i >= 0; i--) {
    const d = new Date();
    d.setMonth(d.getMonth() - i);
    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
    result.push({ month: MONTH_NAMES[d.getMonth()], amount: map[key] || 0 });
  }
  return result;
}

export default function FinancePage() {
  const [summary, setSummary] = useState<FinanceSummary | null>(null);
  const [payments, setPayments] = useState<PaymentsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('all');
  const [page, setPage] = useState(1);

  const statusFilter = activeTab === 'all' ? '' : activeTab.toUpperCase();

  const load = async (p = 1, status = '') => {
    setLoading(true);
    try {
      const [sumRes, payRes] = await Promise.all([
        summary ? Promise.resolve(null) : apiFetchJson<FinanceSummary>('/v1/platform/finance/summary'),
        apiFetchJson<PaymentsData>(`/v1/platform/finance/payments?page=${p}&limit=15${status ? `&status=${status}` : ''}`),
      ]);
      if (sumRes && sumRes.error === null && sumRes.data) setSummary(sumRes.data);
      if (payRes && payRes.error === null && payRes.data) setPayments(payRes.data);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    setSummary(null);
    load(1, statusFilter);
    setPage(1);
  }, [activeTab]);

  useEffect(() => {
    if (page > 1) load(page, statusFilter);
  }, [page]);

  const monthlyData = summary ? buildMonthlyData(summary.recentInvoices) : [];

  const statCards = summary
    ? [
        {
          label: 'Toplam Tahsilat',
          value: fmt(summary.totalPaidAmount),
          icon: (
            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          ),
          color: 'emerald',
          bg: 'bg-emerald-50',
          iconColor: 'text-emerald-600',
          valueColor: 'text-emerald-700',
        },
        {
          label: 'Bu Ay Gelir',
          value: fmt(summary.monthlyRevenue),
          icon: (
            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
            </svg>
          ),
          color: 'indigo',
          bg: 'bg-indigo-50',
          iconColor: 'text-indigo-600',
          valueColor: 'text-indigo-700',
        },
        {
          label: 'Bekleyen Fatura',
          value: summary.pendingInvoices,
          icon: (
            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          ),
          color: 'amber',
          bg: 'bg-amber-50',
          iconColor: 'text-amber-600',
          valueColor: 'text-amber-700',
        },
        {
          label: 'Gecikmiş Fatura',
          value: summary.overdueInvoices,
          icon: (
            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          ),
          color: 'red',
          bg: 'bg-red-50',
          iconColor: 'text-red-600',
          valueColor: 'text-red-700',
        },
      ]
    : [];

  return (
    <div className="space-y-8">
      {/* Page header */}
      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-emerald-950 to-slate-900 px-8 py-10 text-white shadow-xl">
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-20 -right-20 h-64 w-64 rounded-full bg-emerald-500/10 blur-3xl" />
          <div className="absolute -bottom-10 -left-10 h-48 w-48 rounded-full bg-teal-500/10 blur-3xl" />
        </div>
        <div className="relative">
          <div className="flex items-center gap-2 text-emerald-300 text-sm font-medium mb-2">
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Finans
          </div>
          <h1 className="text-3xl font-bold tracking-tight">Finans Yönetimi</h1>
          <p className="mt-1.5 text-slate-300">Platform geneli gelir, fatura ve ödeme takibi.</p>
        </div>
      </div>

      {/* Stat cards */}
      {!summary ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="h-28 rounded-2xl bg-slate-100 animate-pulse" />
          ))}
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {statCards.map((card) => (
            <div key={card.label} className={`rounded-2xl border border-slate-200 bg-white p-5 shadow-sm`}>
              <div className="flex items-start justify-between mb-4">
                <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${card.bg} ${card.iconColor}`}>
                  {card.icon}
                </div>
              </div>
              <div className={`text-2xl font-bold ${card.valueColor}`}>{card.value}</div>
              <div className="text-sm text-slate-500 mt-1">{card.label}</div>
            </div>
          ))}
        </div>
      )}

      {/* Chart + summary */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Bar chart */}
        <div className="lg:col-span-2 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <h3 className="text-base font-semibold text-slate-900 mb-1">Aylık Gelir</h3>
          <p className="text-sm text-slate-500 mb-5">Son 6 ay ödenen fatura tutarları</p>
          {!summary ? (
            <div className="h-48 rounded-xl bg-slate-100 animate-pulse" />
          ) : (
            <ResponsiveContainer width="100%" height={200}>
              <BarChart data={monthlyData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
                <XAxis dataKey="month" tick={{ fontSize: 12, fill: '#94a3b8' }} axisLine={false} tickLine={false} />
                <YAxis tick={{ fontSize: 11, fill: '#94a3b8' }} axisLine={false} tickLine={false} tickFormatter={(v) => `₺${(v / 1000).toFixed(0)}k`} />
                <Tooltip
                  formatter={(v: number) => [fmt(v), 'Gelir']}
                  contentStyle={{ borderRadius: '12px', border: '1px solid #e2e8f0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
                />
                <Bar dataKey="amount" fill="#10b981" radius={[6, 6, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          )}
        </div>

        {/* Invoice breakdown */}
        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
          <h3 className="text-base font-semibold text-slate-900 mb-5">Fatura Dağılımı</h3>
          {!summary ? (
            <div className="space-y-3">
              {Array.from({ length: 4 }).map((_, i) => <div key={i} className="h-10 rounded-xl bg-slate-100 animate-pulse" />)}
            </div>
          ) : (
            <div className="space-y-3">
              {[
                { label: 'Ödendi', count: summary.paidInvoices, color: 'bg-emerald-500', total: summary.totalInvoices },
                { label: 'Bekliyor', count: summary.pendingInvoices, color: 'bg-amber-400', total: summary.totalInvoices },
                { label: 'Gecikmiş', count: summary.overdueInvoices, color: 'bg-red-500', total: summary.totalInvoices },
                { label: 'İptal', count: summary.cancelledInvoices, color: 'bg-slate-300', total: summary.totalInvoices },
              ].map((item) => {
                const pct = summary.totalInvoices > 0 ? Math.round((item.count / item.total) * 100) : 0;
                return (
                  <div key={item.label}>
                    <div className="flex justify-between text-sm mb-1">
                      <span className="text-slate-600">{item.label}</span>
                      <span className="font-semibold text-slate-900">{item.count} <span className="font-normal text-slate-400">({pct}%)</span></span>
                    </div>
                    <div className="h-2 rounded-full bg-slate-100 overflow-hidden">
                      <div className={`h-full rounded-full ${item.color} transition-all`} style={{ width: `${pct}%` }} />
                    </div>
                  </div>
                );
              })}
              <div className="mt-4 pt-4 border-t border-slate-100 flex justify-between text-sm">
                <span className="text-slate-500">Toplam Fatura</span>
                <span className="font-bold text-slate-900">{summary.totalInvoices}</span>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Payments table */}
      <div className="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
        <div className="px-6 py-5 border-b border-slate-100">
          <h3 className="text-base font-semibold text-slate-900">Fatura Listesi</h3>
        </div>

        {/* Tabs */}
        <div className="flex gap-1 px-6 pt-4 pb-0">
          {[
            { key: 'all', label: 'Tümü' },
            { key: 'paid', label: 'Ödendi' },
            { key: 'pending', label: 'Bekliyor' },
            { key: 'overdue', label: 'Gecikmiş' },
            { key: 'cancelled', label: 'İptal' },
          ].map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`px-4 py-2 text-sm font-medium rounded-t-lg border-b-2 transition-colors ${
                activeTab === tab.key
                  ? 'border-indigo-600 text-indigo-700 bg-indigo-50/50'
                  : 'border-transparent text-slate-500 hover:text-slate-700'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {loading ? (
          <div className="p-6 space-y-3">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="h-12 rounded-xl bg-slate-100 animate-pulse" />
            ))}
          </div>
        ) : (
          <>
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-slate-50 border-b border-slate-100">
                    <th className="text-left px-6 py-3.5 font-semibold text-slate-600">Fatura</th>
                    <th className="text-left px-4 py-3.5 font-semibold text-slate-600">Okul</th>
                    <th className="text-left px-4 py-3.5 font-semibold text-slate-600">Durum</th>
                    <th className="text-right px-4 py-3.5 font-semibold text-slate-600">Tutar</th>
                    <th className="text-left px-4 py-3.5 font-semibold text-slate-600">Son Ödeme</th>
                    <th className="text-left px-4 py-3.5 font-semibold text-slate-600">Ödendi</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100">
                  {payments?.items.length === 0 ? (
                    <tr>
                      <td colSpan={6} className="py-12 text-center text-slate-400 text-sm">Fatura bulunamadı</td>
                    </tr>
                  ) : (
                    payments?.items.map((inv) => (
                      <tr key={inv.id} className="hover:bg-slate-50/60 transition-colors">
                        <td className="px-6 py-3.5">
                          <div className="font-medium text-slate-900 truncate max-w-[200px]">{inv.title || 'Fatura'}</div>
                          <div className="text-xs text-slate-400 mt-0.5">{fmtDate(inv.createdAt)}</div>
                        </td>
                        <td className="px-4 py-3.5 text-slate-700">{inv.tenant?.name ?? '—'}</td>
                        <td className="px-4 py-3.5">
                          <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_BADGE[inv.status] ?? 'bg-slate-100 text-slate-500'}`}>
                            {STATUS_LABELS[inv.status] ?? inv.status}
                          </span>
                        </td>
                        <td className="px-4 py-3.5 text-right font-semibold text-slate-900">
                          {fmt(inv.totalAmount ?? inv.amount)}
                        </td>
                        <td className="px-4 py-3.5 text-slate-600">{fmtDate(inv.dueDate)}</td>
                        <td className="px-4 py-3.5 text-slate-600">{fmtDate(inv.paidAt)}</td>
                      </tr>
                    ))
                  )}
                </tbody>
              </table>
            </div>

            {/* Pagination */}
            {payments && payments.meta.totalPages > 1 && (
              <div className="px-6 py-4 border-t border-slate-100 flex items-center justify-between">
                <span className="text-sm text-slate-500">
                  {payments.meta.total} faturadan {(payments.meta.page - 1) * payments.meta.limit + 1}–{Math.min(payments.meta.page * payments.meta.limit, payments.meta.total)} gösteriliyor
                </span>
                <div className="flex gap-2">
                  <button
                    onClick={() => setPage((p) => Math.max(1, p - 1))}
                    disabled={page === 1}
                    className="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-40 transition-colors"
                  >
                    ← Önceki
                  </button>
                  <button
                    onClick={() => setPage((p) => Math.min(payments.meta.totalPages, p + 1))}
                    disabled={page === payments.meta.totalPages}
                    className="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 disabled:opacity-40 transition-colors"
                  >
                    Sonraki →
                  </button>
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}