'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertTriangle, Loader2 } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/Card.js';
import { StatusBadge } from '../ui/StatusBadge.js';
export function gradeMeta(grade) {
    switch (grade) {
        case 'good':
            return { label: 'Good', text: 'text-success', bg: 'bg-success/10', dot: 'bg-success' };
        case 'fair':
            return { label: 'Fair', text: 'text-warning', bg: 'bg-warning/10', dot: 'bg-warning' };
        case 'poor':
            return {
                label: 'Poor',
                text: 'text-destructive',
                bg: 'bg-destructive/10',
                dot: 'bg-destructive',
            };
        default:
            return {
                label: 'Critical',
                text: 'text-destructive',
                bg: 'bg-destructive/15',
                dot: 'bg-destructive',
            };
    }
}
/** Grade band from a numeric 0-100 score. */
export function gradeFromScore(score) {
    if (score >= 80)
        return 'good';
    if (score >= 60)
        return 'fair';
    if (score >= 1)
        return 'poor';
    return 'critical';
}
export function severityMeta(severity) {
    switch (severity) {
        case 'critical':
            return {
                label: 'Critical',
                text: 'text-destructive',
                bg: 'bg-destructive/10',
                dot: 'bg-destructive',
            };
        case 'warning':
            return { label: 'Warning', text: 'text-warning', bg: 'bg-warning/10', dot: 'bg-warning' };
        default:
            return {
                label: 'Info',
                text: 'text-muted-foreground',
                bg: 'bg-muted',
                dot: 'bg-muted-foreground',
            };
    }
}
// ─── Badges + bars ───────────────────────────────────────────────────
const SEO_TONE = {
    good: 'success',
    fair: 'warning',
    poor: 'danger',
    critical: 'danger',
    neutral: 'neutral',
};
export function SeoStatusBadge({ label, tone, }) {
    return _jsx(StatusBadge, { tone: SEO_TONE[tone], children: label });
}
/** A horizontal score bar (0-100), coloured by grade. */
export function SeoScoreBar({ score, className = '' }) {
    const grade = gradeFromScore(score);
    const fill = grade === 'good' ? 'bg-success' : grade === 'fair' ? 'bg-warning' : 'bg-destructive';
    const clamped = Math.max(0, Math.min(100, Math.round(score)));
    return (_jsx("div", { className: `bg-muted h-2 w-full overflow-hidden rounded-full ${className}`, role: "progressbar", "aria-label": "SEO score", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuetext": `${clamped} out of 100`, children: _jsx("div", { className: `h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none ${fill}`, style: { width: `${Math.max(0, Math.min(100, score))}%` } }) }));
}
export function ScorePill({ score }) {
    const meta = gradeMeta(gradeFromScore(score));
    return (_jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${meta.bg} ${meta.text}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${meta.dot}`, "aria-hidden": true }), score] }));
}
// ─── Layout cards + states ───────────────────────────────────────────
export function SectionCard({ title, description, action, children, className = '', }) {
    return (_jsxs(Card, { padding: "none", className: className, role: "region", children: [(title || action) && (_jsxs(CardHeader, { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [title && _jsx(CardTitle, { children: title }), description && _jsx(CardDescription, { children: description })] }), action] })), _jsx(CardContent, { className: title || action ? '' : 'pt-6!', children: children })] }));
}
export function SeoLoading({ label = 'Loading…' }) {
    return (_jsxs("div", { className: "flex min-h-32 items-center justify-center py-12", role: "status", "aria-live": "polite", children: [_jsx(Loader2, { className: "text-muted-foreground h-6 w-6 animate-spin", "aria-hidden": true }), _jsx("span", { className: "sr-only", children: label })] }));
}
export function SeoEmptyState({ icon, title, description, action, }) {
    return (_jsxs("div", { className: "border-border flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-12 text-center", children: [icon && (_jsx("div", { className: "text-muted-foreground mb-3", "aria-hidden": true, children: icon })), _jsx("h3", { className: "text-foreground text-base font-medium", children: title }), description && _jsx("p", { className: "text-muted-foreground mt-1 max-w-md text-sm", children: description }), action && _jsx("div", { className: "mt-4", children: action })] }));
}
export function SeoErrorState({ message, onRetry }) {
    return (_jsxs("div", { className: "border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-4", role: "alert", children: [_jsx(AlertTriangle, { className: "text-destructive h-5 w-5 shrink-0", "aria-hidden": true }), _jsx("span", { className: "text-destructive flex-1 text-sm", children: message }), onRetry && (_jsx("button", { onClick: onRetry, className: "border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm transition-colors", children: "Retry" }))] }));
}
// ─── Button helpers (token-only) ─────────────────────────────────────
export const btnPrimary = 'inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60';
export const btnSecondary = 'inline-flex items-center justify-center gap-2 rounded-md border border-border bg-card px-4 py-2 text-base font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60';
export const btnGhostIcon = 'inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
//# sourceMappingURL=primitives.js.map