'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 {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis
} from 'recharts';
import { BrainCircuit, ChartNoAxesCombined, RefreshCcw, Search } from 'lucide-react';
import { useSearchParams } from 'next/navigation';
import { AppShell } from '@/components/shell/app-shell';
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 {
  asNumber,
  formatCurrency,
  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 FinancialPeriodFilter = 'quarterlyAndFiscalYearEnd' | 'quarterlyOnly' | 'fiscalYearEndOnly';

type FinancialSeriesPoint = {
  filingDate: string;
  filingType: '10-K' | '10-Q';
  periodLabel: 'Quarter End' | 'Fiscal Year End';
  revenue: number | null;
  netIncome: number | null;
  assets: number | null;
  netMargin: number | null;
};

const FINANCIAL_PERIOD_FILTER_OPTIONS: Array<{ value: FinancialPeriodFilter; 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 formatShortDate(value: string) {
  return format(new Date(value), 'MMM yyyy');
}

function formatLongDate(value: string) {
  return format(new Date(value), '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 isFinancialSnapshotForm(
  filingType: CompanyAnalysis['filings'][number]['filing_type']
): filingType is '10-K' | '10-Q' {
  return filingType === '10-K' || filingType === '10-Q';
}

function includesFinancialPeriod(filingType: '10-K' | '10-Q', filter: FinancialPeriodFilter) {
  if (filter === 'quarterlyOnly') {
    return filingType === '10-Q';
  }

  if (filter === 'fiscalYearEndOnly') {
    return filingType === '10-K';
  }

  return true;
}

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

  return formatCurrencyByScale(value, scale);
}

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

function AnalysisPageContent() {
  const { isPending, isAuthenticated } = useAuthGuard();
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();
  const { prefetchReport, 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 [financialPeriodFilter, setFinancialPeriodFilter] = useState<FinancialPeriodFilter>('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 loadAnalysis = 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 company analysis');
      setAnalysis(null);
    } finally {
      setLoading(false);
    }
  }, [queryClient]);

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

  const priceSeries = useMemo(() => {
    return (analysis?.priceHistory ?? []).map((point) => ({
      ...point,
      label: formatShortDate(point.date)
    }));
  }, [analysis?.priceHistory]);

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

  const filteredFinancialSeries = useMemo(() => {
    return financialSeries.filter((point) => includesFinancialPeriod(point.filingType, financialPeriodFilter));
  }, [financialSeries, financialPeriodFilter]);

  const periodEndFilings = useMemo(() => {
    return (analysis?.filings ?? []).filter((filing) => isFinancialSnapshotForm(filing.filing_type));
  }, [analysis?.filings]);

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

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

  return (
    <AppShell
      title="Company Analysis"
      subtitle="Research a single ticker across pricing, 10-K/10-Q financials, qualitative filings, and generated AI reports."
      activeTicker={analysis?.company.ticker ?? ticker}
      actions={(
        <Button
          variant="secondary"
          onClick={() => {
            void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(ticker.trim().toUpperCase()) });
            void loadAnalysis(ticker);
          }}
        >
          <RefreshCcw className="size-4" />
          Refresh
        </Button>
      )}
    >
      <Panel title="Search Company" subtitle="Enter a ticker symbol to load the latest analysis view.">
        <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" />
            Analyze
          </Button>
          {analysis ? (
            <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 filing 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">
        <Panel title="Company">
          <p className="text-xl font-semibold text-[color:var(--terminal-bright)]">{analysis?.company.companyName ?? ticker}</p>
          <p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{analysis?.company.ticker ?? ticker}</p>
          <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{analysis?.company.sector ?? 'Sector unavailable'}</p>
          {analysis?.company.category ? (
            <p className="mt-1 text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{analysis.company.category}</p>
          ) : null}
          {analysis?.company.tags.length ? (
            <div className="mt-2 flex flex-wrap gap-1">
              {analysis.company.tags.map((tag) => (
                <span
                  key={tag}
                  className="rounded border border-[color:var(--line-weak)] px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]"
                >
                  {tag}
                </span>
              ))}
            </div>
          ) : null}
        </Panel>

        <Panel title="Live Price">
          <p className="text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(analysis?.quote ?? 0)}</p>
          <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">CIK {analysis?.company.cik ?? 'n/a'}</p>
        </Panel>

        <Panel title="Position Value">
          <p className="text-3xl font-semibold text-[color:var(--terminal-bright)]">{formatCurrency(analysis?.position?.market_value)}</p>
          <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{analysis?.position ? `${asNumber(analysis.position.shares).toLocaleString()} shares` : 'Not held in portfolio'}</p>
        </Panel>

        <Panel title="Position P&L">
          <p className={`text-3xl font-semibold ${asNumber(analysis?.position?.gain_loss) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}`}>
            {formatCurrency(analysis?.position?.gain_loss)}
          </p>
          <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{formatPercent(analysis?.position?.gain_loss_pct)}</p>
        </Panel>
      </div>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <Panel title="Price History" subtitle="Weekly close over the last year.">
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading price history...</p>
          ) : priceSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No price history available.</p>
          ) : (
            <div className="h-[320px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={priceSeries}>
                  <CartesianGrid strokeDasharray="2 2" stroke={CHART_GRID} />
                  <XAxis
                    dataKey="label"
                    minTickGap={32}
                    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: number | string | undefined) => formatCurrency(value)}
                    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 }}
                  />
                  <Line type="monotone" dataKey="close" stroke="#68ffd5" strokeWidth={2} dot={false} />
                </LineChart>
              </ResponsiveContainer>
            </div>
          )}
        </Panel>

        <Panel
          title="Financial Table"
          subtitle={`Quarter-end (10-Q) and fiscal-year-end (10-K) snapshots for revenue, net income, assets, and margin. Values shown in ${selectedFinancialScaleLabel}.`}
          actions={(
            <div className="flex flex-col items-end gap-2">
              <div className="flex flex-wrap justify-end gap-2">
                {FINANCIAL_PERIOD_FILTER_OPTIONS.map((option) => (
                  <Button
                    key={option.value}
                    type="button"
                    variant={option.value === financialPeriodFilter ? 'primary' : 'ghost'}
                    className="px-2 py-1 text-xs"
                    onClick={() => setFinancialPeriodFilter(option.value)}
                  >
                    {option.label}
                  </Button>
                ))}
              </div>
              <div className="flex flex-wrap justify-end gap-2">
                {FINANCIAL_VALUE_SCALE_OPTIONS.map((option) => (
                  <Button
                    key={option.value}
                    type="button"
                    variant={option.value === financialValueScale ? 'primary' : 'ghost'}
                    className="px-2 py-1 text-xs"
                    onClick={() => setFinancialValueScale(option.value)}
                  >
                    {option.label}
                  </Button>
                ))}
              </div>
            </div>
          )}
        >
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading financials...</p>
          ) : filteredFinancialSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No financial rows match the selected period filter.</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="data-table min-w-[820px]">
                <thead>
                  <tr>
                    <th>Filed</th>
                    <th>Period</th>
                    <th>Form</th>
                    <th>Revenue</th>
                    <th>Net Income</th>
                    <th>Assets</th>
                    <th>Net Margin</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredFinancialSeries.map((point, index) => (
                    <tr key={`${point.filingDate}-${point.filingType}-${index}`}>
                      <td>{formatLongDate(point.filingDate)}</td>
                      <td>{point.periodLabel}</td>
                      <td>{point.filingType}</td>
                      <td>{asScaledFinancialCurrency(point.revenue, financialValueScale)}</td>
                      <td className={(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}>
                        {asScaledFinancialCurrency(point.netIncome, financialValueScale)}
                      </td>
                      <td>{asScaledFinancialCurrency(point.assets, financialValueScale)}</td>
                      <td>{point.netMargin === null ? 'n/a' : formatPercent(point.netMargin)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </Panel>
      </div>

      <Panel
        title="Filings"
        subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded. Values shown in ${selectedFinancialScaleLabel}.`}
      >
        {loading ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
        ) : periodEndFilings.length === 0 ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">No 10-K or 10-Q filings available for this ticker.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="data-table min-w-[860px]">
              <thead>
                <tr>
                  <th>Filed</th>
                  <th>Period</th>
                  <th>Type</th>
                  <th>Revenue</th>
                  <th>Net Income</th>
                  <th>Assets</th>
                  <th>Document</th>
                </tr>
              </thead>
              <tbody>
                {periodEndFilings.map((filing) => (
                  <tr key={filing.accession_number}>
                    <td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
                    <td>{filing.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End'}</td>
                    <td>{filing.filing_type}</td>
                    <td>{asScaledFinancialCurrency(filing.metrics?.revenue, financialValueScale)}</td>
                    <td>{asScaledFinancialCurrency(filing.metrics?.netIncome, financialValueScale)}</td>
                    <td>{asScaledFinancialCurrency(filing.metrics?.totalAssets, financialValueScale)}</td>
                    <td>
                      {filing.filing_url ? (
                        <a href={filing.filing_url} target="_blank" rel="noreferrer" className="text-xs text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
                          SEC filing
                        </a>
                      ) : (
                        'n/a'
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </Panel>

      <Panel title="AI Reports" subtitle="Generated filing analyses for this company.">
        {loading ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Loading AI reports...</p>
        ) : !analysis || analysis.aiReports.length === 0 ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">No AI reports generated yet. Run filing analysis from the filings stream.</p>
        ) : (
          <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
            {analysis.aiReports.map((report) => (
              <article key={report.accessionNumber} className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
                      {report.filingType} · {format(new Date(report.filingDate), 'MMM dd, yyyy')}
                    </p>
                    <h4 className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{report.provider} / {report.model}</h4>
                  </div>
                  <BrainCircuit className="size-4 text-[color:var(--accent)]" />
                </div>
                <p className="mt-3 line-clamp-6 whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{report.summary}</p>
                <div className="mt-4 flex items-center justify-between gap-2">
                  <p className="text-xs text-[color:var(--terminal-muted)]">{report.accessionNumber}</p>
                  <Link
                    href={`/analysis/reports/${analysis.company.ticker}/${encodeURIComponent(report.accessionNumber)}`}
                    onMouseEnter={() => prefetchReport(analysis.company.ticker, report.accessionNumber)}
                    onFocus={() => prefetchReport(analysis.company.ticker, report.accessionNumber)}
                    className="text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
                  >
                    Open summary
                  </Link>
                </div>
              </article>
            ))}
          </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" />
          Analysis scope: price + filings + ai synthesis
        </div>
      </Panel>
    </AppShell>
  );
}