'use client';

/**
 * Shared primitive UI components used by the playground panels
 * (Request, Response) in both the slide-in and mobile-sheet surfaces.
 * Keep this file free of any business logic or context reads.
 */

import { ChevronRight } from 'lucide-react';
import React from 'react';

import { cn } from '@djangocfg/ui-core/lib';

// ─── Style helpers ────────────────────────────────────────────────────────────

const METHOD_STYLES: Record<string, string> = {
    GET:    'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25',
    POST:   'bg-blue-500/10    text-blue-600    dark:text-blue-400    border-blue-500/25',
    PUT:    'bg-amber-500/10   text-amber-600   dark:text-amber-400   border-amber-500/25',
    PATCH:  'bg-orange-500/10  text-orange-600  dark:text-orange-400  border-orange-500/25',
    DELETE: 'bg-red-500/10     text-red-600     dark:text-red-400     border-red-500/25',
} as const;

const METHOD_FALLBACK = 'bg-muted text-muted-foreground border-border';

export function getMethodStyle(method: string): string {
    return METHOD_STYLES[method.toUpperCase()] ?? METHOD_FALLBACK;
}

export function getStatusStyle(status: number): string {
    if (status >= 500) return 'bg-red-500/10 text-red-500 dark:text-red-400 border-red-500/25';
    if (status >= 400) return 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/25';
    if (status >= 300) return 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25';
    return 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25';
}

// ``relativePath`` lives in utils/url.ts now — re-exported here so every
// component that used to import it from ``./ui`` keeps working.
export { relativePath } from '../../utils/url';

// ─── Atoms ────────────────────────────────────────────────────────────────────

export function MethodBadge({ method }: { method: string }) {
    return (
        <span className={cn(
            'inline-flex shrink-0 items-center rounded border px-1.5 py-px',
            'font-mono text-[10px] font-bold uppercase tracking-wider leading-none',
            getMethodStyle(method),
        )}>
            {method}
        </span>
    );
}

export function StatusBadge({ status }: { status: number }) {
    return (
        <span className={cn(
            'inline-flex items-center rounded border px-1.5 py-px',
            'font-mono text-[11px] font-bold leading-none',
            getStatusStyle(status),
        )}>
            {status}
        </span>
    );
}

export function SectionLabel({ children }: { children: React.ReactNode }) {
    return (
        <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 select-none">
            {children}
        </p>
    );
}

export function Panel({ children, className }: { children: React.ReactNode; className?: string }) {
    return (
        <div className={cn('flex flex-col min-h-0 overflow-hidden', className)}>
            {children}
        </div>
    );
}

export function ScrollArea({ children, className }: { children: React.ReactNode; className?: string }) {
    return (
        <div className={cn('flex-1 overflow-y-auto min-h-0', className)}>
            {children}
        </div>
    );
}

export function PanelHeader({ title }: { title: string }) {
    return (
        <div className="shrink-0 border-b px-4 h-10 flex items-center">
            <span className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/50">
                {title}
            </span>
        </div>
    );
}

export function EmptyState({
    icon: Icon,
    text,
    className,
}: {
    icon: React.ElementType;
    text: string;
    className?: string;
}) {
    return (
        <div
            className={cn(
                'flex flex-col items-center justify-center h-full gap-3 px-6 text-center',
                className,
            )}
        >
            <Icon className="h-7 w-7 text-muted-foreground/25" />
            <p className="text-xs text-muted-foreground">{text}</p>
        </div>
    );
}

export function CollapsibleSection({
    label,
    action,
    children,
    defaultOpen = false,
}: {
    label: React.ReactNode;
    action?: React.ReactNode;
    children: React.ReactNode;
    defaultOpen?: boolean;
}) {
    const [open, setOpen] = React.useState(defaultOpen);
    return (
        <div className="space-y-0">
            <div className="flex items-center justify-between">
                <button
                    type="button"
                    onClick={() => setOpen((v) => !v)}
                    className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60 hover:text-muted-foreground transition-colors py-1"
                >
                    <ChevronRight className={cn('h-3 w-3 transition-transform', open && 'rotate-90')} />
                    {label}
                </button>
                {action && <div className="shrink-0">{action}</div>}
            </div>
            {open && <div>{children}</div>}
        </div>
    );
}
