'use client';

import Link from 'next/link';
import { Suspense, useEffect, useMemo, useState, useTransition } from 'react';
import { useSearchParams } from 'next/navigation';
import { useQueryClient } from '@tanstack/react-query';
import { BrainCircuit, ExternalLink, Search as SearchIcon } from 'lucide-react';
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 { getSearchAnswer } from '@/lib/api';
import { searchQueryOptions } from '@/lib/query/options';
import type { SearchAnswerResponse, SearchResult, SearchSource } from '@/lib/types';

const SOURCE_OPTIONS: Array<{ value: SearchSource; label: string }> = [
  { value: 'documents', label: 'Documents' },
  { value: 'filings', label: 'Filing briefs' },
  { value: 'research', label: 'Research notes' }
];

function parseSourceParams(value: string | null) {
  if (!value) {
    return ['documents', 'filings', 'research'] as SearchSource[];
  }

  const normalized = value
    .split(',')
    .map((entry) => entry.trim().toLowerCase())
    .filter((entry): entry is SearchSource => entry === 'documents' || entry === 'filings' || entry === 'research');

  return normalized.length > 0 ? [...new Set(normalized)] : ['documents', 'filings', 'research'] as SearchSource[];
}

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

function SearchPageContent() {
  const { isPending, isAuthenticated } = useAuthGuard();
  const searchParams = useSearchParams();
  const queryClient = useQueryClient();

  const initialQuery = searchParams.get('q')?.trim() ?? '';
  const initialTicker = searchParams.get('ticker')?.trim().toUpperCase() ?? '';
  const initialSources = useMemo(() => parseSourceParams(searchParams.get('sources')), [searchParams]);

  const [queryInput, setQueryInput] = useState(initialQuery);
  const [query, setQuery] = useState(initialQuery);
  const [tickerInput, setTickerInput] = useState(initialTicker);
  const [ticker, setTicker] = useState(initialTicker);
  const [sources, setSources] = useState<SearchSource[]>(initialSources);
  const [results, setResults] = useState<SearchResult[]>([]);
  const [answer, setAnswer] = useState<SearchAnswerResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [answerLoading, startAnswerTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setQueryInput(initialQuery);
    setQuery(initialQuery);
    setTickerInput(initialTicker);
    setTicker(initialTicker);
    setSources(initialSources);
  }, [initialQuery, initialTicker, initialSources]);

  useEffect(() => {
    if (!query.trim() || !isAuthenticated) {
      setResults([]);
      return;
    }

    let cancelled = false;
    setLoading(true);
    setError(null);

    queryClient.fetchQuery(searchQueryOptions({
      query,
      ticker: ticker || undefined,
      sources,
      limit: 10
    })).then((response) => {
      if (!cancelled) {
        setResults(response.results);
      }
    }).catch((err) => {
      if (!cancelled) {
        setError(err instanceof Error ? err.message : 'Unable to search indexed sources');
        setResults([]);
      }
    }).finally(() => {
      if (!cancelled) {
        setLoading(false);
      }
    });

    return () => {
      cancelled = true;
    };
  }, [isAuthenticated, query, queryClient, sources, ticker]);

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

  const runAnswer = () => {
    if (!query.trim()) {
      return;
    }

    startAnswerTransition(() => {
      setError(null);
      getSearchAnswer({
        query,
        ticker: ticker || undefined,
        sources,
        limit: 10
      }).then((response) => {
        setAnswer(response);
      }).catch((err) => {
        setError(err instanceof Error ? err.message : 'Unable to generate cited answer');
        setAnswer(null);
      });
    });
  };

  return (
    <AppShell
      title="Search"
      subtitle="Hybrid semantic + lexical retrieval across primary filings, filing briefs, and private research notes."
      activeTicker={ticker || null}
    >
      <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1.2fr_0.8fr]">
        <Panel title="Search Query" subtitle="Run semantic search with an optional ticker filter and source selection.">
          <form
            className="space-y-3"
            onSubmit={(event) => {
              event.preventDefault();
              setQuery(queryInput.trim());
              setTicker(tickerInput.trim().toUpperCase());
              setAnswer(null);
            }}
          >
            <Input
              value={queryInput}
              onChange={(event) => setQueryInput(event.target.value)}
              placeholder="Ask about margin drivers, segment commentary, risks, or your notes..."
            />
            <div className="flex flex-col gap-3 sm:flex-row">
              <Input
                value={tickerInput}
                onChange={(event) => setTickerInput(event.target.value.toUpperCase())}
                placeholder="Ticker filter (optional)"
                className="sm:max-w-xs"
              />
              <div className="flex flex-wrap gap-2">
                {SOURCE_OPTIONS.map((option) => {
                  const selected = sources.includes(option.value);
                  return (
                    <Button
                      key={option.value}
                      type="button"
                      variant={selected ? 'primary' : 'ghost'}
                      className="px-2 py-1 text-xs"
                      onClick={() => {
                        setSources((current) => {
                          if (selected && current.length > 1) {
                            return current.filter((entry) => entry !== option.value);
                          }

                          return selected ? current : [...current, option.value];
                        });
                      }}
                    >
                      {option.label}
                    </Button>
                  );
                })}
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button type="submit" className="w-full sm:w-auto">
                <SearchIcon className="size-4" />
                Search
              </Button>
              <Button type="button" variant="secondary" className="w-full sm:w-auto" onClick={runAnswer} disabled={!query.trim() || answerLoading}>
                <BrainCircuit className="size-4" />
                {answerLoading ? 'Answering...' : 'Cited answer'}
              </Button>
            </div>
          </form>
        </Panel>

        <Panel title="Cited Answer" subtitle="Single-turn answer grounded only in retrieved evidence." variant="surface">
          {answer ? (
            <div className="space-y-3">
              <p className="whitespace-pre-wrap text-sm leading-7 text-[color:var(--terminal-bright)]">{answer.answer}</p>
              {answer.citations.length > 0 ? (
                <div className="space-y-2">
                  {answer.citations.map((citation) => (
                    <Link
                      key={`${citation.chunkId}-${citation.index}`}
                      href={citation.href}
                      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 text-[color:var(--terminal-bright)] transition hover:border-[color:var(--line-strong)]"
                    >
                      <span>[{citation.index}] {citation.label}</span>
                      <ExternalLink className="size-3.5 text-[color:var(--accent)]" />
                    </Link>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-[color:var(--terminal-muted)]">No supporting citations were strong enough to answer.</p>
              )}
            </div>
          ) : (
            <p className="text-sm text-[color:var(--terminal-muted)]">Ask a question to synthesize the top retrieved passages into a cited answer.</p>
          )}
        </Panel>
      </div>

      <Panel
        title="Semantic Search"
        subtitle={query ? `${results.length} results${ticker ? ` for ${ticker}` : ''}.` : 'Search results will appear here.'}
        variant="surface"
      >
        {error ? <p className="text-sm text-[#ffb5b5]">{error}</p> : null}
        {loading ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Searching indexed sources...</p>
        ) : !query ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">Enter a question or topic to search the local RAG index.</p>
        ) : results.length === 0 ? (
          <p className="text-sm text-[color:var(--terminal-muted)]">No indexed evidence matched this query.</p>
        ) : (
          <div className="space-y-3">
            {results.map((result) => (
              <article key={result.chunkId} 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)]">
                      {result.source} {result.ticker ? `· ${result.ticker}` : ''} {result.filingDate ? `· ${result.filingDate}` : ''}
                    </p>
                    <h3 className="mt-1 text-sm font-semibold text-[color:var(--terminal-bright)]">{result.title ?? result.citationLabel}</h3>
                    <p className="mt-1 text-xs text-[color:var(--accent)]">{result.citationLabel}</p>
                  </div>
                  <Link
                    href={result.href}
                    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 source
                    <ExternalLink className="size-3" />
                  </Link>
                </div>
                {result.headingPath ? (
                  <p className="mt-3 text-xs uppercase tracking-[0.12em] text-[color:var(--terminal-muted)]">{result.headingPath}</p>
                ) : null}
                <p className="mt-3 text-sm leading-6 text-[color:var(--terminal-bright)]">{result.snippet}</p>
              </article>
            ))}
          </div>
        )}
      </Panel>
    </AppShell>
  );
}