'use client';

import { useState, useMemo } from 'react';
import { useSearchParams } from 'next/navigation';
import Price from '@/components/Price';
import { generateLedgerCSV, downloadCSV, penceToPounds } from '@/lib/csvExport';

interface ReportData {
  orders: Array<{ id: string; total: number; createdAt: Date }>;
  manualSales: Array<{ id: string; total: number; soldAt: Date; createdAt: Date }>;
  expenses: Array<{ id: string; amount: number; date: Date; category: string }>;
  purchases: Array<{ id: string; total: number; purchasedAt: Date }>;
}

export default function ReportsPageClient({ data }: { data: ReportData }) {
  const searchParams = useSearchParams();
  const [tab, setTab] = useState(searchParams.get('tab') ?? 'kpi');
  const [fromDate, setFromDate] = useState('');
  const [toDate, setToDate] = useState('');
  const [expenseCategoryFilter, setExpenseCategoryFilter] = useState('');
  const [drillDownMonth, setDrillDownMonth] = useState<string | null>(null);
  const [sortBy, setSortBy] = useState<{ field: string; order: 'asc' | 'desc' }>({ field: 'date', order: 'desc' });
  const [exportFormat, setExportFormat] = useState<'all' | 'income' | 'expenses' | 'tax-year'>('all');

  // Ensure dates are parsed as Date objects (they might be strings from server)
  const normalizedData = {
    orders: data.orders.map(o => ({
      ...o,
      createdAt: typeof o.createdAt === 'string' ? new Date(o.createdAt) : o.createdAt,
    })),
    manualSales: data.manualSales.map(m => ({
      ...m,
      soldAt: typeof m.soldAt === 'string' ? new Date(m.soldAt) : m.soldAt,
      createdAt: typeof m.createdAt === 'string' ? new Date(m.createdAt) : m.createdAt,
    })),
    expenses: data.expenses.map(e => ({
      ...e,
      date: typeof e.date === 'string' ? new Date(e.date) : e.date,
    })),
    purchases: data.purchases.map(p => ({
      ...p,
      purchasedAt: typeof p.purchasedAt === 'string' ? new Date(p.purchasedAt) : p.purchasedAt,
    })),
  };

  // Calculate YTD (current calendar year)
  const now = new Date();
  const ytdStart = new Date(now.getFullYear(), 0, 1);

  // Calculate UK tax year (April-April)
  const getCurrentTaxYear = () => {
    const apr = new Date(now.getFullYear(), 3, 6);
    if (now < apr) return new Date(now.getFullYear() - 1, 3, 6);
    return apr;
  };

  const monthlyProfit = useMemo(() => {
    const months = new Map<string, { revenue: number; expenses: number }>();

    [...normalizedData.orders, ...normalizedData.manualSales].forEach((sale: any) => {
      const date = new Date(sale.soldAt || sale.createdAt);
      const key = date.toISOString().slice(0, 7);
      if (!months.has(key)) months.set(key, { revenue: 0, expenses: 0 });
      const m = months.get(key)!;
      m.revenue += sale.total;
    });

    normalizedData.expenses.forEach((exp) => {
      const date = new Date(exp.date);
      const key = date.toISOString().slice(0, 7);
      if (!months.has(key)) months.set(key, { revenue: 0, expenses: 0 });
      const m = months.get(key)!;
      m.expenses += exp.amount;
    });

    return Array.from(months.entries())
      .sort((a, b) => b[0].localeCompare(a[0]))
      .map(([month, { revenue, expenses }]) => ({
        month,
        revenue,
        expenses,
        profit: revenue - expenses,
      }));
  }, [normalizedData]);

  // Growth metrics
  const growthMetrics = useMemo(() => {
    if (monthlyProfit.length < 2) return { momGrowth: 0, marginTrend: [] };

    const lastMonth = monthlyProfit[0].profit;
    const prevMonth = monthlyProfit[1].profit;
    const momGrowth = prevMonth !== 0 ? ((lastMonth - prevMonth) / Math.abs(prevMonth)) * 100 : 0;

    const marginTrend = monthlyProfit.map(m => ({
      month: m.month,
      margin: m.revenue > 0 ? (m.profit / m.revenue) * 100 : 0,
    }));

    return { momGrowth, marginTrend };
  }, [monthlyProfit]);

  // Income breakdown
  const incomeBreakdown = useMemo(() => {
    const webSales = normalizedData.orders.reduce((sum, o) => sum + o.total, 0);
    const manualSales = normalizedData.manualSales.reduce((sum, s) => sum + s.total, 0);
    const total = webSales + manualSales;
    return {
      webSales,
      manualSales,
      total,
      webPercent: total > 0 ? (webSales / total) * 100 : 0,
      manualPercent: total > 0 ? (manualSales / total) * 100 : 0,
    };
  }, [normalizedData]);

  const expenseBreakdown = useMemo(() => {
    const byCategory = new Map<string, number>();
    normalizedData.expenses.forEach((exp) => {
      byCategory.set(exp.category, (byCategory.get(exp.category) ?? 0) + exp.amount);
    });
    return Array.from(byCategory.entries())
      .sort((a, b) => b[1] - a[1])
      .map(([category, total]) => ({ category, total }));
  }, [normalizedData]);

  const expenseCategories = useMemo(() => {
    return [...new Set(normalizedData.expenses.map(e => e.category))];
  }, [normalizedData]);

  // YTD calculations
  const ytdStats = useMemo(() => {
    const ytdOrders = normalizedData.orders.filter(o => o.createdAt >= ytdStart);
    const ytdManual = normalizedData.manualSales.filter(s => s.soldAt >= ytdStart);
    const ytdExpenses = normalizedData.expenses.filter(e => e.date >= ytdStart);
    const ytdPurchases = normalizedData.purchases.filter(p => p.purchasedAt >= ytdStart);

    const revenue = ytdOrders.reduce((sum, o) => sum + o.total, 0) + ytdManual.reduce((sum, s) => sum + s.total, 0);
    const cogs = ytdPurchases.reduce((sum, p) => sum + p.total, 0);
    const expenses = ytdExpenses.reduce((sum, e) => sum + e.amount, 0);
    const profit = revenue - cogs - expenses;

    return { revenue, cogs, expenses, profit };
  }, [normalizedData, ytdStart]);

  // Tax year calculations
  const taxYearStart = getCurrentTaxYear();
  const taxYearStats = useMemo(() => {
    const tyOrders = normalizedData.orders.filter(o => o.createdAt >= taxYearStart);
    const tyManual = normalizedData.manualSales.filter(s => s.soldAt >= taxYearStart);
    const tyExpenses = normalizedData.expenses.filter(e => e.date >= taxYearStart);
    const tyPurchases = normalizedData.purchases.filter(p => p.purchasedAt >= taxYearStart);

    const revenue = tyOrders.reduce((sum, o) => sum + o.total, 0) + tyManual.reduce((sum, s) => sum + s.total, 0);
    const cogs = tyPurchases.reduce((sum, p) => sum + p.total, 0);
    const expenses = tyExpenses.reduce((sum, e) => sum + e.amount, 0);
    const profit = revenue - cogs - expenses;

    return { revenue, cogs, expenses, profit };
  }, [normalizedData, taxYearStart]);

  // Drill-down data
  const drillDownData = useMemo(() => {
    if (!drillDownMonth) return [];

    const items: any[] = [];

    normalizedData.orders.forEach(o => {
      const monthStr = o.createdAt.toISOString().slice(0, 7);
      if (monthStr === drillDownMonth) {
        items.push({
          date: o.createdAt,
          type: 'INCOME',
          description: 'Website order',
          amount: o.total,
          category: 'Sales',
          id: o.id,
        });
      }
    });

    normalizedData.manualSales.forEach(s => {
      const monthStr = s.soldAt.toISOString().slice(0, 7);
      if (monthStr === drillDownMonth) {
        items.push({
          date: s.soldAt,
          type: 'INCOME',
          description: 'Manual sale',
          amount: s.total,
          category: 'Sales',
          id: s.id,
        });
      }
    });

    normalizedData.expenses.forEach(e => {
      const monthStr = e.date.toISOString().slice(0, 7);
      if (monthStr === drillDownMonth) {
        items.push({
          date: e.date,
          type: 'EXPENSE',
          description: e.category,
          amount: e.amount,
          category: e.category,
          id: e.id,
        });
      }
    });

    normalizedData.purchases.forEach(p => {
      const monthStr = p.purchasedAt.toISOString().slice(0, 7);
      if (monthStr === drillDownMonth) {
        items.push({
          date: p.purchasedAt,
          type: 'EXPENSE',
          description: 'Stock purchase',
          amount: p.total,
          category: 'Cost of goods',
          id: p.id,
        });
      }
    });

    // Sort
    const sorted = [...items].sort((a, b) => {
      if (sortBy.field === 'date') {
        return sortBy.order === 'desc' ? b.date - a.date : a.date - b.date;
      } else if (sortBy.field === 'amount') {
        return sortBy.order === 'desc' ? b.amount - a.amount : a.amount - b.amount;
      }
      return 0;
    });

    return sorted;
  }, [drillDownMonth, normalizedData, sortBy]);

  const handleExportLedger = () => {
    let from = fromDate ? new Date(fromDate) : null;
    let to = toDate ? new Date(`${toDate}T23:59:59`) : null;

    let ledgerRows: any[] = [];

    if (exportFormat === 'tax-year') {
      from = taxYearStart;
      to = new Date();
    }

    if (exportFormat === 'all' || exportFormat === 'income') {
      ledgerRows.push(
        ...normalizedData.orders
          .filter((o) => (!from || o.createdAt >= from) && (!to || o.createdAt <= to))
          .map((o) => ({
            date: o.createdAt,
            type: 'INCOME' as const,
            description: 'Website order',
            amount: o.total,
            category: 'Sales',
          })),
        ...normalizedData.manualSales
          .filter((s) => (!from || s.soldAt >= from) && (!to || s.soldAt <= to))
          .map((s) => ({
            date: s.soldAt,
            type: 'INCOME' as const,
            description: 'Manual sale',
            amount: s.total,
            category: 'Sales',
          }))
      );
    }

    if (exportFormat === 'all' || exportFormat === 'expenses') {
      ledgerRows.push(
        ...normalizedData.purchases
          .filter((p) => (!from || p.purchasedAt >= from) && (!to || p.purchasedAt <= to))
          .map((p) => ({
            date: p.purchasedAt,
            type: 'EXPENSE' as const,
            description: 'Stock purchase',
            amount: p.total,
            category: 'Cost of goods',
          })),
        ...normalizedData.expenses
          .filter((e) => (!from || e.date >= from) && (!to || e.date <= to))
          .map((e) => ({
            date: e.date,
            type: 'EXPENSE' as const,
            description: e.category,
            amount: e.amount,
            category: e.category,
          }))
      );
    }

    let title = 'Ledger Export';
    if (exportFormat === 'income') title = 'Income Export';
    else if (exportFormat === 'expenses') title = 'Expenses Export';
    else if (exportFormat === 'tax-year') title = `Tax Year ${taxYearStart.getFullYear()}-${taxYearStart.getFullYear() + 1}`;

    const dateRange = fromDate || toDate
      ? ` (${fromDate || 'start'} to ${toDate || 'today'})`
      : '';

    const csv = generateLedgerCSV(ledgerRows, `${title}${dateRange}`);
    downloadCSV(csv, `${title.toLowerCase().replace(/\s+/g, '-')}-${new Date().toISOString().split('T')[0]}.csv`);
  };

  const filteredExpenses = expenseCategoryFilter
    ? normalizedData.expenses.filter(e => e.category === expenseCategoryFilter)
    : normalizedData.expenses;

  return (
    <>
      {/* Date Filtering & Export */}
      <div className="mt-6 border border-line bg-surface p-4">
        <p className="tag-label mb-3">Filter & Export</p>
        <div className="space-y-3">
          <div className="flex flex-wrap items-center gap-3">
            <label className="flex items-center gap-1 text-sm">
              From:
              <input
                type="date"
                value={fromDate}
                onChange={(e) => setFromDate(e.target.value)}
                className="border border-line bg-paper px-2 py-1"
              />
            </label>
            <label className="flex items-center gap-1 text-sm">
              To:
              <input
                type="date"
                value={toDate}
                onChange={(e) => setToDate(e.target.value)}
                className="border border-line bg-paper px-2 py-1"
              />
            </label>
            {(fromDate || toDate) && (
              <button
                onClick={() => {
                  setFromDate('');
                  setToDate('');
                }}
                className="text-sm text-muted hover:text-ink"
              >
                Clear dates
              </button>
            )}
          </div>

          <div className="flex flex-wrap items-center gap-3">
            <select
              value={exportFormat}
              onChange={(e) => setExportFormat(e.target.value as any)}
              className="border border-line bg-paper px-3 py-1.5 text-sm"
            >
              <option value="all">All transactions</option>
              <option value="income">Income only</option>
              <option value="expenses">Expenses only</option>
              <option value="tax-year">Tax year (Apr-Apr)</option>
            </select>

            <button
              onClick={handleExportLedger}
              className="border border-ink px-4 py-1.5 text-sm hover:border-clay hover:bg-clay hover:text-paper"
            >
              ⬇ Export CSV
            </button>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="mt-6 overflow-x-auto">
        <div className="inline-flex border border-line">
          {[
            { id: 'kpi', label: 'KPIs' },
            { id: 'trends', label: 'Trends' },
            { id: 'monthly-profit', label: 'Monthly Profit' },
            { id: 'income-breakdown', label: 'Income' },
            { id: 'expense-breakdown', label: 'Expenses' },
            { id: 'revenue-vs-expenses', label: 'Revenue vs Expenses' },
            { id: 'cash-flow', label: 'Cash Flow' },
            { id: 'tax-year', label: 'Tax Year' },
            { id: 'hmrc', label: 'HMRC Report' },
          ].map((t) => (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={`px-3 py-1.5 text-sm whitespace-nowrap ${tab === t.id ? 'bg-ink text-paper' : 'hover:text-clay'}`}
            >
              {t.label}
            </button>
          ))}
        </div>
      </div>

      <div className="mt-8">
        {/* KPI Dashboard */}
        {tab === 'kpi' && (
          <div className="space-y-6">
            <div>
              <h3 className="font-display text-lg mb-4">Year-to-Date Summary (Calendar Year)</h3>
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div className="border border-line p-4">
                  <p className="tag-label">YTD Revenue</p>
                  <p className="mt-2 font-mono text-xl text-green-600">
                    <Price cents={ytdStats.revenue} />
                  </p>
                </div>
                <div className="border border-line p-4">
                  <p className="tag-label">YTD COGS</p>
                  <p className="mt-2 font-mono text-xl">
                    <Price cents={ytdStats.cogs} />
                  </p>
                </div>
                <div className="border border-line p-4">
                  <p className="tag-label">YTD Operating Expenses</p>
                  <p className="mt-2 font-mono text-xl">
                    <Price cents={ytdStats.expenses} />
                  </p>
                </div>
                <div className="border-2 border-clay p-4">
                  <p className="tag-label">YTD Profit</p>
                  <p className={`mt-2 font-mono text-xl font-medium ${ytdStats.profit >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
                    <Price cents={ytdStats.profit} />
                  </p>
                </div>
              </div>
            </div>

            <div>
              <h3 className="font-display text-lg mb-4">Income Breakdown</h3>
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="border border-line p-4">
                  <p className="tag-label">Website Sales</p>
                  <p className="mt-2 font-mono text-xl">
                    <Price cents={incomeBreakdown.webSales} />
                  </p>
                  <p className="mt-1 text-xs text-muted">{incomeBreakdown.webPercent.toFixed(1)}% of total</p>
                </div>
                <div className="border border-line p-4">
                  <p className="tag-label">Manual Sales</p>
                  <p className="mt-2 font-mono text-xl">
                    <Price cents={incomeBreakdown.manualSales} />
                  </p>
                  <p className="mt-1 text-xs text-muted">{incomeBreakdown.manualPercent.toFixed(1)}% of total</p>
                </div>
              </div>
            </div>

            <div>
              <h3 className="font-display text-lg mb-4">Latest Month Growth</h3>
              <div className="border border-line p-4">
                <p className="tag-label">Month-over-Month Change</p>
                <p className={`mt-2 font-mono text-2xl font-medium ${growthMetrics.momGrowth >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
                  {growthMetrics.momGrowth >= 0 ? '+' : ''}{growthMetrics.momGrowth.toFixed(1)}%
                </p>
              </div>
            </div>
          </div>
        )}

        {/* Trends Chart */}
        {tab === 'trends' && (
          <div className="space-y-8">
            <div>
              <h3 className="font-display text-lg mb-4">Monthly Profit Trend</h3>
              <div className="overflow-x-auto">
                <svg viewBox="0 0 1000 300" className="w-full border border-line bg-surface p-4">
                  <line x1="50" y1="20" x2="50" y2="260" stroke="currentColor" strokeWidth="2" className="text-line" />
                  <line x1="50" y1="260" x2="950" y2="260" stroke="currentColor" strokeWidth="2" className="text-line" />

                  {monthlyProfit.slice(-12).map((row, i) => {
                    const maxProfit = Math.max(...monthlyProfit.map((r) => Math.abs(r.profit)), 1);
                    const x = 50 + (i / 11) * 900;
                    const barHeight = (Math.abs(row.profit) / maxProfit) * 200;
                    const y = 260 - barHeight;
                    const isPositive = row.profit >= 0;

                    return (
                      <g key={row.month} onClick={() => setDrillDownMonth(row.month)} style={{ cursor: 'pointer' }}>
                        <rect
                          x={x - 30}
                          y={y}
                          width="60"
                          height={barHeight}
                          fill={isPositive ? '#10b981' : '#ec4899'}
                          opacity="0.8"
                          className="hover:opacity-100"
                        />
                        <text
                          x={x}
                          y="280"
                          textAnchor="middle"
                          fontSize="12"
                          className="text-muted"
                          fill="currentColor"
                        >
                          {row.month.slice(5)}
                        </text>
                        <text
                          x={x}
                          y={y - 5}
                          textAnchor="middle"
                          fontSize="11"
                          fontFamily="monospace"
                          className="text-muted"
                          fill="currentColor"
                        >
                          £{(row.profit / 100).toFixed(0)}
                        </text>
                      </g>
                    );
                  })}
                </svg>
              </div>
              <p className="mt-2 text-xs text-muted">💡 Click a bar to drill down into transaction details</p>
            </div>

            <div className="grid gap-4 sm:grid-cols-3">
              <div className="border border-line p-4">
                <p className="tag-label">Avg Monthly Profit</p>
                <p className="mt-2 font-mono text-xl">
                  <Price cents={Math.round(monthlyProfit.reduce((sum, m) => sum + m.profit, 0) / Math.max(monthlyProfit.length, 1))} />
                </p>
              </div>
              <div className="border border-line p-4">
                <p className="tag-label">Best Month</p>
                <p className="mt-2 font-mono text-xl text-green-600">
                  <Price cents={Math.max(...monthlyProfit.map((m) => m.profit), 0)} />
                </p>
              </div>
              <div className="border border-line p-4">
                <p className="tag-label">Worst Month</p>
                <p className="mt-2 font-mono text-xl text-splash-pink">
                  <Price cents={Math.min(...monthlyProfit.map((m) => m.profit), 0)} />
                </p>
              </div>
            </div>
          </div>
        )}

        {/* Monthly Profit Table */}
        {tab === 'monthly-profit' && (
          <div className="overflow-x-auto">
            <table className="w-full border-collapse text-sm">
              <thead>
                <tr className="border-b border-line">
                  <th className="text-left py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'month', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>Month {sortBy.field === 'month' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}</th>
                  <th className="text-right py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'revenue', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>Revenue {sortBy.field === 'revenue' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}</th>
                  <th className="text-right py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'expenses', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>Expenses {sortBy.field === 'expenses' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}</th>
                  <th className="text-right py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'profit', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>Profit {sortBy.field === 'profit' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}</th>
                </tr>
              </thead>
              <tbody>
                {monthlyProfit.map((row) => (
                  <tr key={row.month} className="border-b border-line hover:bg-surface cursor-pointer" onClick={() => setDrillDownMonth(row.month)}>
                    <td className="py-2 px-3">{row.month}</td>
                    <td className="text-right py-2 px-3 font-mono">
                      <Price cents={row.revenue} />
                    </td>
                    <td className="text-right py-2 px-3 font-mono">
                      <Price cents={row.expenses} />
                    </td>
                    <td className={`text-right py-2 px-3 font-mono font-medium ${row.profit >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
                      <Price cents={row.profit} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Income Breakdown */}
        {tab === 'income-breakdown' && (
          <div className="space-y-6">
            <div>
              <h3 className="font-display text-lg mb-4">Revenue by Source</h3>
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="border border-line p-4">
                  <p className="tag-label">Website Orders</p>
                  <p className="mt-2 font-mono text-2xl">
                    <Price cents={incomeBreakdown.webSales} />
                  </p>
                  <p className="mt-1 text-xs text-muted">{incomeBreakdown.webPercent.toFixed(1)}% of revenue</p>
                </div>
                <div className="border border-line p-4">
                  <p className="tag-label">Manual Sales</p>
                  <p className="mt-2 font-mono text-2xl">
                    <Price cents={incomeBreakdown.manualSales} />
                  </p>
                  <p className="mt-1 text-xs text-muted">{incomeBreakdown.manualPercent.toFixed(1)}% of revenue</p>
                </div>
              </div>
            </div>

            {/* Income pie chart */}
            <div className="border border-line p-4">
              <svg viewBox="0 0 200 200" className="w-full max-w-sm mx-auto">
                {incomeBreakdown.webSales > 0 && (
                  <circle cx="100" cy="100" r="80" fill="#10b981" opacity="0.8" />
                )}
                {incomeBreakdown.manualSales > 0 && (
                  <circle cx="100" cy="100" r="80" fill="#3b82f6" opacity="0.8" />
                )}
                <text x="100" y="100" textAnchor="middle" dy="0.3em" fontSize="20" fontWeight="bold" fill="white">
                  {incomeBreakdown.total > 0 ? `£${(incomeBreakdown.total / 100).toFixed(0)}` : 'No sales'}
                </text>
              </svg>
              <div className="mt-4 space-y-2 text-sm">
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#10b981' }}></div>
                  <span>Website: <span className="font-mono"><Price cents={incomeBreakdown.webSales} /></span></span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#3b82f6' }}></div>
                  <span>Manual: <span className="font-mono"><Price cents={incomeBreakdown.manualSales} /></span></span>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Expense Breakdown */}
        {tab === 'expense-breakdown' && (
          <div className="space-y-6">
            <div>
              <h3 className="font-display text-lg mb-4">Expenses by Category</h3>
              {expenseCategoryFilter && (
                <button
                  onClick={() => setExpenseCategoryFilter('')}
                  className="mb-3 text-sm text-muted hover:text-ink"
                >
                  Clear category filter
                </button>
              )}
              {expenseBreakdown.length === 0 ? (
                <p className="text-sm text-muted">No expenses recorded yet.</p>
              ) : (
                <div className="space-y-2">
                  {expenseBreakdown.map((row) => (
                    <div
                      key={row.category}
                      className={`flex items-center justify-between border-b border-line pb-2 cursor-pointer hover:bg-surface px-2 py-1 rounded ${
                        expenseCategoryFilter === row.category ? 'bg-surface' : ''
                      }`}
                      onClick={() => setExpenseCategoryFilter(expenseCategoryFilter === row.category ? '' : row.category)}
                    >
                      <span className="text-sm font-medium">{row.category}</span>
                      <span className="font-mono">
                        <Price cents={row.total} />
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {filteredExpenses.length > 0 && (
              <div>
                <h3 className="font-display text-lg mb-4">
                  {expenseCategoryFilter ? `Expenses: ${expenseCategoryFilter}` : 'All Expense Transactions'}
                </h3>
                <div className="overflow-x-auto">
                  <table className="w-full border-collapse text-sm">
                    <thead>
                      <tr className="border-b border-line">
                        <th className="text-left py-2 px-3 font-medium">Date</th>
                        <th className="text-left py-2 px-3 font-medium">Category</th>
                        <th className="text-left py-2 px-3 font-medium">Description</th>
                        <th className="text-right py-2 px-3 font-medium">Amount</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredExpenses.map((exp) => (
                        <tr key={exp.id} className="border-b border-line hover:bg-surface">
                          <td className="py-2 px-3 text-xs font-mono">{exp.date.toLocaleDateString('en-GB')}</td>
                          <td className="py-2 px-3 text-xs">{exp.category}</td>
                          <td className="py-2 px-3 text-xs text-muted truncate" title={exp.category}>{exp.category}</td>
                          <td className="text-right py-2 px-3 font-mono">
                            <Price cents={exp.amount} />
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Revenue vs Expenses */}
        {tab === 'revenue-vs-expenses' && (
          <div className="space-y-8">
            <div>
              <h3 className="font-display text-lg mb-4">Revenue vs Operating Expenses Trend</h3>
              <div className="overflow-x-auto">
                <svg viewBox="0 0 1000 350" className="w-full border border-line bg-surface p-4">
                  <line x1="50" y1="20" x2="50" y2="300" stroke="currentColor" strokeWidth="2" className="text-line" />
                  <line x1="50" y1="300" x2="950" y2="300" stroke="currentColor" strokeWidth="2" className="text-line" />

                  {monthlyProfit.slice(-12).map((row, i) => {
                    const maxValue = Math.max(...monthlyProfit.map((r) => Math.max(r.revenue, r.expenses)), 1);
                    const x = 50 + (i / 11) * 900;

                    const revHeight = (row.revenue / maxValue) * 220;
                    const expHeight = (row.expenses / maxValue) * 220;
                    const revY = 300 - revHeight;
                    const expY = 300 - expHeight;

                    return (
                      <g key={row.month}>
                        {/* Revenue bar (green) */}
                        <rect x={x - 20} y={revY} width="18" height={revHeight} fill="#10b981" opacity="0.8" />
                        {/* Expenses bar (red) */}
                        <rect x={x + 2} y={expY} width="18" height={expHeight} fill="#ef4444" opacity="0.8" />
                        {/* Month label */}
                        <text x={x} y="320" textAnchor="middle" fontSize="12" className="text-muted" fill="currentColor">
                          {row.month.slice(5)}
                        </text>
                      </g>
                    );
                  })}
                </svg>
              </div>
              <div className="mt-4 flex gap-4 justify-center text-sm">
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#10b981' }}></div>
                  <span>Revenue</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-4 h-4 rounded" style={{ backgroundColor: '#ef4444' }}></div>
                  <span>Operating Expenses</span>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Cash Flow */}
        {tab === 'cash-flow' && (
          <div className="overflow-x-auto">
            <table className="w-full border-collapse text-sm">
              <thead>
                <tr className="border-b border-line">
                  <th className="text-left py-2 px-3 font-medium">Month</th>
                  <th className="text-right py-2 px-3 font-medium">Cash In</th>
                  <th className="text-right py-2 px-3 font-medium">Cash Out</th>
                  <th className="text-right py-2 px-3 font-medium">Cumulative</th>
                </tr>
              </thead>
              <tbody>
                {monthlyProfit.map((row) => {
                  // Recalculate cumulative for this view
                  const cumIn = monthlyProfit
                    .filter((m) => m.month <= row.month)
                    .reduce((sum, m) => sum + m.revenue, 0);
                  const cumOut = monthlyProfit
                    .filter((m) => m.month <= row.month)
                    .reduce((sum, m) => sum + m.expenses, 0);
                  const cumNet = cumIn - cumOut;

                  return (
                    <tr key={row.month} className="border-b border-line hover:bg-surface">
                      <td className="py-2 px-3">{row.month}</td>
                      <td className="text-right py-2 px-3 font-mono text-green-600">
                        <Price cents={row.revenue} />
                      </td>
                      <td className="text-right py-2 px-3 font-mono text-splash-pink">
                        <Price cents={row.expenses} />
                      </td>
                      <td className={`text-right py-2 px-3 font-mono font-medium ${cumNet >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
                        <Price cents={cumNet} />
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}

        {/* Tax Year Summary */}
        {tab === 'tax-year' && (
          <div className="space-y-6">
            <div className="border border-splash-blue/40 bg-splash-blue/5 px-4 py-3 text-sm text-splash-blue">
              ⓘ UK Tax Year: April 6, {taxYearStart.getFullYear()} to April 5, {taxYearStart.getFullYear() + 1}
            </div>

            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <div className="border border-line p-4">
                <p className="tag-label">Tax Year Revenue</p>
                <p className="mt-2 font-mono text-xl text-green-600">
                  <Price cents={taxYearStats.revenue} />
                </p>
              </div>
              <div className="border border-line p-4">
                <p className="tag-label">Tax Year COGS</p>
                <p className="mt-2 font-mono text-xl">
                  <Price cents={taxYearStats.cogs} />
                </p>
              </div>
              <div className="border border-line p-4">
                <p className="tag-label">Tax Year Expenses</p>
                <p className="mt-2 font-mono text-xl">
                  <Price cents={taxYearStats.expenses} />
                </p>
              </div>
              <div className="border-2 border-clay p-4">
                <p className="tag-label">Tax Year Profit</p>
                <p className={`mt-2 font-mono text-xl font-medium ${taxYearStats.profit >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
                  <Price cents={taxYearStats.profit} />
                </p>
              </div>
            </div>

            <div className="border border-clay p-6">
              <p className="text-sm">
                Use the Tax Year export option above to download a CSV for your accountant.
              </p>
            </div>
          </div>
        )}

        {/* HMRC Report */}
        {tab === 'hmrc' && (
          <div className="space-y-6">
            <div className="border border-splash-blue/40 bg-splash-blue/5 px-4 py-3 text-sm text-splash-blue">
              ⓘ Summary for HMRC Self Assessment. Keep invoices and receipts as evidence.
            </div>

            {/* Use tax year stats */}
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="border border-line p-4">
                <p className="tag-label">Total Turnover</p>
                <p className="mt-2 font-mono text-2xl">
                  <Price cents={taxYearStats.revenue} />
                </p>
              </div>
              <div className="border border-line p-4">
                <p className="tag-label">Cost of Goods Sold</p>
                <p className="mt-2 font-mono text-2xl">
                  <Price cents={taxYearStats.cogs} />
                </p>
              </div>
              <div className="border border-line p-4">
                <p className="tag-label">Gross Profit</p>
                <p className="mt-2 font-mono text-2xl">
                  <Price cents={taxYearStats.revenue - taxYearStats.cogs} />
                </p>
                <p className="mt-1 text-xs text-muted">
                  {taxYearStats.revenue > 0 ? ((taxYearStats.revenue - taxYearStats.cogs) / taxYearStats.revenue * 100).toFixed(1) : 0}% margin
                </p>
              </div>
              <div className="border border-line p-4">
                <p className="tag-label">Operating Expenses</p>
                <p className="mt-2 font-mono text-2xl">
                  <Price cents={taxYearStats.expenses} />
                </p>
              </div>
            </div>

            <div className="border-2 border-line p-6">
              <div className="flex items-baseline justify-between">
                <p className="font-display text-lg">Net Profit (before tax)</p>
                <p className={`font-mono text-3xl font-medium ${taxYearStats.profit >= 0 ? 'text-green-600' : 'text-splash-pink'}`}>
                  <Price cents={taxYearStats.profit} />
                </p>
              </div>
              <p className="mt-2 text-xs text-muted">
                {taxYearStats.revenue > 0 ? (taxYearStats.profit / taxYearStats.revenue * 100).toFixed(1) : 0}% of revenue
              </p>
            </div>

            <div className="text-xs text-muted space-y-2">
              <p><strong>What to report to HMRC:</strong></p>
              <ul className="list-disc pl-5 space-y-1">
                <li>Total turnover: <span className="font-mono"><Price cents={taxYearStats.revenue} /></span></li>
                <li>Cost of sales (purchases): <span className="font-mono"><Price cents={taxYearStats.cogs} /></span></li>
                <li>Running expenses: <span className="font-mono"><Price cents={taxYearStats.expenses} /></span></li>
                <li>Profit before tax: <span className="font-mono"><Price cents={taxYearStats.profit} /></span></li>
              </ul>
            </div>
          </div>
        )}

        {/* Drill-down Modal */}
        {drillDownMonth && (
          <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
            <div className="bg-paper border border-line max-w-2xl w-full max-h-96 overflow-auto">
              <div className="sticky top-0 bg-paper border-b border-line px-4 py-3 flex items-center justify-between">
                <h3 className="font-display text-lg">Transactions: {drillDownMonth}</h3>
                <button
                  onClick={() => setDrillDownMonth(null)}
                  className="text-muted hover:text-ink"
                >
                  ✕
                </button>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full border-collapse text-sm">
                  <thead>
                    <tr className="border-b border-line bg-surface">
                      <th className="text-left py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'date', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>
                        Date {sortBy.field === 'date' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}
                      </th>
                      <th className="text-left py-2 px-3 font-medium">Type</th>
                      <th className="text-left py-2 px-3 font-medium">Description</th>
                      <th className="text-right py-2 px-3 font-medium cursor-pointer hover:text-clay" onClick={() => setSortBy({ field: 'amount', order: sortBy.order === 'asc' ? 'desc' : 'asc' })}>
                        Amount {sortBy.field === 'amount' ? (sortBy.order === 'desc' ? '▼' : '▲') : ''}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {drillDownData.map((item) => (
                      <tr key={`${item.id}-${item.date}`} className="border-b border-line hover:bg-surface">
                        <td className="py-2 px-3 text-xs font-mono">{item.date.toLocaleDateString('en-GB')}</td>
                        <td className="py-2 px-3">
                          <span className={`px-2 py-1 rounded text-xs font-medium ${item.type === 'INCOME' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                            {item.type}
                          </span>
                        </td>
                        <td className="py-2 px-3 text-xs">{item.description}</td>
                        <td className="text-right py-2 px-3 font-mono font-medium">
                          <Price cents={item.amount} />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="border-t border-line bg-surface px-4 py-3 text-sm">
                <p className="text-muted">Total: <span className="font-mono font-medium text-ink"><Price cents={drillDownData.reduce((sum, item) => item.type === 'INCOME' ? sum + item.amount : sum - item.amount, 0)} /></span></p>
              </div>
            </div>
          </div>
        )}
      </div>
    </>
  );
}
