import { Link, usePage, Head } from "@inertiajs/react";
import { cn } from "@/lib/utils";
import {
    Building2,
    LayoutDashboard,
    LogOut,
    User,
    Menu,
    X,
    Settings,
    PanelLeftClose,
    PanelLeftOpen,
} from "lucide-react";
import { Toaster } from "sonner";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { useState, useEffect } from "react";

interface LandlordLayoutProps {
    children: React.ReactNode;
    title?: string;
}

export default function LandlordLayout({ children, title }: LandlordLayoutProps) {
    const { url, props } = usePage();
    // @ts-ignore
    const user = props.auth?.user || { name: 'Admin', username: 'admin' };

    const menuItems = [
        {
            label: "儀表板",
            href: "/landlord",
            icon: LayoutDashboard,
            active: url === "/landlord" || url === "/landlord/",
        },
        {
            label: "客戶管理",
            href: "/landlord/tenants",
            icon: Building2,
            active: url.startsWith("/landlord/tenants"),
        },
    ];

    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
    const [isCollapsed, setIsCollapsed] = useState(() => {
        if (typeof window !== "undefined") {
            return localStorage.getItem("landlord-sidebar-collapsed") === "true";
        }
        return false;
    });

    useEffect(() => {
        localStorage.setItem("landlord-sidebar-collapsed", String(isCollapsed));
    }, [isCollapsed]);

    return (
        <div className="flex min-h-screen bg-slate-50 relative">
            <Head>
                <link rel="icon" type="image/png" href="/favicon-landlord.png" />
                <link rel="shortcut icon" href="/favicon-landlord.png" type="image/png" />
                <link rel="apple-touch-icon" href="/favicon-landlord.png" />
            </Head>
            {/* Sidebar Overlay for mobile */}
            {isSidebarOpen && (
                <div
                    className="fixed inset-0 bg-black/50 z-40 lg:hidden transition-opacity"
                    onClick={() => setIsSidebarOpen(false)}
                />
            )}

            {/* Sidebar */}
            <aside className={cn(
                "fixed left-0 top-0 bottom-0 bg-slate-900 text-white flex flex-col z-50 transition-all duration-300 ease-in-out lg:translate-x-0",
                isSidebarOpen ? "translate-x-0" : "-translate-x-full",
                isCollapsed ? "lg:w-20" : "lg:w-64"
            )}>
                <div className={cn(
                    "h-16 flex items-center border-b border-slate-800 transition-all",
                    isCollapsed ? "justify-center px-0" : "justify-between px-6"
                )}>
                    <Link href="/landlord" className="flex items-center gap-2">
                        <div className="w-8 h-8 bg-primary-main rounded-lg flex items-center justify-center shrink-0">
                            <Building2 className="w-5 h-5 text-white" />
                        </div>
                        {!isCollapsed && <span className="font-bold text-lg whitespace-nowrap">中央後台</span>}
                    </Link>
                    {!isCollapsed && (
                        <button
                            className="lg:hidden text-slate-400 hover:text-white"
                            onClick={() => setIsSidebarOpen(false)}
                        >
                            <X className="w-6 h-6" />
                        </button>
                    )}
                </div>

                <nav className="flex-1 p-3 space-y-1 overflow-y-auto overflow-x-hidden">
                    {menuItems.map((item) => (
                        <Link
                            key={item.href}
                            href={item.href}
                            onClick={() => setIsSidebarOpen(false)}
                            title={isCollapsed ? item.label : ""}
                            className={cn(
                                "flex items-center rounded-lg transition-all",
                                isCollapsed ? "justify-center px-0 h-10 w-10 mx-auto" : "gap-3 px-3 py-2.5",
                                item.active
                                    ? "bg-primary-main text-white"
                                    : "text-slate-400 hover:bg-slate-800 hover:text-white"
                            )}
                        >
                            <item.icon className="w-5 h-5 shrink-0" />
                            {!isCollapsed && <span className="font-medium whitespace-nowrap">{item.label}</span>}
                        </Link>
                    ))}
                </nav>

                <div className="p-4 border-t border-slate-800 hidden lg:block">
                    <button
                        onClick={() => setIsCollapsed(!isCollapsed)}
                        className={cn(
                            "w-full flex items-center transition-colors text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg p-2",
                            isCollapsed ? "justify-center" : "gap-3"
                        )}
                        title={isCollapsed ? "展開側邊欄" : "收合側邊欄"}
                    >
                        {isCollapsed ? <PanelLeftOpen className="w-5 h-5" /> : (
                            <>
                                <PanelLeftClose className="w-5 h-5" />
                                <span className="text-sm font-medium">收合側邊欄</span>
                            </>
                        )}
                    </button>
                </div>
            </aside>

            {/* Main Content */}
            <main className={cn(
                "flex-1 flex flex-col transition-all duration-300 min-h-screen",
                isCollapsed ? "lg:ml-20" : "lg:ml-64"
            )}>
                {/* Header */}
                <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 lg:px-6">
                    <div className="flex items-center gap-4">
                        <button
                            className="lg:hidden p-2 text-slate-600 hover:bg-slate-100 rounded-lg"
                            onClick={() => setIsSidebarOpen(true)}
                        >
                            <Menu className="w-6 h-6" />
                        </button>
                        <h1 className="text-lg font-semibold text-slate-900 truncate max-w-[200px] sm:max-w-none">
                            {title || "中央管理後台"}
                        </h1>
                    </div>

                    <DropdownMenu modal={false}>
                        <DropdownMenuTrigger className="flex items-center gap-2 outline-none group">
                            <div className="flex flex-col items-end mr-1">
                                <span className="text-sm font-medium text-slate-700 group-hover:text-slate-900 transition-colors">
                                    {user.name} ({user.username})
                                </span>
                                <span className="text-xs text-slate-500">
                                    {user.role_labels?.[0] || user.roles?.[0] || '系統管理員'}
                                </span>
                            </div>
                            <div className="h-9 w-9 bg-slate-100 rounded-full flex items-center justify-center text-slate-600 group-hover:bg-primary-lightest group-hover:text-primary-main transition-all">
                                <User className="h-5 w-5" />
                            </div>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-56 z-[100]" sideOffset={8}>
                            <DropdownMenuLabel>{user.name} ({user.username})</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem asChild>
                                <Link
                                    href={route('landlord.profile.edit')}
                                    className="w-full flex items-center cursor-pointer text-slate-600 focus:bg-slate-100 focus:text-slate-900 group"
                                >
                                    <Settings className="mr-2 h-4 w-4 text-slate-500 group-focus:text-slate-900" />
                                    <span>使用者設定</span>
                                </Link>
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem asChild>
                                <Link
                                    href={route('logout')}
                                    method="post"
                                    as="button"
                                    className="w-full flex items-center cursor-pointer text-red-600 focus:text-red-600 focus:bg-red-50"
                                >
                                    <LogOut className="mr-2 h-4 w-4" />
                                    <span>登出系統</span>
                                </Link>
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </header>

                {/* Content */}
                <div className="p-6">
                    {children}
                </div>
            </main>

            <Toaster richColors closeButton position="top-center" />
        </div>
    );
}
