'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { TrendingUp, TrendingDown, Minus, AlertOctagon, AlertTriangle, Info, Zap, BarChart3, ArrowRight, } from 'lucide-react';
import { SectionCard, SeoScoreBar, SeoLoading, SeoEmptyState, SeoErrorState, gradeMeta, btnSecondary, } from '../../components/seo/primitives.js';
function TrendIcon({ trend }) {
    if (trend === 'up')
        return _jsx(TrendingUp, { className: "text-success h-4 w-4", "aria-hidden": true });
    if (trend === 'down')
        return _jsx(TrendingDown, { className: "text-destructive h-4 w-4", "aria-hidden": true });
    return _jsx(Minus, { className: "text-muted-foreground h-4 w-4", "aria-hidden": true });
}
function impactTone(impact) {
    return impact === 'High' ? 'poor' : impact === 'Medium' ? 'fair' : 'good';
}
export function OverviewTab({ resource, onOpenIssue, onConnectSearchConsole, }) {
    const { data, loading, error, refetch } = resource;
    if (loading)
        return _jsx(SeoLoading, { label: "Loading SEO overview\u2026" });
    if (error)
        return _jsx(SeoErrorState, { message: error, onRetry: refetch });
    if (!data)
        return _jsx(SeoEmptyState, { title: "No overview data" });
    const { siteScore, metrics, issuesSummary, quickWins, searchPerformance, searchConsoleConnected, } = data;
    const grade = gradeMeta(siteScore.grade);
    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-3", children: [_jsxs(SectionCard, { title: "Site SEO Score", className: "lg:col-span-1", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-foreground text-4xl font-medium tabular-nums", children: siteScore.score }), _jsx("span", { className: `text-sm font-medium ${grade.text}`, children: grade.label })] }), siteScore.delta !== null && (_jsxs("span", { className: `inline-flex items-center gap-1 text-sm ${siteScore.delta >= 0 ? 'text-success' : 'text-destructive'}`, children: [siteScore.delta >= 0 ? (_jsx(TrendingUp, { className: "h-4 w-4", "aria-hidden": true })) : (_jsx(TrendingDown, { className: "h-4 w-4", "aria-hidden": true })), siteScore.delta >= 0 ? '+' : '', siteScore.delta, " pts"] }))] }), _jsx(SeoScoreBar, { score: siteScore.score, className: "mt-4" }), siteScore.breakdown.length > 0 && (_jsx("dl", { className: "mt-4 space-y-2", children: siteScore.breakdown.map((b) => (_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("dt", { className: "text-muted-foreground capitalize", children: b.category }), _jsxs("dd", { className: "text-foreground tabular-nums", children: [b.score, "/", 100, " ", _jsxs("span", { className: "text-muted-foreground", children: ["(", b.weight, "%)"] })] })] }, b.category))) }))] }), _jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-2", children: metrics.length === 0 ? (_jsx("div", { className: "sm:col-span-2", children: _jsx(SeoEmptyState, { title: "No metrics yet", description: "Run an audit to populate site metrics." }) })) : (metrics.map((m) => (_jsxs("div", { className: "border-border bg-card rounded-lg border p-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: m.label }), _jsx("p", { className: "text-foreground mt-1 text-2xl font-medium tabular-nums", children: m.value }), _jsxs("p", { className: "text-muted-foreground mt-1 flex items-center gap-1.5 text-sm", children: [_jsx(TrendIcon, { trend: m.trend }), m.helper] })] }, m.label)))) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [_jsx(SectionCard, { title: "Issues Found", children: _jsxs("ul", { className: "space-y-3", children: [_jsxs("li", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-foreground flex items-center gap-2 text-sm", children: [_jsx(AlertOctagon, { className: "text-destructive h-4 w-4", "aria-hidden": true }), " Critical"] }), _jsx("span", { className: "text-foreground font-medium tabular-nums", children: issuesSummary.critical })] }), _jsxs("li", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-foreground flex items-center gap-2 text-sm", children: [_jsx(AlertTriangle, { className: "text-warning h-4 w-4", "aria-hidden": true }), " Warnings"] }), _jsx("span", { className: "text-foreground font-medium tabular-nums", children: issuesSummary.warning })] }), _jsxs("li", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-foreground flex items-center gap-2 text-sm", children: [_jsx(Info, { className: "text-muted-foreground h-4 w-4", "aria-hidden": true }), " Info"] }), _jsx("span", { className: "text-foreground font-medium tabular-nums", children: issuesSummary.info })] })] }) }), _jsx(SectionCard, { title: "Quick Wins", description: "High-impact fixes ranked by priority", children: quickWins.length === 0 ? (_jsx(SeoEmptyState, { icon: _jsx(Zap, { size: 24 }), title: "No quick wins", description: "Great \u2014 no high-impact issues are waiting." })) : (_jsx("ul", { className: "divide-border divide-y", children: quickWins.map((w) => {
                                const tone = impactTone(w.impact);
                                const toneCls = tone === 'poor'
                                    ? 'bg-destructive/10 text-destructive'
                                    : tone === 'fair'
                                        ? 'bg-warning/10 text-warning'
                                        : 'bg-success/10 text-success';
                                return (_jsxs("li", { className: "flex items-start justify-between gap-3 py-3 first:pt-0", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: w.title }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: w.explanation })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("span", { className: `rounded-full px-2 py-0.5 text-xs font-medium ${toneCls}`, children: w.impact }), w.issueId && onOpenIssue && (_jsxs("button", { onClick: () => onOpenIssue(w.issueId), className: "text-primary hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm focus-visible:ring-2 focus-visible:outline-none", children: ["Fix ", _jsx(ArrowRight, { className: "h-3.5 w-3.5", "aria-hidden": true })] }))] })] }, w.id));
                            }) })) })] }), _jsx(SectionCard, { title: "Search Performance", description: "Top pages by impressions (last 28 days)", children: !searchConsoleConnected ? (_jsx(SeoEmptyState, { icon: _jsx(BarChart3, { size: 24 }), title: "Search Console not connected", description: "Connect Google Search Console to see real impressions, clicks, CTR, and average position.", action: onConnectSearchConsole ? (_jsx("button", { className: btnSecondary, onClick: onConnectSearchConsole, children: "Connect Search Console" })) : undefined })) : searchPerformance.length === 0 ? (_jsx(SeoEmptyState, { title: "No search performance data" })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", "aria-label": "Search performance", 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: "Page" }), _jsx("th", { className: "py-2 pr-4 text-right font-medium", children: "Impressions" }), _jsx("th", { className: "py-2 pr-4 text-right font-medium", children: "Clicks" }), _jsx("th", { className: "py-2 pr-4 text-right font-medium", children: "CTR" }), _jsx("th", { className: "py-2 text-right font-medium", children: "Avg. Position" })] }) }), _jsx("tbody", { className: "divide-border divide-y", children: searchPerformance.map((row) => (_jsxs("tr", { children: [_jsxs("td", { className: "py-2 pr-4", children: [_jsx("span", { className: "text-foreground block font-medium", children: row.title }), _jsx("span", { className: "text-muted-foreground block truncate", children: row.url })] }), _jsx("td", { className: "text-foreground py-2 pr-4 text-right tabular-nums", children: row.impressions.toLocaleString() }), _jsx("td", { className: "text-foreground py-2 pr-4 text-right tabular-nums", children: row.clicks.toLocaleString() }), _jsxs("td", { className: "text-foreground py-2 pr-4 text-right tabular-nums", children: [(row.ctr * 100).toFixed(1), "%"] }), _jsx("td", { className: "text-foreground py-2 text-right tabular-nums", children: row.averagePosition.toFixed(1) })] }, row.url))) })] }) })) })] }));
}
//# sourceMappingURL=OverviewTab.js.map