import type { Metadata } from 'next';
import Link from 'next/link';
import { EventTypeBadge } from '@/components/ui/badges';
import { Container, PageHeader, Unavailable } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtInt, fmtPctSigned, fmtScore, num } from '@/lib/format';
import { routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Industry atlas', description: 'A living index per industry: monitored companies, events, hiring momentum, activity and AI adoption.' };
export const revalidate = 300;

export default async function IndustriesPage() {
  const data = await safe(api.industries());
  return (
    <Container wide>
      <PageHeader eyebrow="Industry atlas" title="Industries" lede="Each industry is a living index over its monitored companies: activity, structured events, hiring momentum and observable AI adoption. Values are averages over the monitored population, not market statistics." />
      {!data ? (
        <Unavailable what="Industries" />
      ) : (
        <>
          <div className="table-scroll hidden md:block">
            <table className="data-table">
              <thead>
                <tr>
                  <th>Industry</th>
                  <th className="num">Companies</th>
                  <th className="num">Events 7 d</th>
                  <th className="num">Events 30 d</th>
                  <th className="num">Activity</th>
                  <th className="num">Hiring 30 d</th>
                  <th className="num">AI adoption</th>
                  <th>Top event types</th>
                </tr>
              </thead>
              <tbody>
                {data.items.map((i) => {
                  const h = num(i.hiring_momentum_30d);
                  return (
                    <tr key={i.slug}>
                      <td className="primary">
                        <Link href={routes.industry(i.slug)} className="row-link">
                          {i.name}
                        </Link>
                        {i.parent_slug && <span className="block text-[11px] font-normal text-ink-3">in {i.parent_slug.replace(/-/g, ' ')}</span>}
                      </td>
                      <td className="num tnum">{fmtInt(i.companies)}</td>
                      <td className="num tnum">{fmtInt(i.events_7d)}</td>
                      <td className="num tnum">{fmtInt(i.events_30d)}</td>
                      <td className="num tnum">{fmtScore(i.activity_score)}</td>
                      <td className={cn('num tnum', h !== null && (h > 0 ? 'text-positive' : h < 0 ? 'text-danger' : ''))}>{h === null ? '—' : fmtPctSigned(h)}</td>
                      <td className="num tnum">{fmtScore(i.ai_adoption)}</td>
                      <td>
                        <span className="flex flex-wrap gap-1">
                          {i.top_event_types.slice(0, 3).map((t) => (
                            <EventTypeBadge key={t} type={t} small />
                          ))}
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <ul className="divide-y divide-rule border-y border-rule md:hidden">
            {data.items.map((i) => (
              <li key={i.slug}>
                <Link href={routes.industry(i.slug)} className="block py-3">
                  <p className="text-[15px] font-medium text-ink">{i.name}</p>
                  <p className="tnum mt-0.5 text-xs text-ink-3">
                    {fmtInt(i.companies)} companies · {fmtInt(i.events_30d)} events 30 d · activity {fmtScore(i.activity_score)} · hiring {fmtPctSigned(i.hiring_momentum_30d, 0)}
                  </p>
                  <p className="mt-1 flex flex-wrap gap-1">
                    {i.top_event_types.slice(0, 3).map((t) => (
                      <EventTypeBadge key={t} type={t} small />
                    ))}
                  </p>
                </Link>
              </li>
            ))}
          </ul>
        </>
      )}
    </Container>
  );
}