import React from "react";
import { Badge } from "../components/ui/badge";
import { Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter } from "../components/ui/card";
import { Button } from "../components/ui/button";
import { Switch } from "../components/ui/switch";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Textarea } from "../components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/ui/tooltip";
import { FeatureCard } from "../components/feature-card";
import { InfoCard } from "../components/info-card";
import { SectionHeader } from "../components/section-header";
import { TestimonialCard } from "../components/testimonial-card";
import { StatCard } from "../components/stat-card";
import { LootdropCard } from "../components/lootdrop-card";
import { LeaderboardCard, type LeaderboardData } from "../components/leaderboard-card";
import { ActivityChart } from "../components/activity-chart";
import { RecentActivity } from "../components/recent-activity";
import { QuestForm } from "../components/quest-form";
import { Activity, Coins, Flame, Trophy, Check, User, Mail, Shield, Bell } from "lucide-react";
import { type RecentEvent, type ActivityData } from "@shared/modules/dashboard/dashboard.types";

// Mock Data
const mockEvents: RecentEvent[] = [
    { type: 'success', message: 'User leveled up to 5', timestamp: new Date(Date.now() - 1000 * 60 * 5), icon: '⬆️' },
    { type: 'info', message: 'New user joined', timestamp: new Date(Date.now() - 1000 * 60 * 15), icon: '👋' },
    { type: 'warn', message: 'Failed login attempt', timestamp: new Date(Date.now() - 1000 * 60 * 60), icon: '⚠️' }
];

const mockActivityData: ActivityData[] = Array.from({ length: 24 }).map((_, i) => {
    const d = new Date();
    d.setHours(d.getHours() - (23 - i));
    d.setMinutes(0, 0, 0);
    return {
        hour: d.toISOString(),
        commands: Math.floor(Math.random() * 100) + 20,
        transactions: Math.floor(Math.random() * 60) + 10
    };
});

const mockLeaderboardData: LeaderboardData = {
    topLevels: [
        { username: "StellarMage", level: 99 },
        { username: "MoonWalker", level: 85 },
        { username: "SunChaser", level: 72 },
    ],
    topWealth: [
        { username: "GoldHoarder", balance: "1000000" },
        { username: "MerchantKing", balance: "750000" },
        { username: "LuckyLooter", balance: "500000" },
    ],
    topNetWorth: [
        { username: "MerchantKing", netWorth: "1500000" },
        { username: "GoldHoarder", netWorth: "1250000" },
        { username: "LuckyLooter", netWorth: "850000" },
    ]
};

export function DesignSystem() {
    return (
        <div className="pt-8 px-8 max-w-7xl mx-auto space-y-8 text-center md:text-left pb-24">
            {/* Header Section */}
            <header className="space-y-4 animate-in fade-in">
                <div className="flex flex-col md:flex-row items-center md:items-start justify-between gap-4">
                    <div className="space-y-2">
                        <Badge variant="aurora" className="mb-2">v2.0.0-solaris</Badge>
                        <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-primary glow-text">
                            Aurora Design System
                        </h1>
                        <p className="text-xl text-muted-foreground max-w-2xl">
                            The Solaris design language. A cohesive collection of celestial components, 
                            glassmorphic surfaces, and radiant interactions.
                        </p>
                    </div>
                    <div className="hidden md:block">
                        <div className="size-32 rounded-full bg-aurora opacity-20 blur-3xl animate-pulse" />
                    </div>
                </div>
            </header>

            <Tabs defaultValue="foundations" className="space-y-8 animate-in slide-up delay-100">
                <div className="flex items-center justify-center md:justify-start">
                    <TabsList className="grid w-full max-w-md grid-cols-3">
                        <TabsTrigger value="foundations">Foundations</TabsTrigger>
                        <TabsTrigger value="components">Components</TabsTrigger>
                        <TabsTrigger value="patterns">Patterns</TabsTrigger>
                    </TabsList>
                </div>

                {/* FOUNDATIONS TAB */}
                <TabsContent value="foundations" className="space-y-12">
                     {/* Color Palette */}
                     <section className="space-y-6">
                        <div className="flex items-center gap-4">
                             <div className="h-px bg-border flex-1" />
                             <h2 className="text-2xl font-bold text-foreground">Color Palette</h2>
                             <div className="h-px bg-border flex-1" />
                        </div>
                        
                        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                            <ColorSwatch label="Primary" color="bg-primary" text="text-primary-foreground" />
                            <ColorSwatch label="Secondary" color="bg-secondary" text="text-secondary-foreground" />
                            <ColorSwatch label="Background" color="bg-background" border />
                            <ColorSwatch label="Card" color="bg-card" border />
                            <ColorSwatch label="Accent" color="bg-accent" />
                            <ColorSwatch label="Muted" color="bg-muted" />
                            <ColorSwatch label="Destructive" color="bg-destructive" text="text-white" />
                        </div>
                    </section>

                    {/* Gradients & Special Effects */}
                    <section className="space-y-6">
                         <div className="flex items-center gap-4">
                             <div className="h-px bg-border flex-1" />
                             <h2 className="text-2xl font-bold text-foreground">Gradients & Effects</h2>
                             <div className="h-px bg-border flex-1" />
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-center">
                            <div className="space-y-4">
                                <h3 className="text-xl font-medium text-muted-foreground">The Solaris Gradient</h3>
                                <div className="h-32 w-full rounded-xl bg-aurora-page sun-flare flex items-center justify-center border border-border hover-glow transition-all">
                                    <span className="text-primary font-bold text-2xl">Celestial Void</span>
                                </div>
                            </div>
                            <div className="space-y-4">
                                <h3 className="text-xl font-medium text-muted-foreground">Glassmorphism</h3>
                                <div className="h-32 w-full rounded-xl glass-card flex items-center justify-center p-6 bg-[url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?auto=format&fit=crop&q=80&w=2342')] bg-cover bg-center overflow-hidden">
                                    <div className="glass-card p-4 rounded-lg text-center w-full hover-lift transition-all backdrop-blur-md">
                                        <span className="font-bold">Frosted Celestial Glass</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    {/* Typography */}
                    <section className="space-y-8">
                         <div className="flex items-center gap-4">
                             <div className="h-px bg-border flex-1" />
                             <h2 className="text-2xl font-bold text-foreground">Typography</h2>
                             <div className="h-px bg-border flex-1" />
                        </div>
                        <div className="space-y-2 border border-border/50 rounded-xl p-8 bg-card/50">
                            <TypographyRow step="-2" className="text-step--2" label="Step -2 (Small Print)" />
                            <TypographyRow step="-1" className="text-step--1" label="Step -1 (Small)" />
                            <TypographyRow step="0" className="text-step-0" label="Step 0 (Base / Body)" />
                            <TypographyRow step="1" className="text-step-1" label="Step 1 (H4 / Subhead)" />
                            <TypographyRow step="2" className="text-step-2" label="Step 2 (H3 / Section)" />
                            <TypographyRow step="3" className="text-step-3 text-primary" label="Step 3 (H2 / Header)" />
                            <TypographyRow step="4" className="text-step-4 text-primary" label="Step 4 (H1 / Title)" />
                            <TypographyRow step="5" className="text-step-5 text-primary font-black" label="Step 5 (Display)" />
                        </div>
                    </section>
                </TabsContent>

                {/* COMPONENTS TAB */}
                <TabsContent value="components" className="space-y-12">
                    {/* Buttons & Badges */}
                    <section className="space-y-6">
                        <SectionTitle title="Buttons & Badges" />
                        <Card className="p-8">
                            <div className="space-y-8">
                                <div className="space-y-4">
                                    <Label>Buttons</Label>
                                    <div className="flex flex-wrap gap-4">
                                        <Button variant="default">Default</Button>
                                        <Button variant="secondary">Secondary</Button>
                                        <Button variant="outline">Outline</Button>
                                        <Button variant="ghost">Ghost</Button>
                                        <Button variant="destructive">Destructive</Button>
                                        <Button variant="link">Link</Button>
                                        <Button variant="aurora">Aurora</Button>
                                        <Button variant="glass">Glass</Button>
                                    </div>
                                </div>
                                <div className="space-y-4">
                                    <Label>Badges</Label>
                                    <div className="flex flex-wrap gap-4">
                                        <Badge>Primary</Badge>
                                        <Badge variant="secondary">Secondary</Badge>
                                        <Badge variant="outline">Outline</Badge>
                                        <Badge variant="destructive">Destructive</Badge>
                                        <Badge variant="aurora">Aurora</Badge>
                                        <Badge variant="glass">Glass</Badge>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </section>
                    
                    {/* Form Controls */}
                    <section className="space-y-6">
                        <SectionTitle title="Form Controls" />
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <Card className="p-6 space-y-6">
                                <div className="space-y-2">
                                    <Label htmlFor="email">Email Address</Label>
                                    <Input id="email" placeholder="enter@email.com" type="email" />
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="bio">Bio</Label>
                                    <Textarea id="bio" placeholder="Tell us about yourself..." />
                                </div>
                                <div className="flex items-center justify-between">
                                    <Label htmlFor="notifications">Enable Notifications</Label>
                                    <Switch id="notifications" />
                                </div>
                            </Card>
                            <Card className="p-6 space-y-6">
                                <div className="space-y-2">
                                    <Label>Role Selection</Label>
                                     <Select>
                                        <SelectTrigger>
                                            <SelectValue placeholder="Select a role" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="admin">Administrator</SelectItem>
                                            <SelectItem value="mod">Moderator</SelectItem>
                                            <SelectItem value="user">User</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="space-y-2">
                                    <Label>Tooltip Demo</Label>
                                    <div className="p-4 border border-dashed rounded-lg flex items-center justify-center">
                                        <TooltipProvider>
                                            <Tooltip>
                                                <TooltipTrigger asChild>
                                                    <Button variant="outline">Hover Me</Button>
                                                </TooltipTrigger>
                                                <TooltipContent>
                                                    <p>This is a glowing tooltip!</p>
                                                </TooltipContent>
                                            </Tooltip>
                                        </TooltipProvider>
                                    </div>
                                </div>
                            </Card>
                        </div>
                    </section>

                     {/* Cards & Containers */}
                     <section className="space-y-6">
                        <SectionTitle title="Cards & Containers" />
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <Card className="hover-lift">
                                <CardHeader>
                                    <CardTitle>Standard Card</CardTitle>
                                    <CardDescription>Default glassmorphic style</CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <p className="text-sm text-muted-foreground">The default card component comes with built-in separation and padding.</p>
                                </CardContent>
                                <CardFooter>
                                    <Button size="sm" variant="secondary" className="w-full">Action</Button>
                                </CardFooter>
                            </Card>

                            <Card className="bg-aurora/10 border-primary/20 hover-glow">
                                <CardHeader>
                                    <CardTitle className="text-primary">Highlighted Card</CardTitle>
                                    <CardDescription>Active or featured state</CardDescription>
                                </CardHeader>
                                <CardContent>
                                     <p className="text-sm text-muted-foreground">Use this variation to draw attention to specific content blocks.</p>
                                </CardContent>
                            </Card>

                            <Card className="border-dashed shadow-none bg-transparent">
                                <CardHeader>
                                    <CardTitle>Ghost/Dashed Card</CardTitle>
                                    <CardDescription>Placeholder or empty state</CardDescription>
                                </CardHeader>
                                <CardContent className="flex items-center justify-center py-8">
                                    <div className="bg-muted p-4 rounded-full">
                                        <Activity className="size-6 text-muted-foreground" />
                                    </div>
                                </CardContent>
                            </Card>
                        </div>
                    </section>
                </TabsContent>

                {/* PATTERNS TAB */}
                <TabsContent value="patterns" className="space-y-12">
                     {/* Dashboard Widgets */}
                     <section className="space-y-6">
                        <SectionTitle title="Dashboard Widgets" />
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <StatCard
                                title="Total XP"
                                value="1,240,500"
                                subtitle="+12% from last week"
                                icon={Trophy}
                                isLoading={false}
                                iconClassName="text-yellow-500"
                            />
                            <StatCard
                                title="Active Users"
                                value="3,405"
                                subtitle="Currently online"
                                icon={User}
                                isLoading={false}
                                iconClassName="text-blue-500"
                            />
                            <StatCard
                                title="System Load"
                                value="42%"
                                subtitle="Optimal performance"
                                icon={Activity}
                                isLoading={false}
                                iconClassName="text-green-500"
                            />
                        </div>
                    </section>

                    {/* Complex Lists */}
                    <section className="space-y-6">
                         <SectionTitle title="Complex Lists & Charts" />
                         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <RecentActivity
                                events={mockEvents}
                                isLoading={false}
                                className="h-[400px]"
                            />
                            <LeaderboardCard
                                data={mockLeaderboardData}
                                isLoading={false}
                                className="h-[400px]"
                            />
                         </div>
                    </section>

                     {/* Application Patterns */}
                     <section className="space-y-6">
                         <SectionTitle title="Application Forms" />
                         <div className="max-w-xl mx-auto">
                            <QuestForm />
                         </div>
                    </section>
                </TabsContent>
            </Tabs>
        </div>
    );
}

function SectionTitle({ title }: { title: string }) {
    return (
        <div className="flex items-center gap-4 py-4">
             <div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
             <h2 className="text-xl font-bold text-foreground/80 uppercase tracking-widest">{title}</h2>
             <div className="h-0.5 bg-linear-to-r from-transparent via-primary/50 to-transparent flex-1" />
        </div>
    );
}

function TypographyRow({ step, className, label }: { step: string, className: string, label: string }) {
    return (
        <div className="flex flex-col md:flex-row md:items-baseline gap-4 border-b border-border/50 pb-4 last:border-0 last:pb-0">
            <span className="text-xs font-mono text-muted-foreground w-24 shrink-0">var(--step-{step})</span>
            <p className={`${className} font-medium truncate`}>{label}</p>
        </div>
    );
}

function ColorSwatch({ label, color, text = "text-foreground", border = false }: { label: string, color: string, text?: string, border?: boolean }) {
    return (
        <div className="group space-y-2 cursor-pointer">
            <div className={`h-24 w-full rounded-xl ${color} ${border ? 'border border-border' : ''} flex items-end p-3 shadow-lg group-hover:scale-105 transition-transform duration-300 relative overflow-hidden`}>
                <div className="absolute inset-0 bg-linear-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                <span className={`text-xs font-bold uppercase tracking-widest ${text} relative z-10`}>{label}</span>
            </div>
            <div className="flex justify-between text-xs text-muted-foreground px-1">
                 <span>{color.replace('bg-', '')}</span>
            </div>
        </div>
    );
}

export default DesignSystem;