import React from 'react';
import { Button } from '../components/base/Button';
import { Card, CardHeader, CardTitle, CardBody } from '../components/base/Card';
import { Badge, Tag, Avatar, AvatarGroup } from '../components/base/Badge';

export const DesignSystemDemo = () => {
  return (
    <div className="page-veza">
      <div
        className="page-veza__content"
        style={{
          background: 'var(--veza-void)',
          minHeight: '100vh',
          padding: '2rem',
        }}
      >
        <div className="container-veza">
          {/* Header */}
          <div style={{ marginBottom: '3rem', textAlign: 'center' }}>
            <h1
              style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'var(--text-5xl)',
                background: 'var(--gradient-neon)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                marginBottom: '1rem',
              }}
            >
              VEZA Design System
            </h1>
            <p
              style={{
                fontFamily: 'var(--font-mono)',
                color: 'var(--veza-grey-300)',
                fontSize: 'var(--text-sm)',
                letterSpacing: '0.1em',
              }}
            >
              KŌDŌ × BOTANICAL × Spectre Astral
            </p>
          </div>

          {/* Buttons Section */}
          <section className="section-veza--compact">
            <h2
              style={{
                fontFamily: 'var(--font-heading)',
                fontSize: 'var(--text-2xl)',
                color: 'var(--veza-white)',
                marginBottom: '2rem',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              Buttons (9 Variants)
            </h2>
            <div className="grid-veza grid-veza--auto" style={{ gap: '1rem' }}>
              <Button variant="primary">Primary Neon</Button>
              <Button variant="secondary">Secondary</Button>
              <Button variant="gaming">Gaming XP</Button>
              <Button variant="terminal">Terminal</Button>
              <Button variant="nature">Nature</Button>
              <Button variant="graffiti">Graffiti</Button>
              <Button variant="ghost">Ghost</Button>
              <Button variant="outline">Outline</Button>
              <Button variant="destructive">Destructive</Button>
            </div>

            <div
              style={{
                marginTop: '1.5rem',
                display: 'flex',
                gap: '1rem',
                flexWrap: 'wrap',
              }}
            >
              <Button variant="primary" size="sm">
                Small
              </Button>
              <Button variant="primary" size="md">
                Medium
              </Button>
              <Button variant="primary" size="lg">
                Large
              </Button>
              <Button variant="primary" size="xl">
                Extra Large
              </Button>
            </div>
          </section>

          {/* Cards Section */}
          <section className="section-veza--compact">
            <h2
              style={{
                fontFamily: 'var(--font-heading)',
                fontSize: 'var(--text-2xl)',
                color: 'var(--veza-white)',
                marginBottom: '2rem',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              Cards (6 Variants)
            </h2>
            <div className="grid-veza grid-veza--3">
              <Card variant="default" interactive>
                <CardHeader>
                  <CardTitle>Default Card</CardTitle>
                </CardHeader>
                <CardBody>
                  <p style={{ color: 'var(--veza-grey-200)' }}>
                    Dark cyber style with cyan glow on hover
                  </p>
                </CardBody>
              </Card>

              <Card variant="manga" interactive>
                <CardHeader>
                  <CardTitle>Manga Card</CardTitle>
                </CardHeader>
                <CardBody>
                  <p style={{ color: 'var(--veza-grey-200)' }}>
                    Speed lines with clip-path cuts
                  </p>
                </CardBody>
              </Card>

              <Card variant="neon" interactive>
                <CardHeader>
                  <CardTitle>Neon Card</CardTitle>
                </CardHeader>
                <CardBody>
                  <p style={{ color: 'var(--veza-grey-200)' }}>
                    Glowing borders with gradients
                  </p>
                </CardBody>
              </Card>

              <Card variant="nature" interactive>
                <CardHeader>
                  <CardTitle>Nature Card</CardTitle>
                </CardHeader>
                <CardBody>
                  <p style={{ color: 'var(--veza-text-muted)' }}>
                    Organic botanical style
                  </p>
                </CardBody>
              </Card>

              <Card variant="elevated" interactive>
                <CardHeader>
                  <CardTitle>Elevated Card</CardTitle>
                </CardHeader>
                <CardBody>
                  <p style={{ color: 'var(--veza-text-muted)' }}>
                    Floating with shadows
                  </p>
                </CardBody>
              </Card>

              <Card variant="glass" interactive>
                <CardHeader>
                  <CardTitle>Glass Card</CardTitle>
                </CardHeader>
                <CardBody>
                  <p style={{ color: 'var(--veza-text-muted)' }}>
                    Glassmorphism effect
                  </p>
                </CardBody>
              </Card>
            </div>
          </section>

          {/* Badges & Tags */}
          <section className="section-veza--compact">
            <h2
              style={{
                fontFamily: 'var(--font-heading)',
                fontSize: 'var(--text-2xl)',
                color: 'var(--veza-white)',
                marginBottom: '2rem',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              Badges & Tags
            </h2>
            <div
              style={{
                display: 'flex',
                gap: '1rem',
                flexWrap: 'wrap',
                marginBottom: '1.5rem',
              }}
            >
              <Badge variant="default">Default</Badge>
              <Badge variant="cyber" dot pulse>
                Cyber Live
              </Badge>
              <Badge variant="neon">Neon</Badge>
              <Badge variant="nature">Nature</Badge>
              <Badge variant="gaming">Gaming</Badge>
              <Badge variant="success">Success</Badge>
              <Badge variant="warning">Warning</Badge>
              <Badge variant="error">Error</Badge>
            </div>
            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
              <Tag variant="default">Default Tag</Tag>
              <Tag variant="cyber">Cyber Tag</Tag>
              <Tag variant="neon">Neon Tag</Tag>
              <Tag active>Active Tag</Tag>
            </div>
          </section>

          {/* Avatars */}
          <section className="section-veza--compact">
            <h2
              style={{
                fontFamily: 'var(--font-heading)',
                fontSize: 'var(--text-2xl)',
                color: 'var(--veza-white)',
                marginBottom: '2rem',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              Avatars
            </h2>
            <div
              style={{
                display: 'flex',
                gap: '2rem',
                flexWrap: 'wrap',
                alignItems: 'center',
              }}
            >
              <Avatar size="xs">XS</Avatar>
              <Avatar size="sm" status="online">
                SM
              </Avatar>
              <Avatar size="md" variant="cyber" status="away">
                MD
              </Avatar>
              <Avatar size="lg" variant="neon" status="busy">
                LG
              </Avatar>
              <Avatar size="xl" variant="gaming" status="online">
                XL
              </Avatar>
              <Avatar size="2xl">2XL</Avatar>
            </div>
            <div style={{ marginTop: '2rem' }}>
              <h3
                style={{ color: 'var(--veza-grey-200)', marginBottom: '1rem' }}
              >
                Avatar Group
              </h3>
              <AvatarGroup>
                <Avatar size="md">JD</Avatar>
                <Avatar size="md" variant="cyber">
                  AB
                </Avatar>
                <Avatar size="md" variant="neon">
                  CD
                </Avatar>
                <Avatar size="md" variant="gaming">
                  EF
                </Avatar>
              </AvatarGroup>
            </div>
          </section>

          {/* Typography */}
          <section className="section-veza--compact">
            <h2
              style={{
                fontFamily: 'var(--font-heading)',
                fontSize: 'var(--text-2xl)',
                color: 'var(--veza-white)',
                marginBottom: '2rem',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              Typography & Gradients
            </h2>
            <div
              style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
            >
              <h1
                className="text-gradient-neon"
                style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 'var(--text-4xl)',
                  fontWeight: 900,
                }}
              >
                Neon Gradient Text
              </h1>
              <h2
                className="text-gradient-cyber"
                style={{
                  fontFamily: 'var(--font-heading)',
                  fontSize: 'var(--text-3xl)',
                  fontWeight: 700,
                }}
              >
                Cyber Gradient Text
              </h2>
              <h3
                className="text-gradient-nature"
                style={{
                  fontFamily: 'var(--font-serif)',
                  fontSize: 'var(--text-2xl)',
                  fontWeight: 600,
                }}
              >
                Nature Gradient Text
              </h3>
              <p
                style={{
                  fontFamily: 'var(--font-mono)',
                  fontSize: 'var(--text-base)',
                  color: 'var(--veza-terminal-green)',
                  textShadow: 'var(--glow-terminal)',
                }}
              >
                $ Terminal monospace text with glow
              </p>
            </div>
          </section>

          {/* Effects Demo */}
          <section className="section-veza--compact">
            <h2
              style={{
                fontFamily: 'var(--font-heading)',
                fontSize: 'var(--text-2xl)',
                color: 'var(--veza-white)',
                marginBottom: '2rem',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              Special Effects
            </h2>
            <div className="grid-veza grid-veza--3">
              <div
                className="glow-cyan"
                style={{
                  padding: '2rem',
                  background: 'var(--veza-graphite)',
                  borderRadius: 'var(--radius-lg)',
                  textAlign: 'center',
                  color: 'var(--veza-cyan)',
                }}
              >
                Cyan Glow
              </div>
              <div
                className="glow-magenta"
                style={{
                  padding: '2rem',
                  background: 'var(--veza-graphite)',
                  borderRadius: 'var(--radius-lg)',
                  textAlign: 'center',
                  color: 'var(--veza-magenta)',
                }}
              >
                Magenta Glow
              </div>
              <div
                className="glow-lime"
                style={{
                  padding: '2rem',
                  background: 'var(--veza-graphite)',
                  borderRadius: 'var(--radius-lg)',
                  textAlign: 'center',
                  color: 'var(--veza-lime)',
                }}
              >
                Lime Glow
              </div>
            </div>
          </section>

          {/* Animations */}
          <section className="section-veza--compact">
            <h2
              style={{
                fontFamily: 'var(--font-heading)',
                fontSize: 'var(--text-2xl)',
                color: 'var(--veza-white)',
                marginBottom: '2rem',
                textTransform: 'uppercase',
                letterSpacing: '0.1em',
              }}
            >
              Animations
            </h2>
            <div
              style={{
                display: 'flex',
                gap: '2rem',
                flexWrap: 'wrap',
                alignItems: 'center',
              }}
            >
              <div
                className="animate-gentle-pulse"
                style={{
                  width: '80px',
                  height: '80px',
                  background: 'var(--gradient-neon)',
                  borderRadius: 'var(--radius-full)',
                }}
              />
              <div
                className="animate-logo-spin clip-hex"
                style={{
                  width: '80px',
                  height: '80px',
                  background: 'var(--gradient-cyber)',
                }}
              />
              <Button
                variant="graffiti"
                onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) =>
                  e.currentTarget.classList.add('animate-graffiti-shake')
                }
              >
                Hover Me!
              </Button>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
};
