'use client';

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { formatCompactCurrency, formatCurrency } from '@/lib/utils';
import {
  TrendingUp,
  Loader2,
  DollarSign,
  Users,
  FileText,
  CheckCircle2,
  Clock,
  Plus,
  Search,
  X,
  Sparkles,
  Send,
} from 'lucide-react';
import {
  ResponsiveContainer,
  ComposedChart,
  Bar,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts';
import { ErrorState } from '@/components/ui/ErrorState';

// ─── Types ────────────────────────────────────────────────────────
interface MonthlySched {
  monthIndex: number;
  month: string;
  year: number;
  scheduled: number;
  recognized: number;
  posted: number;
  deferred: number;
  lineCount: number;
}

interface CustomerBreakdown {
  name: string;
  code: string;
  total: number;
  recognized: number;
  deferred: number;
  contractCount: number;
  recognitionRate: number;
}

interface ContractRow {
  id: string;
  contractNumber: string;
  name: string;
  customer: string;
  totalValue: number;
  recognizedToDate: number;
  deferredBalance: number;
  completionPercent: number;
  startDate: string;
  endDate: string;
  recognitionMethod: string;
  status: string;
}

interface Summary {
  totalContractValue: number;
  totalRecognized: number;
  totalDeferred: number;
  recognitionRate: number;
  activeContracts: number;
  totalContracts: number;
  totalCustomers: number;
}

interface RevRecData {
  year: number;
  monthlySchedule: MonthlySched[];
  customerBreakdown: CustomerBreakdown[];
  contracts: ContractRow[];
  summary: Summary;
}

interface CustomerOption {
  id: string;
  customerName: string;
  customerCode: string;
}

// ─── Page ─────────────────────────────────────────────────────────
export default function RevenueRecognitionPage() {
  const [data, setData] = useState<RevRecData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<'schedule' | 'customers' | 'contracts'>('schedule');
  const [contractSearch, setContractSearch] = useState('');

  // Create panel state
  const [showCreate, setShowCreate] = useState(false);
  const [customers, setCustomers] = useState<CustomerOption[]>([]);
  const [creating, setCreating] = useState(false);
  const [seeding, setSeeding] = useState(false);
  const [posting, setPosting] = useState(false);

  // Form state
  const [form, setForm] = useState({
    name: '',
    customerId: '',
    totalValue: '',
    startDate: new Date().toISOString().slice(0, 10),
    endDate: new Date(new Date().setMonth(new Date().getMonth() + 12)).toISOString().slice(0, 10),
    recognitionMethod: 'STRAIGHT_LINE',
    deferredAccountCode: '2300',
    revenueAccountCode: '4000',
  });

  // Post-period state
  const [postPeriod, setPostPeriod] = useState({
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
  });
  const [postResult, setPostResult] = useState<string | null>(null);

  const fetchData = useCallback(async () => {
    setError(null);
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 30000);
    try {
      const res = await fetch('/api/revenue-recognition', {
        cache: 'no-store',
        signal: controller.signal,
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body?.details || body?.error || `HTTP ${res.status}`);
      }
      const json = (await res.json()) as RevRecData;
      if (!json || !Array.isArray(json.contracts) || !json.summary) {
        throw new Error('Unexpected response shape');
      }
      setData(json);
    } catch (e: any) {
      if (e?.name !== 'AbortError') setError(e?.message || 'Failed to load');
    } finally {
      clearTimeout(timeout);
      setLoading(false);
    }
  }, []);

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

  useEffect(() => {
    // Lazy load customers when create panel opens
    if (showCreate && customers.length === 0) {
      fetch('/api/customers', { cache: 'no-store' })
        .then((r) => r.json())
        .then((d) => setCustomers(Array.isArray(d) ? d : d.customers || []))
        .catch(() => {});
    }
  }, [showCreate, customers.length]);

  // ─── Mutations ──────────────────────────────────────────────────
  const handleCreate = async () => {
    if (!form.name || !form.totalValue || !form.startDate || !form.endDate) {
      return;
    }
    setCreating(true);
    try {
      const res = await fetch('/api/revenue-contracts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...form,
          totalValue: Number(form.totalValue),
          customerId: form.customerId || null,
        }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body?.error || 'Failed to create contract');
      }
      setShowCreate(false);
      setForm({
        name: '',
        customerId: '',
        totalValue: '',
        startDate: new Date().toISOString().slice(0, 10),
        endDate: new Date(new Date().setMonth(new Date().getMonth() + 12)).toISOString().slice(0, 10),
        recognitionMethod: 'STRAIGHT_LINE',
        deferredAccountCode: '2300',
        revenueAccountCode: '4000',
      });
      await fetchData();
    } catch (e: any) {
      alert(e?.message || 'Failed to create contract');
    } finally {
      setCreating(false);
    }
  };

  const handleSeed = async () => {
    setSeeding(true);
    try {
      const res = await fetch('/api/revenue-contracts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ seed: true }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body?.error || 'Failed to seed');
      }
      await fetchData();
    } catch (e: any) {
      alert(e?.message || 'Failed to seed');
    } finally {
      setSeeding(false);
    }
  };

  const handlePost = async () => {
    setPosting(true);
    setPostResult(null);
    try {
      const res = await fetch('/api/revenue-recognition/post', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(postPeriod),
      });
      const json = await res.json();
      if (!res.ok) throw new Error(json?.error || 'Failed to post');
      const lines = `Recognized ${json.recognizedCount} lines, ${formatCurrency(json.totalAmount)}`;
      const je = json.journalEntryId ? ' — JE created' : '';
      const warn = json.warning ? ` (${json.warning})` : '';
      setPostResult(lines + je + warn);
      await fetchData();
    } catch (e: any) {
      setPostResult(`Error: ${e?.message || 'Failed to post'}`);
    } finally {
      setPosting(false);
    }
  };

  // ─── Derived ────────────────────────────────────────────────────
  const filteredContracts = useMemo(() => {
    if (!data) return [];
    const q = contractSearch.toLowerCase().trim();
    if (!q) return data.contracts;
    return data.contracts.filter(
      (c) =>
        c.contractNumber.toLowerCase().includes(q) ||
        c.name.toLowerCase().includes(q) ||
        c.customer.toLowerCase().includes(q)
    );
  }, [data, contractSearch]);

  // ─── Render ─────────────────────────────────────────────────────
  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <Loader2 size={32} className="text-blue-500 animate-spin" />
      </div>
    );
  }

  if (error) {
    return <ErrorState message={error} title="Couldn't load revenue recognition" onRetry={fetchData} />;
  }

  if (!data) return null;

  const isEmpty = data.contracts.length === 0;

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-2xl font-bold text-[#F0F0F3] flex items-center gap-2">
            <TrendingUp size={24} className="text-emerald-500" />
            Revenue Recognition
          </h1>
          <p className="text-sm text-[#8B8B9E] mt-0.5">
            ASC 606 contract management &middot; {data.summary.activeContracts} active contracts
          </p>
        </div>
        <div className="flex items-center gap-2">
          {isEmpty && (
            <button
              onClick={handleSeed}
              disabled={seeding}
              className="text-xs px-3 py-1.5 rounded-lg bg-purple-600 hover:bg-purple-500 text-white font-medium flex items-center gap-1 disabled:opacity-50"
            >
              <Sparkles size={12} />
              {seeding ? 'Seeding…' : 'Seed Demo Contracts'}
            </button>
          )}
          <button
            onClick={() => setShowCreate(!showCreate)}
            className="text-xs px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium flex items-center gap-1"
          >
            <Plus size={12} />
            New Contract
          </button>
        </div>
      </div>

      {/* Create panel */}
      {showCreate && (
        <div className="bg-[#1A1A1F] rounded-xl border border-[#2A2A32] p-5">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-sm font-semibold text-[#F0F0F3]">New Revenue Contract</h3>
            <button
              onClick={() => setShowCreate(false)}
              className="text-[#5A5A6E] hover:text-[#F0F0F3]"
            >
              <X size={16} />
            </button>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2">
              <label className="text-[10px] text-[#8B8B9E] uppercase">Contract Name</label>
              <input
                type="text"
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
                placeholder="Enterprise SaaS Subscription - Annual"
                className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              />
            </div>
            <div>
              <label className="text-[10px] text-[#8B8B9E] uppercase">Customer</label>
              <select
                value={form.customerId}
                onChange={(e) => setForm({ ...form, customerId: e.target.value })}
                className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              >
                <option value="">— Select customer —</option>
                {customers.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.customerName}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="text-[10px] text-[#8B8B9E] uppercase">Total Contract Value</label>
              <input
                type="number"
                value={form.totalValue}
                onChange={(e) => setForm({ ...form, totalValue: e.target.value })}
                placeholder="120000"
                className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              />
            </div>
            <div>
              <label className="text-[10px] text-[#8B8B9E] uppercase">Start Date</label>
              <input
                type="date"
                value={form.startDate}
                onChange={(e) => setForm({ ...form, startDate: e.target.value })}
                className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              />
            </div>
            <div>
              <label className="text-[10px] text-[#8B8B9E] uppercase">End Date</label>
              <input
                type="date"
                value={form.endDate}
                onChange={(e) => setForm({ ...form, endDate: e.target.value })}
                className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              />
            </div>
            <div>
              <label className="text-[10px] text-[#8B8B9E] uppercase">Recognition Method</label>
              <select
                value={form.recognitionMethod}
                onChange={(e) => setForm({ ...form, recognitionMethod: e.target.value })}
                className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              >
                <option value="STRAIGHT_LINE">Straight-Line (ratable)</option>
                <option value="POINT_IN_TIME">Point-in-Time</option>
                <option value="MILESTONE">Milestone</option>
                <option value="USAGE_BASED">Usage-Based</option>
              </select>
            </div>
            <div>
              <label className="text-[10px] text-[#8B8B9E] uppercase">Deferred Acct Code</label>
              <input
                type="text"
                value={form.deferredAccountCode}
                onChange={(e) => setForm({ ...form, deferredAccountCode: e.target.value })}
                className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              />
            </div>
            <div>
              <label className="text-[10px] text-[#8B8B9E] uppercase">Revenue Acct Code</label>
              <input
                type="text"
                value={form.revenueAccountCode}
                onChange={(e) => setForm({ ...form, revenueAccountCode: e.target.value })}
                className="w-full mt-1 bg-[#111114] border border-[#2A2A32] rounded-lg px-3 py-2 text-sm text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              />
            </div>
          </div>
          <div className="flex justify-end gap-2 mt-4">
            <button
              onClick={() => setShowCreate(false)}
              className="text-xs px-3 py-1.5 rounded-lg bg-[#111114] border border-[#2A2A32] text-[#8B8B9E] hover:text-[#F0F0F3]"
            >
              Cancel
            </button>
            <button
              onClick={handleCreate}
              disabled={creating || !form.name || !form.totalValue}
              className="text-xs px-3 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium disabled:opacity-50"
            >
              {creating ? 'Creating…' : 'Create Contract & Schedule'}
            </button>
          </div>
        </div>
      )}

      {/* KPIs */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <KpiCard
          icon={<DollarSign size={16} className="text-emerald-400" />}
          label="Total Contract Value"
          value={formatCompactCurrency(data.summary.totalContractValue)}
          sublabel={`${data.summary.totalContracts} contracts`}
        />
        <KpiCard
          icon={<CheckCircle2 size={16} className="text-blue-400" />}
          label="Recognized to Date"
          value={formatCompactCurrency(data.summary.totalRecognized)}
          sublabel={`${data.summary.recognitionRate}% of total`}
        />
        <KpiCard
          icon={<Clock size={16} className="text-amber-400" />}
          label="Deferred Balance"
          value={formatCompactCurrency(data.summary.totalDeferred)}
          sublabel="Yet to recognize"
        />
        <KpiCard
          icon={<Users size={16} className="text-purple-400" />}
          label="Customers"
          value={String(data.summary.totalCustomers)}
          sublabel={`${data.summary.activeContracts} active contracts`}
        />
      </div>

      {/* Post period card */}
      <div className="bg-[#1A1A1F] rounded-xl border border-[#2A2A32] p-5">
        <div className="flex items-center justify-between flex-wrap gap-3">
          <div>
            <h3 className="text-sm font-semibold text-[#F0F0F3] flex items-center gap-2">
              <Send size={14} className="text-blue-400" />
              Post Recognition for Period
            </h3>
            <p className="text-xs text-[#8B8B9E] mt-0.5">
              Recognizes all SCHEDULED lines and posts a balanced JE (debits deferred, credits revenue).
            </p>
          </div>
          <div className="flex items-center gap-2">
            <select
              value={postPeriod.year}
              onChange={(e) => setPostPeriod({ ...postPeriod, year: parseInt(e.target.value) })}
              className="bg-[#111114] border border-[#2A2A32] rounded-lg px-2 py-1.5 text-xs text-[#F0F0F3]"
            >
              {[data.year - 1, data.year, data.year + 1].map((y) => (
                <option key={y} value={y}>
                  {y}
                </option>
              ))}
            </select>
            <select
              value={postPeriod.month}
              onChange={(e) => setPostPeriod({ ...postPeriod, month: parseInt(e.target.value) })}
              className="bg-[#111114] border border-[#2A2A32] rounded-lg px-2 py-1.5 text-xs text-[#F0F0F3]"
            >
              {Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
                <option key={m} value={m}>
                  {new Date(2000, m - 1, 1).toLocaleString('en-US', { month: 'long' })}
                </option>
              ))}
            </select>
            <button
              onClick={handlePost}
              disabled={posting || isEmpty}
              className="text-xs px-3 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-500 text-white font-medium disabled:opacity-50"
            >
              {posting ? 'Posting…' : 'Post Period'}
            </button>
          </div>
        </div>
        {postResult && (
          <div
            className={`mt-3 px-3 py-2 rounded-lg text-xs ${
              postResult.startsWith('Error')
                ? 'bg-red-900/20 text-red-400 border border-red-900/40'
                : 'bg-emerald-900/20 text-emerald-400 border border-emerald-900/40'
            }`}
          >
            {postResult}
          </div>
        )}
      </div>

      {/* Tabs */}
      <div className="bg-[#1A1A1F] rounded-xl border border-[#2A2A32] overflow-hidden">
        <div className="flex border-b border-[#2A2A32]">
          {[
            { key: 'schedule', label: 'Monthly Schedule', icon: <TrendingUp size={14} /> },
            { key: 'customers', label: 'Customers', icon: <Users size={14} /> },
            { key: 'contracts', label: 'Contracts', icon: <FileText size={14} /> },
          ].map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key as any)}
              className={`flex items-center gap-2 px-5 py-3 text-xs font-medium transition-colors ${
                activeTab === tab.key
                  ? 'text-emerald-400 border-b-2 border-emerald-500 bg-[#111114]/50'
                  : 'text-[#8B8B9E] hover:text-[#F0F0F3]'
              }`}
            >
              {tab.icon}
              {tab.label}
            </button>
          ))}
        </div>

        {/* Schedule tab */}
        {activeTab === 'schedule' && (
          <div className="p-5">
            <div className="h-72">
              <ResponsiveContainer width="100%" height="100%">
                <ComposedChart data={data.monthlySchedule}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#2A2A32" />
                  <XAxis dataKey="month" stroke="#8B8B9E" tick={{ fontSize: 11 }} />
                  <YAxis
                    stroke="#8B8B9E"
                    tick={{ fontSize: 11 }}
                    tickFormatter={(v) => formatCompactCurrency(v)}
                  />
                  <Tooltip
                    contentStyle={{
                      background: '#111114',
                      border: '1px solid #2A2A32',
                      borderRadius: 8,
                    }}
                    formatter={(v: any) => formatCurrency(Number(v))}
                  />
                  <Legend wrapperStyle={{ fontSize: 11 }} />
                  <Bar dataKey="scheduled" name="Scheduled" fill="#4A9EFF" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="recognized" name="Recognized" fill="#10b981" radius={[4, 4, 0, 0]} />
                  <Line
                    type="monotone"
                    dataKey="deferred"
                    name="Deferred"
                    stroke="#f59e0b"
                    strokeWidth={2}
                    dot={{ r: 3 }}
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </div>
            <div className="mt-4 overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="text-left text-[#5A5A6E] border-b border-[#2A2A32]">
                    <th className="py-2 pr-4">Month</th>
                    <th className="py-2 pr-4 text-right">Lines</th>
                    <th className="py-2 pr-4 text-right">Scheduled</th>
                    <th className="py-2 pr-4 text-right">Recognized</th>
                    <th className="py-2 pr-4 text-right">Posted</th>
                    <th className="py-2 pr-4 text-right">Deferred</th>
                  </tr>
                </thead>
                <tbody>
                  {data.monthlySchedule.map((m) => (
                    <tr key={m.monthIndex} className="border-b border-[#2A2A32]/50">
                      <td className="py-2 pr-4 text-[#F0F0F3]">{m.month}</td>
                      <td className="py-2 pr-4 text-right text-[#8B8B9E]">{m.lineCount}</td>
                      <td className="py-2 pr-4 text-right text-[#F0F0F3]">{formatCurrency(m.scheduled)}</td>
                      <td className="py-2 pr-4 text-right text-emerald-400">{formatCurrency(m.recognized)}</td>
                      <td className="py-2 pr-4 text-right text-blue-400">{formatCurrency(m.posted)}</td>
                      <td className="py-2 pr-4 text-right text-amber-400">{formatCurrency(m.deferred)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* Customers tab */}
        {activeTab === 'customers' && (
          <div className="p-5 overflow-x-auto">
            {data.customerBreakdown.length === 0 ? (
              <div className="text-center py-8 text-[#5A5A6E] text-sm">No customers yet</div>
            ) : (
              <table className="w-full text-xs">
                <thead>
                  <tr className="text-left text-[#5A5A6E] border-b border-[#2A2A32]">
                    <th className="py-2 pr-4">Customer</th>
                    <th className="py-2 pr-4 text-right">Contracts</th>
                    <th className="py-2 pr-4 text-right">Total Value</th>
                    <th className="py-2 pr-4 text-right">Recognized</th>
                    <th className="py-2 pr-4 text-right">Deferred</th>
                    <th className="py-2 pr-4 text-right">% Complete</th>
                  </tr>
                </thead>
                <tbody>
                  {data.customerBreakdown.map((c) => (
                    <tr key={c.code} className="border-b border-[#2A2A32]/50">
                      <td className="py-2 pr-4 text-[#F0F0F3]">{c.name}</td>
                      <td className="py-2 pr-4 text-right text-[#8B8B9E]">{c.contractCount}</td>
                      <td className="py-2 pr-4 text-right text-[#F0F0F3]">{formatCurrency(c.total)}</td>
                      <td className="py-2 pr-4 text-right text-emerald-400">{formatCurrency(c.recognized)}</td>
                      <td className="py-2 pr-4 text-right text-amber-400">{formatCurrency(c.deferred)}</td>
                      <td className="py-2 pr-4 text-right text-[#8B8B9E]">{c.recognitionRate}%</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        )}

        {/* Contracts tab */}
        {activeTab === 'contracts' && (
          <div className="p-5">
            <div className="mb-3 relative">
              <Search
                size={14}
                className="absolute left-3 top-1/2 -translate-y-1/2 text-[#5A5A6E]"
              />
              <input
                type="text"
                value={contractSearch}
                onChange={(e) => setContractSearch(e.target.value)}
                placeholder="Search contracts…"
                className="w-full pl-9 pr-3 py-2 bg-[#111114] border border-[#2A2A32] rounded-lg text-xs text-[#F0F0F3] focus:outline-none focus:border-emerald-500"
              />
            </div>
            {filteredContracts.length === 0 ? (
              <div className="text-center py-8 text-[#5A5A6E] text-sm">
                {isEmpty
                  ? 'No contracts yet. Create one above or seed demo data.'
                  : 'No contracts match your search.'}
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full text-xs">
                  <thead>
                    <tr className="text-left text-[#5A5A6E] border-b border-[#2A2A32]">
                      <th className="py-2 pr-3">Contract</th>
                      <th className="py-2 pr-3">Customer</th>
                      <th className="py-2 pr-3">Method</th>
                      <th className="py-2 pr-3 text-right">Total</th>
                      <th className="py-2 pr-3 text-right">Recognized</th>
                      <th className="py-2 pr-3 text-right">Deferred</th>
                      <th className="py-2 pr-3 text-right">Complete</th>
                      <th className="py-2 pr-3">Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredContracts.map((c) => (
                      <tr key={c.id} className="border-b border-[#2A2A32]/50 hover:bg-[#111114]/50">
                        <td className="py-2 pr-3">
                          <div className="font-medium text-[#F0F0F3]">{c.contractNumber}</div>
                          <div className="text-[10px] text-[#5A5A6E]">{c.name}</div>
                        </td>
                        <td className="py-2 pr-3 text-[#8B8B9E]">{c.customer}</td>
                        <td className="py-2 pr-3 text-[#8B8B9E]">
                          {c.recognitionMethod.replace('_', ' ')}
                        </td>
                        <td className="py-2 pr-3 text-right text-[#F0F0F3]">
                          {formatCurrency(c.totalValue)}
                        </td>
                        <td className="py-2 pr-3 text-right text-emerald-400">
                          {formatCurrency(c.recognizedToDate)}
                        </td>
                        <td className="py-2 pr-3 text-right text-amber-400">
                          {formatCurrency(c.deferredBalance)}
                        </td>
                        <td className="py-2 pr-3 text-right">
                          <div className="flex items-center justify-end gap-2">
                            <div className="w-12 h-1.5 bg-[#2A2A32] rounded-full overflow-hidden">
                              <div
                                className="h-full bg-emerald-500"
                                style={{ width: `${c.completionPercent}%` }}
                              />
                            </div>
                            <span className="text-[10px] text-[#8B8B9E] w-8 text-right">
                              {c.completionPercent}%
                            </span>
                          </div>
                        </td>
                        <td className="py-2 pr-3">
                          <span
                            className={`text-[10px] px-2 py-0.5 rounded font-medium ${
                              c.status === 'ACTIVE'
                                ? 'bg-emerald-900/25 text-emerald-400'
                                : c.status === 'COMPLETED'
                                  ? 'bg-blue-900/25 text-blue-400'
                                  : 'bg-[#2A2A32] text-[#8B8B9E]'
                            }`}
                          >
                            {c.status}
                          </span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// ─── KpiCard ──────────────────────────────────────────────────────
function KpiCard({
  icon,
  label,
  value,
  sublabel,
}: {
  icon: React.ReactNode;
  label: string;
  value: string;
  sublabel?: string;
}) {
  return (
    <div className="bg-[#1A1A1F] rounded-xl border border-[#2A2A32] p-4">
      <div className="flex items-center gap-2 mb-2">
        {icon}
        <p className="text-[10px] font-medium text-[#8B8B9E] uppercase tracking-wide">{label}</p>
      </div>
      <p className="text-xl font-bold text-[#F0F0F3]">{value}</p>
      {sublabel && <p className="text-[10px] text-[#5A5A6E] mt-0.5">{sublabel}</p>}
    </div>
  );
}