'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-green-600' : score >= 60 ? 'text-amber-500' : 'text-red-500';
    const bg = score >= 80 ? 'bg-green-50' : score >= 60 ? 'bg-amber-50' : 'bg-red-50';
    return (_jsx("span", { className: `inline-flex h-9 w-9 items-center justify-center rounded-full text-sm font-semibold ${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: "rounded-lg border border-gray-200 bg-white", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Search, { className: "h-4 w-4 text-gray-500" }), _jsx("h2", { className: "text-sm font-semibold text-gray-900", children: "SEO Performance" })] }), totalIssues > 0 && (_jsxs("span", { className: "text-xs text-gray-500", children: [totalIssues, " issue", totalIssues !== 1 ? 's' : '', " found"] }))] }), _jsxs("div", { className: "grid grid-cols-1 divide-y divide-gray-200 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: "mb-3 text-sm font-medium text-gray-700", 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: "truncate text-sm font-medium text-gray-900", children: item.title }), _jsx("p", { className: "text-xs text-gray-500 capitalize", children: item.collection })] }), _jsx(ScoreBadge, { score: item.score })] }, item.id))), visible.length === 0 && (_jsx("p", { className: "py-4 text-center text-sm text-gray-400", children: "No published content yet" }))] }), topContent.length > perPage && (_jsxs("div", { className: "mt-3 flex items-center justify-between border-t border-gray-100 pt-3 text-xs text-gray-500", 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: "rounded p-1 hover:bg-gray-100 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: "rounded p-1 hover:bg-gray-100 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: "mb-3 text-sm font-medium text-gray-700", 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-sm text-gray-700", children: "Missing meta descriptions" })] }), _jsx("span", { className: "text-sm font-semibold text-gray-900", 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-sm text-gray-700", children: "Broken internal links" })] }), _jsx("span", { className: "text-sm font-semibold text-gray-900", 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-sm text-gray-700", children: "Missing alt text" })] }), _jsx("span", { className: "text-sm font-semibold text-gray-900", children: issues.missingAltText })] })] }), totalIssues > 0 && (_jsx("button", { onClick: () => onNavigate?.('/seo'), className: "mt-4 text-sm font-medium text-blue-600 hover:text-blue-700", children: "View All Issues" }))] })] })] }));
}
//# sourceMappingURL=SEOPerformance.js.map