'use client';

/**
 * PerfBudget - section 11 of /design-system.
 *
 * Renders the same source image as AVIF / WebP / JPEG side-by-side with their
 * approximate file sizes, demonstrating the AVIF-first picture pipeline used
 * by <Image>.
 */

import { Image } from '@/components/ui/primitives/Image';
import { Pill } from '@/components/ui/primitives/Pill';
import { Grid } from '@/components/ui/layout/Grid';
import { Stack } from '@/components/ui/layout/Stack';
import { useT } from '@/lib/i18n/react';
import { ComponentEntry } from '../../components/ComponentEntry';
import { SectionShell } from '../../components/SectionShell';

interface FormatRow {
  label: string;
  approxKb: number;
  variant: 'avif' | 'webp' | 'jpeg';
}

const SAMPLE_SRC =
  'data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22600%22 height%3D%22400%22%3E%3Crect fill%3D%22%23ddd%22 width%3D%22100%25%22 height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E';

/** Approximate ratios for the same 37.5rem hero - published Cloudflare Images stats. */
const FORMAT_ROWS: FormatRow[] = [
  { label: 'AVIF', approxKb: 38, variant: 'avif' },
  { label: 'WebP', approxKb: 56, variant: 'webp' },
  { label: 'JPEG', approxKb: 92, variant: 'jpeg' },
];

function FormatBox({ row }: { row: FormatRow }) {
  const t = useT('design_system');
  return (
    <Stack gap="2" className="border-border-default rounded-md border p-3">
      <Image
        src={SAMPLE_SRC}
        alt={`Sample ${row.label}`}
        width={300}
        height={200}
        variant="card"
        className="rounded-sm"
      />
      <div className="flex items-center justify-between">
        <Pill
          tone={row.variant === 'avif' ? 'success' : row.variant === 'webp' ? 'info' : 'neutral'}
          size="sm"
        >
          {row.label}
        </Pill>
        <span className="text-text-muted font-mono text-xs">
          ≈ {row.approxKb} KB · {t('perf_size')}
        </span>
      </div>
    </Stack>
  );
}

export function PerfBudget() {
  const t = useT('design_system');
  return (
    <SectionShell id="perf" title={t('sidebar_perf')} description={t('section_intro')}>
      <ComponentEntry
        name="Image format budget"
        id="perf-image"
        path="src/components/ui/primitives/Image"
        description="The shared <Image> emits a <picture> with AVIF → WebP → JPEG sources. Below: same source, three formats, file sizes."
        tokens={['radius-md']}
        a11yNotes={[
          'alt required (throws in dev if missing)',
          'OG variant uses WebP as primary (FB/WA do not support AVIF)',
          'Above-fold uses loading=eager + fetchpriority=high',
        ]}
        importSnippet={`import { Image } from '@/components/ui/primitives/Image';`}
      >
        <Stack gap="3">
          <p className="text-text-secondary text-sm">
            Cloudflare Images delivers AVIF first; the file size shrinks to ≈40% of JPEG without
            visible quality loss.
          </p>
          <Grid cols={3} gap="3">
            {FORMAT_ROWS.map((row) => (
              <FormatBox key={row.label} row={row} />
            ))}
          </Grid>
        </Stack>
      </ComponentEntry>
    </SectionShell>
  );
}