import type { Metadata } from 'next';
import Link from 'next/link';
import { LogoMark } from '@/components/brand/logo';
import { Container, PageHeader, Section, Stat, StatGrid } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { fmtBytes, fmtDate, fmtInt } from '@/lib/format';
import { AUTHOR_NAME, CONTACT_EMAIL, HOST_NAME, HOST_URL, routes, SITE_URL } from '@/lib/site';

export const metadata: Metadata = {
  title: 'About AI Atlas',
  description: 'What AI Atlas is: a temporal knowledge graph of the AI ecosystem with field-level provenance and a permanent archive of every source document. Built by Simon-Pierre Boucher, hosted on MacLustr.',
  alternates: { canonical: '/about' },
};
export const revalidate = 600;

const PILLARS = [
  { title: 'Temporal knowledge graph', text: 'Entities (models, organizations, papers, providers, benchmarks, hardware, frameworks, datasets, licences) and their relations form one graph. Every claim carries a validity interval: the atlas can be read as of any past date, and two dates can be diffed.' },
  { title: 'Field-level provenance', text: 'Every value answers who said it (source and tier), when (observation time), where (the exact URL) and how it was extracted (deterministic parser or local LLM, with confidence). Conflicts are stored side by side and flagged — never averaged.' },
  { title: 'Permanent archive', text: 'Each source document is snapshotted and kept, content-addressed. A better parser re-reads the archive instead of re-crawling; a fact can always be traced back to the page that stated it.' },
];

export default async function AboutPage() {
  const stats = await safe(api.stats());
  return (
    <Container>
      <PageHeader eyebrow="About" title="A map of the AI ecosystem you can audit" lede="AI Atlas is the temporal knowledge graph of the AI ecosystem: models, organizations, research, providers and pricing, benchmarks, hardware, frameworks and datasets — continuously reconstructed from primary sources, with the provenance of every fact and a history that is never discarded." aside={<LogoMark size={64} />} />
      <div className="prose-atlas max-w-3xl text-[15px] leading-relaxed text-ink-2">
        <p>Think Bloomberg for AI: dense, current, sourced. Think Wikipedia: public, cross-linked, neutral. Think Crunchbase, Hugging Face and Papers With Code: organizations, models and research in one place. AI Atlas is none of these products — it is a dataset with a website and an API as its interfaces. It is not a directory: nothing here is typed in by hand, and nothing is overwritten.</p>
        <p>Public information stays public: no login is needed to read anything on this site. Everything is also available through the <Link href={routes.developers()} className="link">public API</Link> at <span className="mono text-ink">{SITE_URL.replace(/^https?:\/\//, '')}/api/v1</span>.</p>
      </div>

      <Section eyebrow="What it is" title="Three commitments" hairline>
        <ol className="grid gap-6 md:grid-cols-3">
          {PILLARS.map((p, i) => (
            <li key={p.title} className="border-t-2 border-ink pt-3">
              <p className="mono text-xs text-ink-3">0{i + 1}</p>
              <p className="mt-1 font-semibold">{p.title}</p>
              <p className="mt-1.5 text-sm leading-relaxed text-ink-2">{p.text}</p>
            </li>
          ))}
        </ol>
        <p className="mt-5 text-sm text-ink-2">
          Missing data reads “Unavailable”. The only derived numbers (hardware fit) are labelled as estimates. Counters carry their definition. Read the <Link href={routes.methodology()} className="link">methodology</Link>, browse the <Link href={routes.sources()} className="link">sources</Link>, or learn about the <Link href={routes.bot()} className="link">crawler</Link>.
        </p>
      </Section>

      {stats && (
        <Section eyebrow="Right now" title="The atlas in numbers">
          <StatGrid cols={6}>
            <Stat label="Entities" value={fmtInt(stats.entities_total)} />
            <Stat label="Claims" value={fmtInt(stats.claims)} hint={`${fmtInt(stats.claims_current)} current`} />
            <Stat label="Relations" value={fmtInt(stats.relations)} />
            <Stat label="Change events" value={fmtInt(stats.change_events)} />
            <Stat label="Snapshots archived" value={fmtInt(stats.snapshots)} hint={fmtBytes(stats.archive?.raw_bytes)} />
            <Stat label="Since" value={fmtDate(stats.first_entity_at)} />
          </StatGrid>
        </Section>
      )}

      <Section eyebrow="Who" title={`Built by ${AUTHOR_NAME}`}>
        <div className="max-w-3xl space-y-3 text-sm leading-relaxed text-ink-2">
          <p>
            AI Atlas is designed, built and operated by <span className="text-ink">{AUTHOR_NAME}</span>. Questions, corrections and source suggestions:{' '}
            <a href={`mailto:${CONTACT_EMAIL}`} className="link">
              {CONTACT_EMAIL}
            </a>
            .
          </p>
          <p>
            It is hosted on <a href={HOST_URL} className="link" rel="noopener noreferrer">{HOST_NAME}</a> (<a href={HOST_URL} className="link" rel="noopener noreferrer">{HOST_URL.replace(/^https?:\/\//, '')}</a>), a private Apple-silicon cluster in Québec that also runs the local LLM factory used for extraction — no data leaves the cluster for third-party model APIs.
          </p>
          <p className="text-xs text-ink-3">
            Built by {AUTHOR_NAME} · {CONTACT_EMAIL} · Hosted on {HOST_NAME} ({HOST_URL.replace(/^https?:\/\//, '')})
          </p>
        </div>
      </Section>
    </Container>
  );
}