'use client';

import { useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
import { format } from 'date-fns';
import { useSearchParams } from 'next/navigation';
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis
} from 'recharts';
import { ChartNoAxesCombined, RefreshCcw, Search } from 'lucide-react';
import { AppShell } from '@/components/shell/app-shell';
import { MetricCard } from '@/components/dashboard/metric-card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Panel } from '@/components/ui/panel';
import { useAuthGuard } from '@/hooks/use-auth-guard';
import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
import {
  formatCurrencyByScale,
  formatPercent,
  type NumberScaleUnit
} from '@/lib/format';
import { queryKeys } from '@/lib/query/keys';
import { companyAnalysisQueryOptions } from '@/lib/query/options';
import type { CompanyAnalysis } from '@/lib/types';

type StatementPeriodPoint = {
  filingDate: string;
  filingType: '10-K' | '10-Q';
  periodLabel: 'Quarter End' | 'Fiscal Year End';
};

type FinancialSeriesPoint = StatementPeriodPoint & {
  periodKind: 'quarterly' | 'fiscalYearEnd';
  label: string;
  revenue: number | null;
  netIncome: number | null;
  totalAssets: number | null;
  cash: number | null;
  debt: number | null;
  netMargin: number | null;
  debtToAssets: number | null;
};

type CompanyMetricPoint = StatementPeriodPoint & {
  metrics: string[];
};

type StatementMatrixRow<TPoint extends StatementPeriodPoint> = {
  key: string;
  label: string;
  value: (point: TPoint, index: number, series: TPoint[]) => string;
  valueClassName?: (point: TPoint, index: number, series: TPoint[]) => string | undefined;
};

type ChartPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';

const CHART_PERIOD_FILTER_OPTIONS: Array<{ value: ChartPeriodFilter; label: string }> = [
  { value: 'quarterlyAndFiscalYearEnd', label: 'Quarterly + Fiscal Year End' },
  { value: 'quarterlyOnly', label: 'Quarterly only' },
  { value: 'fiscalYearEndOnly', label: 'Fiscal Year End only' }
];

const FINANCIAL_VALUE_SCALE_OPTIONS: Array<{ value: NumberScaleUnit; label: string }> = [
  { value: 'thousands', label: 'Thousands (K)' },
  { value: 'millions', label: 'Millions (M)' },
  { value: 'billions', label: 'Billions (B)' }
];

const CHART_TEXT = '#e8fff8';
const CHART_MUTED = '#b4ced9';
const CHART_GRID = 'rgba(126, 217, 255, 0.24)';
const CHART_TOOLTIP_BG = 'rgba(6, 17, 24, 0.95)';
const CHART_TOOLTIP_BORDER = 'rgba(123, 255, 217, 0.45)';

function renderLegendLabel(value: string) {
  return <span style={{ color: CHART_TEXT }}>{value}</span>;
}

function formatShortDate(value: string) {
  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) {
    return 'Unknown';
  }

  return format(parsed, 'MMM yyyy');
}

function formatLongDate(value: string) {
  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) {
    return 'Unknown';
  }

  return format(parsed, 'MMM dd, yyyy');
}

function ratioPercent(numerator: number | null, denominator: number | null) {
  if (numerator === null || denominator === null || denominator === 0) {
    return null;
  }

  return (numerator / denominator) * 100;
}

function asDisplayCurrency(
  value: number | null,
  scale: NumberScaleUnit
) {
  return value === null ? 'n/a' : formatCurrencyByScale(value, scale);
}

function asDisplayPercent(value: number | null) {
  return value === null ? 'n/a' : formatPercent(value);
}

function asDisplayMultiple(value: number | null) {
  return value === null ? 'n/a' : `${value.toFixed(2)}x`;
}

function asDisplaySignedCurrency(
  value: number | null,
  scale: NumberScaleUnit
) {
  if (value === null) {
    return 'n/a';
  }

  const formatted = formatCurrencyByScale(value, scale);
  return value > 0 ? `+${formatted}` : formatted;
}

function normalizeTooltipValue(value: unknown) {
  if (Array.isArray(value)) {
    const [first] = value;
    return typeof first === 'number' || typeof first === 'string' ? first : null;
  }

  if (typeof value === 'number' || typeof value === 'string') {
    return value;
  }

  return null;
}

function asTooltipCurrency(
  value: unknown,
  scale: NumberScaleUnit
) {
  const normalized = normalizeTooltipValue(value);
  if (normalized === null) {
    return 'n/a';
  }

  const numeric = Number(normalized);
  if (!Number.isFinite(numeric)) {
    return 'n/a';
  }

  return formatCurrencyByScale(numeric, scale);
}

function asAxisCurrencyTick(
  value: number,
  scale: NumberScaleUnit
) {
  return formatCurrencyByScale(value, scale, { maximumFractionDigits: 1 });
}

function includesChartPeriod(point: FinancialSeriesPoint, filter: ChartPeriodFilter) {
  if (filter === 'quarterlyOnly') {
    return point.periodKind === 'quarterly';
  }

  if (filter === 'fiscalYearEndOnly') {
    return point.periodKind === 'fiscalYearEnd';
  }

  return true;
}

function ratioMultiple(numerator: number | null, denominator: number | null) {
  if (numerator === null || denominator === null || denominator === 0) {
    return null;
  }

  return numerator / denominator;
}

function StatementMatrixTable<TPoint extends StatementPeriodPoint>({
  points,
  rows
}: {
  points: TPoint[];
  rows: Array<StatementMatrixRow<TPoint>>;
}) {
  return (
    <div className="overflow-x-auto">
      <table className="data-table min-w-[980px]">
        <thead>
          <tr>
            <th className="sticky left-0 z-10 bg-[color:var(--panel)]">Metric</th>
            {points.map((point, index) => (
              <th key={`${point.filingDate}-${point.filingType}-${index}`}>
                <div className="flex flex-col gap-1">
                  <span>{formatLongDate(point.filingDate)}</span>
                  <span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{point.filingType} · {point.periodLabel}</span>
                </div>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.key}>
              <td className="sticky left-0 z-10 whitespace-nowrap bg-[color:var(--panel)] font-medium text-[color:var(--terminal-bright)]">{row.label}</td>
              {points.map((point, index, series) => (
                <td
                  key={`${row.key}-${point.filingDate}-${point.filingType}-${index}`}
                  className={row.valueClassName?.(point, index, series)}
                >
                  {row.value(point, index, series)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function buildOperatingStatementRows(
  scale: NumberScaleUnit
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
  return [
    {
      key: 'revenue',
      label: 'Revenue',
      value: (point) => asDisplayCurrency(point.revenue, scale)
    },
    {
      key: 'net-income',
      label: 'Net Income',
      value: (point) => asDisplayCurrency(point.netIncome, scale),
      valueClassName: (point) => {
        if (point.netIncome === null) {
          return undefined;
        }

        return point.netIncome >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
      }
    },
    {
      key: 'net-margin',
      label: 'Net Margin',
      value: (point) => asDisplayPercent(point.netMargin)
    }
  ];
}

function buildBalanceSheetRows(
  scale: NumberScaleUnit
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
  return [
    {
      key: 'total-assets',
      label: 'Total Assets',
      value: (point) => asDisplayCurrency(point.totalAssets, scale)
    },
    {
      key: 'cash',
      label: 'Cash',
      value: (point) => asDisplayCurrency(point.cash, scale)
    },
    {
      key: 'debt',
      label: 'Debt',
      value: (point) => asDisplayCurrency(point.debt, scale)
    },
    {
      key: 'debt-to-assets',
      label: 'Debt / Assets',
      value: (point) => asDisplayPercent(point.debtToAssets),
      valueClassName: (point) => {
        if (point.debtToAssets === null) {
          return undefined;
        }

        return point.debtToAssets <= 60 ? 'text-[#96f5bf]' : 'text-[#ffd08a]';
      }
    }
  ];
}

function buildCashFlowProxyRows(
  scale: NumberScaleUnit
): Array<StatementMatrixRow<FinancialSeriesPoint>> {
  return [
    {
      key: 'ending-cash',
      label: 'Ending Cash Balance',
      value: (point) => asDisplayCurrency(point.cash, scale)
    },
    {
      key: 'cash-change',
      label: 'Cash Change vs Prior',
      value: (point, index, series) => {
        if (index === 0) {
          return 'n/a';
        }

        const previous = series[index - 1];
        if (point.cash === null || previous.cash === null) {
          return 'n/a';
        }

        return asDisplaySignedCurrency(point.cash - previous.cash, scale);
      },
      valueClassName: (point, index, series) => {
        if (index === 0) {
          return undefined;
        }

        const previous = series[index - 1];
        if (point.cash === null || previous.cash === null) {
          return undefined;
        }

        return point.cash - previous.cash >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
      }
    },
    {
      key: 'debt-change',
      label: 'Debt Change vs Prior',
      value: (point, index, series) => {
        if (index === 0) {
          return 'n/a';
        }

        const previous = series[index - 1];
        if (point.debt === null || previous.debt === null) {
          return 'n/a';
        }

        return asDisplaySignedCurrency(point.debt - previous.debt, scale);
      },
      valueClassName: (point, index, series) => {
        if (index === 0) {
          return undefined;
        }

        const previous = series[index - 1];
        if (point.debt === null || previous.debt === null) {
          return undefined;
        }

        return point.debt - previous.debt <= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]';
      }
    },
    {
      key: 'cash-to-debt',
      label: 'Cash / Debt',
      value: (point) => asDisplayMultiple(ratioMultiple(point.cash, point.debt))
    }
  ];
}

function isFinancialPeriodForm(filingType: CompanyAnalysis['financials'][number]['filingType']): filingType is '10-K' | '10-Q' {
  return filingType === '10-K' || filingType === '10-Q';
}

export default function FinancialsPage() {
  return (
    <Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading financial terminal...</div>}>
      <FinancialsPageContent />
    </Suspense>
  );
}

function FinancialsPageContent() {
  const { isPending, isAuthenticated } = useAuthGuard();
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();
  const { prefetchResearchTicker } = useLinkPrefetch();

  const [tickerInput, setTickerInput] = useState('MSFT');
  const [ticker, setTicker] = useState('MSFT');
  const [analysis, setAnalysis] = useState<CompanyAnalysis | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [chartPeriodFilter, setChartPeriodFilter] = useState<ChartPeriodFilter>('quarterlyAndFiscalYearEnd');
  const [financialValueScale, setFinancialValueScale] = useState<NumberScaleUnit>('millions');

  useEffect(() => {
    const fromQuery = searchParams.get('ticker');
    if (!fromQuery) {
      return;
    }

    const normalized = fromQuery.trim().toUpperCase();
    if (!normalized) {
      return;
    }

    setTickerInput(normalized);
    setTicker(normalized);
  }, [searchParams]);

  const loadFinancials = useCallback(async (symbol: string) => {
    const options = companyAnalysisQueryOptions(symbol);

    if (!queryClient.getQueryData(options.queryKey)) {
      setLoading(true);
    }

    setError(null);

    try {
      const response = await queryClient.ensureQueryData(options);
      setAnalysis(response.analysis);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to load financial history');
      setAnalysis(null);
    } finally {
      setLoading(false);
    }
  }, [queryClient]);

  useEffect(() => {
    if (!isPending && isAuthenticated) {
      void loadFinancials(ticker);
    }
  }, [isPending, isAuthenticated, ticker, loadFinancials]);

  const financialSeries = useMemo<FinancialSeriesPoint[]>(() => {
    return (analysis?.financials ?? [])
      .filter((entry): entry is CompanyAnalysis['financials'][number] & { filingType: '10-K' | '10-Q' } => {
        return isFinancialPeriodForm(entry.filingType);
      })
      .slice()
      .sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate))
      .map((entry) => ({
        filingDate: entry.filingDate,
        filingType: entry.filingType,
        periodKind: entry.filingType === '10-Q' ? 'quarterly' : 'fiscalYearEnd',
        periodLabel: entry.filingType === '10-Q' ? 'Quarter End' : 'Fiscal Year End',
        label: formatShortDate(entry.filingDate),
        revenue: entry.revenue ?? null,
        netIncome: entry.netIncome ?? null,
        totalAssets: entry.totalAssets ?? null,
        cash: entry.cash ?? null,
        debt: entry.debt ?? null,
        netMargin: ratioPercent(entry.netIncome ?? null, entry.revenue ?? null),
        debtToAssets: ratioPercent(entry.debt ?? null, entry.totalAssets ?? null)
      }));
  }, [analysis?.financials]);

  const chartSeries = useMemo(() => {
    return financialSeries.filter((point) => includesChartPeriod(point, chartPeriodFilter));
  }, [financialSeries, chartPeriodFilter]);

  const selectedChartFilterLabel = useMemo(() => {
    return CHART_PERIOD_FILTER_OPTIONS.find((option) => option.value === chartPeriodFilter)?.label ?? 'Quarterly + Fiscal Year End';
  }, [chartPeriodFilter]);

  const selectedFinancialScaleLabel = useMemo(() => {
    return FINANCIAL_VALUE_SCALE_OPTIONS.find((option) => option.value === financialValueScale)?.label ?? 'Millions (M)';
  }, [financialValueScale]);

  const latestSnapshot = financialSeries[financialSeries.length - 1] ?? null;

  const liquidityRatio = useMemo(() => {
    if (!latestSnapshot || latestSnapshot.cash === null || latestSnapshot.debt === null || latestSnapshot.debt === 0) {
      return null;
    }

    return latestSnapshot.cash / latestSnapshot.debt;
  }, [latestSnapshot]);

  const coverage = useMemo(() => {
    const total = chartSeries.length;

    const asCoverage = (entries: number) => {
      if (total === 0) {
        return '0%';
      }

      return `${Math.round((entries / total) * 100)}%`;
    };

    return {
      total,
      revenue: asCoverage(chartSeries.filter((point) => point.revenue !== null).length),
      netIncome: asCoverage(chartSeries.filter((point) => point.netIncome !== null).length),
      assets: asCoverage(chartSeries.filter((point) => point.totalAssets !== null).length),
      cash: asCoverage(chartSeries.filter((point) => point.cash !== null).length),
      debt: asCoverage(chartSeries.filter((point) => point.debt !== null).length)
    };
  }, [chartSeries]);

  const companyMetricSeries = useMemo<CompanyMetricPoint[]>(() => {
    return (analysis?.filings ?? [])
      .filter((entry): entry is CompanyAnalysis['filings'][number] & { filing_type: '10-K' | '10-Q' } => {
        return isFinancialPeriodForm(entry.filing_type);
      })
      .slice()
      .sort((a, b) => Date.parse(a.filing_date) - Date.parse(b.filing_date))
      .map((entry) => ({
        filingDate: entry.filing_date,
        filingType: entry.filing_type,
        periodLabel: entry.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End',
        metrics: entry.analysis?.companyMetrics ?? []
      }));
  }, [analysis?.filings]);

  const companyMetricRows = useMemo<Array<StatementMatrixRow<CompanyMetricPoint>>>(() => {
    const rowCount = companyMetricSeries.reduce((max, point) => Math.max(max, point.metrics.length), 0);
    return Array.from({ length: rowCount }, (_, index) => ({
      key: `company-metric-${index + 1}`,
      label: `Metric ${index + 1}`,
      value: (point) => point.metrics[index] ?? 'n/a'
    }));
  }, [companyMetricSeries]);

  const operatingStatementRows = useMemo(() => {
    return buildOperatingStatementRows(financialValueScale);
  }, [financialValueScale]);

  const balanceSheetRows = useMemo(() => {
    return buildBalanceSheetRows(financialValueScale);
  }, [financialValueScale]);

  const cashFlowProxyRows = useMemo(() => {
    return buildCashFlowProxyRows(financialValueScale);
  }, [financialValueScale]);

  if (isPending || !isAuthenticated) {
    return <div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Loading financial terminal...</div>;
  }

  return (
    <AppShell
      title="Financials"
      subtitle="Explore 10-K and 10-Q fundamentals, profitability, and balance sheet dynamics by ticker."
      activeTicker={analysis?.company.ticker ?? ticker}
      actions={(
        <Button
          variant="secondary"
          onClick={() => {
            void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(ticker.trim().toUpperCase()) });
            void loadFinancials(ticker);
          }}
        >
          <RefreshCcw className="size-4" />
          Refresh
        </Button>
      )}
    >
      <Panel title="Company Selector" subtitle="Load the latest 10-K / 10-Q financial statement trend available in your filings index.">
        <form
          className="flex flex-wrap items-center gap-3"
          onSubmit={(event) => {
            event.preventDefault();
            const normalized = tickerInput.trim().toUpperCase();
            if (!normalized) {
              return;
            }
            setTicker(normalized);
          }}
        >
          <Input
            value={tickerInput}
            onChange={(event) => setTickerInput(event.target.value.toUpperCase())}
            placeholder="Ticker (AAPL)"
            className="max-w-xs"
          />
          <Button type="submit">
            <Search className="size-4" />
            Load Financials
          </Button>
          {analysis ? (
            <>
              <Link
                href={`/analysis?ticker=${analysis.company.ticker}`}
                onMouseEnter={() => prefetchResearchTicker(analysis.company.ticker)}
                onFocus={() => prefetchResearchTicker(analysis.company.ticker)}
                className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
              >
                Open full analysis
              </Link>
              <Link
                href={`/filings?ticker=${analysis.company.ticker}`}
                onMouseEnter={() => prefetchResearchTicker(analysis.company.ticker)}
                onFocus={() => prefetchResearchTicker(analysis.company.ticker)}
                className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
              >
                Open filings stream
              </Link>
            </>
          ) : null}
        </form>
      </Panel>

      {error ? (
        <Panel>
          <p className="text-sm text-[#ffb5b5]">{error}</p>
        </Panel>
      ) : null}

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        <MetricCard
          label="Latest Revenue"
          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.revenue, financialValueScale) : 'n/a'}
          delta={latestSnapshot ? `${latestSnapshot.filingType} · ${formatLongDate(latestSnapshot.filingDate)}` : 'No filings loaded'}
        />
        <MetricCard
          label="Latest Net Income"
          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.netIncome, financialValueScale) : 'n/a'}
          delta={latestSnapshot ? `Net margin ${asDisplayPercent(latestSnapshot.netMargin)}` : 'No filings loaded'}
          positive={(latestSnapshot?.netIncome ?? 0) >= 0}
        />
        <MetricCard
          label="Latest Total Assets"
          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.totalAssets, financialValueScale) : 'n/a'}
          delta={latestSnapshot ? `Debt/assets ${asDisplayPercent(latestSnapshot.debtToAssets)}` : 'No filings loaded'}
          positive={latestSnapshot ? (latestSnapshot.debtToAssets ?? 0) <= 60 : true}
        />
        <MetricCard
          label="Cash / Debt"
          value={liquidityRatio === null ? 'n/a' : `${liquidityRatio.toFixed(2)}x`}
          delta={latestSnapshot ? `Cash ${asDisplayCurrency(latestSnapshot.cash, financialValueScale)} · Debt ${asDisplayCurrency(latestSnapshot.debt, financialValueScale)}` : 'No filings loaded'}
        />
      </div>

      <Panel title="Chart Period Filter" subtitle="Switch chart views between quarter-end and fiscal-year-end snapshots.">
        <div className="flex flex-wrap gap-2">
          {CHART_PERIOD_FILTER_OPTIONS.map((option) => (
            <Button
              key={option.value}
              type="button"
              variant={option.value === chartPeriodFilter ? 'primary' : 'ghost'}
              onClick={() => setChartPeriodFilter(option.value)}
            >
              {option.label}
            </Button>
          ))}
        </div>
      </Panel>

      <Panel title="Financial Value Scale" subtitle={`Display revenue, net income, assets, cash, and debt in ${selectedFinancialScaleLabel}.`}>
        <div className="flex flex-wrap gap-2">
          {FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
            <Button
              key={option.value}
              type="button"
              variant={option.value === financialValueScale ? 'primary' : 'ghost'}
              onClick={() => setFinancialValueScale(option.value)}
            >
              {option.label}
            </Button>
          ))}
        </div>
      </Panel>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <Panel title="Income Statement Trend" subtitle="Revenue and net income by filing period.">
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading statement data...</p>
          ) : chartSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No filing metrics match the current chart period filter.</p>
          ) : (
            <div className="h-[330px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={chartSeries}>
                  <CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
                  <XAxis
                    dataKey="label"
                    minTickGap={20}
                    stroke={CHART_MUTED}
                    fontSize={12}
                    axisLine={{ stroke: CHART_MUTED }}
                    tickLine={{ stroke: CHART_MUTED }}
                    tick={{ fill: CHART_MUTED }}
                  />
                  <YAxis
                    stroke={CHART_MUTED}
                    fontSize={12}
                    axisLine={{ stroke: CHART_MUTED }}
                    tickLine={{ stroke: CHART_MUTED }}
                    tick={{ fill: CHART_MUTED }}
                    tickFormatter={(value: number) => asAxisCurrencyTick(value, financialValueScale)}
                  />
                  <Tooltip
                    formatter={(value) => asTooltipCurrency(value, financialValueScale)}
                    contentStyle={{
                      backgroundColor: CHART_TOOLTIP_BG,
                      border: `1px solid ${CHART_TOOLTIP_BORDER}`,
                      borderRadius: '0.75rem'
                    }}
                    labelStyle={{ color: CHART_TEXT }}
                    itemStyle={{ color: CHART_TEXT }}
                    cursor={{ fill: 'rgba(104, 255, 213, 0.08)' }}
                  />
                  <Legend wrapperStyle={{ paddingTop: '0.75rem' }} formatter={renderLegendLabel} />
                  <Bar dataKey="revenue" name="Revenue" fill="#68ffd5" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="netIncome" name="Net Income" fill="#5fd3ff" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          )}
        </Panel>

        <Panel title="Balance Sheet Trend" subtitle="Assets, cash, and debt progression from filings.">
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading balance sheet data...</p>
          ) : chartSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet metrics match the current chart period filter.</p>
          ) : (
            <div className="h-[330px]">
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={chartSeries}>
                  <defs>
                    <linearGradient id="assetsGradient" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="5%" stopColor="#68ffd5" stopOpacity={0.32} />
                      <stop offset="95%" stopColor="#68ffd5" stopOpacity={0} />
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
                  <XAxis
                    dataKey="label"
                    minTickGap={20}
                    stroke={CHART_MUTED}
                    fontSize={12}
                    axisLine={{ stroke: CHART_MUTED }}
                    tickLine={{ stroke: CHART_MUTED }}
                    tick={{ fill: CHART_MUTED }}
                  />
                  <YAxis
                    stroke={CHART_MUTED}
                    fontSize={12}
                    axisLine={{ stroke: CHART_MUTED }}
                    tickLine={{ stroke: CHART_MUTED }}
                    tick={{ fill: CHART_MUTED }}
                    tickFormatter={(value: number) => asAxisCurrencyTick(value, financialValueScale)}
                  />
                  <Tooltip
                    formatter={(value) => asTooltipCurrency(value, financialValueScale)}
                    contentStyle={{
                      backgroundColor: CHART_TOOLTIP_BG,
                      border: `1px solid ${CHART_TOOLTIP_BORDER}`,
                      borderRadius: '0.75rem'
                    }}
                    labelStyle={{ color: CHART_TEXT }}
                    itemStyle={{ color: CHART_TEXT }}
                    cursor={{ fill: 'rgba(104, 255, 213, 0.08)' }}
                  />
                  <Legend wrapperStyle={{ paddingTop: '0.75rem' }} formatter={renderLegendLabel} />
                  <Area type="monotone" dataKey="totalAssets" name="Total Assets" stroke="#68ffd5" fill="url(#assetsGradient)" strokeWidth={2} />
                  <Line type="monotone" dataKey="cash" name="Cash" stroke="#8bd3ff" strokeWidth={2} dot={false} />
                  <Line type="monotone" dataKey="debt" name="Debt" stroke="#ffd08a" strokeWidth={2} dot={false} />
                </AreaChart>
              </ResponsiveContainer>
            </div>
          )}
        </Panel>
      </div>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
        <Panel title="Quality Ratios" subtitle="Profitability and leverage trend over time." className="xl:col-span-2">
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading ratio trends...</p>
          ) : chartSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No ratio points match the current chart period filter.</p>
          ) : (
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={chartSeries}>
                  <CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
                  <XAxis
                    dataKey="label"
                    minTickGap={20}
                    stroke={CHART_MUTED}
                    fontSize={12}
                    axisLine={{ stroke: CHART_MUTED }}
                    tickLine={{ stroke: CHART_MUTED }}
                    tick={{ fill: CHART_MUTED }}
                  />
                  <YAxis
                    stroke={CHART_MUTED}
                    fontSize={12}
                    axisLine={{ stroke: CHART_MUTED }}
                    tickLine={{ stroke: CHART_MUTED }}
                    tick={{ fill: CHART_MUTED }}
                    tickFormatter={(value: number) => `${value.toFixed(0)}%`}
                  />
                  <Tooltip
                    formatter={(value) => {
                      const normalized = normalizeTooltipValue(value);
                      if (normalized === null) {
                        return 'n/a';
                      }

                      const numeric = Number(normalized);
                      return Number.isFinite(numeric) ? `${numeric.toFixed(2)}%` : 'n/a';
                    }}
                    contentStyle={{
                      backgroundColor: CHART_TOOLTIP_BG,
                      border: `1px solid ${CHART_TOOLTIP_BORDER}`,
                      borderRadius: '0.75rem'
                    }}
                    labelStyle={{ color: CHART_TEXT }}
                    itemStyle={{ color: CHART_TEXT }}
                    cursor={{ stroke: 'rgba(104, 255, 213, 0.35)', strokeWidth: 1 }}
                  />
                  <Legend wrapperStyle={{ paddingTop: '0.75rem' }} formatter={renderLegendLabel} />
                  <Line type="monotone" dataKey="netMargin" name="Net Margin" stroke="#68ffd5" strokeWidth={2} dot={false} connectNulls />
                  <Line type="monotone" dataKey="debtToAssets" name="Debt / Assets" stroke="#ffb980" strokeWidth={2} dot={false} connectNulls />
                </LineChart>
              </ResponsiveContainer>
            </div>
          )}
        </Panel>

        <Panel title="Data Coverage" subtitle={`${coverage.total} snapshots in chart view (${selectedChartFilterLabel}).`}>
          <dl className="space-y-3">
            <div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <dt className="text-[color:var(--terminal-muted)]">Revenue coverage</dt>
              <dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.revenue}</dd>
            </div>
            <div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <dt className="text-[color:var(--terminal-muted)]">Net income coverage</dt>
              <dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.netIncome}</dd>
            </div>
            <div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <dt className="text-[color:var(--terminal-muted)]">Asset coverage</dt>
              <dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.assets}</dd>
            </div>
            <div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <dt className="text-[color:var(--terminal-muted)]">Cash coverage</dt>
              <dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.cash}</dd>
            </div>
            <div className="flex items-center justify-between rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <dt className="text-[color:var(--terminal-muted)]">Debt coverage</dt>
              <dd className="font-medium text-[color:var(--terminal-bright)]">{coverage.debt}</dd>
            </div>
          </dl>
        </Panel>
      </div>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <Panel title="Operating Statement" subtitle={`Dates are in the top row; operating metrics are listed down the left side. Values shown in ${selectedFinancialScaleLabel}.`}>
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading operating statement...</p>
          ) : financialSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No operating statement rows are available for this ticker yet.</p>
          ) : (
            <StatementMatrixTable points={financialSeries} rows={operatingStatementRows} />
          )}
        </Panel>

        <Panel title="Balance Sheet" subtitle={`Balance sheet rows transposed by filing date for side-by-side period comparison. Values shown in ${selectedFinancialScaleLabel}.`}>
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading balance sheet...</p>
          ) : financialSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No balance sheet rows are available for this ticker yet.</p>
          ) : (
            <StatementMatrixTable points={financialSeries} rows={balanceSheetRows} />
          )}
        </Panel>

        <Panel title="Cash Flow Statement" subtitle={`Proxy cash-flow view derived from period-end cash and debt until direct cash-flow tags are indexed. Values shown in ${selectedFinancialScaleLabel}.`}>
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading cash flow statement...</p>
          ) : financialSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No cash flow statement rows are available for this ticker yet.</p>
          ) : (
            <StatementMatrixTable points={financialSeries} rows={cashFlowProxyRows} />
          )}
        </Panel>

        <Panel title="Company Metrics" subtitle="Company-specific KPI notes extracted from filings (same-store sales, ARPU, users, and similar metrics).">
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading company metrics...</p>
          ) : companyMetricSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No filing periods are available for company metrics yet.</p>
          ) : companyMetricRows.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No company-specific KPI metrics were extracted for the selected filings.</p>
          ) : (
            <StatementMatrixTable points={companyMetricSeries} rows={companyMetricRows} />
          )}
        </Panel>
      </div>

      <Panel>
        <div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
          <ChartNoAxesCombined className="size-4" />
          Financial lens: revenue + margin + balance sheet strength
        </div>
      </Panel>
    </AppShell>
  );
}