import React from "react";
import { Link } from "react-router-dom";
import { Badge } from "../components/ui/badge";
import { Card, CardHeader, CardTitle, CardContent } from "../components/ui/card";
import { Button } from "../components/ui/button";
import { Switch } from "../components/ui/switch";
import { FeatureCard } from "../components/feature-card";
import { InfoCard } from "../components/info-card";
import { SectionHeader } from "../components/section-header";
import { TestimonialCard } from "../components/testimonial-card";

export function DesignSystem() {
    return (
        <div className="min-h-screen bg-aurora-page text-foreground font-outfit">
            {/* Navigation */}
            <nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
                <div className="flex items-center gap-2">
                    <div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
                </div>
                <div className="flex items-center gap-6">
                    <Link to="/" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                        Home
                    </Link>
                    <Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                        Dashboard
                    </Link>
                </div>
            </nav>

            <div className="pt-32 px-8 max-w-6xl mx-auto space-y-12 text-center md:text-left">
                {/* Header Section */}
                <header className="space-y-4 animate-in fade-in">
                    <Badge variant="aurora" className="mb-2">v1.2.0-solar</Badge>
                    <h1 className="text-6xl font-extrabold tracking-tight text-primary">
                        Aurora Design System
                    </h1>
                    <p className="text-xl text-muted-foreground max-w-2xl mx-auto md:mx-0">
                        Welcome to the Solaris Dark theme. A warm, celestial-inspired aesthetic designed for the Aurora astrology RPG.
                    </p>
                </header>

                {/* Color Palette */}
                <section className="space-y-6 animate-in slide-up delay-100">
                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
                        Color Palette
                    </h2>
                    <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>

                {/* Badges & Pills */}
                <section className="space-y-6 animate-in slide-up delay-200">
                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
                        Badges & Tags
                    </h2>
                    <div className="flex flex-wrap gap-4 items-center justify-center md:justify-start">
                        <Badge className="hover-scale cursor-default">Primary</Badge>
                        <Badge variant="secondary" className="hover-scale cursor-default">Secondary</Badge>
                        <Badge variant="aurora" className="hover-scale cursor-default">Solaris</Badge>
                        <Badge variant="glass" className="hover-scale cursor-default">Celestial Glass</Badge>
                        <Badge variant="outline" className="hover-scale cursor-default">Outline</Badge>
                        <Badge variant="destructive" className="hover-scale cursor-default">Destructive</Badge>
                    </div>
                </section>

                {/* Animations & Interactions */}
                <section className="space-y-6 animate-in slide-up delay-300">
                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
                        Animations & Interactions
                    </h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div className="glass-card p-6 rounded-xl hover-lift cursor-pointer space-y-2">
                            <h3 className="font-bold text-primary">Hover Lift</h3>
                            <p className="text-sm text-muted-foreground">Smooth upward translation with enhanced depth.</p>
                        </div>
                        <div className="glass-card p-6 rounded-xl hover-glow cursor-pointer space-y-2">
                            <h3 className="font-bold text-primary">Hover Glow</h3>
                            <p className="text-sm text-muted-foreground">Subtle border and shadow illumination on hover.</p>
                        </div>
                        <div className="flex items-center justify-center p-6">
                            <Button className="bg-primary text-primary-foreground active-press font-bold px-8 py-6 rounded-xl shadow-lg">
                                Press Interaction
                            </Button>
                        </div>
                    </div>
                </section>

                {/* Gradients & Special Effects */}
                <section className="space-y-6 animate-in slide-up delay-400">
                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
                        Gradients & Effects
                    </h2>
                    <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 (Background)</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>

                {/* Components Showcase */}
                <section className="space-y-6 animate-in slide-up delay-500">
                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
                        Component Showcase
                    </h2>
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                        {/* Action Card with Tags */}
                        <Card className="glass-card sun-flare overflow-hidden border-none text-left hover-lift transition-all">
                            <div className="h-2 bg-primary w-full" />
                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                <CardTitle className="text-primary">Celestial Action</CardTitle>
                                <Badge variant="aurora" className="h-5">New</Badge>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="flex gap-2">
                                    <Badge variant="glass" className="text-[10px] uppercase">Quest</Badge>
                                    <Badge variant="glass" className="text-[10px] uppercase">Level 15</Badge>
                                </div>
                                <p className="text-muted-foreground text-sm">
                                    Experience the warmth of the sun in every interaction and claim your rewards.
                                </p>
                                <div className="flex gap-2 pt-2">
                                    <Button className="bg-primary text-primary-foreground active-press font-bold px-6">
                                        Ascend
                                    </Button>
                                </div>
                            </CardContent>
                        </Card>

                        {/* Profile/Entity Card with Tags */}
                        <Card className="glass-card text-left hover-lift transition-all">
                            <CardHeader className="pb-2">
                                <div className="flex justify-between items-start">
                                    <div className="w-12 h-12 rounded-full bg-aurora border-2 border-primary/20 hover-scale transition-transform cursor-pointer" />
                                    <Badge variant="secondary" className="bg-green-500/10 text-green-500 border-green-500/20">Online</Badge>
                                </div>
                                <CardTitle className="mt-4">Stellar Navigator</CardTitle>
                                <p className="text-xs text-muted-foreground uppercase tracking-wider">Level 42 Mage</p>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="flex flex-wrap gap-2">
                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Astronomy</Badge>
                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Pyromancy</Badge>
                                    <Badge variant="outline" className="text-[10px] py-0 hover-scale cursor-default">Leadership</Badge>
                                </div>
                                <div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
                                    <div className="h-full bg-aurora w-[75%] animate-in slide-up delay-500" />
                                </div>
                            </CardContent>
                        </Card>

                        {/* Interactive Card with Tags */}
                        <Card className="glass-card text-left hover-glow transition-all">
                            <CardHeader>
                                <div className="flex items-center gap-2 mb-2">
                                    <Badge variant="glass" className="bg-primary/10 text-primary border-primary/20">Beta</Badge>
                                </div>
                                <CardTitle>System Settings</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-6">
                                <div className="flex items-center justify-between">
                                    <div className="space-y-0.5">
                                        <div className="font-medium">Starry Background</div>
                                        <div className="text-sm text-muted-foreground">Enable animated SVG stars</div>
                                    </div>
                                    <Switch defaultChecked />
                                </div>
                                <div className="flex items-center justify-between">
                                    <div className="space-y-0.5">
                                        <div className="font-medium flex items-center gap-2">
                                            Solar Flare Glow
                                            <Badge className="bg-amber-500/10 text-amber-500 border-amber-500/20 text-[9px] h-4">Pro</Badge>
                                        </div>
                                        <div className="text-sm text-muted-foreground">Add bloom to primary elements</div>
                                    </div>
                                    <Switch defaultChecked />
                                </div>
                            </CardContent>
                        </Card>
                    </div>
                </section>

                {/* Refactored Application Components */}
                <section className="space-y-6 animate-in slide-up delay-600">
                    <h2 className="text-3xl font-bold flex items-center justify-center md:justify-start gap-2">
                        <span className="w-8 h-8 rounded-full bg-primary inline-block" />
                        Application Components
                    </h2>

                    <div className="space-y-12">
                        {/* Section Header Demo */}
                        <div className="border border-border/50 rounded-xl p-8 bg-background/50">
                            <SectionHeader
                                badge="Components"
                                title="Section Headers"
                                description="Standardized header component for defining page sections with badge, title, and description."
                            />
                        </div>

                        {/* Feature Cards Demo */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <FeatureCard
                                title="Feature Card"
                                category="UI Element"
                                description="A versatile card component for the bento grid layout."
                                icon={<div className="w-20 h-20 bg-primary/20 rounded-full animate-pulse" />}
                            />
                            <FeatureCard
                                title="Interactive Feature"
                                category="Interactive"
                                description="Supports custom children nodes for complex content."
                            >
                                <div className="mt-2 p-3 bg-secondary/10 border border-secondary/20 rounded text-center text-secondary text-sm font-bold">
                                    Custom Child Content
                                </div>
                            </FeatureCard>
                        </div>

                        {/* Info Cards Demo */}
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <InfoCard
                                icon={<div className="w-6 h-6 rounded-full bg-primary animate-ping" />}
                                title="Info Card"
                                description="Compact card for highlighting features or perks with an icon."
                                iconWrapperClassName="bg-primary/20 text-primary"
                            />
                        </div>

                        {/* Testimonial Cards Demo */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <TestimonialCard
                                quote="The testimonial card is perfect for social proof sections."
                                author="Jane Doe"
                                role="Beta Tester"
                                avatarGradient="bg-gradient-to-br from-pink-500 to-rose-500"
                            />
                        </div>
                    </div>
                </section>

                {/* Typography */}
                <section className="space-y-8 pb-12">
                    <h2 className="text-step-3 font-bold text-center">Fluid Typography</h2>
                    <div className="space-y-6">
                        <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>
                    <p className="text-step--1 text-muted-foreground text-center italic">
                        Try resizing your browser window to see the text scale smoothly.
                    </p>
                </section>
            </div>
        </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">
            <span className="text-step--2 font-mono text-muted-foreground w-20">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="space-y-2">
            <div className={`h-20 w-full rounded-lg ${color} ${border ? 'border border-border' : ''} flex items-end p-2 shadow-lg`}>
                <span className={`text-xs font-bold uppercase tracking-widest ${text}`}>{label}</span>
            </div>
        </div>
    );
}

export default DesignSystem;