// Settings → Public Listings Feed — the tenant's own answer to "where does my
// website get the listings from?"
//
// Until this card existed a tenant could publish homes but couldn't SEE the
// feed URL anywhere in the product — the operator had to hand it over out of
// band. This is read-only on purpose: the slug is set at onboarding and the
// feed is shaped by what's published, so there's nothing to configure here,
// only something to copy. (Admin-only like every Workspace card — standing
// rule — though the URL itself is public by construction: it's the thing a
// website fetches unauthenticated.)

const FeedSection = () => {
    const [tenant, setTenant] = 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));
    }, []);

    // The feed lives on THIS instance's origin — a custom domain in front of
    // the app changes the origin the browser sees, so reading location.origin
    // (not a configured host) keeps the URL truthful wherever the tenant logs in.
    const feedUrl = tenant ? `${window.location.origin}/api/public/${tenant.slug}/listings` : 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 listing you mark <strong>Published</strong> appears in this feed the moment
                you flip the switch; unpublishing removes it just as fast. Your website reads
                the feed to build its listings page — hand this address to whoever maintains
                the site and nothing else needs to change when your listings do.
            </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 home's address, price, details, your custom fields,
                and its photos in the order you arranged them (cover photo first, captions
                included). Nothing unpublished, nothing internal — notes, contacts, and documents
                never leave this workspace.
            </p>
            <p style={{ fontSize: '0.8125rem', color: 'var(--text-3)', marginTop: '0.5rem' }}>
                Photos come from the same address with <code>/photos/&lt;id&gt;</code> on the end;
                the feed lists the exact link for each one, so a website never has to guess.
            </p>
        </div>
    );
};