import { ArrowRight, Code2 } from 'lucide-react';
import Link from 'next/link';
import { Suspense } from 'react';
import { Sparkline } from '@/components/charts/sparkline';
import { WorldMap } from '@/components/charts/world-map';
import { CompanyMiniList } from '@/components/company/company-table';
import { EventList } from '@/components/events/event-row';
import { LiveCounters } from '@/components/live/counters';
import { LiveFeed } from '@/components/live/live-feed';
import { Chip, CountryChip } from '@/components/ui/badges';
import { Container, Empty, Note, Section, Stat, StatGrid, Unavailable } from '@/components/ui/section';
import { api, liveItems, safe } from '@/lib/api';
import { countryName } from '@/lib/countries';
import { fmtBytes, fmtDate, fmtDays, fmtInt, fmtPctSigned, fmtScore } from '@/lib/format';
import { ALT_TAGLINE, DESCRIPTION, PUBLIC_API_BASE, routes, TAGLINE } from '@/lib/site';
import type { Event, Pulse } from '@/lib/types';

export const revalidate = 60;

export default async function HomePage() {
  const [pulse, live, index, signals] = await Promise.all([safe(api.pulse()), safe(api.live({ limit: 40 })), safe(api.index()), safe(api.signals({ limit: 8 }))]);
  const initialLive: Event[] = liveItems(live).length ? liveItems(live) : (pulse?.live ?? []);
  const stats = pulse?.stats ?? (await safe(api.stats()));
  const p: Partial<Pulse> = pulse ?? {};

  return (
    <>
      {/* Hero */}
      <div className="relative overflow-hidden border-b border-rule">
        <div className="grid-bg pointer-events-none absolute inset-0" aria-hidden />
        <Container className="relative pb-8 pt-10 md:pb-12 md:pt-16">
          <p className="eyebrow flex items-center gap-2">
            <span className="dot pulse" aria-hidden /> Continuous corporate observation network
          </p>
          <h1 className="display mt-3 max-w-4xl text-[34px] md:text-[60px]">{TAGLINE}</h1>
          <p className="mt-4 max-w-2xl text-[16px] leading-relaxed text-ink-2 md:text-[18px]">{DESCRIPTION}</p>
          <p className="mt-2 max-w-2xl text-sm text-ink-3">{ALT_TAGLINE}</p>
          <div className="mt-6 flex flex-wrap gap-2">
            <Link href={routes.live()} className="btn btn-primary">
              Open the live feed <ArrowRight className="size-4" aria-hidden />
            </Link>
            <Link href={routes.companies()} className="btn">
              Browse companies
            </Link>
            <Link href={routes.api()} className="btn">
              <Code2 className="size-4" aria-hidden /> API & data
            </Link>
          </div>
          <LiveCounters stats={stats} className="mt-8 md:mt-10" />
        </Container>
      </div>

      <Container>
        {/* Live feed + movers */}
        <div className="grid gap-8 lg:grid-cols-12">
          <Section eyebrow="Live activity feed" title="What changed in the last minutes" action={{ href: routes.live(), label: 'Full feed' }} className="lg:col-span-7" hairline={false}>
            {live || pulse ? (
              <Suspense fallback={<EventList events={initialLive.slice(0, 18)} variant="feed" />}>
                <LiveFeed initial={initialLive} limit={18} compact showControls={false} />
              </Suspense>
            ) : (
              <Unavailable what="The live feed" />
            )}
          </Section>
          <Section eyebrow="Companies moving fastest" title="Highest Activity Score (7 days)" action={{ href: routes.rankings('most_active', '7d'), label: 'Rankings' }} className="lg:col-span-5" hairline={false}>
            {p.movers ? <CompanyMiniList items={p.movers} metric="activity_score" label="Activity" sparkline /> : <Unavailable what="Movers" compact />}
            <Note className="mt-3">Activity Score = decayed weight of meaningful changes and structured events over 30 days, normalised per active sensor (0–100, see methodology).</Note>
          </Section>
        </div>

        {/* Map */}
        <Section eyebrow="Global activity map" title="Where monitored companies are changing" lede="Bubbles are sized by structured events detected in the last 30 days, clustered by headquarters city. Hover for detail, click to open the country atlas." action={{ href: routes.countries(), label: 'Country atlas' }}>
          {p.map && p.map.length ? (
            <div className="grid gap-6 lg:grid-cols-[minmax(0,2.2fr)_minmax(0,1fr)]">
              <WorldMap buckets={p.map} />
              <div>
                <p className="eyebrow mb-1">Most active countries (30 d)</p>
                <ol className="divide-y divide-rule border-y border-rule text-sm">
                  {(p.countries ?? []).slice(0, 8).map((c) => (
                    <li key={c.code}>
                      <Link href={routes.country(c.code)} className="flex items-center gap-2 py-1.5 hover:text-accent">
                        <CountryChip code={c.code} link={false} />
                        <span className="min-w-0 flex-1 truncate">{c.name}</span>
                        <span className="tnum text-xs text-ink-3">{fmtInt(c.companies)} co.</span>
                        <span className="tnum w-12 text-right font-medium">{fmtInt(c.events_30d)}</span>
                      </Link>
                    </li>
                  ))}
                </ol>
              </div>
            </div>
          ) : (
            <Unavailable what="The activity map" />
          )}
        </Section>

        {/* Hiring / launches / pricing */}
        <div className="grid gap-8 md:grid-cols-3">
          <Section eyebrow="Hiring momentum" title="Open listings, 30-day change" action={{ href: routes.rankings('hiring_growth', '30d'), label: 'All' }} className="md:border-t">
            {p.hiring ? <CompanyMiniList items={p.hiring} metric="hiring_momentum_30d" /> : <Unavailable what="Hiring momentum" compact />}
          </Section>
          <Section eyebrow="Product launches" title="New products detected" action={{ href: routes.events({ event_type: 'PRODUCT' }), label: 'All' }}>
            {p.launches ? <EventList events={p.launches.slice(0, 6)} variant="feed" emptyLabel="No product launches detected in the current window." /> : <Unavailable what="Launches" compact />}
          </Section>
          <Section eyebrow="Pricing changes" title="Public pricing pages that changed" action={{ href: routes.events({ event_type: 'PRICING' }), label: 'All' }}>
            {p.pricing ? <EventList events={p.pricing.slice(0, 6)} variant="feed" emptyLabel="No pricing changes detected in the current window." /> : <Unavailable what="Pricing changes" compact />}
          </Section>
        </div>

        {/* AI / industries / countries */}
        <div className="grid gap-8 md:grid-cols-3">
          <Section eyebrow="AI adoption" title="Observable public AI signals" action={{ href: routes.rankings('ai_active', '30d'), label: 'All' }}>
            {p.ai ? <CompanyMiniList items={p.ai} metric="ai_adoption" label="score" /> : <Unavailable what="AI adoption" compact />}
            <Note className="mt-2">Scored from public evidence only (AI listings, products, documentation, communications). Never a claim about internal use.</Note>
          </Section>
          <Section eyebrow="Industries" title="Industry atlas" action={{ href: routes.industries(), label: 'All industries' }}>
            {p.industries ? (
              <ol className="divide-y divide-rule border-y border-rule text-sm">
                {p.industries.slice(0, 10).map((i) => (
                  <li key={i.slug}>
                    <Link href={routes.industry(i.slug)} className="flex items-center gap-2 py-1.5 hover:text-accent">
                      <span className="min-w-0 flex-1 truncate">{i.name}</span>
                      <span className="tnum text-xs text-ink-3">{fmtInt(i.companies)} co.</span>
                      <span className="tnum w-14 text-right text-xs">{fmtScore(i.activity_score)}</span>
                      <span className="tnum w-12 text-right font-medium">{fmtInt(i.events_30d)}</span>
                    </Link>
                  </li>
                ))}
              </ol>
            ) : (
              <Unavailable what="Industries" compact />
            )}
            <p className="mt-1 text-right text-[10px] uppercase tracking-wider text-ink-3">activity · events 30 d</p>
          </Section>
          <Section eyebrow="Countries" title="Country atlas" action={{ href: routes.countries(), label: 'All countries' }}>
            {p.countries ? (
              <ol className="divide-y divide-rule border-y border-rule text-sm">
                {p.countries.slice(0, 10).map((c) => (
                  <li key={c.code}>
                    <Link href={routes.country(c.code)} className="flex items-center gap-2 py-1.5 hover:text-accent">
                      <CountryChip code={c.code} link={false} />
                      <span className="min-w-0 flex-1 truncate">{c.name}</span>
                      <span className={`tnum w-16 text-right text-xs ${(c.hiring_momentum_30d ?? 0) > 0 ? 'text-positive' : (c.hiring_momentum_30d ?? 0) < 0 ? 'text-danger' : 'text-ink-3'}`}>{fmtPctSigned(c.hiring_momentum_30d, 0)}</span>
                      <span className="tnum w-12 text-right font-medium">{fmtInt(c.events_30d)}</span>
                    </Link>
                  </li>
                ))}
              </ol>
            ) : (
              <Unavailable what="Countries" compact />
            )}
            <p className="mt-1 text-right text-[10px] uppercase tracking-wider text-ink-3">hiring 30 d · events 30 d</p>
          </Section>
        </div>

        {/* Trending + index */}
        <div className="grid gap-8 lg:grid-cols-12">
          <Section eyebrow="Trending signals" title="Terms and patterns gaining momentum" action={{ href: routes.events(), label: 'Events' }} className="lg:col-span-7">
            <div className="grid gap-6 md:grid-cols-2">
              <div>
                <p className="eyebrow mb-1">Trending terms (7 d)</p>
                {p.trending?.length ? (
                  <ul className="divide-y divide-rule border-y border-rule text-sm">
                    {p.trending.slice(0, 8).map((t) => (
                      <li key={t.term} className="flex items-center gap-2 py-1.5">
                        <Link href={routes.search(t.term)} className="min-w-0 flex-1 truncate hover:text-accent">
                          {t.term}
                        </Link>
                        <Sparkline values={t.series} width={56} height={16} />
                        <span className="tnum text-xs text-ink-3">{fmtInt(t.companies)} co.</span>
                        <span className={`tnum w-14 text-right text-xs font-medium ${(t.momentum ?? 0) > 0 ? 'text-positive' : 'text-ink-3'}`}>{t.momentum === null ? '—' : fmtPctSigned(t.momentum, 0)}</span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <Empty compact />
                )}
              </div>
              <div>
                <p className="eyebrow mb-1">Cross-company signals</p>
                {signals?.items.length ? (
                  <ul className="divide-y divide-rule border-y border-rule text-sm">
                    {signals.items.slice(0, 6).map((s) => (
                      <li key={s.id} className="py-1.5">
                        <div className="flex items-center gap-2">
                          <Chip tone="accent">signal</Chip>
                          <span className="min-w-0 flex-1 truncate text-ink">{s.title}</span>
                          <span className="tnum text-xs text-ink-3">{Math.round(s.confidence * 100)} %</span>
                        </div>
                        {s.scope_key && <p className="text-[11px] text-ink-3">{s.scope} · {s.scope === 'country' ? countryName(s.scope_key) : s.scope_key}</p>}
                      </li>
                    ))}
                  </ul>
                ) : (
                  <Empty compact title="No cross-company signals detected yet." />
                )}
              </div>
            </div>
          </Section>
          <Section eyebrow="Global Corporate Activity Index" title="Baseline 100 = normalised historical activity" action={{ href: routes.methodology(), label: 'Methodology' }} className="lg:col-span-5">
            {p.activity_index ? (
              <div>
                <div className="flex items-end gap-4">
                  <p className="tnum text-[44px] font-semibold leading-none tracking-tight">{p.activity_index.value === null ? '—' : p.activity_index.value.toFixed(1)}</p>
                  <div className="pb-1 text-xs text-ink-3">
                    <p className={`tnum font-medium ${(p.activity_index.delta_7d ?? 0) > 0 ? 'text-positive' : (p.activity_index.delta_7d ?? 0) < 0 ? 'text-danger' : ''}`}>{fmtPctSigned(p.activity_index.delta_7d)} 7 d</p>
                    {index && <p className={`tnum ${(index.delta_30d ?? 0) > 0 ? 'text-positive' : (index.delta_30d ?? 0) < 0 ? 'text-danger' : ''}`}>{fmtPctSigned(index.delta_30d)} 30 d</p>}
                  </div>
                </div>
                <Sparkline values={(index?.series ?? p.activity_index.series).slice(-90).map((x) => x.value)} width={420} height={72} tone="accent" baseline={100} className="mt-3 h-auto w-full" />
                <p className="mt-1 text-[11px] text-ink-3">Last 90 days · coverage-normalised · {index?.formula_version ?? 'v1'}</p>
              </div>
            ) : (
              <Unavailable what="The index" compact />
            )}
          </Section>
        </div>

        {/* Platform statistics + API CTA */}
        <Section eyebrow="Platform statistics" title="The dataset gets harder to reproduce every day">
          {stats ? (
            <StatGrid cols={6}>
              <Stat label="Dataset age" value={fmtDays(stats.dataset_age_days)} hint={stats.dataset_started_at ? `since ${fmtDate(stats.dataset_started_at)}` : undefined} size="sm" />
              <Stat label="Oldest continuous history" value={fmtDays(stats.oldest_history_days)} size="sm" />
              <Stat label="Observations today" value={fmtInt(stats.observations_today)} size="sm" />
              <Stat label="Changes today" value={fmtInt(stats.changes_today)} hint={`${fmtInt(stats.events_today)} events`} size="sm" />
              <Stat label="Countries · industries" value={`${fmtInt(stats.countries)} · ${fmtInt(stats.industries)}`} size="sm" />
              <Stat label="Archive" value={fmtBytes(stats.archive?.bytes)} hint={`${fmtInt(stats.archive?.objects)} content objects`} size="sm" />
            </StatGrid>
          ) : (
            <Unavailable what="Platform statistics" />
          )}
          <div className="mt-6 grid gap-4 border border-rule p-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-center md:p-6">
            <div>
              <p className="eyebrow">API & data</p>
              <p className="mt-1 text-lg font-semibold tracking-tight">Every event, metric and history version is available through a public JSON API.</p>
              <p className="mt-1 text-sm text-ink-2">
                Companies, events with filters, timelines, rankings, industries, countries, search, streaming (SSE) and exports (JSON, NDJSON, CSV). <span className="mono text-xs text-ink-3">{PUBLIC_API_BASE}</span>
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              <Link href={routes.api()} className="btn btn-primary">
                Read the API docs
              </Link>
              <Link href={routes.methodology()} className="btn">
                Methodology
              </Link>
            </div>
          </div>
        </Section>
      </Container>
    </>
  );
}