import React from "react";
import { Link } from "react-router-dom";
import { useSocket } from "../hooks/use-socket";
import { Badge } from "../components/ui/badge";

export function Dashboard() {
    const { isConnected, stats } = useSocket();

    return (
        <div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
            {/* 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-3">
                    {/* Bot Avatar */}
                    {stats?.bot?.avatarUrl ? (
                        <img
                            src={stats.bot.avatarUrl}
                            alt="Aurora Avatar"
                            className="w-8 h-8 rounded-full border border-primary/20 shadow-sm object-cover"
                        />
                    ) : (
                        <div className="w-8 h-8 rounded-full bg-aurora sun-flare shadow-sm" />
                    )}

                    <span className="text-xl font-bold tracking-tight text-primary">Aurora</span>

                    {/* Live Status Badge */}
                    <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full border transition-colors duration-500 ${isConnected
                            ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-500"
                            : "bg-red-500/10 border-red-500/20 text-red-500"
                        }`}>
                        <div className="relative flex h-2 w-2">
                            {isConnected && (
                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
                            )}
                            <span className={`relative inline-flex rounded-full h-2 w-2 ${isConnected ? "bg-emerald-500" : "bg-red-500"}`}></span>
                        </div>
                        <span className="text-[10px] font-bold tracking-wider uppercase">
                            {isConnected ? "Live" : "Offline"}
                        </span>
                    </div>
                </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="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
                        Design System
                    </Link>
                </div>
            </nav>

            {/* Content Placeholder */}
            <main className="pt-32 px-8 max-w-7xl mx-auto">
                <div className="glass-card p-6 rounded-lg border border-border/50">
                    <h1 className="text-2xl font-bold text-primary mb-2">Dashboard Overview</h1>
                    <p className="text-muted-foreground">
                        Real-time connection status: <span className={isConnected ? "text-emerald-500 font-medium" : "text-red-500 font-medium"}>
                            {isConnected ? "Connected" : "Disconnected"}
                        </span>
                    </p>
                </div>
            </main>
        </div>
    );
}