'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { Search, FileText, Pencil } from 'lucide-react';
import { fetchSeoContentRecords, applyContentSeoQuery, } from '../../lib/seo-service.js';
import { SectionCard, SeoLoading, SeoEmptyState, SeoErrorState, ScorePill, SeoStatusBadge, } from '../../components/seo/primitives.js';
import { SeoEditorDrawer } from '../../components/seo/SeoEditorDrawer.js';
import { useSeoResource } from './useSeoResource.js';
const FILTERS = [
    { id: 'all', label: 'All' },
    { id: 'pages', label: 'Pages' },
    { id: 'posts', label: 'Posts' },
];
const inputCls = 'w-full rounded-md border border-border bg-input-background py-2 pl-9 pr-3 text-base text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring';
export function ContentTab({ initialEntityType, initialEntityId, }) {
    const { data, loading, error, refetch } = useSeoResource(fetchSeoContentRecords, []);
    const [search, setSearch] = useState('');
    const [filter, setFilter] = useState('all');
    const [editor, setEditor] = useState(initialEntityType && initialEntityId ? { type: initialEntityType, id: initialEntityId } : null);
    const rows = useMemo(() => applyContentSeoQuery(data ?? [], { search, filter }), [data, search, filter]);
    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "relative max-w-sm flex-1", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2", "aria-hidden": true }), _jsx("input", { className: inputCls, placeholder: "Search content\u2026", value: search, onChange: (e) => setSearch(e.target.value), "aria-label": "Search content" })] }), _jsx("div", { className: "flex gap-1", role: "group", "aria-label": "Content type filter", children: FILTERS.map((f) => (_jsx("button", { type: "button", "aria-pressed": filter === f.id, onClick: () => setFilter(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 ${filter === f.id
                                ? 'bg-primary text-primary-foreground'
                                : 'text-muted-foreground hover:bg-accent hover:text-foreground'}`, children: f.label }, f.id))) })] }), _jsx(SectionCard, { children: loading ? (_jsx(SeoLoading, { label: "Loading content\u2026" })) : error ? (_jsx(SeoErrorState, { message: error, onRetry: refetch })) : rows.length === 0 ? (_jsx(SeoEmptyState, { icon: _jsx(FileText, { size: 24 }), title: search || filter !== 'all' ? 'No matching content' : 'No content yet', description: search || filter !== 'all'
                        ? 'Try adjusting your search or filter.'
                        : 'Publish pages or posts to manage their SEO here.' })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", "aria-label": "Content SEO", 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: "Title" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Type" }), _jsx("th", { className: "py-2 pr-4 font-medium", children: "Meta" }), _jsx("th", { className: "py-2 pr-4 text-right font-medium", children: "Score" }), _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: rows.map((r) => (_jsxs("tr", { className: "hover:bg-accent/40", children: [_jsxs("td", { className: "py-2.5 pr-4", children: [_jsx("span", { className: "text-foreground block font-medium", children: r.title }), _jsx("span", { className: "text-muted-foreground block truncate", children: r.url })] }), _jsx("td", { className: "py-2.5 pr-4 capitalize", children: _jsx("span", { className: "text-muted-foreground", children: r.entityType }) }), _jsx("td", { className: "py-2.5 pr-4", children: _jsxs("span", { className: "flex flex-wrap gap-1.5", children: [_jsx(SeoStatusBadge, { label: r.metaTitle ? 'Title' : 'No title', tone: r.metaTitle ? 'good' : 'critical' }), _jsx(SeoStatusBadge, { label: r.metaDescription ? 'Desc' : 'No desc', tone: r.metaDescription ? 'good' : 'critical' }), r.noindex && _jsx(SeoStatusBadge, { label: "No-index", tone: "fair" })] }) }), _jsx("td", { className: "py-2.5 pr-4 text-right", children: _jsx(ScorePill, { score: r.seoScore }) }), _jsx("td", { className: "py-2.5 text-right", children: _jsxs("button", { onClick: () => setEditor({ type: r.entityType, id: r.entityId }), 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: [_jsx(Pencil, { className: "h-3.5 w-3.5", "aria-hidden": true }), " Edit"] }) })] }, `${r.entityType}-${r.entityId}`))) })] }) })) }), _jsx(SeoEditorDrawer, { open: editor !== null, onOpenChange: (o) => !o && setEditor(null), entityType: editor?.type ?? null, entityId: editor?.id ?? null, onSaved: refetch })] }));
}
//# sourceMappingURL=ContentTab.js.map