// Settings → Website Feed — the tenant's own answer to "where does my website
// get the menu / price list from?" (core twin of SPEC's Public Listings Feed,
// 0057). Read-only on purpose: the slug is set at onboarding and the feed is
// shaped by which products are Published in Inventory, so there's nothing to
// configure here — only an address to copy. Admin-only like every Workspace
// card, though the URL itself is public by construction.

const ProductsFeedSection = () => {
    const [tenant, setTenant] = React.useState(null);
    const [count, setCount] = React.useState(null);
    const [error, setError] = React.useState(null);
    const [copied, setCopied] = React.useState(false);

    React.useEffect(() => {
        api.getTenant().then(setTenant).catch(err => setError(err.message));
        // How many items are live right now — read from the feed itself so the
        // number can't disagree with what a website would see.
        api.getPublicProductsCount().then(setCount).catch(() => setCount(null));
    }, []);

    // The feed lives on THIS instance's origin — read location.origin so the
    // address stays truthful behind a custom domain.
    const feedUrl = tenant ? `${window.location.origin}/api/public/${tenant.slug}/products` : null;

    const copy = async () => {
        try {
            await navigator.clipboard.writeText(feedUrl);
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
        } catch (_) { /* clipboard refused — the URL is still visible to select by hand */ }
    };

    if (error) return <p style={{ color: 'var(--danger)', fontSize: '0.875rem' }}>{error}</p>;
    if (!tenant) return <p style={{ color: 'var(--text-3)', fontSize: '0.875rem' }}>Loading…</p>;

    return (
        <div className="settings-form">
            <p style={{ fontSize: '0.875rem', color: 'var(--text-3)', marginBottom: '1rem' }}>
                Every item you mark <strong>Published</strong> in Inventory appears in this feed the
                moment you save it; switching it to Hidden removes it just as fast. Your website
                reads the feed to build its menu or price list — hand this address to whoever
                maintains the site and nothing else needs to change when your prices do.
                {count != null && <> Right now it lists <strong>{count}</strong> item{count === 1 ? '' : 's'}.</>}
            </p>

            <label style={{ fontSize: '0.75rem', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
                Feed address
            </label>
            <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginTop: '0.25rem', marginBottom: '1rem' }}>
                <code style={{ flex: 1, padding: '0.5rem 0.75rem', background: 'var(--surface-2)', borderRadius: '6px',
                               fontSize: '0.8125rem', overflowX: 'auto', whiteSpace: 'nowrap' }}>
                    {feedUrl}
                </code>
                <button type="button" className="btn btn-secondary" onClick={copy} title="Copy the feed address">
                    <i className={`fas ${copied ? 'fa-check' : 'fa-copy'}`}></i>{copied ? ' Copied' : ' Copy'}
                </button>
                <a className="btn btn-secondary" style={{ textDecoration: 'none' }} href={feedUrl} target="_blank" rel="noopener noreferrer" title="Open the feed in a new tab">
                    <i className="fas fa-external-link-alt"></i> Open
                </a>
            </div>

            <p style={{ fontSize: '0.8125rem', color: 'var(--text-3)' }}>
                What's in it: each published item's name, description, category, price, and the
                order you gave it. Nothing else leaves this workspace — costs, stock levels, SKUs,
                serial numbers, unpublished items, and everything about your customers stay private.
            </p>
        </div>
    );
};