import { Search as SearchIcon, Sparkles } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { CompanyTable } from '@/components/company/company-table';
import { EventList } from '@/components/events/event-row';
import { Chip, CountryChip } from '@/components/ui/badges';
import { Container, Empty, Note, PageHeader, Section } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { fmtDate, fmtInt, fmtScore, pathOf } from '@/lib/format';
import { str, type SP } from '@/lib/params';
import { EXAMPLE_QUERIES, routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Search', robots: { index: false } };
export const dynamic = 'force-dynamic';

function looksLikeQuestion(q: string): boolean {
  const s = q.trim().toLowerCase();
  const words = s.split(/\s+/).filter(Boolean);
  if (words.length >= 4) return true;
  return /^(which|what|who|where|how|show|list|find)\b/.test(s) || /\b(hiring|in|with|that|expanding|launch|pricing)\b/.test(s) && words.length >= 3;
}

export default async function SearchPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const q = (str(sp.q) ?? '').trim();
  const ask = q && looksLikeQuestion(q);
  const [res, answer] = await Promise.all([q ? safe(api.search(q, { limit: 10 })) : Promise.resolve(null), ask ? safe(api.ask(q)) : Promise.resolve(null)]);
  const total = res ? res.companies.length + res.events.length + res.industries.length + res.countries.length + res.people.length + res.products.length : 0;
  return (
    <Container wide>
      <PageHeader eyebrow="Search" title={q ? <>Results for “{q}”</> : 'Search the atlas'} lede={q && res ? `${fmtInt(total)} results in ${res.took_ms} ms across companies, events, industries, countries, people and products.` : 'Companies, industries, countries, events, people, products — or ask a question in plain language.'} />
      <form method="get" action="/search" role="search" className="mb-6 flex max-w-2xl items-stretch border border-rule-strong bg-surface focus-within:border-accent">
        <label htmlFor="q" className="sr-only">
          Search
        </label>
        <SearchIcon className="my-auto ml-3 size-4 shrink-0 text-ink-3" aria-hidden />
        <input id="q" name="q" type="search" defaultValue={q} placeholder="e.g. companies hiring AI engineers in Canada" className="h-11 min-w-0 flex-1 bg-transparent px-3 text-[16px] text-ink placeholder:text-ink-3 focus:outline-none" autoComplete="off" spellCheck={false} />
        <button type="submit" className="bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90">
          Search
        </button>
      </form>
      {!q && (
        <div>
          <p className="eyebrow mb-2">Try asking</p>
          <ul className="flex flex-wrap gap-2">
            {EXAMPLE_QUERIES.map((ex) => (
              <li key={ex}>
                <Link href={routes.search(ex)} className="chip-btn">
                  {ex}
                </Link>
              </li>
            ))}
          </ul>
          <Note className="mt-4">Natural-language questions are parsed into structured filters (country, industry, event type, AI-related) and answered from the monitored record; every answer links back to events and their sources.</Note>
        </div>
      )}
      {q && ask && (
        <section className="mb-8 border border-accent/40 bg-accent-soft/40 p-4 md:p-5" data-ask-panel>
          <p className="eyebrow flex items-center gap-1.5 text-accent">
            <Sparkles className="size-3.5" aria-hidden /> Ask Company Atlas
          </p>
          {answer ? (
            <>
              <p className="mt-2 max-w-3xl text-[15px] leading-relaxed text-ink">{answer.answer}</p>
              {Object.keys(answer.interpretation ?? {}).length > 0 && (
                <p className="mt-2 flex flex-wrap items-center gap-1 text-xs text-ink-3">
                  Interpreted as:
                  {Object.entries(answer.interpretation)
                    .filter(([k, v]) => v !== null && v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0) && typeof v !== 'object' || Array.isArray(v))
                    .filter(([k]) => !['question', 'source', 'parser_version', 'llm_model', 'prompt_version', 'answer_style', 'filters'].includes(k))
                    .filter(([, v]) => !(Array.isArray(v) && v.length === 0))
                    .map(([k, v]) => (
                      <Chip key={k} tone="outline" className="max-w-full whitespace-normal! break-words">
                        {k.replace(/_/g, ' ')} = {Array.isArray(v) ? `${v.slice(0, 3).join(', ')}${v.length > 3 ? ` +${v.length - 3}` : ''}` : String(v)}
                      </Chip>
                    ))}
                </p>
              )}
              {answer.companies.length > 0 && (
                <div className="mt-4">
                  <p className="eyebrow mb-1">Matching companies</p>
                  <CompanyTable items={answer.companies} showSparkline={false} />
                </div>
              )}
              {answer.events.length > 0 && (
                <div className="mt-4">
                  <p className="eyebrow mb-1">Related events</p>
                  <EventList events={answer.events} variant="table" />
                </div>
              )}
              {answer.sources.length > 0 && (
                <p className="mt-3 text-xs text-ink-3">
                  Sources:{' '}
                  {answer.sources.slice(0, 6).map((s, i) => (
                    <span key={s + i}>
                      {i > 0 && ' · '}
                      <a href={s} target="_blank" rel="noopener noreferrer" className="link">
                        {pathOf(s)}
                      </a>
                    </span>
                  ))}
                </p>
              )}
            </>
          ) : (
            <p className="mt-2 text-sm text-ink-3">The question router did not answer in time; the keyword results below still apply.</p>
          )}
        </section>
      )}
      {q && !res && <Empty title="Search is temporarily unavailable." />}
      {q && res && total === 0 && !answer && <Empty title="No monitored evidence matches this query yet.">Try a company name, a domain, an industry or a country.</Empty>}
      {res && res.companies.length > 0 && (
        <Section eyebrow="Companies" title={`${res.companies.length} ${res.companies.length === 1 ? 'company' : 'companies'}`} hairline={false}>
          <CompanyTable items={res.companies} />
        </Section>
      )}
      {res && (res.industries.length > 0 || res.countries.length > 0) && (
        <Section eyebrow="Atlas" title="Industries and countries">
          <ul className="flex flex-wrap gap-2">
            {res.industries.map((i) => (
              <li key={i.slug}>
                <Link href={routes.industry(i.slug)} className="chip-btn">
                  {i.name} <span className="tnum text-ink-3">{fmtInt(i.companies)}</span>
                </Link>
              </li>
            ))}
            {res.countries.map((c) => (
              <li key={c.code}>
                <Link href={routes.country(c.code)} className="chip-btn">
                  <CountryChip code={c.code} link={false} /> {c.name} <span className="tnum text-ink-3">{fmtInt(c.companies)}</span>
                </Link>
              </li>
            ))}
          </ul>
        </Section>
      )}
      {res && res.events.length > 0 && (
        <Section eyebrow="Events" title={`${res.events.length} events`} action={{ href: routes.events({ q }), label: 'All matching events' }}>
          <EventList events={res.events} variant="table" />
        </Section>
      )}
      {res && (res.people.length > 0 || res.products.length > 0) && (
        <div className="grid gap-8 md:grid-cols-2">
          {res.people.length > 0 && (
            <Section eyebrow="People" title="Listed on monitored leadership pages">
              <ul className="divide-y divide-rule border-y border-rule text-sm">
                {res.people.map((p) => (
                  <li key={p.id} className="flex flex-wrap items-center gap-2 py-2">
                    <span className="font-medium text-ink">{p.name}</span>
                    <span className="text-ink-2">{p.title}</span>
                    <Link href={routes.company(p.company.slug, 'leadership')} className="link ml-auto text-xs">
                      {p.company.display_name}
                    </Link>
                    <span className="text-[11px] text-ink-3">{p.status === 'listed' ? 'listed' : 'no longer listed'}</span>
                  </li>
                ))}
              </ul>
            </Section>
          )}
          {res.products.length > 0 && (
            <Section eyebrow="Products" title="Listed in monitored catalogs">
              <ul className="divide-y divide-rule border-y border-rule text-sm">
                {res.products.map((p) => (
                  <li key={p.id} className="flex flex-wrap items-center gap-2 py-2">
                    <span className="font-medium text-ink">{p.name}</span>
                    {p.category && <Chip>{p.category}</Chip>}
                    <Link href={routes.company(p.company.slug, 'products')} className="link ml-auto text-xs">
                      {p.company.display_name}
                    </Link>
                    <span className="text-[11px] text-ink-3">first seen {fmtDate(p.first_seen_at)}</span>
                  </li>
                ))}
              </ul>
            </Section>
          )}
        </div>
      )}
      {res && res.companies.length > 0 && <p className="sr-only">{res.companies.map((c) => `${c.display_name} ${fmtScore(c.metrics.activity_score)}`).join(', ')}</p>}
    </Container>
  );
}