'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 {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis
} from 'recharts';
import {
  BrainCircuit,
  ChartNoAxesCombined,
  NotebookTabs,
  NotebookPen,
  RefreshCcw,
  Search,
  SquarePen,
  Trash2
} 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 { buildGraphingHref } from '@/lib/graphing/catalog';
import {
  createResearchJournalEntry,
  deleteResearchJournalEntry,
  updateResearchJournalEntry
} from '@/lib/api';
import {
  asNumber,
  formatCurrency,
  formatCurrencyByScale,
  formatPercent,
  type NumberScaleUnit
} from '@/lib/format';
import { queryKeys } from '@/lib/query/keys';
import {
  companyAnalysisQueryOptions,
  researchJournalQueryOptions
} from '@/lib/query/options';
import type {
  CompanyAnalysis,
  ResearchJournalEntry
} 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;
};

type JournalFormState = {
  title: string;
  bodyMarkdown: string;
  accessionNumber: string;
};

const EMPTY_JOURNAL_FORM: JournalFormState = {
  title: '',
  bodyMarkdown: '',
  accessionNumber: ''
};

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 = '#f3f5f7';
const CHART_MUTED = '#a1a9b3';
const CHART_GRID = 'rgba(196, 202, 211, 0.18)';
const CHART_TOOLTIP_BG = 'rgba(31, 34, 39, 0.96)';
const CHART_TOOLTIP_BORDER = 'rgba(220, 226, 234, 0.24)';

function formatShortDate(value: string) {
  return format(new Date(value), 'MMM yyyy');
}

function formatLongDate(value: string) {
  return format(new Date(value), 'MMM dd, yyyy');
}

function formatDateTime(value: string) {
  return format(new Date(value), 'MMM dd, yyyy · HH:mm');
}

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

  return (numerator / denominator) * 100;
}

function normalizeTickerInput(value: string | null) {
  const normalized = value?.trim().toUpperCase() ?? '';
  return normalized || null;
}

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 initialTicker = normalizeTickerInput(searchParams.get('ticker')) ?? 'MSFT';

  const [tickerInput, setTickerInput] = useState(initialTicker);
  const [ticker, setTicker] = useState(initialTicker);
  const [analysis, setAnalysis] = useState<CompanyAnalysis | null>(null);
  const [journalEntries, setJournalEntries] = useState<ResearchJournalEntry[]>([]);
  const [journalLoading, setJournalLoading] = useState(true);
  const [journalForm, setJournalForm] = useState<JournalFormState>(EMPTY_JOURNAL_FORM);
  const [editingJournalId, setEditingJournalId] = useState<number | null>(null);
  const [highlightedJournalId, setHighlightedJournalId] = useState<number | 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');
  const journalEntryRefs = useRef(new Map<number, HTMLElement | null>());

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

    setTickerInput(normalized);
    setTicker(normalized);
    const journalId = Number(searchParams.get('journalId'));
    setHighlightedJournalId(Number.isInteger(journalId) && journalId > 0 ? journalId : null);
  }, [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.fetchQuery(options);
      setAnalysis(response.analysis);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to load company analysis');
      setAnalysis(null);
    } finally {
      setLoading(false);
    }
  }, [queryClient]);

  const loadJournal = useCallback(async (symbol: string) => {
    const options = researchJournalQueryOptions(symbol);

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

    try {
      const response = await queryClient.fetchQuery(options);
      setJournalEntries(response.entries);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to load research journal');
      setJournalEntries([]);
    } finally {
      setJournalLoading(false);
    }
  }, [queryClient]);

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

  useEffect(() => {
    if (!highlightedJournalId) {
      return;
    }

    const node = journalEntryRefs.current.get(highlightedJournalId);
    if (!node) {
      return;
    }

    node.scrollIntoView({ behavior: 'smooth', block: 'center' });
    const timeoutId = window.setTimeout(() => {
      setHighlightedJournalId((current) => (current === highlightedJournalId ? null : current));
    }, 2200);

    return () => {
      window.clearTimeout(timeoutId);
    };
  }, [highlightedJournalId, journalEntries]);

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

  const resetJournalForm = useCallback(() => {
    setEditingJournalId(null);
    setJournalForm(EMPTY_JOURNAL_FORM);
  }, []);

  const activeTicker = analysis?.company.ticker ?? ticker;

  const saveJournalEntry = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const normalizedTicker = activeTicker.trim().toUpperCase();
    if (!normalizedTicker) {
      return;
    }

    setError(null);

    try {
      if (editingJournalId === null) {
        await createResearchJournalEntry({
          ticker: normalizedTicker,
          entryType: journalForm.accessionNumber.trim() ? 'filing_note' : 'note',
          title: journalForm.title.trim() || undefined,
          bodyMarkdown: journalForm.bodyMarkdown,
          accessionNumber: journalForm.accessionNumber.trim() || undefined
        });
      } else {
        await updateResearchJournalEntry(editingJournalId, {
          title: journalForm.title.trim() || undefined,
          bodyMarkdown: journalForm.bodyMarkdown
        });
      }

      void queryClient.invalidateQueries({ queryKey: queryKeys.researchJournal(normalizedTicker) });
      void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(normalizedTicker) });
      void queryClient.invalidateQueries({ queryKey: queryKeys.watchlist() });
      await Promise.all([
        loadAnalysis(normalizedTicker),
        loadJournal(normalizedTicker)
      ]);
      resetJournalForm();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to save journal entry');
    }
  };

  const beginEditJournalEntry = (entry: ResearchJournalEntry) => {
    setEditingJournalId(entry.id);
    setJournalForm({
      title: entry.title ?? '',
      bodyMarkdown: entry.body_markdown,
      accessionNumber: entry.accession_number ?? ''
    });
  };

  const removeJournalEntry = async (entry: ResearchJournalEntry) => {
    try {
      await deleteResearchJournalEntry(entry.id);
      void queryClient.invalidateQueries({ queryKey: queryKeys.researchJournal(entry.ticker) });
      void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(entry.ticker) });
      await Promise.all([
        loadAnalysis(entry.ticker),
        loadJournal(entry.ticker)
      ]);
      if (editingJournalId === entry.id) {
        resetJournalForm();
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to delete journal entry');
    }
  };

  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={(
        <>
          <Link
            href={`/search?ticker=${encodeURIComponent(activeTicker.trim().toUpperCase())}`}
            className="inline-flex items-center justify-center gap-2 rounded-lg border border-[color:var(--line-weak)] px-3 py-2 text-sm text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
          >
            <Search className="size-4" />
            Ask with RAG
          </Link>
          <Button
            variant="secondary"
            onClick={() => {
              const normalizedTicker = activeTicker.trim().toUpperCase();
              void queryClient.invalidateQueries({ queryKey: queryKeys.companyAnalysis(normalizedTicker) });
              void queryClient.invalidateQueries({ queryKey: queryKeys.researchJournal(normalizedTicker) });
              void Promise.all([
                loadAnalysis(normalizedTicker),
                loadJournal(normalizedTicker)
              ]);
            }}
          >
            <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-col items-stretch gap-3 sm:flex-row sm:flex-wrap sm:items-center"
          onSubmit={(event) => {
            event.preventDefault();
            const normalized = tickerInput.trim().toUpperCase();
            if (!normalized) {
              return;
            }
            setTicker(normalized);
          }}
        >
          <Input
            value={tickerInput}
            aria-label="Analysis ticker"
            onChange={(event) => setTickerInput(event.target.value.toUpperCase())}
            placeholder="Ticker (AAPL)"
            className="w-full sm:max-w-xs"
          />
          <Button type="submit" className="w-full sm:w-auto">
            <Search className="size-4" />
            Analyze
          </Button>
          {analysis ? (
            <>
              <Link
                href={`/financials?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 financials
              </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 filing stream
              </Link>
              <Link
                href={buildGraphingHref(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 graphing
              </Link>
            </>
          ) : null}
        </form>
      </Panel>

      {error ? (
        <Panel variant="surface">
          <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-4 xl:grid-cols-3">
        <Panel title="Coverage Workflow" subtitle="Coverage metadata shared with the Coverage page.">
          {analysis?.coverage ? (
            <div className="space-y-3 text-sm">
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
                  <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Status</p>
                  <p className="mt-1 text-[color:var(--terminal-bright)]">{analysis.coverage.status}</p>
                </div>
                <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
                  <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Priority</p>
                  <p className="mt-1 text-[color:var(--terminal-bright)]">{analysis.coverage.priority}</p>
                </div>
              </div>
              <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
                <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Last Reviewed</p>
                <p className="mt-1 text-[color:var(--terminal-bright)]">{analysis.coverage.last_reviewed_at ? formatDateTime(analysis.coverage.last_reviewed_at) : 'No research review recorded yet'}</p>
              </div>
              <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
                <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Latest Filing</p>
                <p className="mt-1 text-[color:var(--terminal-bright)]">{analysis.coverage.latest_filing_date ? formatLongDate(analysis.coverage.latest_filing_date) : 'No filing history loaded yet'}</p>
              </div>
              <Link href="/watchlist" className="text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]">
                Manage coverage
              </Link>
            </div>
          ) : (
            <p className="text-sm text-[color:var(--terminal-muted)]">This company is not yet in your coverage list. Add it from Coverage to track workflow status and review cadence.</p>
          )}
        </Panel>

        <Panel title="Key Metrics" subtitle="Latest filing-level metrics used to anchor research.">
          <div className="grid grid-cols-1 gap-3 text-sm md:grid-cols-2">
            <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
              <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Revenue</p>
              <p className="mt-1 text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(analysis?.keyMetrics.revenue, financialValueScale)}</p>
            </div>
            <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
              <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Net Income</p>
              <p className="mt-1 text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(analysis?.keyMetrics.netIncome, financialValueScale)}</p>
            </div>
            <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
              <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Assets</p>
              <p className="mt-1 text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(analysis?.keyMetrics.totalAssets, financialValueScale)}</p>
            </div>
            <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
              <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Cash / Debt</p>
              <p className="mt-1 text-[color:var(--terminal-bright)]">
                {analysis?.keyMetrics.cash != null && analysis?.keyMetrics.debt != null
                  ? `${asScaledFinancialCurrency(analysis.keyMetrics.cash, financialValueScale)} / ${asScaledFinancialCurrency(analysis.keyMetrics.debt, financialValueScale)}`
                  : 'n/a'}
              </p>
            </div>
          </div>
          <p className="mt-3 text-xs text-[color:var(--terminal-muted)]">
            Reference date: {analysis?.keyMetrics.referenceDate ? formatLongDate(analysis.keyMetrics.referenceDate) : 'No financial filing selected'}.
            {' '}Net margin: {analysis && analysis.keyMetrics.netMargin !== null ? formatPercent(analysis.keyMetrics.netMargin) : 'n/a'}.
          </p>
        </Panel>

        <Panel title="Latest Filing Snapshot" subtitle="Most recent filing and whether an AI memo already exists.">
          {analysis?.latestFilingSummary ? (
            <div className="space-y-3 text-sm">
              <div className="rounded-md border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
                <p className="text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">Filing</p>
                <p className="mt-1 text-[color:var(--terminal-bright)]">
                  {analysis.latestFilingSummary.filingType} · {formatLongDate(analysis.latestFilingSummary.filingDate)}
                </p>
              </div>
              <p className="text-[color:var(--terminal-bright)]">
                {analysis.latestFilingSummary.summary ?? 'No AI summary stored yet for the most recent filing.'}
              </p>
              <div className="flex flex-wrap gap-2">
                {analysis.latestFilingSummary.hasAnalysis ? (
                  <Link
                    href={`/analysis/reports/${analysis.company.ticker}/${encodeURIComponent(analysis.latestFilingSummary.accessionNumber)}`}
                    className="inline-flex items-center gap-1 rounded-md border border-[color:var(--line-weak)] px-2 py-1 text-xs text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
                  >
                    Open latest memo
                  </Link>
                ) : null}
                <Link
                  href={`/filings?ticker=${analysis.company.ticker}`}
                  className="inline-flex items-center gap-1 rounded-md border border-[color:var(--line-weak)] px-2 py-1 text-xs text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
                >
                  Open filing stream
                </Link>
              </div>
            </div>
          ) : (
            <p className="text-sm text-[color:var(--terminal-muted)]">No filing snapshot available yet for this company.</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." variant="surface">
          {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-[260px] sm: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) => formatCurrency(Array.isArray(value) ? value[0] : 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(220, 226, 234, 0.28)', strokeWidth: 1 }}
                  />
                  <Line type="monotone" dataKey="close" stroke="#d9dee5" 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}.`}
          variant="surface"
          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="space-y-3">
              <div className="space-y-3 lg:hidden">
                {filteredFinancialSeries.map((point, index) => (
                  <article key={`${point.filingDate}-${point.filingType}-${index}`} className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
                    <div className="flex flex-wrap items-start justify-between gap-2">
                      <div>
                        <p className="text-sm font-semibold text-[color:var(--terminal-bright)]">{formatLongDate(point.filingDate)}</p>
                        <p className="text-xs text-[color:var(--terminal-muted)]">{point.filingType} · {point.periodLabel}</p>
                      </div>
                      <p className={`text-sm font-medium ${(point.netIncome ?? 0) >= 0 ? 'text-[#96f5bf]' : 'text-[#ff9f9f]'}`}>
                        {asScaledFinancialCurrency(point.netIncome, financialValueScale)}
                      </p>
                    </div>
                    <dl className="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-3">
                      <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
                        <dt className="text-[color:var(--terminal-muted)]">Revenue</dt>
                        <dd className="mt-1 text-sm text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(point.revenue, financialValueScale)}</dd>
                      </div>
                      <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
                        <dt className="text-[color:var(--terminal-muted)]">Assets</dt>
                        <dd className="mt-1 text-sm text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(point.assets, financialValueScale)}</dd>
                      </div>
                      <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
                        <dt className="text-[color:var(--terminal-muted)]">Net Margin</dt>
                        <dd className="mt-1 text-sm text-[color:var(--terminal-bright)]">{point.netMargin === null ? 'n/a' : formatPercent(point.netMargin)}</dd>
                      </div>
                    </dl>
                  </article>
                ))}
              </div>

              <div className="data-table-wrap hidden lg:block">
                <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>
            </div>
          )}
        </Panel>
      </div>

      <Panel
        title="Filings"
        subtitle={`${periodEndFilings.length} quarter-end and fiscal-year-end SEC records loaded. Values shown in ${selectedFinancialScaleLabel}.`}
        variant="surface"
      >
        {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="space-y-3">
            <div className="space-y-3 lg:hidden">
              {periodEndFilings.map((filing) => (
                <article key={filing.accession_number} className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
                  <div className="flex flex-wrap items-start justify-between gap-2">
                    <div>
                      <p className="text-sm font-semibold text-[color:var(--terminal-bright)]">{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</p>
                      <p className="text-xs text-[color:var(--terminal-muted)]">{filing.filing_type} · {filing.filing_type === '10-Q' ? 'Quarter End' : 'Fiscal Year End'}</p>
                    </div>
                    {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>
                    ) : null}
                  </div>
                  <dl className="mt-3 grid grid-cols-1 gap-2 text-xs sm:grid-cols-3">
                    <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
                      <dt className="text-[color:var(--terminal-muted)]">Revenue</dt>
                      <dd className="mt-1 text-sm text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(filing.metrics?.revenue, financialValueScale)}</dd>
                    </div>
                    <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
                      <dt className="text-[color:var(--terminal-muted)]">Net Income</dt>
                      <dd className="mt-1 text-sm text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(filing.metrics?.netIncome, financialValueScale)}</dd>
                    </div>
                    <div className="rounded-md border border-[color:var(--line-weak)] px-2 py-1.5">
                      <dt className="text-[color:var(--terminal-muted)]">Assets</dt>
                      <dd className="mt-1 text-sm text-[color:var(--terminal-bright)]">{asScaledFinancialCurrency(filing.metrics?.totalAssets, financialValueScale)}</dd>
                    </div>
                  </dl>
                </article>
              ))}
            </div>

            <div className="data-table-wrap hidden lg:block">
              <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>
          </div>
        )}
      </Panel>

      <Panel title="AI Reports" subtitle="Generated filing analyses for this company." variant="surface">
        {loading ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Loading AI reports...</p>
        ) : !analysis || analysis.recentAiReports.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.recentAiReports.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 flex-col items-start justify-between gap-2 sm:flex-row sm:items-center">
                  <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>

      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[0.95fr_1.3fr]">
        <Panel
          title="Research Summary"
          subtitle="The full thesis workflow now lives in the dedicated Research workspace."
          actions={(
            <Link
              href={`/research?ticker=${encodeURIComponent(activeTicker)}`}
              onMouseEnter={() => prefetchResearchTicker(activeTicker)}
              onFocus={() => prefetchResearchTicker(activeTicker)}
              className="inline-flex items-center gap-2 rounded-lg border border-[color:var(--line-weak)] px-3 py-2 text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] transition hover:border-[color:var(--line-strong)] hover:text-[color:var(--accent-strong)]"
            >
              <NotebookTabs className="size-4" />
              Open research
            </Link>
          )}
        >
          <div className="space-y-4">
            <div className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
              <p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Workspace focus</p>
              <p className="mt-2 text-sm leading-6 text-[color:var(--terminal-bright)]">
                Use the research surface to manage the typed library, attach evidence to memo sections, upload diligence files, and assemble the packet view for investor review.
              </p>
            </div>
            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
              <div className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
                <p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Stored research entries</p>
                <p className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)]">{journalEntries.length}</p>
              </div>
              <div className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
                <p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">Latest update</p>
                <p className="mt-2 text-sm text-[color:var(--terminal-bright)]">{journalEntries[0] ? formatDateTime(journalEntries[0].updated_at) : 'No research activity yet'}</p>
              </div>
            </div>
          </div>
        </Panel>

        <Panel title="Recent Research Feed" subtitle={`Previewing the latest ${Math.min(journalEntries.length, 4)} research entries for ${activeTicker}.`} variant="surface">
          {journalLoading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading research entries...</p>
          ) : journalEntries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No research saved yet. Use AI memo saves from reports or open the Research workspace to start building the thesis.</p>
          ) : (
            <div className="space-y-3">
              {journalEntries.slice(0, 4).map((entry) => (
                <article key={entry.id} className="rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] p-4">
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div>
                      <p className="text-xs uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
                        {entry.entry_type.replace('_', ' ')} · {formatDateTime(entry.updated_at)}
                      </p>
                      <h4 className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{entry.title ?? 'Untitled entry'}</h4>
                    </div>
                    <Link
                      href={`/research?ticker=${encodeURIComponent(activeTicker)}`}
                      onMouseEnter={() => prefetchResearchTicker(activeTicker)}
                      onFocus={() => prefetchResearchTicker(activeTicker)}
                      className="text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
                    >
                      Open workspace
                    </Link>
                  </div>
                  <p className="mt-3 whitespace-pre-wrap text-sm leading-6 text-[color:var(--terminal-bright)]">{entry.body_markdown}</p>
                </article>
              ))}
            </div>
          )}
        </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" />
          Analysis scope: price + filings + ai synthesis + research workspace
        </div>
      </Panel>
    </AppShell>
  );
}