'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { ClipboardCheck, Clock, CheckCircle2 } from 'lucide-react';
import { fetchSeoIssues, fetchSeoAuditRuns, } from '../../lib/seo-service.js';
import { SectionCard, SeoLoading, SeoEmptyState, SeoErrorState, severityMeta, SeoStatusBadge, } from '../../components/seo/primitives.js';
import { SeoIssueFixDrawer } from '../../components/seo/SeoIssueFixDrawer.js';
import { useSeoResource } from './useSeoResource.js';
const SEVERITY_FILTERS = [
    { id: 'all', label: 'All' },
    { id: 'critical', label: 'Critical' },
    { id: 'warning', label: 'Warnings' },
    { id: 'info', label: 'Info' },
];
const STATUS_FILTERS = [
    { id: 'open', label: 'Open' },
    { id: 'recurring', label: 'Recurring' },
    { id: 'ignored', label: 'Ignored' },
    { id: 'resolved', label: 'Resolved' },
    { id: 'all', label: 'All' },
];
function issueStatusTone(status) {
    switch (status) {
        case 'resolved':
            return 'good';
        case 'ignored':
            return 'neutral';
        case 'recurring':
            return 'fair';
        default:
            return 'critical';
    }
}
function AuditSummaryCards({ refetchKey }) {
    const { data, loading } = useSeoResource(fetchSeoAuditRuns, [refetchKey]);
    const last = (data ?? [])[0];
    return (_jsxs("div", { className: "grid grid-cols-2 gap-4 lg:grid-cols-4", children: [_jsxs("div", { className: "border-border bg-card rounded-lg border p-4", children: [_jsxs("p", { className: "text-muted-foreground flex items-center gap-1.5 text-sm", children: [_jsx(Clock, { className: "h-3.5 w-3.5", "aria-hidden": true }), " Last audit"] }), _jsx("p", { className: "text-foreground mt-1 text-sm font-medium", children: loading ? '…' : last ? new Date(last.startedAt).toLocaleString() : 'Never' })] }), _jsxs("div", { className: "border-border bg-card rounded-lg border p-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "Pages scanned" }), _jsx("p", { className: "text-foreground mt-1 text-2xl font-medium tabular-nums", children: last?.pagesScanned ?? 0 })] }), _jsxs("div", { className: "border-border bg-card rounded-lg border p-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "Issues found" }), _jsx("p", { className: "text-foreground mt-1 text-2xl font-medium tabular-nums", children: last?.issuesFound ?? 0 })] }), _jsxs("div", { className: "border-border bg-card rounded-lg border p-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: "Site score" }), _jsx("p", { className: "text-foreground mt-1 text-2xl font-medium tabular-nums", children: last?.siteScoreAfter ?? '—' })] })] }));
}
export function AuditTab({ refetchKey = 0, initialIssueId, onNavigate, }) {
    const [severity, setSeverity] = useState('all');
    const [status, setStatus] = useState('open');
    const [openIssue, setOpenIssue] = useState(initialIssueId ?? null);
    const query = useMemo(() => ({ severity, status }), [severity, status]);
    const { data, loading, error, refetch } = useSeoResource(() => fetchSeoIssues(query), [severity, status, refetchKey]);
    const issues = data ?? [];
    return (_jsxs("div", { className: "space-y-4", children: [_jsx(AuditSummaryCards, { refetchKey: refetchKey }), _jsxs(SectionCard, { children: [_jsxs("div", { className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Filter by severity", children: SEVERITY_FILTERS.map((f) => (_jsx("button", { type: "button", "aria-pressed": severity === f.id, onClick: () => setSeverity(f.id), className: `focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${severity === f.id
                                        ? 'bg-primary text-primary-foreground'
                                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'}`, children: f.label }, f.id))) }), _jsx("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Filter by status", children: STATUS_FILTERS.map((f) => (_jsx("button", { type: "button", "aria-pressed": status === f.id, onClick: () => setStatus(f.id), className: `focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none ${status === f.id
                                        ? 'bg-accent text-foreground'
                                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'}`, children: f.label }, f.id))) })] }), loading ? (_jsx(SeoLoading, { label: "Loading issues\u2026" })) : error ? (_jsx(SeoErrorState, { message: error, onRetry: refetch })) : issues.length === 0 ? (_jsx(SeoEmptyState, { icon: status === 'open' ? _jsx(CheckCircle2, { size: 24 }) : _jsx(ClipboardCheck, { size: 24 }), title: status === 'open' ? 'No open issues' : 'No issues match', description: status === 'open'
                            ? 'Run an audit to scan for new issues, or adjust the filters.'
                            : 'Try a different severity or status filter.' })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", "aria-label": "SEO issues", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-muted-foreground border-border border-b text-left", children: [_jsx("th", { className: "py-2 pr-4 font-medium", children: "Severity" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Issue" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Page" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Status" }), _jsx("th", { className: "py-2 text-right font-medium", children: _jsx("span", { className: "sr-only", children: "Actions" }) })] }) }), _jsx("tbody", { className: "divide-border divide-y", children: issues.map((issue) => {
                                        const meta = severityMeta(issue.severity);
                                        return (_jsxs("tr", { className: "hover:bg-accent/40", children: [_jsx("td", { className: "py-2.5 pr-4", children: _jsxs("span", { className: `inline-flex items-center gap-1.5 text-sm ${meta.text}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${meta.dot}`, "aria-hidden": true }), meta.label] }) }), _jsxs("td", { className: "py-2.5 pr-4", children: [_jsx("span", { className: "text-foreground block font-medium", children: issue.title }), _jsx("span", { className: "text-muted-foreground block capitalize", children: issue.category })] }), _jsx("td", { className: "text-muted-foreground py-2.5 pr-4", children: _jsx("span", { className: "block truncate", children: issue.entityTitle || issue.url || '—' }) }), _jsx("td", { className: "py-2.5 pr-4", children: _jsx(SeoStatusBadge, { label: issue.status, tone: issueStatusTone(issue.status) }) }), _jsx("td", { className: "py-2.5 text-right", children: _jsx("button", { onClick: () => setOpenIssue(issue.id), className: "text-primary hover:bg-accent focus-visible:ring-ring rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none", children: issue.fixable ? 'Fix' : 'View' }) })] }, issue.id));
                                    }) })] }) }))] }), _jsx(SeoIssueFixDrawer, { open: openIssue !== null, onOpenChange: (o) => !o && setOpenIssue(null), issueId: openIssue, onChanged: refetch, onNavigate: onNavigate })] }));
}
//# sourceMappingURL=AuditTab.js.map