'use client';

import Link from 'next/link';
import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
import { format } from 'date-fns';
import {
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  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 { getCompanyAnalysis } from '@/lib/api';
import { asNumber, formatCompactCurrency, formatCurrency, formatPercent } from '@/lib/format';
import type { CompanyAnalysis } from '@/lib/types';

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

function hasFinancialSnapshot(filingType: CompanyAnalysis['filings'][number]['filing_type']) {
  return filingType === '10-K' || filingType === '10-Q';
}

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

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

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

  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(() => {
    return (analysis?.financials ?? [])
      .slice()
      .reverse()
      .map((item) => ({
        label: formatShortDate(item.filingDate),
        revenue: item.revenue,
        netIncome: item.netIncome,
        assets: item.totalAssets
      }));
  }, [analysis?.financials]);

  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."
      actions={(
        <Button variant="secondary" onClick={() => 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}`} 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>
        </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="rgba(126, 217, 255, 0.2)" />
                  <XAxis dataKey="label" minTickGap={32} stroke="#8cb6c5" fontSize={12} />
                  <YAxis stroke="#8cb6c5" fontSize={12} tickFormatter={(value: number) => `$${value.toFixed(0)}`} />
                  <Tooltip formatter={(value: number | string | undefined) => formatCurrency(value)} />
                  <Line type="monotone" dataKey="close" stroke="#68ffd5" strokeWidth={2} dot={false} />
                </LineChart>
              </ResponsiveContainer>
            </div>
          )}
        </Panel>

        <Panel title="Financial Trend" subtitle="Filing snapshots for revenue, net income, and assets.">
          {loading ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">Loading financials...</p>
          ) : financialSeries.length === 0 ? (
            <p className="text-sm text-[color:var(--terminal-muted)]">No parsed filing metrics yet.</p>
          ) : (
            <div className="h-[320px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={financialSeries}>
                  <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) => `$${Math.round(value / 1_000_000_000)}B`} />
                  <Tooltip formatter={(value: number | string | undefined) => formatCompactCurrency(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]} />
                  <Bar dataKey="assets" name="Total Assets" fill="#9ac7ff" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          )}
        </Panel>
      </div>

      <Panel title="Filings" subtitle={`${analysis?.filings.length ?? 0} recent SEC records loaded.`}>
        {loading ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Loading filings...</p>
        ) : !analysis || analysis.filings.length === 0 ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">No filings available for this ticker.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="data-table min-w-[860px]">
              <thead>
                <tr>
                  <th>Filed</th>
                  <th>Type</th>
                  <th>Revenue</th>
                  <th>Net Income</th>
                  <th>Assets</th>
                  <th>Document</th>
                </tr>
              </thead>
              <tbody>
                {analysis.filings.map((filing) => (
                  <tr key={filing.accession_number}>
                    <td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
                    <td>{filing.filing_type}{hasFinancialSnapshot(filing.filing_type) ? '' : ' (Qualitative)'}</td>
                    <td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.revenue ? formatCompactCurrency(filing.metrics.revenue) : 'n/a') : 'qualitative only'}</td>
                    <td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.netIncome ? formatCompactCurrency(filing.metrics.netIncome) : 'n/a') : 'qualitative only'}</td>
                    <td>{hasFinancialSnapshot(filing.filing_type) ? (filing.metrics?.totalAssets ? formatCompactCurrency(filing.metrics.totalAssets) : 'n/a') : 'qualitative only'}</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)}`}
                    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>
  );
}