'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Search, FileWarning, ImageOff, LinkIcon, ChevronLeft, ChevronRight, } from 'lucide-react';
import { useState } from 'react';
import { useApiData } from '../lib/useApiData.js';
function ScoreBadge({ score }) {
    const color = score >= 80 ? 'text-success' : score >= 60 ? 'text-warning' : 'text-destructive';
    const bg = score >= 80 ? 'bg-success/10' : score >= 60 ? 'bg-warning/10' : 'bg-destructive/10';
    return (_jsx("span", { className: `inline-flex h-9 w-9 items-center justify-center rounded-full text-sm font-medium ${color} ${bg}`, children: score }));
}
export function SEOPerformance({ onNavigate }) {
    const { data, loading, error } = useApiData('/seo/summary');
    const [page, setPage] = useState(0);
    const perPage = 5;
    if (loading || error || !data)
        return null;
    const issues = data.issuesSummary;
    const totalIssues = issues.missingMetaDescriptions + issues.brokenInternalLinks + issues.missingAltText;
    const topContent = data.topContent ?? [];
    const totalPages = Math.max(1, Math.ceil(topContent.length / perPage));
    const visible = topContent.slice(page * perPage, (page + 1) * perPage);
    return (_jsxs("div", { className: "border-border bg-card rounded-lg border", children: [_jsxs("div", { className: "border-border flex items-center justify-between border-b p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Search, { className: "text-muted-foreground h-4 w-4" }), _jsx("h2", { className: "text-foreground text-sm font-medium", children: "SEO Performance" })] }), totalIssues > 0 && (_jsxs("span", { className: "text-muted-foreground text-xs", children: [totalIssues, " issue", totalIssues !== 1 ? 's' : '', " found"] }))] }), _jsxs("div", { className: "divide-border grid grid-cols-1 divide-y lg:grid-cols-12 lg:divide-x lg:divide-y-0", children: [_jsxs("div", { className: "p-4 lg:col-span-7", children: [_jsx("h3", { className: "text-foreground mb-3 text-sm font-medium", children: "Top Performing Content" }), _jsxs("div", { className: "space-y-2", children: [visible.map((item) => (_jsxs("div", { className: "flex items-center justify-between py-2", children: [_jsxs("div", { className: "mr-3 min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: item.title }), _jsx("p", { className: "text-muted-foreground text-xs capitalize", children: item.collection })] }), _jsx(ScoreBadge, { score: item.score })] }, item.id))), visible.length === 0 && (_jsx("p", { className: "text-muted-foreground py-4 text-center text-sm", children: "No published content yet" }))] }), topContent.length > perPage && (_jsxs("div", { className: "text-muted-foreground mt-3 flex items-center justify-between border-t border-gray-100 pt-3 text-xs", children: [_jsxs("span", { children: ["Showing ", page * perPage + 1, "-", Math.min((page + 1) * perPage, topContent.length), " of", ' ', topContent.length] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: () => setPage(Math.max(0, page - 1)), disabled: page === 0, className: "hover:bg-accent rounded p-1 disabled:opacity-30", children: _jsx(ChevronLeft, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { children: ["Page ", page + 1, " of ", totalPages] }), _jsx("button", { onClick: () => setPage(Math.min(totalPages - 1, page + 1)), disabled: page >= totalPages - 1, className: "hover:bg-accent rounded p-1 disabled:opacity-30", children: _jsx(ChevronRight, { className: "h-3.5 w-3.5" }) })] })] }))] }), _jsxs("div", { className: "p-4 lg:col-span-5", children: [_jsx("h3", { className: "text-foreground mb-3 text-sm font-medium", children: "SEO Issues" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileWarning, { className: "h-4 w-4 text-red-400" }), _jsx("span", { className: "text-foreground text-sm", children: "Missing meta descriptions" })] }), _jsx("span", { className: "text-foreground text-sm font-medium", children: issues.missingMetaDescriptions })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LinkIcon, { className: "h-4 w-4 text-red-400" }), _jsx("span", { className: "text-foreground text-sm", children: "Broken internal links" })] }), _jsx("span", { className: "text-foreground text-sm font-medium", children: issues.brokenInternalLinks })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageOff, { className: "h-4 w-4 text-red-400" }), _jsx("span", { className: "text-foreground text-sm", children: "Missing alt text" })] }), _jsx("span", { className: "text-foreground text-sm font-medium", children: issues.missingAltText })] })] }), totalIssues > 0 && (_jsx("button", { onClick: () => onNavigate?.('/seo'), className: "text-primary hover:text-primary/80 mt-4 text-sm font-medium", children: "View All Issues" }))] })] })] }));
}
//# sourceMappingURL=SEOPerformance.js.map