import React from 'react';
import { StatePanel } from '../components/diagnostics/StatePanel.tsx';
import { Card } from '../components/ui/Card.tsx';
import { Button } from '../components/ui/Button.tsx';
import { Badge } from '../components/ui/Badge.tsx';
import { Skeleton } from '../components/ui/Skeleton.tsx';

const SystemPage: React.FC = () => {
  return (
    <div className="container mx-auto px-4 py-24">
      <h1 className="text-4xl font-display font-bold text-[var(--ink)] mb-2">Component & State Lab</h1>
      <p className="text-[var(--ink-muted)] mb-8">
        A controlled environment to verify all UI states.
      </p>

      <section className="space-y-8">
        <div>
          <h2 className="text-2xl font-display font-semibold text-[var(--ink)] mb-4">Loading States</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Skeleton className="h-32 w-full" />
            <Skeleton className="h-32 w-full" />
            <Skeleton className="h-32 w-full" />
          </div>
        </div>

        <div>
          <h2 className="text-2xl font-display font-semibold text-[var(--ink)] mb-4">Empty States</h2>
          <StatePanel type="empty" title="No components found" description="All components have passed validation." />
        </div>

        <div>
          <h2 className="text-2xl font-display font-semibold text-[var(--ink)] mb-4">Error States</h2>
          <StatePanel type="error" description="A simulated error occurred." onRetry={() => alert('Retrying...')} />
        </div>

        <div>
          <h2 className="text-2xl font-display font-semibold text-[var(--ink)] mb-4">Success States</h2>
          <StatePanel type="success" title="All Systems Operational" description="Every component passed validation." />
        </div>

        <div>
          <h2 className="text-2xl font-display font-semibold text-[var(--ink)] mb-4">Retry Panel</h2>
          <StatePanel type="retry" description="Something went wrong. You can retry." onRetry={() => alert('Retrying...')} />
        </div>

        <div>
          <h2 className="text-2xl font-display font-semibold text-[var(--ink)] mb-4">UI Primitives</h2>
          <div className="space-y-4">
            <div className="flex gap-4 flex-wrap">
              <Button variant="primary">Primary</Button>
              <Button variant="secondary">Secondary</Button>
              <Button variant="ghost">Ghost</Button>
              <Button variant="destructive">Destructive</Button>
            </div>
            <div className="flex gap-4 flex-wrap">
              <Badge variant="default">Default</Badge>
              <Badge variant="success">Success</Badge>
              <Badge variant="warning">Warning</Badge>
              <Badge variant="danger">Danger</Badge>
              <Badge variant="info">Info</Badge>
            </div>
            <Card className="p-6">
              <p className="text-[var(--ink)]">This is a card with content.</p>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
};

export default SystemPage;