import { Link, router, usePage } from '@inertiajs/react';
import {
    LayoutDashboard,
    UsersRound,
    Store,
    BadgeDollarSign,
    Settings,
    LogOut,
    Menu,
    X,
    ExternalLink,
    Globe2,
    UserCog,
    CreditCard,
    ChevronDown,
    Boxes,
} from 'lucide-react';
import { useState } from 'react';

// WHITE_LABEL_ADMIN_V3
const nav = [
    ['Dashboard', 'white-label.admin.dashboard', LayoutDashboard],
    ['Client Management', 'white-label.admin.clients.index', UsersRound],
    ['Resellers', 'white-label.admin.resellers.index', Store],
    ['Plans', 'white-label.admin.plans.index', Boxes],
    ['Website Management', 'white-label.admin.website.index', Globe2],
    ['Billing Defaults', 'reseller.rates.index', BadgeDollarSign],
    ['Wallet & Payments', 'white-label.admin.wallet.index', CreditCard],
    ['Admins', 'white-label.admin.settings.index', UserCog],
    ['Branding & Settings', 'white-label.admin.settings.index', Settings],
];

export default function WhiteLabelAdminLayout({
    title = 'Dashboard',
    owner,
    walletSummary,
    children,
}) {
    const [open, setOpen] = useState(false);
    const { branding = {}, whiteLabelUser = {} } = usePage().props;

    const brandName =
        branding?.app_name ||
        branding?.brand_name ||
        owner?.brand_name ||
        owner?.name ||
        'White-label Service';

    const current = window.location.pathname;

    const isActive = (name) => {
        try {
            const href = route(name);
            const pathname = new URL(
                href,
                window.location.origin
            ).pathname;

            if (name === 'white-label.admin.settings.index') {
                return current.startsWith('/reseller/admin/settings');
            }

            return current.startsWith(pathname);
        } catch {
            return false;
        }
    };

    const sidebar = (
        <div className="flex h-full flex-col bg-[#18191b] text-white">
            <div className="flex h-[74px] items-center border-b border-[#292a2d] px-5">
                <div className="min-w-0">
                    <div className="truncate text-[20px] font-bold tracking-tight text-white">
                        {brandName}
                    </div>
                    <div className="mt-0.5 text-[11px] font-medium uppercase tracking-[0.16em] text-[#6f7378]">
                        White-label Admin V3
                    </div>
                </div>
            </div>

            <nav className="flex-1 overflow-y-auto px-2.5 py-3">
                <div className="space-y-1">
                    {nav.map(([label, name, Icon], index) => {
                        const active = isActive(name);

                        return (
                            <Link
                                key={`${name}-${index}`}
                                href={route(name)}
                                onClick={() => setOpen(false)}
                                className={[
                                    'group flex min-h-[46px] items-center gap-3 rounded-[9px] px-4 text-[15px] font-semibold transition',
                                    active
                                        ? 'bg-[#4d7f3a] text-white shadow-[0_8px_24px_rgba(77,127,58,.18)]'
                                        : 'text-[#c7c9cd] hover:bg-[#242528] hover:text-white',
                                ].join(' ')}
                            >
                                <Icon
                                    className={[
                                        'h-[20px] w-[20px] shrink-0',
                                        active
                                            ? 'text-white'
                                            : 'text-[#b8bbc0] group-hover:text-white',
                                    ].join(' ')}
                                    strokeWidth={1.9}
                                />
                                <span className="truncate">{label}</span>
                            </Link>
                        );
                    })}
                </div>
            </nav>

            <div className="border-t border-[#2a2b2e] px-4 py-4">
                <div className="mb-4 flex items-center gap-3">
                    <div className="grid h-10 w-10 place-items-center rounded-full bg-[#22351e] text-sm font-bold text-[#8bc36d]">
                        {(whiteLabelUser?.name || 'A').charAt(0).toUpperCase()}
                    </div>
                    <div className="min-w-0">
                        <div className="truncate text-sm font-semibold text-white">
                            {whiteLabelUser?.name || 'Admin'}
                        </div>
                        <div className="truncate text-xs text-[#85898f]">
                            {whiteLabelUser?.email}
                        </div>
                    </div>
                </div>

                <button
                    type="button"
                    onClick={() => router.post(route('reseller.logout'))}
                    className="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-sm font-medium text-[#b7bac0] transition hover:bg-[#242528] hover:text-white"
                >
                    <LogOut className="h-[18px] w-[18px]" />
                    Log out
                </button>

                <div className="mt-5 text-center text-[11px] text-[#5d6066]">
                    White-label portal
                </div>
            </div>
        </div>
    );

    return (
        <div className="dark min-h-screen bg-[#090a0b] text-[#f3f3f4]">
            <aside className="fixed inset-y-0 left-0 z-40 hidden w-[330px] border-r border-[#252629] lg:block">
                {sidebar}
            </aside>

            {open && (
                <div className="fixed inset-0 z-50 lg:hidden">
                    <button
                        aria-label="Close menu"
                        className="absolute inset-0 bg-black/70"
                        onClick={() => setOpen(false)}
                    />
                    <aside className="relative h-full w-[310px] border-r border-[#252629] shadow-2xl">
                        <button
                            className="absolute right-3 top-3 z-10 rounded-lg bg-white/10 p-2 text-white"
                            onClick={() => setOpen(false)}
                        >
                            <X className="h-4 w-4" />
                        </button>
                        {sidebar}
                    </aside>
                </div>
            )}

            <div className="lg:pl-[330px]">
                <header className="sticky top-0 z-30 flex h-[74px] items-center border-b border-[#28292c] bg-[#151618]/95 px-4 backdrop-blur sm:px-5">
                    <div className="flex w-full items-center justify-between gap-4">
                        <div className="flex min-w-0 items-center gap-3">
                            <button
                                className="rounded-lg border border-[#333438] p-2 text-white lg:hidden"
                                onClick={() => setOpen(true)}
                            >
                                <Menu className="h-4 w-4" />
                            </button>

                            <h1 className="truncate text-[16px] font-semibold text-[#e6e7e9]">
                                {title}
                            </h1>
                        </div>

                        <div className="flex items-center gap-1 sm:gap-2">
                            <a
                                href="/"
                                target="_blank"
                                rel="noreferrer"
                                className="hidden items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-[#9fa3a9] transition hover:bg-[#222326] hover:text-white sm:flex"
                            >
                                <ExternalLink className="h-4 w-4" />
                                Visit Website
                            </a>

                            <div className="hidden items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-[#9fa3a9] md:flex">
                                <Globe2 className="h-4 w-4" />
                                English
                                <ChevronDown className="h-3.5 w-3.5" />
                            </div>

                            <div className="ml-1 flex items-center gap-2 rounded-lg px-2 py-1.5">
                                <div className="grid h-8 w-8 place-items-center rounded-full bg-[#22351e] text-xs font-bold text-[#8bc36d]">
                                    {(whiteLabelUser?.name || 'A').charAt(0).toUpperCase()}
                                </div>
                                <div className="hidden text-sm font-medium text-[#d8d9dc] sm:block">
                                    {whiteLabelUser?.name || 'Admin'}
                                </div>
                                <ChevronDown className="hidden h-4 w-4 text-[#757980] sm:block" />
                            </div>
                        </div>
                    </div>
                </header>

                <main className="min-h-[calc(100vh-74px)] bg-[#090a0b] p-4 sm:p-6 lg:p-10">
                    {children}
                </main>
            </div>
        </div>
    );
}

export function FlashMessages() {
    const { flash = {}, errors = {} } = usePage().props;
    const firstError = Object.values(errors || {})[0];

    if (!flash.success && !flash.error && !firstError) {
        return null;
    }

    return (
        <div className="mb-6 space-y-2">
            {flash.success && (
                <div className="rounded-xl border border-[#33562a] bg-[#172114] px-4 py-3 text-sm text-[#9ed27e]">
                    {flash.success}
                </div>
            )}
            {(flash.error || firstError) && (
                <div className="rounded-xl border border-red-900/70 bg-red-950/40 px-4 py-3 text-sm text-red-300">
                    {flash.error || firstError}
                </div>
            )}
        </div>
    );
}

export const fieldClass =
    'w-full rounded-[9px] border border-[#393b40] bg-[#17181a] px-3 py-2.5 text-sm text-[#f0f1f2] outline-none transition placeholder:text-[#71757c] focus:border-[#5f8f49] focus:ring-2 focus:ring-[#5f8f49]/15';

export const cardClass =
    'rounded-[16px] border border-[#303136] bg-[#1d1e20] p-5 shadow-[0_1px_0_rgba(255,255,255,.02)]';