"use client";

import { useRouter, usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
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 = () => {
        signOut({ callbackUrl: "/" });
    };

    return (
        <aside className="fixed left-0 top-0 h-screen w-56 bg-wy-dark border-r border-wy-border flex flex-col z-50">

            {/* Logo */}
            <div className="flex items-center gap-3 px-5 py-6 border-b border-wy-border">
                <DragonEye size={32} />
                <div>
                    <div className="text-[8px] font-mono tracking-[0.3em] text-acid-green/60 uppercase">Analytics</div>
                    <div className="text-base font-black tracking-widest text-white">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
                                    ? "bg-acid-green/10 border border-acid-green/30 text-acid-green"
                                    : "border border-transparent text-wy-text-secondary hover:text-wy-text-primary 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 bg-acid-green" />}
                        </button>
                    );
                })}
            </nav>

            <div className="px-3 py-4 border-t border-wy-border">
                <button
                    onClick={handleLogout}
                    className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-wy-text-secondary 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>
    );
}