import type { Metadata } from 'next';
import { Suspense } from 'react';
import { EventFilters } from '@/components/events/event-filters';
import { LiveFeed } from '@/components/live/live-feed';
import { Container, PageHeader, Unavailable } from '@/components/ui/section';
import { api, liveItems, safe } from '@/lib/api';
import { str, type SP } from '@/lib/params';

export const metadata: Metadata = { title: 'Live feed', description: 'Structured corporate events as they are detected across monitored public surfaces — products, pricing, hiring, leadership, locations and more.' };
export const dynamic = 'force-dynamic';

export default async function LivePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const q = { limit: 80, event_type: str(sp.event_type), min_importance: str(sp.min_importance), country: str(sp.country), industry: str(sp.industry), min_confidence: str(sp.min_confidence) };
  const [live, countries, industries] = await Promise.all([safe(api.live(q)), safe(api.countries()), safe(api.industries())]);
  const initial = liveItems(live);
  return (
    <Container>
      <PageHeader
        eyebrow={
          <>
            <span className="dot pulse" aria-hidden /> Live
          </>
        }
        title="Global live feed"
        lede="Every card is a structured event detected on a monitored public page, with its source, confidence label and evidence. The stream updates in place; hover or pause to read."
      />
      <Suspense>
        <EventFilters showSort={false} countries={(countries?.items ?? []).map((c) => ({ value: c.code, label: c.name }))} industries={(industries?.items ?? []).map((i) => ({ value: i.slug, label: i.name }))} className="mb-4" />
        {live ? <LiveFeed initial={initial} limit={80} /> : <Unavailable what="The live feed" />}
      </Suspense>
    </Container>
  );
}