import { cn } from '@/lib/utils';
import { router } from '@inertiajs/react';

// ── Range selector ────────────────────────────────────────────────────────────

const RANGES = [30, 60, 90] as const;

export function RangeSelector({ days }: { days: number }) {
    return (
        <div className="pf-glass flex items-center gap-1 rounded-lg p-1">
            {RANGES.map((d) => (
                <button
                    key={d}
                    type="button"
                    onClick={() =>
                        router.get(
                            route('admin.analytics.index'),
                            { days: d },
                            { preserveState: true, preserveScroll: true },
                        )
                    }
                    className={cn(
                        'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                        d === days
                            ? 'bg-primary text-primary-foreground'
                            : 'text-muted-foreground hover:text-foreground',
                    )}
                >
                    {d}d
                </button>
            ))}
        </div>
    );
}

// ── Section wrapper ───────────────────────────────────────────────────────────

export function Section({
    title,
    icon: Icon,
    children,
}: {
    title: string;
    icon: React.ComponentType<{ className?: string }>;
    children: React.ReactNode;
}) {
    return (
        <div className="space-y-4">
            <div className="flex items-center gap-2">
                <Icon className="text-primary h-4 w-4" />
                <h3 className="text-foreground text-base font-semibold">
                    {title}
                </h3>
            </div>
            {children}
        </div>
    );
}

// ── Chart card ────────────────────────────────────────────────────────────────

export function ChartCard({
    title,
    sub,
    children,
    className,
}: {
    title: string;
    sub?: string;
    children: React.ReactNode;
    className?: string;
}) {
    return (
        <div className={cn('pf-glass p-5', className)}>
            <div className="mb-4">
                <p className="text-foreground text-sm font-semibold">{title}</p>
                {sub && <p className="text-muted-foreground text-xs">{sub}</p>}
            </div>
            {children}
        </div>
    );
}

// ── Horizontal bar ────────────────────────────────────────────────────────────

export function HBar({
    label,
    count,
    max,
    color = 'bg-primary',
}: {
    label: string;
    count: number;
    max: number;
    color?: string;
}) {
    const pct = max > 0 ? Math.round((count / max) * 100) : 0;
    return (
        <div className="flex items-center gap-3">
            <span className="text-muted-foreground w-24 shrink-0 truncate text-xs">
                {label}
            </span>
            <div className="bg-muted h-2 flex-1 overflow-hidden rounded-full">
                <div
                    className={`h-full rounded-full ${color} transition-all duration-500`}
                    style={{ width: `${pct}%` }}
                />
            </div>
            <span className="text-foreground/70 w-6 shrink-0 text-right text-xs tabular-nums">
                {count}
            </span>
        </div>
    );
}