import { Link, usePage } from '@inertiajs/react'
import { motion } from 'framer-motion'
import {
    LayoutDashboard, Store, Settings, UserCircle, LogOut, Globe,
    ShoppingBag, ShieldCheck, BarChart3, Bell, Menu, X, Package, FileText, Sparkles, MessageCircle
} from 'lucide-react'
import { useState } from 'react'
import { CommandPalette } from '@/Components/ui/CommandPalette'
import { MobileBottomNav, sellerNavItems } from '@/Components/ui/MobileBottomNav'
import { ThemeToggle } from '@/Hooks/useTheme'

const navItems = [
    { icon: LayoutDashboard, label: 'Dashboard', href: '/dashboard' },
    { icon: Sparkles, label: 'Onboarding', href: '/dashboard/onboarding' },
    { icon: Package, label: 'Products', href: '/dashboard/products' },
    { icon: Globe, label: 'Orders', href: '/dashboard/orders' },
    { icon: ShoppingBag, label: 'Connected Shops', href: '/dashboard/shops' },
    { icon: Store, label: 'Storefront', href: '/dashboard/storefront' },
    { icon: FileText, label: 'Templates', href: '/dashboard/templates' },
    { icon: ShieldCheck, label: 'Delivery', href: '/dashboard/delivery' },
    { icon: BarChart3, label: 'Analytics', href: '/dashboard/analytics' },
    { icon: UserCircle, label: 'Profile', href: '/dashboard/profile' },
    { icon: MessageCircle, label: 'Help', href: '/dashboard/support' },
]

const commandItems = [
    { id: 'dashboard', label: 'Dashboard', description: 'Seller overview', icon: <LayoutDashboard className="w-4 h-4" />, href: '/dashboard', category: 'Navigation' },
    { id: 'products', label: 'Products', description: 'Manage products', icon: <Package className="w-4 h-4" />, href: '/dashboard/products', category: 'Navigation' },
    { id: 'orders', label: 'Orders', description: 'Order tracking', icon: <Globe className="w-4 h-4" />, href: '/dashboard/orders', category: 'Navigation' },
    { id: 'shops', label: 'Connected Shops', description: 'Shopee & Shopify', icon: <ShoppingBag className="w-4 h-4" />, href: '/dashboard/shops', category: 'Navigation' },
    { id: 'storefront', label: 'Storefront', description: 'Customize your store', icon: <Store className="w-4 h-4" />, href: '/dashboard/storefront', category: 'Navigation' },
    { id: 'delivery', label: 'Delivery Settings', description: 'Auto delivery config', icon: <ShieldCheck className="w-4 h-4" />, href: '/dashboard/delivery', category: 'Navigation' },
    { id: 'analytics', label: 'Analytics', description: 'Your stats', icon: <BarChart3 className="w-4 h-4" />, href: '/dashboard/analytics', category: 'Navigation' },
    { id: 'profile', label: 'Profile', description: 'Account settings', icon: <UserCircle className="w-4 h-4" />, href: '/dashboard/profile', category: 'Navigation' },
    { id: 'help', label: 'Help Center', description: 'Guides & FAQ', icon: <MessageCircle className="w-4 h-4" />, href: '/dashboard/support', category: 'Support' },
    { id: 'logout', label: 'Sign Out', description: 'Logout', icon: <LogOut className="w-4 h-4" />, href: '/logout', category: 'Account' },
]

export default function SellerLayout({ children }: { children: React.ReactNode }) {
    const { auth = { user: null }, flash = {}, url = '' } = usePage<{ auth?: { user?: { name: string } | null }, flash?: { success?: string }, url?: string }>().props
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

    const isActive = (href: string) => url === href || url.startsWith(href + '/')

    return (
        <div className="min-h-screen bg-[#f1f5f9] app-shell flex flex-col font-sans antialiased">
            {/* Sidebar (desktop) */}
            <aside className="hidden lg:flex fixed top-0 left-0 h-full w-64 z-40 bg-white border-r border-gray-100 shadow-[2px_0_20px_rgba(0,0,0,0.04)] flex-col">
                {/* Logo */}
                <Link href="/dashboard" className="flex items-center gap-2.5 px-5 py-5 border-b border-gray-100">
                    <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/25">
                        <Store className="w-4.5 h-4.5 text-white" />
                    </div>
                    <div>
                        <span className="text-sm font-semibold text-gray-900">REDEEM</span>
                        <p className="text-[10px] text-gray-400 font-medium">By Michigo Studio</p>
                    </div>
                </Link>

                {/* Navigation */}
                <nav className="flex-1 py-4 px-3 space-y-0.5 overflow-y-auto">
                    {navItems.map((item) => {
                        const active = isActive(item.href)
                        return (
                            <Link
                                key={item.href}
                                href={item.href}
                                className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 group ${
                                    active
                                        ? 'bg-blue-50 text-blue-600 shadow-sm'
                                        : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
                                }`}
                            >
                                <item.icon className={`w-5 h-5 flex-shrink-0 ${active ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'}`} />
                                {item.label}
                            </Link>
                        )
                    })}
                </nav>

                {/* User Footer */}
                <div className="border-t border-gray-100 p-4 flex items-center gap-3 bg-gray-50/50">
                    <div className="w-9 h-9 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-xs font-bold text-white flex-shrink-0 shadow-md shadow-blue-500/20">
                        {auth.user?.name?.charAt(0) || 'S'}
                    </div>
                    <div className="flex-1 min-w-0">
                        <p className="text-xs font-semibold text-gray-900 truncate">{auth.user?.name}</p>
                        <Link href="/logout" method="post" as="button" className="text-[11px] text-gray-400 hover:text-red-500 font-medium transition-colors">Sign out</Link>
                    </div>
                </div>
            </aside>

            {/* Main content */}
            <div className="flex-1 lg:ml-64 pb-16 lg:pb-0">
                {/* Header */}
                <header className="sticky top-0 z-30 bg-white/80 backdrop-blur-xl border-b border-gray-100 px-4 lg:px-6 py-3.5 flex items-center justify-between shadow-[0_1px_3px_rgba(0,0,0,0.03)]">
                    <div className="flex items-center gap-3">
                        <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="lg:hidden text-gray-400 hover:text-gray-600">
                            <Menu className="w-5 h-5" />
                        </button>
                        <p className="text-sm text-gray-500">
                            Welcome back, <span className="text-gray-900 font-semibold">{auth.user?.name}</span>
                        </p>
                    </div>
                    <div className="flex items-center gap-3">
                        <CommandPalette items={commandItems} placeholder="Search pages..." />
                        <ThemeToggle />
                        <button className="relative text-gray-400 hover:text-gray-600 transition-colors hidden sm:block">
                            <Bell className="w-4 h-4" />
                            <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-blue-500 rounded-full ring-2 ring-white" />
                        </button>
                        <Link href="/" className="text-xs text-gray-400 hover:text-blue-600 transition-colors flex items-center gap-1 hidden sm:flex font-medium">
                            <Globe className="w-3 h-3" /> View Site
                        </Link>
                    </div>
                </header>

                {/* Mobile menu overlay */}
                {mobileMenuOpen && (
                    <div className="lg:hidden fixed inset-0 z-50 bg-black/40 backdrop-blur-sm" onClick={() => setMobileMenuOpen(false)}>
                        <div className="w-72 h-full bg-white border-r border-gray-100 shadow-xl p-5" onClick={e => e.stopPropagation()}>
                            <div className="flex items-center justify-between mb-6">
                                <div className="flex items-center gap-2">
                                    <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                                        <Store className="w-4 h-4 text-white" />
                                    </div>
                                    <span className="text-sm font-semibold text-gray-900">Dashboard</span>
                                </div>
                                <button onClick={() => setMobileMenuOpen(false)} className="text-gray-400 hover:text-gray-600 p-1">
                                    <X className="w-5 h-5" />
                                </button>
                            </div>
                            {navItems.map((item) => {
                                const active = isActive(item.href)
                                return (
                                    <Link
                                        key={item.href}
                                        href={item.href}
                                        onClick={() => setMobileMenuOpen(false)}
                                        className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all mb-1 ${
                                            active ? 'bg-blue-50 text-blue-600' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
                                        }`}
                                    >
                                        <item.icon className={`w-5 h-5 ${active ? 'text-blue-500' : 'text-gray-400'}`} />
                                        {item.label}
                                    </Link>
                                )
                            })}
                        </div>
                    </div>
                )}

                {/* Flash message */}
                {flash.success && (
                    <motion.div
                        initial={{ opacity: 0, y: -12 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="mx-4 lg:mx-6 mt-4 p-3.5 bg-emerald-50 border border-emerald-100 rounded-xl text-emerald-700 text-sm font-medium flex items-center gap-2"
                    >
                        <div className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
                        {flash.success}
                    </motion.div>
                )}

                {/* Page content */}
                <motion.main
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
                    className="p-4 lg:p-6"
                >
                    {children}
                </motion.main>
            </div>

            {/* Mobile bottom nav */}
            <MobileBottomNav items={sellerNavItems} />
        </div>
    )
}