import { Badge } from '@/Components/ui/badge';
import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';

export function PageHeader({ title, description, actions }: { title: string; description?: ReactNode; actions?: ReactNode }) {
    return (
        <div className="mb-6 flex flex-wrap items-end justify-between gap-3">
            <div>
                <h1 className="text-h1 !text-[1.75rem]">{title}</h1>
                {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
            </div>
            {actions && <div className="flex items-center gap-2">{actions}</div>}
        </div>
    );
}

export function StatCard({ label, value, hint, icon: Icon, href }: { label: string; value: ReactNode; hint?: ReactNode; icon: LucideIcon; href?: string }) {
    const body = (
        <div className="rounded-2xl border border-border bg-card/60 p-5 shadow-soft transition hover:border-foreground/15">
            <div className="flex items-center justify-between text-muted-foreground"><span className="text-overline">{label}</span><Icon className="size-4" /></div>
            <p className="mt-3 text-3xl font-semibold tracking-tight tabular-nums">{value}</p>
            {hint && <p className="text-caption mt-1">{hint}</p>}
        </div>
    );
    return href ? <Link href={href} className="block">{body}</Link> : body;
}

const MAP: Record<string, 'success' | 'accent' | 'default' | 'outline' | 'warning' | 'danger'> = {
    published: 'success', upcoming: 'accent', draft: 'default', archived: 'outline', pending: 'warning', hidden: 'danger', admin: 'accent', user: 'outline',
};
export const StatusBadge = ({ value }: { value: string }) => <Badge variant={MAP[value] ?? 'default'} className="capitalize">{value}</Badge>;

export function Tabs({ items, className }: { items: { label: string; href: string; active: boolean; count?: number }[]; className?: string }) {
    return (
        <nav className={cn('mb-4 flex gap-1 overflow-x-auto border-b border-border', className)} aria-label="Filter">
            {items.map((t) => (
                <Link key={t.label} href={t.href} preserveScroll preserveState aria-current={t.active ? 'page' : undefined} className={cn('-mb-px whitespace-nowrap border-b-2 px-3 py-2 text-sm transition', t.active ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground')}>
                    {t.label}{t.count !== undefined && <span className="ml-1.5 text-xs text-muted-foreground tabular-nums">{t.count}</span>}
                </Link>
            ))}
        </nav>
    );
}

export function Card({ title, description, children, className }: { title?: string; description?: string; children: ReactNode; className?: string }) {
    return (
        <section className={cn('rounded-2xl border border-border bg-card/60 p-5 shadow-soft', className)}>
            {title && <h2 className="text-h3">{title}</h2>}
            {description && <p className="mt-0.5 text-sm text-muted-foreground">{description}</p>}
            <div className={cn(title && 'mt-4')}>{children}</div>
        </section>
    );
}