"use client";

import { X, LogOut, LayoutDashboard, Search, Cpu, Settings, ShieldCheck, Disc, Cloud, ChevronRight, Captions } from "lucide-react";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { clsx } from "clsx";
import Logo from "./Logo";

interface MobileSidebarProps {
    isOpen: boolean;
    onClose: () => void;
}

const menuItems = [
    { name: "Dashboard", href: "/", icon: LayoutDashboard },
    { name: "Analyzer", href: "/analyzer", icon: Search },
    { name: "Active Jobs", href: "/jobs", icon: Cpu },
];

const settingsItems = [
    { name: "Metadata Templates", href: "/settings/metadata", icon: ShieldCheck },
    { name: "Subtitle Branding", href: "/settings/subtitles", icon: LayoutDashboard },
    { name: "Encoding Presets", href: "/settings/encoding", icon: Disc },
    { name: "Google Drive", href: "/settings/gdrive", icon: Cloud },
    { name: "General Settings", href: "/settings/general", icon: Settings },
];

export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
    const pathname = usePathname();
    const router = useRouter();

    const handleLogout = () => {
        localStorage.removeItem("mhb_token");
        document.cookie = "mhb_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";
        router.push("/login");
        onClose();
    };

    return (
        <>
            {/* Backdrop */}
            <div
                className={clsx(
                    "fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] transition-opacity duration-300 md:hidden",
                    isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
                )}
                onClick={onClose}
            />

            {/* Drawer */}
            <aside
                className={clsx(
                    "fixed top-0 left-0 bottom-0 w-[280px] bg-bg-secondary z-[101] shadow-2xl transition-transform duration-300 ease-out md:hidden flex flex-col",
                    isOpen ? "translate-x-0" : "-translate-x-full"
                )}
            >
                {/* Header */}
                <div className="p-6 flex items-center justify-between border-b border-white/5">
                    <Logo size="sm" />
                    <button onClick={onClose} className="p-2 rounded-full hover:bg-white/5 text-white/50">
                        <X className="w-5 h-5" />
                    </button>
                </div>

                {/* Content */}
                <div className="flex-1 overflow-y-auto p-4 space-y-6 pt-6">
                    <div>
                        <p className="section-title px-4 mb-3">Main Navigation</p>
                        <div className="space-y-1">
                            {menuItems.map((item) => (
                                <Link
                                    key={item.href}
                                    href={item.href}
                                    onClick={onClose}
                                    className={clsx(
                                        "flex items-center gap-3 py-3 px-4 rounded-xl transition-all",
                                        pathname === item.href ? "bg-accent-cyan text-white" : "text-white/50 hover:bg-white/5"
                                    )}
                                >
                                    <item.icon className="w-5 h-5" />
                                    <span className="font-semibold text-sm">{item.name}</span>
                                </Link>
                            ))}
                        </div>
                    </div>

                    <div>
                        <p className="section-title px-4 mb-3">Configuration</p>
                        <div className="space-y-1">
                            {settingsItems.map((item) => (
                                <Link
                                    key={item.href}
                                    href={item.href}
                                    onClick={onClose}
                                    className={clsx(
                                        "flex items-center gap-3 py-2.5 px-4 rounded-xl transition-all",
                                        pathname === item.href ? "bg-bg-card text-white border border-white/10" : "text-white/40 hover:bg-white/5"
                                    )}
                                >
                                    <item.icon className="w-4 h-4" />
                                    <span className="font-medium text-sm">{item.name}</span>
                                </Link>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <div className="p-4 border-t border-white/5">
                    <button
                        onClick={handleLogout}
                        className="w-full flex items-center gap-3 py-3 px-4 rounded-xl text-red-400/60 hover:text-red-400 hover:bg-red-400/5 transition-all"
                    >
                        <LogOut className="w-5 h-5" />
                        <span className="font-semibold text-sm">Logout Session</span>
                    </button>
                </div>
            </aside>
        </>
    );
}