"use client";

import { useRouter, usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import DragonEye from "@/components/DragonEye";
import ThemeToggleButton from "@/components/ThemeToggleButton";
import { useTheme } from "@/lib/theme";
import {
    LayoutDashboard,
    Twitch,
    Youtube,
    Instagram,
    Music2,
    DollarSign,
    LogOut,
} from "lucide-react";

const nav = [
    { label: "Vue générale",  href: "/dashboard",  icon: LayoutDashboard },
    { label: "Twitch",        href: "/twitch",      icon: Twitch },
    { label: "YouTube",       href: "/youtube",     icon: Youtube },
    { label: "Instagram",     href: "/instagram",   icon: Instagram },
    { label: "TikTok",        href: "/tiktok",      icon: Music2 },
    { label: "Finances",      href: "/finances",    icon: DollarSign },
];

export default function Sidebar() {
    const router = useRouter();
    const pathname = usePathname();
    const { theme } = useTheme();
    const isLight = theme === "light";

    const handleLogout = () => {
        signOut({ callbackUrl: "/" });
    };

    const bg       = isLight ? "bg-wy-light-surface" : "bg-wy-dark";
    const border   = isLight ? "border-wy-light-border" : "border-wy-border";
    const textSec  = isLight ? "text-wy-light-text-secondary" : "text-wy-text-secondary";
    const textPri  = isLight ? "text-wy-light-text-primary"   : "text-wy-text-primary";
    const title    = isLight ? "text-wy-light-text-primary"   : "text-white";

    return (
        <aside className={`fixed left-0 top-0 h-screen w-56 ${bg} border-r ${border} flex flex-col z-50`}>

            {/* Logo */}
            <div className={`flex items-center gap-3 px-5 py-6 border-b ${border}`}>
                <DragonEye size={32} />
                <div>
                    <div className={`text-[8px] font-mono tracking-[0.3em] ${isLight ? "text-sky-400/80" : "text-acid-green/60"} uppercase`}>Analytics</div>
                    <div className={`text-base font-black tracking-widest ${title}`}>WYVIEW</div>
                </div>
            </div>

            <nav className="flex-1 px-3 py-4 flex flex-col gap-1">
                {nav.map(({ label, href, icon: Icon }) => {
                    const active = pathname === href;
                    return (
                        <button
                            key={href}
                            onClick={() => router.push(href)}
                            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-left transition-all duration-150 group ${
                                active
                                    ? isLight
                                        ? "bg-sky-100 border border-sky-300 text-sky-600"
                                        : "bg-acid-green/10 border border-acid-green/30 text-acid-green"
                                    : `border border-transparent ${textSec} hover:${textPri} ${isLight ? "hover:bg-sky-50" : "hover:bg-white/[0.04]"}`
                            }`}
                        >
                            <Icon size={16} className="flex-shrink-0" />
                            <span className="text-sm font-medium">{label}</span>
                            {active && (
                                <span className={`ml-auto w-1.5 h-1.5 rounded-full ${isLight ? "bg-sky-500" : "bg-acid-green"}`} />
                            )}
                        </button>
                    );
                })}
            </nav>

            <div className={`px-3 py-4 border-t ${border} flex flex-col gap-2`}>
                {/* Theme toggle */}
                <div className="flex justify-end pr-1">
                    <ThemeToggleButton />
                </div>
                <button
                    onClick={handleLogout}
                    className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md ${textSec} hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/25 transition-all duration-150`}
                >
                    <LogOut size={16} />
                    <span className="text-sm font-medium">Déconnexion</span>
                </button>
            </div>

        </aside>
    );
}