'use client';

import { useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { format } from 'date-fns';
import { useSearchParams } from 'next/navigation';
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Line,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis
} from 'recharts';
import {
  AlertTriangle,
  ChartNoAxesCombined,
  ChevronDown,
  Download,
  GitCompareArrows,
  RefreshCcw,
  Search
} from 'lucide-react';
import { AppShell } from '@/components/shell/app-shell';
import { MetricCard } from '@/components/dashboard/metric-card';
import {
  FinancialControlBar,
  type FinancialControlAction,
  type FinancialControlSection
} from '@/components/financials/control-bar';
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 { queueFilingSync } from '@/lib/api';
import {
  formatCurrencyByScale,
  formatPercent,
  type NumberScaleUnit
} from '@/lib/format';
import { queryKeys } from '@/lib/query/keys';
import { companyFinancialStatementsQueryOptions } from '@/lib/query/options';
import type {
  CompanyFinancialStatementsResponse,
  DimensionBreakdownRow,
  FinancialHistoryWindow,
  FinancialStatementSurfaceKind,
  FinancialStatementKind,
  StandardizedStatementRow,
  TaxonomyStatementRow
} from '@/lib/types';

type LoadOptions = {
  cursor?: string | null;
  append?: boolean;
};

type OverviewPoint = {
  periodId: string;
  filingDate: string;
  periodEnd: string | null;
  label: string;
  revenue: number | null;
  netIncome: number | null;
  totalAssets: number | null;
  cash: number | null;
  debt: number | null;
};

type DisplayRow = TaxonomyStatementRow | StandardizedStatementRow;

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 STATEMENT_OPTIONS: Array<{ value: FinancialStatementKind; label: string }> = [
  { value: 'income', label: 'Income' },
  { value: 'balance', label: 'Balance Sheet' },
  { value: 'cash_flow', label: 'Cash Flow' },
  { value: 'equity', label: 'Equity' },
  { value: 'comprehensive_income', label: 'Comprehensive Income' }
];

const WINDOW_OPTIONS: Array<{ value: FinancialHistoryWindow; label: string }> = [
  { value: '10y', label: '10 Years' },
  { value: 'all', label: 'Full Available' }
];

const SURFACE_OPTIONS: Array<{ value: FinancialStatementSurfaceKind; label: string }> = [
  { value: 'standardized', label: 'Standardized' },
  { value: 'faithful', label: 'Filing-faithful' }
];

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 formatLongDate(value: string) {
  const parsed = new Date(value);
  if (Number.isNaN(parsed.getTime())) {
    return 'Unknown';
  }

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

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

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

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

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

function asTooltipCurrency(value: unknown, scale: NumberScaleUnit) {
  const numeric = Number(value);
  if (!Number.isFinite(numeric)) {
    return 'n/a';
  }

  return formatCurrencyByScale(numeric, scale);
}

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

  return (numerator / denominator) * 100;
}

function rowValue(row: { values: Record<string, number | null> }, periodId: string) {
  return periodId in row.values ? row.values[periodId] : null;
}

function isFaithfulRow(row: DisplayRow): row is TaxonomyStatementRow {
  return 'localName' in row;
}

function isStandardizedRow(row: DisplayRow): row is StandardizedStatementRow {
  return 'sourceRowKeys' in row;
}

function mergeSurfaceRows<T extends { key: string; values: Record<string, number | null>; hasDimensions: boolean }>(
  rows: T[],
  mergeRow: (existing: T, row: T) => void
) {
  const rowMap = new Map<string, T>();

  for (const row of rows) {
    const existing = rowMap.get(row.key);
    if (!existing) {
      rowMap.set(row.key, structuredClone(row));
      continue;
    }

    mergeRow(existing, row);
  }

  return [...rowMap.values()];
}

function mergeFinancialPages(
  base: CompanyFinancialStatementsResponse | null,
  next: CompanyFinancialStatementsResponse
) {
  if (!base) {
    return next;
  }

  const periods = [...base.periods, ...next.periods]
    .filter((period, index, list) => list.findIndex((item) => item.id === period.id) === index)
    .sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate));

  const faithfulRows = mergeSurfaceRows(
    [...base.surfaces.faithful.rows, ...next.surfaces.faithful.rows],
    (existing, row) => {
      existing.hasDimensions = existing.hasDimensions || row.hasDimensions;
      existing.order = Math.min(existing.order, row.order);
      existing.depth = Math.min(existing.depth, row.depth);
      if (!existing.parentKey && row.parentKey) {
        existing.parentKey = row.parentKey;
      }

      for (const [periodId, value] of Object.entries(row.values)) {
        if (!(periodId in existing.values)) {
          existing.values[periodId] = value;
        }
      }

      for (const [periodId, unit] of Object.entries(row.units)) {
        if (!(periodId in existing.units)) {
          existing.units[periodId] = unit;
        }
      }

      for (const factId of row.sourceFactIds) {
        if (!existing.sourceFactIds.includes(factId)) {
          existing.sourceFactIds.push(factId);
        }
      }
    }
  ).sort((left, right) => {
    if (left.order !== right.order) {
      return left.order - right.order;
    }

    return left.label.localeCompare(right.label);
  });

  const standardizedRows = mergeSurfaceRows(
    [...base.surfaces.standardized.rows, ...next.surfaces.standardized.rows],
    (existing, row) => {
      existing.hasDimensions = existing.hasDimensions || row.hasDimensions;
      existing.order = Math.min(existing.order, row.order);

      for (const [periodId, value] of Object.entries(row.values)) {
        if (!(periodId in existing.values)) {
          existing.values[periodId] = value;
        }
      }

      for (const [periodId, sourceRowKey] of Object.entries(row.resolvedSourceRowKeys)) {
        if (!(periodId in existing.resolvedSourceRowKeys)) {
          existing.resolvedSourceRowKeys[periodId] = sourceRowKey;
        }
      }

      for (const concept of row.sourceConcepts) {
        if (!existing.sourceConcepts.includes(concept)) {
          existing.sourceConcepts.push(concept);
        }
      }

      for (const rowKey of row.sourceRowKeys) {
        if (!existing.sourceRowKeys.includes(rowKey)) {
          existing.sourceRowKeys.push(rowKey);
        }
      }

      for (const factId of row.sourceFactIds) {
        if (!existing.sourceFactIds.includes(factId)) {
          existing.sourceFactIds.push(factId);
        }
      }
    }
  ).sort((left, right) => {
    if (left.order !== right.order) {
      return left.order - right.order;
    }

    return left.label.localeCompare(right.label);
  });

  const dimensionBreakdown = (() => {
    if (!base.dimensionBreakdown && !next.dimensionBreakdown) {
      return null;
    }

    const map = new Map<string, DimensionBreakdownRow[]>();
    for (const source of [base.dimensionBreakdown, next.dimensionBreakdown]) {
      if (!source) {
        continue;
      }

      for (const [key, rows] of Object.entries(source)) {
        const existing = map.get(key);
        if (existing) {
          existing.push(...rows);
        } else {
          map.set(key, [...rows]);
        }
      }
    }

    return Object.fromEntries(map.entries());
  })();

  return {
    ...next,
    periods,
    surfaces: {
      faithful: {
        kind: 'faithful' as const,
        rows: faithfulRows
      },
      standardized: {
        kind: 'standardized' as const,
        rows: standardizedRows
      }
    },
    nextCursor: next.nextCursor,
    coverage: {
      ...next.coverage,
      filings: periods.length,
      rows: faithfulRows.length
    },
    dataSourceStatus: {
      ...next.dataSourceStatus,
      queuedSync: base.dataSourceStatus.queuedSync || next.dataSourceStatus.queuedSync
    },
    dimensionBreakdown
  };
}

function findFaithfulRowByLocalNames(rows: TaxonomyStatementRow[], localNames: string[]) {
  const normalizedNames = localNames.map((name) => name.toLowerCase());
  const exact = rows.find((row) => normalizedNames.includes(row.localName.toLowerCase()));
  if (exact) {
    return exact;
  }

  return rows.find((row) => {
    const haystack = `${row.key} ${row.label} ${row.localName} ${row.qname}`.toLowerCase();
    return normalizedNames.some((name) => haystack.includes(name));
  }) ?? null;
}

function findStandardizedRow(rows: StandardizedStatementRow[], key: string) {
  return rows.find((row) => row.key === key) ?? null;
}

function buildOverviewSeries(
  incomeData: CompanyFinancialStatementsResponse | null,
  balanceData: CompanyFinancialStatementsResponse | null
): OverviewPoint[] {
  const periodMap = new Map<string, { filingDate: string; periodEnd: string | null }>();

  for (const source of [incomeData, balanceData]) {
    for (const period of source?.periods ?? []) {
      periodMap.set(period.id, {
        filingDate: period.filingDate,
        periodEnd: period.periodEnd
      });
    }
  }

  const periods = [...periodMap.entries()]
    .map(([periodId, data]) => ({
      periodId,
      filingDate: data.filingDate,
      periodEnd: data.periodEnd
    }))
    .sort((a, b) => Date.parse(a.periodEnd ?? a.filingDate) - Date.parse(b.periodEnd ?? b.filingDate));

  const incomeStandardized = incomeData?.surfaces.standardized.rows ?? [];
  const balanceStandardized = balanceData?.surfaces.standardized.rows ?? [];
  const incomeFaithful = incomeData?.surfaces.faithful.rows ?? [];
  const balanceFaithful = balanceData?.surfaces.faithful.rows ?? [];

  const revenueRow = findStandardizedRow(incomeStandardized, 'revenue')
    ?? findFaithfulRowByLocalNames(incomeFaithful, ['RevenueFromContractWithCustomerExcludingAssessedTax', 'Revenues', 'SalesRevenueNet', 'Revenue']);
  const netIncomeRow = findStandardizedRow(incomeStandardized, 'net-income')
    ?? findFaithfulRowByLocalNames(incomeFaithful, ['NetIncomeLoss', 'ProfitLoss']);
  const assetsRow = findStandardizedRow(balanceStandardized, 'total-assets')
    ?? findFaithfulRowByLocalNames(balanceFaithful, ['Assets']);
  const cashRow = findStandardizedRow(balanceStandardized, 'cash-and-equivalents')
    ?? findFaithfulRowByLocalNames(balanceFaithful, ['CashAndCashEquivalentsAtCarryingValue', 'CashAndShortTermInvestments', 'Cash']);
  const debtRow = findStandardizedRow(balanceStandardized, 'total-debt')
    ?? findFaithfulRowByLocalNames(balanceFaithful, ['LongTermDebt', 'Debt', 'LongTermDebtNoncurrent']);

  return periods.map((period) => ({
    periodId: period.periodId,
    filingDate: period.filingDate,
    periodEnd: period.periodEnd,
    label: formatShortDate(period.periodEnd ?? period.filingDate),
    revenue: revenueRow ? rowValue(revenueRow, period.periodId) : null,
    netIncome: netIncomeRow ? rowValue(netIncomeRow, period.periodId) : null,
    totalAssets: assetsRow ? rowValue(assetsRow, period.periodId) : null,
    cash: cashRow ? rowValue(cashRow, period.periodId) : null,
    debt: debtRow ? rowValue(debtRow, period.periodId) : null
  }));
}

function groupDimensionRows(
  rows: DimensionBreakdownRow[],
  surface: FinancialStatementSurfaceKind
) {
  if (surface === 'faithful') {
    return rows;
  }

  return [...rows].sort((left, right) => {
    if (left.periodId !== right.periodId) {
      return left.periodId.localeCompare(right.periodId);
    }

    return `${left.sourceLabel ?? ''}${left.concept ?? ''}`.localeCompare(`${right.sourceLabel ?? ''}${right.concept ?? ''}`);
  });
}

function ChartFrame({ children }: { children: React.ReactNode }) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const element = containerRef.current;
    if (!element) {
      return;
    }

    const observer = new ResizeObserver((entries) => {
      const next = entries[0];
      if (!next) {
        return;
      }

      const { width, height } = next.contentRect;
      setReady(width > 0 && height > 0);
    });

    observer.observe(element);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={containerRef} className="h-[320px]">
      {ready ? children : null}
    </div>
  );
}

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 [statement, setStatement] = useState<FinancialStatementKind>('income');
  const [window, setWindow] = useState<FinancialHistoryWindow>('10y');
  const [surface, setSurface] = useState<FinancialStatementSurfaceKind>('standardized');
  const [valueScale, setValueScale] = useState<NumberScaleUnit>('millions');
  const [financials, setFinancials] = useState<CompanyFinancialStatementsResponse | null>(null);
  const [overviewIncome, setOverviewIncome] = useState<CompanyFinancialStatementsResponse | null>(null);
  const [overviewBalance, setOverviewBalance] = useState<CompanyFinancialStatementsResponse | null>(null);
  const [selectedRowKey, setSelectedRowKey] = useState<string | null>(null);
  const [dimensionsEnabled, setDimensionsEnabled] = useState(false);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [syncingFinancials, setSyncingFinancials] = useState(false);
  const [error, setError] = useState<string | null>(null);

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

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

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

  const loadOverview = useCallback(async (symbol: string, selectedWindow: FinancialHistoryWindow) => {
    const [incomeResponse, balanceResponse] = await Promise.all([
      queryClient.ensureQueryData(companyFinancialStatementsQueryOptions({
        ticker: symbol,
        statement: 'income',
        window: selectedWindow,
        includeDimensions: false,
        includeFacts: false,
        limit: selectedWindow === 'all' ? 120 : 80
      })),
      queryClient.ensureQueryData(companyFinancialStatementsQueryOptions({
        ticker: symbol,
        statement: 'balance',
        window: selectedWindow,
        includeDimensions: false,
        includeFacts: false,
        limit: selectedWindow === 'all' ? 120 : 80
      }))
    ]);

    setOverviewIncome(incomeResponse.financials);
    setOverviewBalance(balanceResponse.financials);
  }, [queryClient]);

  const loadFinancials = useCallback(async (symbol: string, options?: LoadOptions) => {
    const normalizedTicker = symbol.trim().toUpperCase();
    const nextCursor = options?.cursor ?? null;
    const includeDimensions = dimensionsEnabled || selectedRowKey !== null;

    if (!options?.append) {
      setLoading(true);
    } else {
      setLoadingMore(true);
    }

    setError(null);

    try {
      const response = await queryClient.ensureQueryData(companyFinancialStatementsQueryOptions({
        ticker: normalizedTicker,
        statement,
        window,
        includeDimensions,
        includeFacts: false,
        cursor: nextCursor,
        limit: window === 'all' ? 60 : 80
      }));

      setFinancials((current) => {
        if (options?.append) {
          return mergeFinancialPages(current, response.financials);
        }

        return response.financials;
      });

      await loadOverview(normalizedTicker, window);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to load financial history');
      if (!options?.append) {
        setFinancials(null);
      }
    } finally {
      setLoading(false);
      setLoadingMore(false);
    }
  }, [
    dimensionsEnabled,
    loadOverview,
    queryClient,
    selectedRowKey,
    statement,
    window
  ]);

  const syncFinancials = useCallback(async () => {
    const targetTicker = (financials?.company.ticker ?? ticker).trim().toUpperCase();
    if (!targetTicker) {
      return;
    }

    setSyncingFinancials(true);
    setError(null);

    try {
      await queueFilingSync({ ticker: targetTicker, limit: 20 });
      void queryClient.invalidateQueries({ queryKey: queryKeys.recentTasks(20) });
      void queryClient.invalidateQueries({ queryKey: ['filings'] });
      void queryClient.invalidateQueries({ queryKey: ['financials-v3'] });
      await loadFinancials(targetTicker);
    } catch (err) {
      setError(err instanceof Error ? err.message : `Failed to queue financial sync for ${targetTicker}`);
    } finally {
      setSyncingFinancials(false);
    }
  }, [financials?.company.ticker, loadFinancials, queryClient, ticker]);

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

  const periods = useMemo(() => {
    return [...(financials?.periods ?? [])]
      .sort((a, b) => Date.parse(a.filingDate) - Date.parse(b.filingDate));
  }, [financials?.periods]);

  const faithfulRows = useMemo(() => financials?.surfaces.faithful.rows ?? [], [financials?.surfaces.faithful.rows]);
  const standardizedRows = useMemo(() => financials?.surfaces.standardized.rows ?? [], [financials?.surfaces.standardized.rows]);
  const statementRows = useMemo<DisplayRow[]>(() => {
    return surface === 'standardized' ? standardizedRows : faithfulRows;
  }, [faithfulRows, standardizedRows, surface]);

  const overviewSeries = useMemo(() => {
    return buildOverviewSeries(overviewIncome, overviewBalance);
  }, [overviewIncome, overviewBalance]);

  const latestOverview = overviewSeries[overviewSeries.length - 1] ?? null;
  const latestTaxonomyMetrics = financials?.metrics.taxonomy
    ?? overviewIncome?.metrics.taxonomy
    ?? overviewBalance?.metrics.taxonomy
    ?? null;

  const latestStandardizedIncome = overviewIncome?.surfaces.standardized.rows ?? [];
  const latestStandardizedBalance = overviewBalance?.surfaces.standardized.rows ?? [];
  const latestRevenue = latestOverview?.revenue
    ?? findStandardizedRow(latestStandardizedIncome, 'revenue')?.values[periods[periods.length - 1]?.id ?? '']
    ?? latestTaxonomyMetrics?.revenue
    ?? null;
  const latestNetIncome = latestOverview?.netIncome
    ?? findStandardizedRow(latestStandardizedIncome, 'net-income')?.values[periods[periods.length - 1]?.id ?? '']
    ?? latestTaxonomyMetrics?.netIncome
    ?? null;
  const latestTotalAssets = latestOverview?.totalAssets
    ?? findStandardizedRow(latestStandardizedBalance, 'total-assets')?.values[periods[periods.length - 1]?.id ?? '']
    ?? latestTaxonomyMetrics?.totalAssets
    ?? null;
  const latestCash = latestOverview?.cash
    ?? findStandardizedRow(latestStandardizedBalance, 'cash-and-equivalents')?.values[periods[periods.length - 1]?.id ?? '']
    ?? latestTaxonomyMetrics?.cash
    ?? null;
  const latestDebt = latestOverview?.debt
    ?? findStandardizedRow(latestStandardizedBalance, 'total-debt')?.values[periods[periods.length - 1]?.id ?? '']
    ?? latestTaxonomyMetrics?.debt
    ?? null;
  const latestReferenceDate = latestOverview?.filingDate ?? periods[periods.length - 1]?.filingDate ?? null;

  const selectedRow = useMemo(() => {
    if (!selectedRowKey) {
      return null;
    }

    return statementRows.find((row) => row.key === selectedRowKey) ?? null;
  }, [selectedRowKey, statementRows]);

  const dimensionRows = useMemo(() => {
    if (!selectedRow || !financials?.dimensionBreakdown) {
      return [];
    }

    const direct = financials.dimensionBreakdown[selectedRow.key] ?? [];
    return groupDimensionRows(direct, surface);
  }, [financials?.dimensionBreakdown, selectedRow, surface]);

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

  const controlSections = useMemo<FinancialControlSection[]>(() => [
    {
      id: 'statement',
      label: 'Statement',
      value: statement,
      options: STATEMENT_OPTIONS,
      onChange: (nextValue) => {
        setStatement(nextValue as FinancialStatementKind);
        setSelectedRowKey(null);
      }
    },
    {
      id: 'history',
      label: 'Window',
      value: window,
      options: WINDOW_OPTIONS,
      onChange: (nextValue) => {
        setWindow(nextValue as FinancialHistoryWindow);
        setSelectedRowKey(null);
      }
    },
    {
      id: 'scale',
      label: 'Scale',
      value: valueScale,
      options: FINANCIAL_VALUE_SCALE_OPTIONS,
      onChange: (nextValue) => setValueScale(nextValue as NumberScaleUnit)
    }
  ], [statement, valueScale, window]);

  const controlActions = useMemo<FinancialControlAction[]>(() => {
    const actions: FinancialControlAction[] = [];

    if (window === '10y') {
      actions.push({
        id: 'load-full-history',
        label: 'Load Full History',
        variant: 'secondary',
        onClick: () => {
          setWindow('all');
          setSelectedRowKey(null);
        }
      });
    }

    if (window === 'all' && financials?.nextCursor) {
      actions.push({
        id: 'load-older-periods',
        label: loadingMore ? 'Loading Older...' : 'Load Older Periods',
        variant: 'secondary',
        disabled: loadingMore,
        onClick: () => {
          if (!financials.nextCursor) {
            return;
          }

          void loadFinancials(ticker, {
            cursor: financials.nextCursor,
            append: true
          });
        }
      });
    }

    return actions;
  }, [financials?.nextCursor, loadFinancials, loadingMore, ticker, window]);

  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="Filing-faithful financial statements with a standardized comparison surface and PDF metric validation."
      activeTicker={financials?.company.ticker ?? ticker}
      actions={(
        <div className="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
          <Button
            variant="secondary"
            disabled={syncingFinancials}
            onClick={() => {
              void syncFinancials();
            }}
          >
            <Download className="size-4" />
            {syncingFinancials ? 'Syncing...' : 'Sync Financials'}
          </Button>
          <Button
            variant="secondary"
            onClick={() => {
              void loadFinancials(ticker);
            }}
          >
            <RefreshCcw className="size-4" />
            Refresh
          </Button>
        </div>
      )}
    >
      <Panel title="Company Selector" subtitle="Load statement history by ticker. The standardized comparison view is the default surface.">
        <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>
          {financials ? (
            <Link
              href={`/analysis?ticker=${financials.company.ticker}`}
              onMouseEnter={() => prefetchResearchTicker(financials.company.ticker)}
              onFocus={() => prefetchResearchTicker(financials.company.ticker)}
              className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
            >
              Open analysis
            </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={asDisplayCurrency(latestRevenue, valueScale)}
          delta={latestReferenceDate ? formatLongDate(latestReferenceDate) : 'No history'}
        />
        <MetricCard
          label="Latest Net Income"
          value={asDisplayCurrency(latestNetIncome, valueScale)}
          delta={latestReferenceDate ? `Net margin ${formatPercent(ratioPercent(latestNetIncome, latestRevenue) ?? 0)}` : 'No history'}
          positive={(latestNetIncome ?? 0) >= 0}
        />
        <MetricCard
          label="Latest Total Assets"
          value={asDisplayCurrency(latestTotalAssets, valueScale)}
          delta={latestReferenceDate ? `Debt ${asDisplayCurrency(latestDebt, valueScale)}` : 'No history'}
        />
        <MetricCard
          label="Cash / Debt"
          value={latestCash !== null && latestDebt !== null && latestDebt !== 0
            ? `${(latestCash / latestDebt).toFixed(2)}x`
            : 'n/a'}
          delta={latestReferenceDate ? `Cash ${asDisplayCurrency(latestCash, valueScale)}` : 'No history'}
        />
      </div>

      <FinancialControlBar
        title="Financial Controls"
        subtitle={`Current display scale: ${selectedScaleLabel}. Choose between standardized comparison and filing-faithful rendering below.`}
        sections={controlSections}
        actions={controlActions}
      />

      <Panel title="Statement Surface" subtitle="Standardized rows flatten curated GAAP aliases for comparison while the faithful view preserves the filing's presentation.">
        <div className="flex flex-wrap gap-2">
          {SURFACE_OPTIONS.map((option) => (
            <Button
              key={option.value}
              variant={surface === option.value ? 'primary' : 'ghost'}
              onClick={() => {
                setSurface(option.value);
                setSelectedRowKey(null);
              }}
            >
              {option.value === 'standardized' ? <GitCompareArrows className="size-4" /> : <ChartNoAxesCombined className="size-4" />}
              {option.label}
            </Button>
          ))}
        </div>
      </Panel>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <Panel title="Income Trend" subtitle="Overview chart sourced from standardized statement rows first, then taxonomy metrics as fallback.">
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading overview chart...</p>
          ) : overviewSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No income history available yet.</p>
          ) : (
            <ChartFrame>
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={overviewSeries}>
                  <CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
                  <XAxis dataKey="label" stroke={CHART_MUTED} fontSize={12} minTickGap={20} />
                  <YAxis stroke={CHART_MUTED} fontSize={12} tickFormatter={(value: number) => asAxisCurrencyTick(value, valueScale)} />
                  <Tooltip
                    formatter={(value) => asTooltipCurrency(value, valueScale)}
                    contentStyle={{
                      backgroundColor: CHART_TOOLTIP_BG,
                      border: `1px solid ${CHART_TOOLTIP_BORDER}`,
                      borderRadius: '0.75rem'
                    }}
                  />
                  <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>
            </ChartFrame>
          )}
        </Panel>

        <Panel title="Balance Trend" subtitle="Assets, cash, and debt sourced from standardized balance rows for cleaner period-over-period comparison.">
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading balance chart...</p>
          ) : overviewSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No balance history available yet.</p>
          ) : (
            <ChartFrame>
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={overviewSeries}>
                  <CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
                  <XAxis dataKey="label" stroke={CHART_MUTED} fontSize={12} minTickGap={20} />
                  <YAxis stroke={CHART_MUTED} fontSize={12} tickFormatter={(value: number) => asAxisCurrencyTick(value, valueScale)} />
                  <Tooltip
                    formatter={(value) => asTooltipCurrency(value, valueScale)}
                    contentStyle={{
                      backgroundColor: CHART_TOOLTIP_BG,
                      border: `1px solid ${CHART_TOOLTIP_BORDER}`,
                      borderRadius: '0.75rem'
                    }}
                  />
                  <Area type="monotone" dataKey="totalAssets" name="Total Assets" stroke="#68ffd5" fill="rgba(104,255,213,0.18)" 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>
            </ChartFrame>
          )}
        </Panel>
      </div>

      <Panel
        title="Statement Matrix"
        subtitle={surface === 'standardized'
          ? `Standardized ${statement.replace('_', ' ')} rows merge curated GAAP aliases for comparison while preserving source provenance.`
          : `Filing-faithful ${statement.replace('_', ' ')} rows preserve issuer taxonomy, ordering, extensions, and dimensional detail.`}
      >
        {loading ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Loading statement matrix...</p>
        ) : periods.length === 0 || statementRows.length === 0 ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">No statement rows available for the selected filters yet.</p>
        ) : (
          <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>
                  {periods.map((period) => (
                    <th key={period.id}>
                      <div className="flex flex-col gap-1">
                        <span>{formatLongDate(period.filingDate)}</span>
                        <span className="text-[11px] normal-case tracking-normal text-[color:var(--terminal-muted)]">{period.filingType} · {period.periodLabel}</span>
                      </div>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {statementRows.map((row) => (
                  <tr
                    key={row.key}
                    className={selectedRowKey === row.key ? 'bg-[color:var(--panel-soft)]' : undefined}
                    onClick={() => {
                      setSelectedRowKey(row.key);
                      if (row.hasDimensions && !dimensionsEnabled) {
                        setDimensionsEnabled(true);
                      }
                    }}
                  >
                    <td className="sticky left-0 z-10 bg-[color:var(--panel)]">
                      <div className="flex flex-col gap-1">
                        <div className="flex items-center gap-2">
                          <span style={{ paddingLeft: `${isFaithfulRow(row) ? Math.min(row.depth, 10) * 12 : 0}px` }}>{row.label}</span>
                          {isFaithfulRow(row) && row.isExtension ? (
                            <span className="rounded border border-[color:var(--line-weak)] px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-[color:var(--terminal-muted)]">Ext</span>
                          ) : null}
                          {row.hasDimensions ? <ChevronDown className="size-3 text-[color:var(--accent)]" /> : null}
                        </div>
                        {isStandardizedRow(row) ? (
                          <details className="text-xs text-[color:var(--terminal-muted)]">
                            <summary className="cursor-pointer list-none">
                              Mapped from {row.sourceConcepts.length} concept{row.sourceConcepts.length === 1 ? '' : 's'}
                            </summary>
                            <div className="mt-1 flex flex-wrap gap-1">
                              {row.sourceConcepts.map((concept) => (
                                <span key={`${row.key}-${concept}`} className="rounded border border-[color:var(--line-weak)] px-1.5 py-0.5">
                                  {concept}
                                </span>
                              ))}
                            </div>
                          </details>
                        ) : null}
                      </div>
                    </td>
                    {periods.map((period) => (
                      <td key={`${row.key}-${period.id}`}>
                        {asDisplayCurrency(rowValue(row, period.id), valueScale)}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Panel>

      <Panel
        title="Dimension Drill-down"
        subtitle={surface === 'standardized'
          ? 'Standardized rows aggregate dimensional facts across every mapped source concept.'
          : 'Filing-faithful rows show the exact dimensional facts attached to the selected concept.'}
      >
        {!selectedRow ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Select a statement row to inspect dimensional facts.</p>
        ) : !selectedRow.hasDimensions ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">No dimensional data is available for {selectedRow.label}.</p>
        ) : !dimensionsEnabled ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Enable dimensions by selecting the row again.</p>
        ) : dimensionRows.length === 0 ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Dimensions are still loading or unavailable for this row.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="data-table min-w-[860px]">
              <thead>
                <tr>
                  <th>Period</th>
                  {surface === 'standardized' ? <th>Source</th> : null}
                  <th>Axis</th>
                  <th>Member</th>
                  <th>Value</th>
                </tr>
              </thead>
              <tbody>
                {dimensionRows.map((row, index) => {
                  const period = periods.find((item) => item.id === row.periodId);
                  return (
                    <tr key={`${row.rowKey}-${row.periodId}-${row.axis}-${row.member}-${index}`}>
                      <td>{period ? formatLongDate(period.filingDate) : row.periodId}</td>
                      {surface === 'standardized' ? <td>{row.sourceLabel ?? row.concept ?? 'Unknown source'}</td> : null}
                      <td>{row.axis}</td>
                      <td>{row.member}</td>
                      <td>{asDisplayCurrency(row.value, valueScale)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </Panel>

      {financials ? (
        <Panel title="Metric Validation" subtitle="The standardized taxonomy surface is the canonical financial layer; PDF LLM extraction is used only to validate selected metrics.">
          <div className="mb-3 flex items-center gap-2 text-sm text-[color:var(--terminal-muted)]">
            <AlertTriangle className="size-4" />
            <span>Overall status: {financials.metrics.validation?.status ?? 'not_run'}</span>
          </div>
          {(financials.metrics.validation?.checks.length ?? 0) === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No validation checks available yet.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="data-table min-w-[760px]">
                <thead>
                  <tr>
                    <th>Metric</th>
                    <th>Taxonomy</th>
                    <th>LLM (PDF)</th>
                    <th>Status</th>
                    <th>Pages</th>
                  </tr>
                </thead>
                <tbody>
                  {financials.metrics.validation?.checks.map((check) => (
                    <tr key={check.metricKey}>
                      <td>{check.metricKey}</td>
                      <td>{asDisplayCurrency(check.taxonomyValue, valueScale)}</td>
                      <td>{asDisplayCurrency(check.llmValue, valueScale)}</td>
                      <td>{check.status}</td>
                      <td>{check.evidencePages.join(', ') || 'n/a'}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </Panel>
      ) : null}

      {financials ? (
        <Panel title="Data Source Status" subtitle="Hydration and taxonomy parsing status for filing snapshots powering both financial statement surfaces.">
          <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-5">
            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <p className="text-[color:var(--terminal-muted)]">Hydrated</p>
              <p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.hydratedFilings}</p>
            </div>
            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <p className="text-[color:var(--terminal-muted)]">Partial</p>
              <p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.partialFilings}</p>
            </div>
            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <p className="text-[color:var(--terminal-muted)]">Failed</p>
              <p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.failedFilings}</p>
            </div>
            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <p className="text-[color:var(--terminal-muted)]">Pending</p>
              <p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.pendingFilings}</p>
            </div>
            <div className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm">
              <p className="text-[color:var(--terminal-muted)]">Background Sync</p>
              <p className="font-semibold text-[color:var(--terminal-bright)]">{financials.dataSourceStatus.queuedSync ? 'Queued' : 'Idle'}</p>
            </div>
          </div>
        </Panel>
      ) : null}

      <Panel>
        <div className="flex items-center gap-2 text-xs uppercase tracking-[0.24em] text-[color:var(--terminal-muted)]">
          <ChartNoAxesCombined className="size-4" />
          Financial Statements V3: faithful filing reconstruction + standardized taxonomy comparison
        </div>
      </Panel>
    </AppShell>
  );
}