'use client'

import * as React from 'react'
import { ThemeToggle } from '@/components/theme-toggle'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
import { Avatar, AvatarImage, AvatarFallback, AvatarGroup } from '@/components/ui/avatar'
import { Progress, CircularProgress, LoaderBar } from '@/components/ui/progress'
import { AudioPlayer, Equalizer } from '@/components/ui/audio-player'
import { Chat, Message, Presence } from '@/components/ui/chat'
import { StatCard, StatsGrid, XPBar, LeaderboardEntry } from '@/components/ui/stat-card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Switch } from '@/components/ui/switch'
import { Slider } from '@/components/ui/slider'
import { Label } from '@/components/ui/label'

// Section wrapper component
function Section({ 
  title, 
  description, 
  children 
}: { 
  title: string
  description?: string
  children: React.ReactNode 
}) {
  return (
    <section className="py-12 border-b border-border last:border-b-0">
      <div className="mb-8">
        <p className="text-xs font-mono uppercase tracking-widest text-primary mb-2">
          Component
        </p>
        <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
        {description && (
          <p className="text-muted-foreground mt-1">{description}</p>
        )}
      </div>
      {children}
    </section>
  )
}

// Preview box
function PreviewBox({ 
  label, 
  children,
  className = ''
}: { 
  label?: string
  children: React.ReactNode
  className?: string
}) {
  return (
    <div className={`bg-muted/30 border border-border rounded-xl p-6 ${className}`}>
      {label && (
        <p className="text-[10px] font-mono uppercase tracking-widest text-muted-foreground mb-4">
          {label}
        </p>
      )}
      {children}
    </div>
  )
}

export default function DesignSystemPage() {
  const [demoMessages] = React.useState([
    {
      content: 'Hey! Check out this new beat I just finished.',
      sender: { name: 'Alex Chen', initials: 'AC' },
      timestamp: '10:32 AM',
      isOwn: false,
    },
    {
      content: 'This is fire! The 808s hit different.',
      sender: { name: 'You', initials: 'ME' },
      timestamp: '10:33 AM',
      isOwn: true,
      status: 'read' as const,
    },
    {
      content: 'Thanks! I spent 3 hours on the mix. Want the stems?',
      sender: { name: 'Alex Chen', initials: 'AC' },
      timestamp: '10:34 AM',
      isOwn: false,
      reactions: [{ emoji: '🔥', count: 2 }],
    },
  ])

  return (
    <div className="min-h-screen bg-background">
      {/* Background gradients */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-secondary/5 rounded-full blur-3xl" />
      </div>

      {/* Header */}
      <header className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-xl">
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="size-9 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center relative">
              <div className="size-6 rounded-full bg-background flex items-center justify-center">
                <span className="text-xs font-bold text-gradient-cyber">V</span>
              </div>
            </div>
            <div>
              <span className="font-bold tracking-wide">
                <span className="text-primary">VEZA</span>
                <span className="text-muted-foreground mx-1">/</span>
                <span className="text-secondary">TALAS</span>
              </span>
              <p className="text-[10px] font-mono text-muted-foreground uppercase tracking-widest">
                Design System v2.0
              </p>
            </div>
          </div>

          <nav className="hidden md:flex items-center gap-6">
            {['Foundation', 'Components', 'Patterns'].map((item) => (
              <a
                key={item}
                href={`#${item.toLowerCase()}`}
                className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
              >
                {item}
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-3">
            <ThemeToggle />
            <Button size="sm">Get Started</Button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <div className="relative py-20 border-b border-border">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <Badge variant="premium" className="mb-4">Neon Ronin Aesthetic</Badge>
          <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-4">
            <span className="text-gradient-cyber">Design System</span>
          </h1>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
            A professional, modern, and elegant design system built for the VEZA music platform. 
            Production-ready components for your legacy frontend refactor.
          </p>
          <div className="flex items-center justify-center gap-4">
            <Button size="lg">
              View Components
            </Button>
            <Button size="lg" variant="outline">
              Documentation
            </Button>
          </div>
        </div>
      </div>

      {/* Main content */}
      <main className="max-w-7xl mx-auto px-6 relative">
        {/* Color Palette */}
        <Section title="Color Palette" description="The VEZA color system featuring neon accents and void neutrals.">
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
            {[
              { name: 'Primary (Cyan)', var: 'bg-primary', text: 'text-primary-foreground' },
              { name: 'Secondary (Magenta)', var: 'bg-secondary', text: 'text-secondary-foreground' },
              { name: 'Success (Lime)', var: 'bg-success', text: 'text-success-foreground' },
              { name: 'Warning', var: 'bg-warning', text: 'text-warning-foreground' },
              { name: 'Destructive', var: 'bg-destructive', text: 'text-destructive-foreground' },
              { name: 'Info', var: 'bg-info', text: 'text-info-foreground' },
            ].map((color) => (
              <div key={color.name} className="text-center">
                <div className={`h-20 rounded-lg ${color.var} mb-2 flex items-center justify-center ${color.text} text-xs font-mono`}>
                  Aa
                </div>
                <p className="text-xs font-medium">{color.name}</p>
              </div>
            ))}
          </div>

          <PreviewBox label="Void Neutrals">
            <div className="flex gap-1">
              {['bg-background', 'bg-card', 'bg-muted', 'bg-accent', 'bg-border'].map((bg, i) => (
                <div key={i} className={`flex-1 h-12 rounded ${bg} ${i === 4 ? '' : ''}`} />
              ))}
            </div>
          </PreviewBox>
        </Section>

        {/* Typography */}
        <Section title="Typography" description="Space Grotesk for headings, JetBrains Mono for code and data.">
          <PreviewBox>
            <div className="space-y-4">
              <h1 className="text-4xl font-bold">Heading 1 - Space Grotesk Bold</h1>
              <h2 className="text-3xl font-semibold">Heading 2 - Space Grotesk Semibold</h2>
              <h3 className="text-2xl font-medium">Heading 3 - Space Grotesk Medium</h3>
              <p className="text-base">Body text - Clean and readable for long-form content.</p>
              <p className="font-mono text-sm text-muted-foreground">
                <code>font-mono</code> - JetBrains Mono for code and technical data
              </p>
              <p className="text-gradient-cyber text-2xl font-bold">Gradient Text Effect</p>
            </div>
          </PreviewBox>
        </Section>

        {/* Buttons */}
        <Section title="Buttons" description="Multiple variants including neon glow effects and gaming styles.">
          <div className="space-y-6">
            <PreviewBox label="Primary Variants">
              <div className="flex flex-wrap gap-3">
                <Button>Primary</Button>
                <Button variant="secondary">Secondary</Button>
                <Button variant="success">Success</Button>
                <Button variant="destructive">Destructive</Button>
                <Button variant="outline">Outline</Button>
                <Button variant="ghost">Ghost</Button>
                <Button variant="link">Link</Button>
              </div>
            </PreviewBox>

            <PreviewBox label="Special Variants">
              <div className="flex flex-wrap gap-3">
                <Button variant="gaming">XP Boost</Button>
                <Button variant="nature">Organic</Button>
                <Button variant="hacker">./execute</Button>
              </div>
            </PreviewBox>

            <PreviewBox label="Sizes">
              <div className="flex flex-wrap items-center gap-3">
                <Button size="sm">Small</Button>
                <Button size="default">Default</Button>
                <Button size="lg">Large</Button>
                <Button size="xl">Extra Large</Button>
              </div>
            </PreviewBox>

            <PreviewBox label="Shapes">
              <div className="flex flex-wrap gap-3">
                <Button shape="default">Default</Button>
                <Button shape="pill">Pill Shape</Button>
                <Button shape="manga">Manga Cut</Button>
              </div>
            </PreviewBox>

            <PreviewBox label="States">
              <div className="flex flex-wrap gap-3">
                <Button loading>Loading</Button>
                <Button disabled>Disabled</Button>
                <Button size="icon">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                  </svg>
                </Button>
              </div>
            </PreviewBox>
          </div>
        </Section>

        {/* Badges */}
        <Section title="Badges" description="Status indicators and labels with semantic colors.">
          <PreviewBox>
            <div className="flex flex-wrap gap-3">
              <Badge>Default</Badge>
              <Badge variant="secondary">Secondary</Badge>
              <Badge variant="success">Success</Badge>
              <Badge variant="warning">Warning</Badge>
              <Badge variant="destructive">Destructive</Badge>
              <Badge variant="info">Info</Badge>
              <Badge variant="outline">Outline</Badge>
              <Badge variant="muted">Muted</Badge>
              <Badge variant="gaming">XP +500</Badge>
              <Badge variant="nature">Organic</Badge>
              <Badge variant="live" dot pulse>LIVE</Badge>
              <Badge variant="premium">Premium</Badge>
            </div>
          </PreviewBox>
        </Section>

        {/* Inputs */}
        <Section title="Inputs" description="Form inputs with multiple variants and icon support.">
          <div className="grid md:grid-cols-2 gap-6">
            <PreviewBox label="Variants">
              <div className="space-y-4">
                <div>
                  <Label className="mb-2 block">Default</Label>
                  <Input placeholder="Enter your email..." />
                </div>
                <div>
                  <Label className="mb-2 block">Filled</Label>
                  <Input variant="filled" placeholder="Filled variant..." />
                </div>
                <div>
                  <Label className="mb-2 block">Ghost</Label>
                  <Input variant="ghost" placeholder="Ghost variant..." />
                </div>
                <div>
                  <Label className="mb-2 block">Terminal</Label>
                  <Input variant="terminal" placeholder="> sudo make music" />
                </div>
              </div>
            </PreviewBox>

            <PreviewBox label="States & Sizes">
              <div className="space-y-4">
                <div>
                  <Label className="mb-2 block">With Icon</Label>
                  <Input 
                    placeholder="Search tracks..." 
                    startIcon={
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <circle cx="11" cy="11" r="8" />
                        <path d="m21 21-4.35-4.35" />
                      </svg>
                    }
                  />
                </div>
                <div>
                  <Label className="mb-2 block">Error State</Label>
                  <Input variant="error" placeholder="Invalid input..." />
                </div>
                <div>
                  <Label className="mb-2 block">Success State</Label>
                  <Input variant="success" placeholder="Validated!" />
                </div>
                <div>
                  <Label className="mb-2 block">Small Size</Label>
                  <Input inputSize="sm" placeholder="Small input..." />
                </div>
              </div>
            </PreviewBox>
          </div>
        </Section>

        {/* Cards */}
        <Section title="Cards" description="Flexible card components with glow effects and variants.">
          <div className="grid md:grid-cols-3 gap-6">
            <Card variant="default">
              <CardHeader>
                <CardTitle>Default Card</CardTitle>
                <CardDescription>Standard card with subtle shadow</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Basic card component for general content display.
                </p>
              </CardContent>
              <CardFooter>
                <Button size="sm" variant="outline">Learn More</Button>
              </CardFooter>
            </Card>

            <Card variant="glow">
              <CardHeader>
                <CardTitle>Glow Card</CardTitle>
                <CardDescription>Hover for cyan neon glow</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Interactive card with primary color glow on hover.
                </p>
              </CardContent>
              <CardFooter>
                <Button size="sm">Action</Button>
              </CardFooter>
            </Card>

            <Card variant="glowMagenta">
              <CardHeader>
                <CardTitle>Magenta Glow</CardTitle>
                <CardDescription>Hover for magenta neon glow</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Secondary color glow effect for featured content.
                </p>
              </CardContent>
              <CardFooter>
                <Button size="sm" variant="secondary">Featured</Button>
              </CardFooter>
            </Card>
          </div>
        </Section>

        {/* Avatars */}
        <Section title="Avatars" description="User avatars with status indicators, rings, and grouping.">
          <div className="space-y-6">
            <PreviewBox label="Sizes">
              <div className="flex items-end gap-4">
                <Avatar size="xs"><AvatarFallback>XS</AvatarFallback></Avatar>
                <Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
                <Avatar size="default"><AvatarFallback>MD</AvatarFallback></Avatar>
                <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
                <Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>
                <Avatar size="2xl"><AvatarFallback>2X</AvatarFallback></Avatar>
              </div>
            </PreviewBox>

            <PreviewBox label="Status Indicators">
              <div className="flex items-center gap-4">
                <Avatar status="online"><AvatarFallback>ON</AvatarFallback></Avatar>
                <Avatar status="away"><AvatarFallback>AW</AvatarFallback></Avatar>
                <Avatar status="busy"><AvatarFallback>BS</AvatarFallback></Avatar>
                <Avatar status="offline"><AvatarFallback>OF</AvatarFallback></Avatar>
              </div>
            </PreviewBox>

            <PreviewBox label="Ring Styles">
              <div className="flex items-center gap-4">
                <Avatar ring="default"><AvatarFallback>DF</AvatarFallback></Avatar>
                <Avatar ring="primary"><AvatarFallback>PR</AvatarFallback></Avatar>
                <Avatar ring="gradient"><AvatarFallback>GR</AvatarFallback></Avatar>
                <Avatar ring="story"><AvatarFallback>ST</AvatarFallback></Avatar>
                <Avatar ring="live"><AvatarFallback>LV</AvatarFallback></Avatar>
              </div>
            </PreviewBox>

            <PreviewBox label="Avatar Group">
              <AvatarGroup max={4}>
                <Avatar><AvatarFallback>A</AvatarFallback></Avatar>
                <Avatar><AvatarFallback>B</AvatarFallback></Avatar>
                <Avatar><AvatarFallback>C</AvatarFallback></Avatar>
                <Avatar><AvatarFallback>D</AvatarFallback></Avatar>
                <Avatar><AvatarFallback>E</AvatarFallback></Avatar>
                <Avatar><AvatarFallback>F</AvatarFallback></Avatar>
              </AvatarGroup>
            </PreviewBox>
          </div>
        </Section>

        {/* Progress */}
        <Section title="Progress Indicators" description="Linear and circular progress with animations.">
          <div className="grid md:grid-cols-2 gap-6">
            <PreviewBox label="Linear Progress">
              <div className="space-y-6">
                <Progress value={33} label="Default" showValue />
                <Progress value={66} variant="gradient" label="Gradient" showValue animated />
                <Progress value={100} variant="success" label="Success" showValue />
                <Progress value={25} variant="warning" label="Warning" showValue />
                <Progress value={50} variant="danger" label="Danger" showValue />
              </div>
            </PreviewBox>

            <PreviewBox label="Circular Progress & Loaders">
              <div className="flex items-center gap-8">
                <div className="text-center">
                  <CircularProgress value={75} showValue />
                  <p className="text-xs text-muted-foreground mt-2">Default</p>
                </div>
                <div className="text-center">
                  <CircularProgress value={60} variant="gradient" showValue />
                  <p className="text-xs text-muted-foreground mt-2">Gradient</p>
                </div>
                <div className="text-center space-y-3">
                  <Equalizer playing className="mx-auto" />
                  <p className="text-xs text-muted-foreground">Equalizer</p>
                </div>
              </div>
              <div className="mt-6">
                <p className="text-xs text-muted-foreground mb-2">Indeterminate Loader</p>
                <LoaderBar />
              </div>
            </PreviewBox>
          </div>
        </Section>

        {/* Audio Player */}
        <Section title="Audio Player" description="Full-featured audio player with waveform visualization.">
          <div className="space-y-6">
            <AudioPlayer 
              title="Midnight Pulse" 
              artist="Neon Collective"
              variant="default"
            />

            <div className="grid md:grid-cols-2 gap-6">
              <AudioPlayer 
                title="Digital Dreams"
                artist="Cyber Ronin"
                variant="compact"
              />
              <AudioPlayer 
                title="Lo-Fi Vibes"
                artist="Chill Beats"
                variant="mini"
              />
            </div>
          </div>
        </Section>

        {/* Chat */}
        <Section title="Chat Components" description="Real-time messaging UI with presence indicators.">
          <div className="grid md:grid-cols-2 gap-6">
            <Chat
              title="Studio Chat"
              subtitle="3 members online"
              messages={demoMessages}
              showTyping
            />

            <PreviewBox label="Presence & Status">
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <Presence status="online" label />
                  <span className="text-sm">Available</span>
                </div>
                <div className="flex items-center gap-3">
                  <Presence status="away" label />
                  <span className="text-sm">Be right back</span>
                </div>
                <div className="flex items-center gap-3">
                  <Presence status="busy" label />
                  <span className="text-sm">In a session</span>
                </div>
                <div className="flex items-center gap-3">
                  <Presence status="offline" label />
                  <span className="text-sm">Last seen 2h ago</span>
                </div>
              </div>
            </PreviewBox>
          </div>
        </Section>

        {/* Stats & Gaming */}
        <Section title="Stats & Gamification" description="Dashboard stats, XP bars, and leaderboards.">
          <div className="space-y-6">
            <StatsGrid columns={4}>
              <StatCard
                label="Total Plays"
                value="124,892"
                change={12.5}
                trend="up"
                changeLabel="vs last month"
                sparkline={[30, 45, 35, 50, 49, 60, 70, 91, 81, 95]}
                icon={
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                }
              />
              <StatCard
                label="Followers"
                value="8,421"
                change={8.2}
                trend="up"
                changeLabel="this week"
                variant="glow"
              />
              <StatCard
                label="Revenue"
                value="$12,450"
                change={-3.1}
                trend="down"
                changeLabel="vs last month"
                sparkline={[80, 75, 70, 65, 60, 55, 50, 52, 48, 45]}
              />
              <StatCard
                label="Tracks"
                value="48"
                change={4}
                trend="up"
                changeLabel="new this month"
              />
            </StatsGrid>

            <div className="grid md:grid-cols-2 gap-6">
              <PreviewBox label="XP Progress">
                <XPBar level={42} currentXP={7850} maxXP={10000} />
              </PreviewBox>

              <PreviewBox label="Leaderboard">
                <div className="space-y-2">
                  <LeaderboardEntry rank={1} name="CyberBeat" initials="CB" score="124,500" />
                  <LeaderboardEntry rank={2} name="NeonPulse" initials="NP" score="98,200" highlight />
                  <LeaderboardEntry rank={3} name="VoidWalker" initials="VW" score="87,100" />
                  <LeaderboardEntry rank={4} name="SynthMaster" initials="SM" score="65,400" />
                </div>
              </PreviewBox>
            </div>
          </div>
        </Section>

        {/* Form Controls */}
        <Section title="Form Controls" description="Switches, sliders, and other interactive elements.">
          <PreviewBox>
            <div className="grid md:grid-cols-2 gap-8">
              <div className="space-y-6">
                <div className="flex items-center justify-between">
                  <Label>Enable notifications</Label>
                  <Switch />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Dark mode</Label>
                  <Switch defaultChecked />
                </div>
                <div className="flex items-center justify-between">
                  <Label>Auto-play next</Label>
                  <Switch />
                </div>
              </div>

              <div className="space-y-6">
                <div>
                  <Label className="mb-3 block">Volume</Label>
                  <Slider defaultValue={[75]} max={100} step={1} />
                </div>
                <div>
                  <Label className="mb-3 block">Crossfade (seconds)</Label>
                  <Slider defaultValue={[3]} max={12} step={1} />
                </div>
              </div>
            </div>
          </PreviewBox>
        </Section>

        {/* Tabs */}
        <Section title="Tabs" description="Tab navigation for organizing content.">
          <PreviewBox>
            <Tabs defaultValue="tracks">
              <TabsList>
                <TabsTrigger value="tracks">Tracks</TabsTrigger>
                <TabsTrigger value="albums">Albums</TabsTrigger>
                <TabsTrigger value="playlists">Playlists</TabsTrigger>
                <TabsTrigger value="artists">Artists</TabsTrigger>
              </TabsList>
              <TabsContent value="tracks" className="mt-4">
                <p className="text-muted-foreground">
                  Your uploaded tracks will appear here. Start creating to see your music library grow.
                </p>
              </TabsContent>
              <TabsContent value="albums" className="mt-4">
                <p className="text-muted-foreground">
                  Organize your tracks into albums for better discoverability.
                </p>
              </TabsContent>
              <TabsContent value="playlists" className="mt-4">
                <p className="text-muted-foreground">
                  Create and manage playlists to curate your favorite sounds.
                </p>
              </TabsContent>
              <TabsContent value="artists" className="mt-4">
                <p className="text-muted-foreground">
                  Artists you collaborate with will show up here.
                </p>
              </TabsContent>
            </Tabs>
          </PreviewBox>
        </Section>
      </main>

      {/* Footer */}
      <footer className="border-t border-border mt-20">
        <div className="max-w-7xl mx-auto px-6 py-12">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-2">
              <span className="font-bold">
                <span className="text-primary">VEZA</span>
                <span className="text-muted-foreground mx-1">/</span>
                <span className="text-secondary">TALAS</span>
              </span>
              <span className="text-muted-foreground">Design System</span>
            </div>
            <p className="text-sm text-muted-foreground">
              Built with precision for the future of music platforms.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}