import type { Metadata } from 'next';
import Link from 'next/link';
import { LineChart } from '@/components/charts/line-chart';
import { Sparkline } from '@/components/charts/sparkline';
import { CompanyLogo } from '@/components/company/company-logo';
import { ComparePicker } from '@/components/company/compare-picker';
import { CountryChip, EventTypeBadge } from '@/components/ui/badges';
import { Container, Empty, Note, PageHeader, Section } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { EVENT_TYPES } from '@/lib/event-styles';
import { fmtInt, fmtPctSigned, fmtScore, num } from '@/lib/format';
import { str, type SP } from '@/lib/params';
import { logoCandidates } from '@/lib/profile';
import { METRIC_LABELS, routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Compare companies', description: 'Side-by-side activity, hiring momentum, product velocity, AI adoption, locations and events for 2–6 monitored companies.' };
export const revalidate = 120;

const METRICS = ['activity_score', 'hiring_momentum_30d', 'product_velocity', 'ai_adoption', 'geo_expansion', 'developer_momentum', 'corporate_change_index', 'open_jobs'] as const;

export default async function ComparePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const slugs = (str(sp.companies) ?? '').split(',').map((s) => s.trim()).filter(Boolean).slice(0, 6);
  const data = slugs.length >= 2 ? await safe(api.compare(slugs)) : null;
  const names: Record<string, string> = {};
  if (data) for (const c of data.companies) names[c.slug] = c.display_name;
  else if (slugs.length === 1) {
    const c = await safe(api.company(slugs[0] as string));
    if (c) names[c.slug] = c.display_name;
  }
  const cols = data?.companies ?? [];
  return (
    <Container wide>
      <PageHeader eyebrow="Comparison" title="Compare companies" lede="Pick two to six companies. Metrics are the latest computed values; series show 90 days of Activity Score; events count structured events detected in the last 30 days." />
      <ComparePicker slugs={slugs} names={names} />
      {slugs.length < 2 ? (
        <Empty className="mt-6" title={slugs.length === 1 ? 'Add at least one more company to compare.' : 'Add two or more companies to start.'}>
          Try <Link href={routes.compare(['stripe', 'adyen', 'block'])} className="link">Stripe · Adyen · Block</Link>.
        </Empty>
      ) : !data ? (
        <Empty className="mt-6" title="Comparison unavailable." />
      ) : (
        <>
          <Section eyebrow="Metrics" title="Latest computed values">
            <div className="table-scroll">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>Metric</th>
                    {cols.map((c) => (
                      <th key={c.slug} className="num">
                        <Link href={routes.company(c.slug)} className="row-link inline-flex items-center gap-1.5">
                          <CompanyLogo name={c.display_name} candidates={logoCandidates(c)} size={20} rounded="sm" />
                          {c.display_name}
                        </Link>
                        <span className="block font-normal normal-case tracking-normal text-ink-3">
                          <CountryChip code={c.country} link={false} /> {c.industry_primary?.replace(/-/g, ' ')}
                        </span>
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {METRICS.map((m) => {
                    const vals = cols.map((c) => num(data.metrics[m]?.[c.slug] ?? c.metrics[m]));
                    const best = m === 'hiring_momentum_30d' || m === 'open_jobs' ? Math.max(...vals.map((v) => v ?? -Infinity)) : Math.max(...vals.map((v) => v ?? -Infinity));
                    return (
                      <tr key={m}>
                        <td className="primary">{METRIC_LABELS[m]}</td>
                        {vals.map((v, i) => (
                          <td key={cols[i]!.slug} className={cn('num tnum', v !== null && v === best && cols.length > 1 && 'font-semibold text-accent', m === 'hiring_momentum_30d' && v !== null && (v > 0 ? 'text-positive' : v < 0 ? 'text-danger' : ''))}>
                            {v === null ? '—' : m === 'hiring_momentum_30d' ? fmtPctSigned(v) : m === 'open_jobs' ? fmtInt(v) : fmtScore(v)}
                          </td>
                        ))}
                      </tr>
                    );
                  })}
                  <tr>
                    <td className="primary">Sensors · events</td>
                    {cols.map((c) => (
                      <td key={c.slug} className="num tnum">
                        {fmtInt(c.counts.sensors)} · {fmtInt(c.counts.events)}
                      </td>
                    ))}
                  </tr>
                  <tr>
                    <td className="primary">Jobs (open · AI · new 30 d)</td>
                    {cols.map((c) => {
                      const j = data.jobs[c.slug];
                      return (
                        <td key={c.slug} className="num tnum">
                          {j ? `${fmtInt(j.open)} · ${fmtInt(j.ai_open)} · ${fmtInt(j.new_30d)}` : '—'}
                        </td>
                      );
                    })}
                  </tr>
                  <tr>
                    <td className="primary">Listed locations</td>
                    {cols.map((c) => (
                      <td key={c.slug} className="num tnum">
                        {fmtInt(data.locations[c.slug])}
                      </td>
                    ))}
                  </tr>
                  <tr>
                    <td className="primary">Activity 30 d</td>
                    {cols.map((c) => (
                      <td key={c.slug} className="num">
                        <Sparkline values={c.sparkline} width={90} height={22} tone="accent" className="ml-auto" />
                      </td>
                    ))}
                  </tr>
                </tbody>
              </table>
            </div>
            <Note className="mt-2">Highlighted = highest value in the row. A dash means the metric has no inputs yet for that company — it is omitted, not zero.</Note>
          </Section>
          <Section eyebrow="Small multiples" title="Activity Score, 90 days">
            <LineChart series={cols.filter((c) => data.series[c.slug]?.length).map((c) => ({ id: c.slug, label: c.display_name, points: (data.series[c.slug] ?? []).map((p) => ({ day: p.day, value: p.value })) }))} height={220} yZero />
          </Section>
          <Section eyebrow="Events by type" title="Structured events, last 30 days">
            <div className="table-scroll">
              <table className="data-table compact">
                <thead>
                  <tr>
                    <th>Type</th>
                    {cols.map((c) => (
                      <th key={c.slug} className="num">
                        {c.display_name}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {EVENT_TYPES.filter((t) => cols.some((c) => (data.events_30d[c.slug]?.[t] ?? 0) > 0)).map((t) => (
                    <tr key={t}>
                      <td>
                        <EventTypeBadge type={t} />
                      </td>
                      {cols.map((c) => (
                        <td key={c.slug} className="num tnum">
                          {data.events_30d[c.slug]?.[t] ? <Link href={`${routes.company(c.slug, 'timeline')}`} className="row-link">{fmtInt(data.events_30d[c.slug]?.[t])}</Link> : <span className="text-ink-3">·</span>}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Section>
        </>
      )}
    </Container>
  );
}