import { Link } from '@inertiajs/react';
import type { PropsWithChildren } from 'react';
import { useMemo } from 'react';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import { Separator } from '@/components/ui/separator';
import { useAuthorization } from '@/hooks/use-authorization';
import { useCurrentUrl } from '@/hooks/use-current-url';
import { useI18n } from '@/hooks/use-i18n';
import { cn, toUrl } from '@/lib/utils';
import { edit } from '@/routes/profile';
import { edit as editSecurity } from '@/routes/security';
import type { NavItem } from '@/types';

const adminSettingsHrefs = [
    { href: '/settings/chart-of-accounts' as const, icon: 'solar:bill-list-bold-duotone' },
    { href: '/settings/vat-rates' as const, icon: 'solar:calculator-minimalistic-bold-duotone' },
    { href: '/settings/currencies' as const, icon: 'solar:wallet-money-bold-duotone' },
    {
        href: '/settings/accounting-document-types' as const,
        icon: 'solar:document-text-bold-duotone',
    },
    {
        href: '/settings/mailbox-import' as const,
        icon: 'solar:letter-bold-duotone',
    },
];

export default function SettingsLayout({ children }: PropsWithChildren) {
    const { t } = useI18n();
    const { isCurrentOrParentUrl, isCurrentUrl } = useCurrentUrl();
    const { hasRole } = useAuthorization();
    const isAdmin = hasRole('admin');

    const sidebarNavItems: NavItem[] = useMemo(
        () => [
            {
                title: t('settings.layout.nav.profile'),
                href: edit(),
                icon: 'solar:user-circle-bold-duotone',
            },
            {
                title: t('settings.layout.nav.security'),
                href: editSecurity(),
                icon: 'solar:shield-keyhole-minimalistic-bold-duotone',
            },
        ],
        [t],
    );

    const adminSettingsNavItems: NavItem[] = useMemo(
        () => [
            {
                title: t('settings.layout.admin.chart_of_accounts'),
                href: adminSettingsHrefs[0].href,
                icon: adminSettingsHrefs[0].icon,
            },
            {
                title: t('settings.layout.admin.vat_rates'),
                href: adminSettingsHrefs[1].href,
                icon: adminSettingsHrefs[1].icon,
            },
            {
                title: t('settings.layout.admin.currencies'),
                href: adminSettingsHrefs[2].href,
                icon: adminSettingsHrefs[2].icon,
            },
            {
                title: t('settings.layout.admin.accounting_document_types'),
                href: adminSettingsHrefs[3].href,
                icon: adminSettingsHrefs[3].icon,
            },
            {
                title: t('settings.layout.admin.mailbox_import'),
                href: adminSettingsHrefs[4].href,
                icon: adminSettingsHrefs[4].icon,
            },
        ],
        [t],
    );

    return (
        <div className=" py-6">

            <div className="flex flex-col lg:flex-row lg:space-x-8">
                <aside className="w-full max-w-xl lg:w-56">
                    <nav
                        className="flex flex-col space-y-1 space-x-0"
                        aria-label={t('settings.layout.nav_aria')}
                    >
                        {sidebarNavItems.map((item, index) => (
                            <Button
                                key={`${toUrl(item.href)}-${index}`}
                                size="sm"
                                variant="ghost"
                                asChild
                                className={cn('w-full justify-start', {
                                    'bg-muted': isCurrentOrParentUrl(item.href),
                                })}
                            >
                                <Link href={item.href} className="flex items-center gap-2">
                                    {item.icon ? <Icon icon={item.icon} className="h-4 w-4 shrink-0" /> : null}
                                    {item.title}
                                </Link>
                            </Button>
                        ))}

                        {isAdmin ? (
                            <>
                                <Separator className="my-3" />
                                <p className="text-muted-foreground mb-2 px-2 text-xs font-medium tracking-wide uppercase">
                                    {t('settings.layout.admin.section')}
                                </p>
                                {adminSettingsNavItems.map((item, index) => (
                                    <Button
                                        key={`admin-${toUrl(item.href)}-${index}`}
                                        size="sm"
                                        variant="ghost"
                                        asChild
                                        className={cn('w-full justify-start', {
                                            'bg-muted': isCurrentUrl(item.href),
                                        })}
                                    >
                                        <Link href={item.href} className="flex items-center gap-2">
                                            {item.icon ? <Icon icon={item.icon} className="h-4 w-4 shrink-0" /> : null}
                                            {item.title}
                                        </Link>
                                    </Button>
                                ))}
                            </>
                        ) : null}
                    </nav>
                </aside>

                <Separator className="my-6 lg:hidden" />

                <div className="flex-1 md:w-full">
                    <section className="w-full space-y-12">
                        {children}
                    </section>
                </div>
            </div>
        </div>
    );
}