'use client';

/**
 * System Pages — section 17 of /design-system.
 *
 * Live preview of all four system/error page states: 404, 500, Offline, Maintenance.
 *
 * NOTE: EmptyState's `illustration` prop is being added by Agent C. Until that
 * lands, these demos use the `icon` prop. Once `illustration` is merged, update
 * to `illustration={<Page404 />}` etc.
 */

import { EmptyState } from '@/components/ui/feedback/EmptyState';
import { Page404 } from '@/components/ui/feedback/EmptyState/illustrations/Page404';
import { Page500 } from '@/components/ui/feedback/EmptyState/illustrations/Page500';
import { Offline } from '@/components/ui/feedback/EmptyState/illustrations/Offline';
import { Maintenance } from '@/components/ui/feedback/EmptyState/illustrations/Maintenance';
import { Button } from '@/components/ui/primitives/Button';
import { ComponentEntry } from '../../components/ComponentEntry';
import { SectionShell } from '../../components/SectionShell';

export function SystemPages() {
  return (
    <SectionShell id="system-pages" title="17. System Pages">
      <ComponentEntry
        id="system-page-404"
        name="SystemPage404"
        path="src/features/system-pages/SystemPage404"
        description="Full-page 404 state. Uses Page404 illustration + EmptyState. CTA links to /."
        tokens={['--color-text-primary', '--color-text-secondary', '--color-brand-primary-600']}
        a11yNotes={['main landmark present', 'h3 heading in EmptyState', 'CTA is an anchor tag']}
        importSnippet={`import { SystemPage404 } from '@/features/system-pages/SystemPage404';`}
      >
        <div className="rounded-lg border border-neutral-200 bg-white">
          <EmptyState
            icon={<Page404 />}
            title="404 — דף לא נמצא"
            description="הדף שחיפשת לא נמצא. ייתכן שהקישור שגוי או שהדף הוסר."
            action={
              <Button asChild variant="primary" size="md">
                <a href="/">חזרה לדף הבית</a>
              </Button>
            }
          />
        </div>
      </ComponentEntry>

      <ComponentEntry
        id="system-page-500"
        name="SystemPage500"
        path="src/features/system-pages/SystemPage500"
        description="Full-page 500 server error state. Uses Page500 illustration + EmptyState. CTA links to /."
        tokens={['--color-text-primary', '--color-text-secondary', '--color-brand-primary-600']}
        a11yNotes={['main landmark present', 'h3 heading in EmptyState', 'CTA is an anchor tag']}
        importSnippet={`import { SystemPage500 } from '@/features/system-pages/SystemPage500';`}
      >
        <div className="rounded-lg border border-neutral-200 bg-white">
          <EmptyState
            icon={<Page500 />}
            title="500 — שגיאת שרת"
            description="אירעה שגיאה בשרת. נסה שוב בעוד מספר דקות."
            action={
              <Button asChild variant="primary" size="md">
                <a href="/">חזרה לדף הבית</a>
              </Button>
            }
          />
        </div>
      </ComponentEntry>

      <ComponentEntry
        id="system-page-offline"
        name="SystemPageOffline"
        path="src/features/system-pages/SystemPageOffline"
        description="Offline fallback served by PWA service worker (navigateFallback). Pre-rendered. No CTA."
        tokens={['--color-text-primary', '--color-text-secondary']}
        a11yNotes={['main landmark present', 'h3 heading in EmptyState', 'prerendered static page']}
        importSnippet={`import { SystemPageOffline } from '@/features/system-pages/SystemPageOffline';`}
      >
        <div className="rounded-lg border border-neutral-200 bg-white">
          <EmptyState
            icon={<Offline />}
            title="אין חיבור לאינטרנט"
            description="נראה שאתה לא מחובר. חזור כשתהיה מחובר לאינטרנט."
          />
        </div>
      </ComponentEntry>

      <ComponentEntry
        id="system-page-maintenance"
        name="SystemPageMaintenance"
        path="src/features/system-pages/SystemPageMaintenance"
        description="Maintenance gate activated by MAINTENANCE_MODE=true. Middleware rewrites all non-allowlisted routes. Pre-rendered. No CTA."
        tokens={['--color-text-primary', '--color-text-secondary']}
        a11yNotes={['main landmark present', 'h3 heading in EmptyState', 'prerendered static page']}
        importSnippet={`import { SystemPageMaintenance } from '@/features/system-pages/SystemPageMaintenance';`}
      >
        <div className="rounded-lg border border-neutral-200 bg-white">
          <EmptyState
            icon={<Maintenance />}
            title="אנחנו בתחזוקה קצרה"
            description="חוזרים בקרוב. תודה על הסבלנות."
          />
        </div>
      </ComponentEntry>
    </SectionShell>
  );
}