'use client';

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 { getCompanyAnalysis } from '@/lib/api';
import { formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
import type { CompanyAnalysis } from '@/lib/types';

type FinancialSeriesPoint = {
  filingDate: string;
  filingType: '10-K' | '10-Q';
  periodKind: 'quarterly' | 'fiscalYearEnd';
  periodLabel: 'Quarter End' | 'Fiscal Year End';
  label: string;
  revenue: number | null;
  netIncome: number | null;
  totalAssets: number | null;
  cash: number | null;
  debt: number | null;
  netMargin: number | null;
  debtToAssets: number | null;
};

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

const AXIS_CURRENCY = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  notation: 'compact',
  maximumFractionDigits: 1
});

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' }
];

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) {
  return value === null ? 'n/a' : formatCurrency(value);
}

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

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) {
  const normalized = normalizeTooltipValue(value);
  if (normalized === null) {
    return 'n/a';
  }

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

  return formatCompactCurrency(numeric);
}

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

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

  return true;
}

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 [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');

  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) => {
    setLoading(true);
    setError(null);

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

  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 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]);

  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."
      actions={(
        <Button variant="secondary" onClick={() => 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}`} className="text-sm text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
                Open full analysis
              </Link>
              <Link href={`/filings?ticker=${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) : 'n/a'}
          delta={latestSnapshot ? `${latestSnapshot.filingType} · ${formatLongDate(latestSnapshot.filingDate)}` : 'No filings loaded'}
        />
        <MetricCard
          label="Latest Net Income"
          value={latestSnapshot ? asDisplayCurrency(latestSnapshot.netIncome) : '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) : '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)} · Debt ${asDisplayCurrency(latestSnapshot.debt)}` : '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>

      <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="rgba(126, 217, 255, 0.2)" />
                  <XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
                  <YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => AXIS_CURRENCY.format(value)} />
                  <Tooltip formatter={(value) => asTooltipCurrency(value)} />
                  <Legend />
                  <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="rgba(126, 217, 255, 0.2)" />
                  <XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
                  <YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => AXIS_CURRENCY.format(value)} />
                  <Tooltip formatter={(value) => asTooltipCurrency(value)} />
                  <Legend />
                  <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="rgba(126, 217, 255, 0.2)" />
                  <XAxis dataKey="label" minTickGap={20} stroke="#8cb6c5" fontSize={12} />
                  <YAxis stroke="#8cb6c5" fontSize={12} 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';
                    }}
                  />
                  <Legend />
                  <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>

      <Panel title="Period-End Metrics Table" subtitle="Quarter-end (10-Q) and fiscal-year-end (10-K) statement points extracted from filing metadata.">
        {loading ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Loading table...</p>
        ) : financialSeries.length === 0 ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">No financial rows are available for this ticker yet.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="data-table min-w-[960px]">
              <thead>
                <tr>
                  <th>Filed</th>
                  <th>Period</th>
                  <th>Form</th>
                  <th>Revenue</th>
                  <th>Net Income</th>
                  <th>Total Assets</th>
                  <th>Cash</th>
                  <th>Debt</th>
                  <th>Net Margin</th>
                </tr>
              </thead>
              <tbody>
                {financialSeries.map((point, index) => (
                  <tr key={`${point.filingDate}-${point.filingType}-${index}`}>
                    <td>{formatLongDate(point.filingDate)}</td>
                    <td>{point.periodLabel}</td>
                    <td>{point.filingType}</td>
                    <td>{asDisplayCurrency(point.revenue)}</td>
                    <td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>{asDisplayCurrency(point.netIncome)}</td>
                    <td>{asDisplayCurrency(point.totalAssets)}</td>
                    <td>{asDisplayCurrency(point.cash)}</td>
                    <td>{asDisplayCurrency(point.debt)}</td>
                    <td>{asDisplayPercent(point.netMargin)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Panel>

      <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>
  );
}