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

import { SagaExportModal } from '@/components/saga-export-modal';
import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import { Separator } from '@/components/ui/separator';
import {
    ClientEfacturaStatusPanel,
    type ClientEfacturaStatusClient,
} from '@/features/clients/components/client-efactura-status-panel';
import type { ClientEntity } from '@/features/clients/types';
import { useCurrentUrl } from '@/hooks/use-current-url';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';

interface NavItem {
    label: string;
    href: string;
    icon: string;
}

interface ClientShowLayoutProps extends PropsWithChildren {
    client: Pick<ClientEntity, 'id' | 'name' | 'cif' | 'active'> & ClientEfacturaStatusClient;
}

export function ClientShowLayout({ client, children }: ClientShowLayoutProps) {
    const { t } = useI18n();
    const { isCurrentUrl } = useCurrentUrl();
    const [sagaExportOpen, setSagaExportOpen] = useState(false);

    const navItems: NavItem[] = [
        {
            label: t('clients.show.nav.overview'),
            href: `/admin/clients/${client.id}`,
            icon: 'solar:user-circle-bold-duotone',
        },
        {
            label: t('clients.show.nav.documents'),
            href: `/admin/clients/${client.id}/documents`,
            icon: 'solar:document-bold-duotone',
        },
        {
            label: t('clients.show.nav.financial_report'),
            href: `/admin/clients/${client.id}/financial-report`,
            icon: 'solar:chart-2-bold-duotone',
        },
    ];

    return (
        <div className="py-6">
            <div className="mb-6 flex items-start justify-between gap-4">
                <div>
                    <div className="flex items-center gap-3">
                        <h1 className="text-2xl font-semibold tracking-tight">{client.name}</h1>
                        {!client.active && (
                            <span className="rounded-full bg-destructive/10 px-2.5 py-0.5 text-xs font-medium text-destructive">
                                {t('clients.show.inactive')}
                            </span>
                        )}
                    </div>
                    {client.cif && (
                        <p className="mt-0.5 text-sm text-muted-foreground">CIF: {client.cif}</p>
                    )}
                </div>

                <div className="flex shrink-0 flex-wrap items-center gap-2">
                    <Button size="sm" variant="outline" onClick={() => setSagaExportOpen(true)}>
                        <Icon icon="solar:export-bold-duotone" className="size-4" />
                        {t('clients.show.saga_export.button')}
                    </Button>
                </div>
            </div>

            <SagaExportModal
                clientId={client.id}
                open={sagaExportOpen}
                onOpenChange={setSagaExportOpen}
            />

            <ClientEfacturaStatusPanel client={client} />

            <div className="flex flex-col lg:flex-row lg:space-x-12">
                <aside className="w-full max-w-xl lg:w-56">
                    <nav className="flex flex-col space-y-1" aria-label={t('clients.show.nav.aria_label')}>
                        {navItems.map((item) => (
                            <Button
                                key={item.href}
                                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">
                                    <Icon icon={item.icon} className="size-4 shrink-0" />
                                    {item.label}
                                </Link>
                            </Button>
                        ))}
                    </nav>
                </aside>

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

                <div className="flex-1 min-w-0">
                    {children}
                </div>
            </div>
        </div>
    );
}