import { Container, Section, Stack } from '@/components/layout/LayoutPrimitives';
import { Comparison } from '@/components/marketing/Comparison';
import { CTA } from '@/components/marketing/CTA';
import { Metric } from '@/components/marketing/Evidence';
import { ProductPreview } from '@/components/marketing/ProductPreview';
import { SectionHeader } from '@/components/marketing/SectionHeader';
import { Workflow } from '@/components/marketing/Workflow';
import { getComponentLabCopy } from '@/content/development/component-lab';
import { isLocale, isMode, type Locale } from '@/lib/localization/config';
import { notFound } from 'next/navigation';
import { ComponentLabInteractive } from './ComponentLabInteractive';
import styles from './page.module.css';

export const metadata = { robots: { index: false, follow: false } };

export default async function ComponentLabPage({
  params,
}: {
  params: Promise<{ locale: string; mode: string }>;
}) {
  if (process.env.COMPONENT_FIXTURES_ENABLED !== 'true') notFound();
  const { locale, mode } = await params;
  if (!isLocale(locale)) notFound();
  if (!isMode(mode)) notFound();
  const resolvedLocale: Locale = locale;
  const copy = getComponentLabCopy(resolvedLocale);
  return (
    <main id="main-content" className={styles.main}>
      <Section>
        <Container>
          <Stack gap="large">
            <SectionHeader
              eyebrow={copy.developmentLabel}
              title={copy.title}
              body={copy.body}
              headingLevel={1}
            />
            <ComponentLabInteractive copy={copy} />
            <Workflow label={copy.title} items={copy.workflow} />
            <Comparison
              columns={[
                {
                  title: copy.comparison.beforeTitle,
                  items: copy.comparison.before,
                  tone: 'problem',
                },
                {
                  title: copy.comparison.afterTitle,
                  items: copy.comparison.after,
                  tone: 'solution',
                },
              ]}
            />
            <ProductPreview
              title={copy.preview.title}
              caption={copy.preview.caption}
              illustrativeLabel={copy.preview.illustrative}
              rows={copy.preview.rows.map((row, index) => ({
                ...row,
                statusTone: index === 0 ? 'success' : 'warning',
              }))}
            />
            <Metric
              content={{
                value: copy.metric.value,
                label: copy.metric.label,
                qualification: copy.metric.qualification,
                status: 'research-only',
              }}
              statusLabel={copy.metric.status}
            />
            <CTA
              title={copy.cta.title}
              body={copy.cta.body}
              primary={{ label: copy.cta.primary, disabledReason: copy.cta.unavailable }}
            />
          </Stack>
        </Container>
      </Section>
    </main>
  );
}
