'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Link2, Loader2, Sparkles } from 'lucide-react';
import { fetchLinkSuggestions } from '../../lib/seo-service.js';
export function SeoLinkingSection({ entityType, entityId, internalLinks, externalLinks, internalLinkOk, externalLinkOk, }) {
    const [loading, setLoading] = useState(false);
    const [suggestions, setSuggestions] = useState([]);
    const [error, setError] = useState(null);
    useEffect(() => {
        if (!entityId) {
            setSuggestions([]);
            setError(null);
            return;
        }
        let alive = true;
        setLoading(true);
        setError(null);
        fetchLinkSuggestions({ targetEntityType: entityType, targetEntityId: entityId, limit: 5 })
            .then((res) => {
            if (!alive)
                return;
            if (res.error) {
                setError(res.error);
                setSuggestions([]);
                return;
            }
            setSuggestions(res.data?.suggestions ?? []);
        })
            .finally(() => alive && setLoading(false));
        return () => {
            alive = false;
        };
    }, [entityType, entityId]);
    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(LinkCountCard, { label: "Internal links", count: internalLinks, ok: internalLinkOk, hint: internalLinkOk
                            ? 'Links to other pages on your site.'
                            : 'Add links to related content — aim for at least one.' }), _jsx(LinkCountCard, { label: "Outbound links", count: externalLinks, ok: externalLinkOk, hint: externalLinkOk
                            ? 'Links to external sources.'
                            : 'Consider linking to authoritative external sources.' })] }), !entityId ? (_jsx("p", { className: "rounded-[7px] border border-[var(--bdr)] bg-[var(--bg)] p-3 text-[11.5px] text-[var(--sub)]", children: "Save a draft first to load AI link opportunities for this page." })) : loading ? (_jsxs("div", { className: "flex items-center gap-2 text-[12px] text-[var(--muted)]", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), "Finding link opportunities\u2026"] })) : error ? (_jsx("p", { className: "text-[11.5px] text-[var(--err)]", children: error })) : suggestions.length > 0 ? (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center gap-1.5 text-[12px] font-medium text-[var(--txt)]", children: [_jsx(Sparkles, { className: "h-3.5 w-3.5 text-[var(--acc)]", "aria-hidden": true }), "Link opportunities"] }), _jsx("ul", { className: "space-y-2", children: suggestions.map((s) => (_jsxs("li", { className: "rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-2.5", children: [_jsx("div", { className: "text-[12.5px] font-medium text-[var(--txt)]", children: s.sourceTitle }), _jsx("p", { className: "mt-0.5 text-[11px] text-[var(--muted)]", children: s.sourceUrl }), _jsxs("p", { className: "mt-1 text-[11.5px] text-[var(--sub)]", children: ["Suggested anchor: ", _jsx("span", { className: "text-[var(--txt)]", children: s.anchorText })] }), s.excerpt && (_jsx("p", { className: "mt-1 line-clamp-2 text-[11px] text-[var(--muted)]", children: s.excerpt }))] }, `${s.sourceEntityId}-${s.anchorText}`))) })] })) : (_jsx("p", { className: "text-[11.5px] text-[var(--sub)]", children: "No inbound link suggestions yet. Run the site link index from SEO \u2192 Links to improve AI recommendations." })), _jsxs("div", { className: "flex items-start gap-2 rounded-[7px] border border-[var(--bdr)] bg-[var(--bg)] p-2.5 text-[11px] text-[var(--sub)]", children: [_jsx(Link2, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--acc)]", "aria-hidden": true }), _jsx("span", { children: "Best practice: mix internal links (site structure + crawl paths) with selective outbound links (trust signals). We flag counts here; apply links in the content editor." })] })] }));
}
function LinkCountCard({ label, count, ok, hint, }) {
    return (_jsxs("div", { className: "rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[11.5px] font-medium text-[var(--sub)]", children: label }), _jsx("span", { className: `text-lg font-medium ${ok ? 'text-[var(--suc)]' : 'text-[var(--warn)]'}`, children: count })] }), _jsx("p", { className: "mt-1 text-[10.5px] text-[var(--muted)]", children: hint })] }));
}
//# sourceMappingURL=SeoLinkingSection.js.map