'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Content SEO tab — pages/posts list with per-item SEO editing in an inline
 * 380px inspector pane (design split-pane pattern; previously an overlay
 * drawer). Row click toggles the pane; deep links
 * (`?tab=content&entityType=…&entityId=…`) open it on mount.
 */
import { useMemo, useState } from 'react';
import { Search, FileText } from 'lucide-react';
import { fetchSeoContentRecords, applyContentSeoQuery, } from '../../lib/seo-service.js';
import { SectionCard, SeoLoading, SeoEmptyState, SeoErrorState, ScorePill, SeoStatusBadge, } from '../../components/seo/primitives.js';
import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../../components/ui/InspectorPane.js';
import { SeoEditorPane } from '../../components/seo/SeoEditorPane.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-[var(--bdr)] bg-input-background py-2 pl-9 pr-3 text-base text-[var(--txt)] placeholder:text-[var(--sub)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]';
function parseEntityType(value) {
    return value === 'page' || value === 'post' ? value : null;
}
export function ContentTab({ initialEntityType, initialEntityId, }) {
    const { data, loading, error, refetch } = useSeoResource(fetchSeoContentRecords, []);
    const [search, setSearch] = useState('');
    const [filter, setFilter] = useState('all');
    const [selection, setSelection] = useState(() => {
        const type = parseEntityType(initialEntityType);
        return type && initialEntityId ? { type, id: initialEntityId } : null;
    });
    const rows = useMemo(() => applyContentSeoQuery(data ?? [], { search, filter }), [data, search, filter]);
    const toggleRow = (type, id) => {
        setSelection((prev) => (prev?.type === type && prev.id === id ? null : { type, id }));
    };
    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: "pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--sub)]", "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: `rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${filter === f.id
                                ? 'bg-primary text-primary-foreground'
                                : 'text-[var(--sub)] hover:bg-[var(--acc-l)] hover:text-[var(--txt)]'}`, children: f.label }, f.id))) })] }), _jsxs(SplitPaneLayout, { className: "h-[calc(100vh-280px)] min-h-[440px]", children: [_jsx(SplitPaneList, { children: _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 min-w-[640px] text-sm", "aria-label": "Content SEO", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--bdr)] text-left text-[var(--sub)]", 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 text-right font-medium", children: "Score" })] }) }), _jsx("tbody", { className: "divide-y divide-[var(--bdr)]", children: rows.map((r) => {
                                                const isSelected = selection?.type === r.entityType && selection.id === r.entityId;
                                                return (_jsxs("tr", { className: `cursor-pointer transition-colors ${isSelected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'}`, onClick: () => toggleRow(r.entityType, r.entityId), children: [_jsx("td", { className: "py-2.5 pr-4", children: _jsxs("button", { type: "button", onClick: (e) => {
                                                                    e.stopPropagation();
                                                                    toggleRow(r.entityType, r.entityId);
                                                                }, "aria-expanded": isSelected, className: "text-left", children: [_jsx("span", { className: "block font-medium text-[var(--txt)]", children: r.title }), _jsx("span", { className: "block truncate text-[var(--sub)]", children: r.url })] }) }), _jsx("td", { className: "py-2.5 pr-4 capitalize", children: _jsx("span", { className: "text-[var(--sub)]", 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 text-right", children: _jsx(ScorePill, { score: r.seoScore }) })] }, `${r.entityType}-${r.entityId}`));
                                            }) })] }) })) }) }), _jsx(InspectorPane, { open: selection !== null, width: 380, "aria-label": "SEO editor", children: selection && (_jsx(SeoEditorPane, { entityType: selection.type, entityId: selection.id, onClose: () => setSelection(null), onSaved: refetch }, `${selection.type}-${selection.id}`)) })] })] }));
}
//# sourceMappingURL=ContentTab.js.map