"use client";

import { SidebarNav } from "./sidebar-nav";
import { useSidebar } from "./sidebar-context";
import { Button } from "@/components/ui/button";
import { LogOut } from "lucide-react";
import { signOut } from "next-auth/react";

interface SidebarShellProps {
    appName: string;
    userName?: string | null;
    userEmail?: string | null;
    version: string;
}

export function SidebarShell({ appName, userName, userEmail, version }: SidebarShellProps) {
    const { isCollapsed } = useSidebar();

    return (
        <aside
            className={`
                bg-background/80 backdrop-blur-xl border-r border-border/40
                hidden md:flex flex-col h-full sticky left-0 top-0 z-20
                shadow-[1px_0_12px_-4px_rgba(0,0,0,0.08)]
                transition-all duration-300 ease-in-out
                ${isCollapsed ? "w-[72px]" : "w-[260px]"}
            `}
        >
            {/* Logo / Brand */}
            <div className={`border-b border-border/30 transition-all duration-300 ${isCollapsed ? "px-3 py-4" : "px-5 py-5"}`}>
                {isCollapsed ? (
                    <div className="flex justify-center">
                        <div className="h-9 w-9 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-sm shadow-md shadow-blue-500/20">
                            {appName.charAt(0)}
                        </div>
                    </div>
                ) : (
                    <>
                        <h1 className="text-xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-indigo-600 to-cyan-500 dark:from-blue-400 dark:via-indigo-300 dark:to-cyan-400" translate="no">
                            {appName}
                        </h1>
                        <p className="text-[10px] text-muted-foreground mt-0.5 font-medium">Enterprise Cloud Gateway</p>
                    </>
                )}
            </div>

            {/* Navigation */}
            <SidebarNav />

            {/* User Footer */}
            <div className={`border-t border-border/30 bg-background/40 transition-all duration-300 ${isCollapsed ? "p-2" : "p-4"}`}>
                {isCollapsed ? (
                    <div className="flex flex-col items-center gap-2">
                        <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-primary/20 to-blue-500/20 flex items-center justify-center text-xs font-bold text-primary">
                            {userName?.charAt(0)?.toUpperCase() || "U"}
                        </div>
                        <button
                            onClick={async () => {
                                try {
                                    await signOut({ redirect: false });
                                } catch {}
                                // Force clear all auth cookies and redirect
                                document.cookie.split(";").forEach((c) => {
                                    const eqPos = c.indexOf("=");
                                    const name = eqPos > -1 ? c.substr(0, eqPos).trim() : c.trim();
                                    if (name.includes("auth") || name.includes("session")) {
                                        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
                                    }
                                });
                                window.location.replace("/auth/login");
                            }}
                            className="p-2 rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
                        >
                            <LogOut size={16} />
                        </button>
                    </div>
                ) : (
                    <>
                        <div className="flex items-center gap-2.5 mb-3">
                            <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-primary/20 to-blue-500/20 flex items-center justify-center text-xs font-bold text-primary border border-primary/10">
                                {userName?.charAt(0)?.toUpperCase() || "U"}
                            </div>
                            <div className="flex-1 min-w-0">
                                <p className="text-sm font-semibold text-foreground truncate" translate="no">{userName || "User"}</p>
                                <p className="text-[10px] text-muted-foreground truncate" translate="no">{userEmail}</p>
                            </div>
                        </div>
                        <Button
                            variant="outline"
                            size="sm"
                            className="w-full flex items-center justify-center gap-2 text-xs h-8 rounded-lg border-border/40 hover:bg-destructive/10 hover:text-destructive hover:border-destructive/30 transition-colors"
                            onClick={async () => {
                                try {
                                    await signOut({ redirect: false });
                                } catch {}
                                document.cookie.split(";").forEach((c) => {
                                    const eqPos = c.indexOf("=");
                                    const name = eqPos > -1 ? c.substr(0, eqPos).trim() : c.trim();
                                    if (name.includes("auth") || name.includes("session")) {
                                        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
                                    }
                                });
                                window.location.replace("/auth/login");
                            }}
                        >
                            <LogOut size={14} /> Sign Out
                        </Button>
                        <p className="text-[9px] text-muted-foreground/50 text-center mt-2 font-mono" translate="no">v{version}</p>
                    </>
                )}
            </div>
        </aside>
    );
}