'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { Suspense } from 'react';
import { format } from 'date-fns';
import { Bot, Download, Search, TimerReset } from 'lucide-react';
import { useSearchParams } from 'next/navigation';
import { AppShell } from '@/components/shell/app-shell';
import { Panel } from '@/components/ui/panel';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { StatusPill } from '@/components/ui/status-pill';
import { useAuthGuard } from '@/hooks/use-auth-guard';
import { useTaskPoller } from '@/hooks/use-task-poller';
import { getTask, listFilings, queueFilingAnalysis, queueFilingSync } from '@/lib/api';
import type { Filing, Task } from '@/lib/types';
import { formatCompactCurrency } from '@/lib/format';

export default function FilingsPage() {
  return (
    <Suspense fallback={<div className="flex min-h-screen items-center justify-center text-sm text-[color:var(--terminal-muted)]">Opening filings stream...</div>}>
      <FilingsPageContent />
    </Suspense>
  );
}

function FilingsPageContent() {
  const { isPending, isAuthenticated } = useAuthGuard();
  const searchParams = useSearchParams();

  const [filings, setFilings] = useState<Filing[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [syncTickerInput, setSyncTickerInput] = useState('');
  const [filterTickerInput, setFilterTickerInput] = useState('');
  const [searchTicker, setSearchTicker] = useState('');
  const [activeTask, setActiveTask] = useState<Task | null>(null);

  useEffect(() => {
    const ticker = searchParams.get('ticker');
    if (ticker) {
      const normalized = ticker.toUpperCase();
      setSyncTickerInput(normalized);
      setFilterTickerInput(normalized);
      setSearchTicker(normalized);
    }
  }, [searchParams]);

  const loadFilings = useCallback(async (ticker?: string) => {
    setLoading(true);
    setError(null);

    try {
      const response = await listFilings({ ticker, limit: 120 });
      setFilings(response.filings);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unable to fetch filings');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!isPending && isAuthenticated) {
      void loadFilings(searchTicker || undefined);
    }
  }, [isPending, isAuthenticated, searchTicker, loadFilings]);

  const polledTask = useTaskPoller({
    taskId: activeTask?.id ?? null,
    onTerminalState: async () => {
      setActiveTask(null);
      await loadFilings(searchTicker || undefined);
    }
  });

  const liveTask = polledTask ?? activeTask;

  const triggerSync = async () => {
    if (!syncTickerInput.trim()) {
      return;
    }

    try {
      const { task } = await queueFilingSync({ ticker: syncTickerInput.trim().toUpperCase(), limit: 20 });
      const latest = await getTask(task.id);
      setActiveTask(latest.task);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to queue filing sync');
    }
  };

  const triggerAnalysis = async (accessionNumber: string) => {
    try {
      const { task } = await queueFilingAnalysis(accessionNumber);
      const latest = await getTask(task.id);
      setActiveTask(latest.task);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to queue filing analysis');
    }
  };

  const groupedByTicker = useMemo(() => {
    const counts = new Map<string, number>();

    for (const filing of filings) {
      counts.set(filing.ticker, (counts.get(filing.ticker) ?? 0) + 1);
    }

    return counts;
  }, [filings]);

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

  return (
    <AppShell
      title="Filings Stream"
      subtitle="Sync SEC submissions and generate AI red-flag analysis asynchronously."
      actions={(
        <Button variant="secondary" onClick={() => void loadFilings(searchTicker || undefined)}>
          <TimerReset className="size-4" />
          Refresh table
        </Button>
      )}
    >
      {liveTask ? (
        <Panel title="Active Task" subtitle={`${liveTask.task_type} is processing in the task engine.`}>
          <div className="flex items-center justify-between gap-3 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2">
            <p className="text-sm text-[color:var(--terminal-bright)]">{liveTask.id}</p>
            <StatusPill status={liveTask.status} />
          </div>
          {liveTask.error ? <p className="mt-2 text-sm text-[#ff9898]">{liveTask.error}</p> : null}
        </Panel>
      ) : null}

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-[1.2fr_1fr]">
        <Panel title="Sync Controller" subtitle="Queue ingestion jobs by ticker symbol.">
          <form
            className="flex flex-wrap items-center gap-3"
            onSubmit={(event) => {
              event.preventDefault();
              void triggerSync();
            }}
          >
            <Input
              value={syncTickerInput}
              onChange={(event) => setSyncTickerInput(event.target.value.toUpperCase())}
              placeholder="Ticker (AAPL)"
              className="max-w-xs"
            />
            <Button type="submit">
              <Download className="size-4" />
              Queue sync
            </Button>
          </form>
        </Panel>

        <Panel title="Search Index" subtitle="Filter by ticker in the local filing index.">
          <form
            className="flex flex-wrap items-center gap-3"
            onSubmit={(event) => {
              event.preventDefault();
              setSearchTicker(filterTickerInput.trim().toUpperCase());
            }}
          >
            <Input
              value={filterTickerInput}
              onChange={(event) => setFilterTickerInput(event.target.value.toUpperCase())}
              placeholder="Ticker filter"
              className="max-w-xs"
            />
            <Button type="submit" variant="secondary">
              <Search className="size-4" />
              Apply
            </Button>
            <Button
              type="button"
              variant="ghost"
              onClick={() => {
                setFilterTickerInput('');
                setSearchTicker('');
              }}
            >
              Clear
            </Button>
          </form>
        </Panel>
      </div>

      <Panel title="Filing Ledger" subtitle={`${filings.length} records loaded${searchTicker ? ` for ${searchTicker}` : ''}.`}>
        {error ? <p className="text-sm text-[#ffb5b5]">{error}</p> : null}
        {loading ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Fetching filings...</p>
        ) : filings.length === 0 ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">No filings available. Queue a sync job to ingest fresh SEC data.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="data-table min-w-[980px]">
              <thead>
                <tr>
                  <th>Ticker</th>
                  <th>Type</th>
                  <th>Filed</th>
                  <th>Revenue Snapshot</th>
                  <th>Company</th>
                  <th>AI</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {filings.map((filing) => {
                  const revenue = filing.metrics?.revenue;
                  const hasAnalysis = Boolean(filing.analysis?.text || filing.analysis?.legacyInsights);

                  return (
                    <tr key={filing.accession_number}>
                      <td>
                        <div className="font-medium text-[color:var(--terminal-bright)]">{filing.ticker}</div>
                        <div className="text-xs text-[color:var(--terminal-muted)]">{groupedByTicker.get(filing.ticker)} filings</div>
                      </td>
                      <td>{filing.filing_type}</td>
                      <td>{format(new Date(filing.filing_date), 'MMM dd, yyyy')}</td>
                      <td>{revenue ? formatCompactCurrency(revenue) : 'n/a'}</td>
                      <td>{filing.company_name}</td>
                      <td>{hasAnalysis ? 'Ready' : 'Not generated'}</td>
                      <td>
                        <div className="flex items-center gap-2">
                          {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
                            </a>
                          ) : null}
                          <Button
                            variant="ghost"
                            onClick={() => void triggerAnalysis(filing.accession_number)}
                            className="px-2 py-1 text-xs"
                          >
                            <Bot className="size-3" />
                            Analyze
                          </Button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </Panel>
    </AppShell>
  );
}