import { Link, usePage } from '@inertiajs/react';
import type { PropsWithChildren } from 'react';

import { ThemeToggle } from '@/components/theme/theme-toggle';
import { FlashMessage } from '@/components/ui/flash-message';
import { cn } from '@/lib/utils';
import type { AppPageProps } from '@/types';

type NavItem = {
    href: string;
    label: string;
    icon: IconName;
};

type NavGroup = {
    label: string;
    icon: IconName;
    items: NavItem[];
};

type IconName =
    | 'api'
    | 'article'
    | 'attributes'
    | 'blog'
    | 'brand'
    | 'category'
    | 'customer'
    | 'dashboard'
    | 'engine'
    | 'fuel'
    | 'gearbox'
    | 'generation'
    | 'manufacturer'
    | 'model'
    | 'orders'
    | 'product'
    | 'storefront'
    | 'vehicle'
    | 'webhook';

const navGroups: NavGroup[] = [
    {
        label: 'Overview',
        icon: 'dashboard',
        items: [
            { href: '/admin/dashboard', label: 'Dashboard', icon: 'dashboard' },
        ],
    },
    {
        label: 'Catalog',
        icon: 'product',
        items: [
            {
                href: '/admin/categories',
                label: 'Categories',
                icon: 'category',
            },
            { href: '/admin/products', label: 'Products', icon: 'product' },
            { href: '/admin/orders', label: 'Orders', icon: 'orders' },
            { href: '/admin/customers', label: 'Customers', icon: 'customer' },
        ],
    },
    {
        label: 'Vehicles',
        icon: 'vehicle',
        items: [
            { href: '/admin/vehicle-makes', label: 'Brands', icon: 'brand' },
            {
                href: '/admin/manufacturers',
                label: 'Manufacturers',
                icon: 'manufacturer',
            },
            {
                href: '/admin/vehicle-generations',
                label: 'Generations',
                icon: 'generation',
            },
            { href: '/admin/vehicle-models', label: 'Models', icon: 'model' },
            {
                href: '/admin/vehicle-engines',
                label: 'Engines',
                icon: 'engine',
            },
            {
                href: '/admin/vehicle-gearboxes',
                label: 'Gearboxes',
                icon: 'gearbox',
            },
            { href: '/admin/fuel-types', label: 'Fuel Types', icon: 'fuel' },
            {
                href: '/admin/body-styles',
                label: 'Body Styles',
                icon: 'vehicle',
            },
            {
                href: '/admin/drive-trains',
                label: 'Drive Trains',
                icon: 'engine',
            },
            {
                href: '/admin/vehicle-variants',
                label: 'Vehicle Variants',
                icon: 'vehicle',
            },
        ],
    },
    {
        label: 'Metadata',
        icon: 'attributes',
        items: [
            {
                href: '/admin/attribute-groups',
                label: 'Attribute Groups',
                icon: 'attributes',
            },
            {
                href: '/admin/attributes',
                label: 'Attributes',
                icon: 'attributes',
            },
        ],
    },
    {
        label: 'Blog',
        icon: 'blog',
        items: [
            {
                href: '/admin/blog-articles',
                label: 'Articles',
                icon: 'article',
            },
            {
                href: '/admin/blog-categories',
                label: 'Categories',
                icon: 'category',
            },
            { href: '/admin/blog-tags', label: 'Tags', icon: 'attributes' },
            { href: '/admin/ai-content', label: 'AI Content', icon: 'article' },
        ],
    },
    {
        label: 'Webhooks & APIs',
        icon: 'webhook',
        items: [
            { href: '/admin/api-tokens', label: 'API Tokens', icon: 'api' },
            {
                href: '/admin/webhook-endpoints',
                label: 'Webhook Endpoints',
                icon: 'webhook',
            },
            {
                href: '/admin/webhook-deliveries',
                label: 'Webhook Logs',
                icon: 'webhook',
            },
        ],
    },
    {
        label: 'Storefront',
        icon: 'storefront',
        items: [{ href: '/', label: 'Public Storefront', icon: 'storefront' }],
    },
];

export function AdminLayout({ children }: PropsWithChildren) {
    const { props, url } = usePage<AppPageProps>();
    const { auth } = props;

    const isActive = (href: string): boolean => {
        if (href === '/') {
            return url === '/';
        }

        return url.startsWith(href);
    };

    return (
        <div className="min-h-screen bg-background text-main">
            <div className="mx-auto grid min-h-screen max-w-7xl grid-cols-1 gap-3 p-3 sm:gap-4 sm:p-4 lg:grid-cols-[240px_1fr]">
                <aside className="relative overflow-hidden rounded-2xl border border-border bg-surface p-5 text-main shadow-lg shadow-primary/5">
                    <div className="admin-accent-rail absolute inset-x-0 top-0 h-1" />
                    <p className="text-lg font-semibold">Parts Admin</p>
                    <p className="mt-1 text-xs text-muted">
                        Catalog Operations
                    </p>

                    <nav className="mt-4 flex gap-3 overflow-x-auto pb-1 lg:mt-6 lg:block lg:space-y-5 lg:overflow-visible lg:pb-0">
                        {navGroups.map((group) => (
                            <div
                                key={group.label}
                                className="min-w-48 lg:min-w-0"
                            >
                                <div className="mb-2 flex items-center gap-2 px-2 text-xs font-semibold tracking-wide text-muted uppercase">
                                    <AdminIcon name={group.icon} />
                                    {group.label}
                                </div>
                                <div className="space-y-1">
                                    {group.items.map((item) => (
                                        <Link
                                            key={item.href}
                                            href={item.href}
                                            className={cn(
                                                'flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
                                                isActive(item.href)
                                                    ? 'bg-primary text-white'
                                                    : 'text-muted hover:bg-card hover:text-main',
                                            )}
                                        >
                                            <AdminIcon name={item.icon} />
                                            <span>{item.label}</span>
                                        </Link>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </nav>
                </aside>

                <div className="space-y-4">
                    <header className="relative overflow-hidden rounded-2xl border border-border bg-card px-4 py-4 shadow-sm shadow-primary/5 sm:px-5">
                        <div className="admin-accent-rail absolute inset-x-0 top-0 h-1" />
                        <div>
                            <p className="text-sm text-muted">Logged in as</p>
                            <p className="font-medium text-main">
                                {auth.user?.name || 'Unknown User'}
                            </p>
                        </div>
                        <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center">
                            <ThemeToggle />
                            <Link
                                href="/admin/logout"
                                method="post"
                                as="button"
                                className="w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover sm:w-auto"
                            >
                                Logout
                            </Link>
                        </div>
                    </header>

                    <FlashMessage />

                    <section className="relative overflow-hidden rounded-2xl border border-border bg-card p-4 shadow-sm shadow-primary/5 sm:p-5">
                        <div className="admin-accent-rail absolute inset-x-0 top-0 h-1" />
                        {children}
                    </section>
                </div>
            </div>
        </div>
    );
}

function AdminIcon({ name }: { name: IconName }) {
    const common = {
        className: 'h-4 w-4 shrink-0',
        fill: 'none',
        stroke: 'currentColor',
        strokeLinecap: 'round' as const,
        strokeLinejoin: 'round' as const,
        strokeWidth: 2,
        viewBox: '0 0 24 24',
        'aria-hidden': true,
    };

    if (name === 'dashboard') {
        return (
            <svg {...common}>
                <path d="M4 13h7V4H4v9Z" />
                <path d="M13 20h7V4h-7v16Z" />
                <path d="M4 20h7v-5H4v5Z" />
            </svg>
        );
    }

    if (name === 'vehicle') {
        return (
            <svg {...common}>
                <path d="M5 16h14l-1.5-5.5A3 3 0 0 0 14.6 8H9.4a3 3 0 0 0-2.9 2.5L5 16Z" />
                <path d="M7 16v2" />
                <path d="M17 16v2" />
                <path d="M8 18h.01" />
                <path d="M16 18h.01" />
            </svg>
        );
    }

    if (name === 'brand') {
        return (
            <svg {...common}>
                <path d="M12 3 4 7v10l8 4 8-4V7l-8-4Z" />
                <path d="m4 7 8 4 8-4" />
                <path d="M12 11v10" />
            </svg>
        );
    }

    if (name === 'manufacturer') {
        return (
            <svg {...common}>
                <path d="M5 20V8l7-4 7 4v12" />
                <path d="M8 20v-7h8v7" />
                <path d="M9 8h.01" />
                <path d="M12 8h.01" />
                <path d="M15 8h.01" />
            </svg>
        );
    }

    if (name === 'generation') {
        return (
            <svg {...common}>
                <path d="M4 6h16" />
                <path d="M7 12h10" />
                <path d="M10 18h4" />
            </svg>
        );
    }

    if (name === 'model') {
        return (
            <svg {...common}>
                <path d="M5 5h14v14H5z" />
                <path d="M9 9h6" />
                <path d="M9 13h6" />
            </svg>
        );
    }

    if (name === 'engine') {
        return (
            <svg {...common}>
                <path d="M7 8h8l3 3v5H7V8Z" />
                <path d="M10 8V5" />
                <path d="M13 8V5" />
                <path d="M4 12h3" />
                <path d="M18 13h2" />
                <path d="M10 16v3" />
                <path d="M15 16v3" />
            </svg>
        );
    }

    if (name === 'gearbox') {
        return (
            <svg {...common}>
                <path d="M6 7h12v10H6z" />
                <path d="M9 7V4" />
                <path d="M15 7V4" />
                <path d="M9 17v3" />
                <path d="M15 17v3" />
                <path d="M10 12h4" />
            </svg>
        );
    }

    if (name === 'fuel') {
        return (
            <svg {...common}>
                <path d="M7 3h7a2 2 0 0 1 2 2v16H5V5a2 2 0 0 1 2-2Z" />
                <path d="M8 8h5" />
                <path d="M16 7h2l1 2v8a2 2 0 0 0 2 2" />
            </svg>
        );
    }

    if (name === 'category') {
        return (
            <svg {...common}>
                <path d="M4 5h7v7H4z" />
                <path d="M13 5h7v7h-7z" />
                <path d="M4 14h7v5H4z" />
                <path d="M13 14h7v5h-7z" />
            </svg>
        );
    }

    if (name === 'product') {
        return (
            <svg {...common}>
                <path d="M12 3 4 7v10l8 4 8-4V7l-8-4Z" />
                <path d="M12 11 4 7" />
                <path d="m12 11 8-4" />
                <path d="M12 11v10" />
            </svg>
        );
    }

    if (name === 'orders') {
        return (
            <svg {...common}>
                <path d="M6 3h12v18H6z" />
                <path d="M9 7h6" />
                <path d="M9 11h6" />
                <path d="M9 15h4" />
            </svg>
        );
    }

    if (name === 'customer') {
        return (
            <svg {...common}>
                <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
                <path d="M4 21a8 8 0 0 1 16 0" />
            </svg>
        );
    }

    if (name === 'attributes') {
        return (
            <svg {...common}>
                <path d="M4 7h16" />
                <path d="M4 12h16" />
                <path d="M4 17h16" />
                <path d="M8 5v4" />
                <path d="M16 10v4" />
                <path d="M11 15v4" />
            </svg>
        );
    }

    if (name === 'blog' || name === 'article') {
        return (
            <svg {...common}>
                <path d="M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 0-3 3V4Z" />
                <path d="M8 8h7" />
                <path d="M8 12h6" />
            </svg>
        );
    }

    if (name === 'api') {
        return (
            <svg {...common}>
                <path d="M8 9 5 12l3 3" />
                <path d="m16 9 3 3-3 3" />
                <path d="m14 5-4 14" />
            </svg>
        );
    }

    if (name === 'webhook') {
        return (
            <svg {...common}>
                <path d="M8 8a4 4 0 1 1 6.5 3.1" />
                <path d="M16 16a4 4 0 1 1-6.5-3.1" />
                <path d="M12 12h.01" />
            </svg>
        );
    }

    return (
        <svg {...common}>
            <path d="M4 5h16v14H4z" />
            <path d="M8 9h8" />
            <path d="M8 13h6" />
        </svg>
    );
}