"use client";

import { useRouter, usePathname } from "next/navigation";
import DragonEye from "@/components/DragonEye";
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 handleLogout = () => {
        sessionStorage.clear();
        router.push("/");
    };

    return (
        <aside className="fixed left-0 top-0 h-screen w-56 bg-[#0a0d0f] border-r border-[#1a2a1a] flex flex-col z-50">

            {/* Logo */}
            <div className="flex items-center gap-3 px-5 py-6 border-b border-[#1a2a1a]">
                <DragonEye size={32} />
                <div>
                    <div className="text-[8px] font-mono tracking-[0.3em] text-[#4aff8c]/40 uppercase">Analytics</div>
                    <div className="text-base font-black tracking-widest text-white">WYVIEW</div>
                </div>
            </div>

            {/* Nav */}
            <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-sm text-left transition-all duration-150 group ${
                                active
                                    ? "bg-[#4aff8c]/8 border border-[#4aff8c]/20 text-[#4aff8c]"
                                    : "border border-transparent text-[#4a6a4a] hover:text-[#a0c4a0] hover:bg-white/[0.03]"
                            }`}
                        >
                            <Icon size={14} className="flex-shrink-0" />
                            <span className="text-[11px] font-mono tracking-wider">{label}</span>
                            {active && <span className="ml-auto w-1 h-1 rounded-full bg-[#4aff8c]" />}
                        </button>
                    );
                })}
            </nav>

            {/* Footer */}
            <div className="px-3 py-4 border-t border-[#1a2a1a]">
                <button
                    onClick={handleLogout}
                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded-sm text-[#3a5a3a] hover:text-red-400 hover:bg-red-500/5 border border-transparent hover:border-red-500/20 transition-all duration-150"
                >
                    <LogOut size={14} />
                    <span className="text-[11px] font-mono tracking-wider">DÉCONNEXION</span>
                </button>
            </div>

        </aside>
    );
}