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

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"),
        },
    ];

    return (
        <div className="flex min-h-screen bg-slate-50">
            {/* Sidebar */}
            <aside className="fixed left-0 top-0 bottom-0 w-64 bg-slate-900 text-white flex flex-col">
                <div className="h-16 flex items-center px-6 border-b border-slate-800">
                    <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">
                            <Building2 className="w-5 h-5 text-white" />
                        </div>
                        <span className="font-bold text-lg">房東後台</span>
                    </Link>
                </div>

                <nav className="flex-1 p-4 space-y-1">
                    {menuItems.map((item) => (
                        <Link
                            key={item.href}
                            href={item.href}
                            className={cn(
                                "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors",
                                item.active
                                    ? "bg-primary-main text-white"
                                    : "text-slate-400 hover:bg-slate-800 hover:text-white"
                            )}
                        >
                            <item.icon className="w-5 h-5" />
                            <span className="font-medium">{item.label}</span>
                        </Link>
                    ))}
                </nav>

                <div className="p-4 border-t border-slate-800">
                    <Link
                        href="/"
                        className="flex items-center gap-2 text-slate-400 hover:text-white transition-colors text-sm"
                    >
                        ← 返回 ERP 系統
                    </Link>
                </div>
            </aside>

            {/* Main Content */}
            <main className="flex-1 ml-64">
                {/* Header */}
                <header className="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-6">
                    <h1 className="text-lg font-semibold text-slate-900">
                        {title || "房東管理後台"}
                    </h1>

                    <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">
                                    {user.name}
                                </span>
                                <span className="text-xs text-slate-500">系統管理員</span>
                            </div>
                            <div className="h-9 w-9 bg-slate-100 rounded-full flex items-center justify-center">
                                <User className="h-5 w-5 text-slate-600" />
                            </div>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-56 z-[100]">
                            <DropdownMenuLabel>我的帳號</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem asChild>
                                <Link
                                    href={route('logout')}
                                    method="post"
                                    as="button"
                                    className="w-full flex items-center cursor-pointer text-red-600"
                                >
                                    <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>
    );
}