import { Link, usePage } from '@inertiajs/react';
import {
    LayoutDashboard,
    LogOut,
    Store,
    Users,
    WalletCards,
    BadgeDollarSign,
} from 'lucide-react';

export default function ResellerLayout({ children }) {
    const { reseller, resellerUser } = usePage().props;

    const brandName =
        reseller?.branding?.brand_name ||
        reseller?.name ||
        'Reseller';

    return (
        <div className="min-h-screen bg-neutral-50 dark:bg-neutral-950">
            <aside className="fixed inset-y-0 left-0 hidden w-64 flex-col bg-neutral-950 lg:flex">
                <div className="border-b border-white/10 p-5">
                    <div className="flex items-center gap-3">
                        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-brand-600 text-white">
                            <Store className="h-5 w-5" />
                        </div>

                        <div>
                            <div className="font-semibold text-white">
                                {brandName}
                            </div>

                            <div className="text-xs text-white/50">
                                Reseller Panel
                            </div>
                        </div>
                    </div>
                </div>

                <nav className="flex-1 space-y-1 p-3">
                    <Link
                        href={route('reseller.dashboard')}
                        className="flex items-center gap-3 rounded-xl bg-brand-600 px-3 py-2.5 text-sm font-medium text-white"
                    >
                        <LayoutDashboard className="h-4 w-4" />
                        Dashboard
                    </Link>

                    <Link
                        href={route('reseller.wallet.index')}
                        className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-white/70 hover:bg-white/10 hover:text-white"
                    >
                        <WalletCards className="h-4 w-4" />
                        Wallet
                    </Link>

                    <Link
                        href={route('reseller.clients.index')}
                        className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-white/70 hover:bg-white/10 hover:text-white"
                    >
                        <Users className="h-4 w-4" />
                        Clients
                    </Link>

                    <Link
                        href={route('reseller.rates.index')}
                        className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm text-white/70 hover:bg-white/10 hover:text-white"
                    >
                        <BadgeDollarSign className="h-4 w-4" />
                        Rates
                    </Link>
                </nav>

                <div className="border-t border-white/10 p-3">
                    <div className="mb-3 px-3">
                        <div className="text-sm font-medium text-white">
                            {resellerUser?.name}
                        </div>

                        <div className="truncate text-xs text-white/50">
                            {resellerUser?.email}
                        </div>
                    </div>

                    <Link
                        href={route('reseller.logout')}
                        method="post"
                        as="button"
                        className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm text-white/70 hover:bg-white/10"
                    >
                        <LogOut className="h-4 w-4" />
                        Logout
                    </Link>
                </div>
            </aside>

            <div className="lg:pl-64">
                <header className="border-b border-neutral-200 bg-white px-5 py-4 dark:border-neutral-800 dark:bg-neutral-900">
                    <div className="flex items-center justify-between">
                        <div>
                            <div className="font-semibold text-neutral-900 dark:text-white">
                                {brandName}
                            </div>

                            {reseller?.branding?.tagline && (
                                <div className="text-xs text-neutral-500">
                                    {reseller.branding.tagline}
                                </div>
                            )}
                        </div>

                        <div className="text-sm text-neutral-500 lg:hidden">
                            {resellerUser?.name}
                        </div>
                    </div>
                </header>

                <main className="p-4 sm:p-6 lg:p-8">
                    {children}
                </main>
            </div>
        </div>
    );
}