// Integrations — tenant-level provider connections (GitHub, Stripe).
// Self-fetching like MilestonesSection: not needed app-wide.
//
// The token/key field is write-only by design: the server validates it
// against the provider, encrypts it, and never returns it — so there is
// nothing to "show" after connecting except who it authenticates as.
//
// One generic ProviderCard drives both providers; each entry in PROVIDERS
// supplies the copy and the how-to-get-a-token walkthrough.

const INTEGRATION_PROVIDERS = [
    {
        provider: 'github',
        name: 'GitHub',
        icon: 'fab fa-github',
        // Plan gate (0033): visible-but-locked on the free plan. The server
        // enforces; this render is just honesty about what paid includes.
        featureKey: 'integrations.github',
        blurb: 'Wire repositories to client accounts — commits appear on that client\'s activity timeline automatically, so the work you ship for them is part of their story.',
        placeholder: 'github_pat_…',
        connectedNote: 'Wire repos to accounts from an account\'s Activity tab (managers and admins).',
        disconnectWarning: 'Disconnect GitHub? Repo wirings will be removed; commits already on timelines stay.',
        steps: [
            <li key="1">
                <a href="https://github.com/settings/personal-access-tokens/new" target="_blank" rel="noopener noreferrer">
                    Open GitHub's new-token page <i className="fas fa-external-link-alt" style={{ fontSize: '0.65rem' }}></i>
                </a>
                {' '}(a <strong>fine-grained</strong> personal access token)
            </li>,
            <li key="2"><strong>Repository access:</strong> "Only select repositories" — pick the repos you want on client timelines</li>,
            <li key="3"><strong>Permissions → Contents:</strong> Read-only. That's the only permission it needs.</li>,
            <li key="4">Set an expiration — this page will show when it needs renewing</li>,
            <li key="5">Generate, copy the token, and paste it below</li>,
        ],
    },
    {
        provider: 'stripe',
        name: 'Stripe',
        icon: 'fab fa-stripe-s',
        blurb: 'Create payment links from a customer\'s account — one-time or monthly subscription. When they pay, it lands on their timeline and an urgent follow-up task is created automatically.',
        placeholder: 'rk_live_… (or rk_test_… to rehearse)',
        connectedNote: 'Create payment links from an account\'s Activity tab (managers and admins). Payments are picked up within a couple of minutes.',
        disconnectWarning: 'Disconnect Stripe? Existing payment links keep working on Stripe\'s side, but payments will no longer be logged here.',
        steps: [
            <li key="1">
                <a href="https://dashboard.stripe.com/apikeys" target="_blank" rel="noopener noreferrer">
                    Open Stripe → Developers → API keys <i className="fas fa-external-link-alt" style={{ fontSize: '0.65rem' }}></i>
                </a>
                {' '}and choose <strong>Create restricted key</strong> (not the full secret key)
            </li>,
            <li key="2"><strong>Write</strong> access: Products, Prices, Payment Links</li>,
            <li key="3"><strong>Read</strong> access: Events, Checkout Sessions, Subscriptions, Invoices, Customers — everything else stays None</li>,
            <li key="4">A restricted key can't refund, pay out, or read card data — that's the point</li>,
            <li key="5">Create, copy the key (rk_…), and paste it below</li>,
        ],
    },
];

// A feature the tenant's plan doesn't include: the card stays visible (so
// free workspaces can see what paid offers) but the connect flow is replaced
// by an honest one-liner. No fake buttons, no nag modal.
const LockedProviderCard = ({ cfg }) => (
    <div className="detail-info-card" style={{ maxWidth: 560, marginBottom: '1rem', opacity: 0.85 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
            <i className={cfg.icon} style={{ fontSize: '1.5rem' }}></i>
            <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 600 }}>
                    {cfg.name}
                    <span style={{
                        marginLeft: '0.5rem', fontSize: '0.6875rem', fontWeight: 600,
                        padding: '0.15rem 0.5rem', borderRadius: '999px',
                        background: 'var(--accent-soft, rgba(99,102,241,0.15))', color: 'var(--accent)',
                    }}>
                        <i className="fas fa-lock" style={{ fontSize: '0.6rem', marginRight: '0.3rem' }}></i>Paid plan
                    </span>
                </div>
                <p style={{ fontSize: '0.8125rem', color: 'var(--text-3)', margin: '0.15rem 0 0 0' }}>{cfg.blurb}</p>
                <p style={{ fontSize: '0.75rem', color: 'var(--text-3)', margin: '0.4rem 0 0 0' }}>
                    Included in the paid plan. Everything else in your CRM stays fully functional on the free plan.
                </p>
            </div>
        </div>
    </div>
);

const ProviderCard = ({ cfg, connection, onChanged }) => {
    const [token, setToken]   = React.useState('');
    const [label, setLabel]   = React.useState('');
    const [open, setOpen]     = React.useState(false);
    const [saving, setSaving] = React.useState(false);
    const [error, setError]   = React.useState('');

    const handleConnect = async (e) => {
        e.preventDefault();
        setSaving(true); setError('');
        try {
            await api.createIntegration({ provider: cfg.provider, token: token.trim(), label: label.trim() });
            setToken(''); setLabel(''); setOpen(false);
            onChanged();
        } catch (err) { setError(err.message); }
        finally { setSaving(false); }
    };

    const handleDisconnect = async () => {
        if (!window.confirm(cfg.disconnectWarning)) return;
        try { await api.deleteIntegration(connection.id); onChanged(); }
        catch (err) { alert(err.message); }
    };

    if (connection) return (
        <div className="detail-info-card" style={{ maxWidth: 560, marginBottom: '1rem' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                <i className={cfg.icon} style={{ fontSize: '1.5rem' }}></i>
                <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600 }}>
                        {connection.label || cfg.name}
                        {connection.provider_login && <span style={{ color: 'var(--text-3)', fontWeight: 400 }}> — connected as {connection.provider_login}</span>}
                    </div>
                    <div style={{ fontSize: '0.8125rem', marginTop: '0.15rem' }}>
                        {connection.status === 'active'
                            ? <span style={{ color: 'var(--success, #22c55e)' }}><i className="fas fa-check-circle"></i> Active</span>
                            : <span style={{ color: 'var(--danger, #ef4444)' }}><i className="fas fa-exclamation-circle"></i> {connection.status === 'revoked' ? 'Key expired or revoked — reconnect with a fresh one' : 'Error'}{connection.last_error ? ` · ${connection.last_error}` : ''}</span>}
                    </div>
                </div>
                <button className="btn btn-danger btn-small" onClick={handleDisconnect}>
                    <i className="fas fa-unlink"></i> Disconnect
                </button>
            </div>
            <p style={{ fontSize: '0.8125rem', color: 'var(--text-3)', marginTop: '0.75rem', marginBottom: 0 }}>
                {cfg.connectedNote}
            </p>
        </div>
    );

    if (!open) return (
        <div className="detail-info-card" style={{ maxWidth: 560, marginBottom: '1rem' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                <i className={cfg.icon} style={{ fontSize: '1.5rem' }}></i>
                <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600 }}>{cfg.name}</div>
                    <p style={{ fontSize: '0.8125rem', color: 'var(--text-3)', margin: '0.15rem 0 0 0' }}>{cfg.blurb}</p>
                </div>
                <button className="btn btn-primary btn-small" onClick={() => setOpen(true)}>
                    <i className="fas fa-plug"></i> Connect
                </button>
            </div>
        </div>
    );

    return (
        <form onSubmit={handleConnect} className="detail-info-card" style={{ maxWidth: 560, marginBottom: '1rem' }}>
            {error && <div className="api-error">{error}</div>}
            <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>
                <i className={cfg.icon} style={{ marginRight: '0.4rem' }}></i>
                Get a key from {cfg.name} — takes about a minute
            </div>
            <ol style={{ fontSize: '0.8125rem', color: 'var(--text-2)', lineHeight: 1.7, margin: '0 0 1rem 0', paddingLeft: '1.25rem' }}>
                {cfg.steps}
            </ol>
            <div className="form-group">
                <label className="form-label">Access token / key *</label>
                <input className="form-input" type="password" value={token}
                       onChange={e => setToken(e.target.value)}
                       placeholder={cfg.placeholder} required autoComplete="off" />
                <p style={{ fontSize: '0.75rem', color: 'var(--text-3)', marginTop: '0.35rem' }}>
                    Verified with {cfg.name} before it's saved, stored encrypted, never shown again.
                </p>
            </div>
            <div className="form-group">
                <label className="form-label">Label</label>
                <input className="form-input" value={label} onChange={e => setLabel(e.target.value)}
                       placeholder={`e.g. Company ${cfg.name}`} maxLength={100} />
            </div>
            <div style={{ display: 'flex', gap: '0.5rem' }}>
                <button type="submit" className="btn btn-primary" disabled={saving || !token.trim()}>
                    {saving ? <><i className="fas fa-spinner fa-spin"></i> Checking with {cfg.name}…</> : <><i className={cfg.icon}></i> Connect {cfg.name}</>}
                </button>
                <button type="button" className="btn btn-secondary" onClick={() => { setOpen(false); setError(''); }}>Cancel</button>
            </div>
        </form>
    );
};

const IntegrationsSection = ({ tenant }) => {
    const [connections, setConnections] = React.useState([]);
    // A failed refresh must not render every provider as "not connected"
    // (swallowed-error rule) — surface it with a retry.
    const [loadErr, setLoadErr] = React.useState(false);
    const refresh = () => api.getIntegrations().then(rows => { setConnections(rows); setLoadErr(false); }).catch(() => setLoadErr(true));
    React.useEffect(() => { refresh(); }, []);

    // Locked = the plan carries entitlements and this feature isn't in them.
    // Missing entitlements (old cache, plan data hiccup) renders UNLOCKED —
    // the server still refuses, and a wrongly-locked UI is the worse failure.
    const features = tenant?.entitlements?.features;
    const isLocked = (cfg) => !!(cfg.featureKey && features && features[cfg.featureKey] !== true);

    return (
        <div className="settings-form">
            {loadErr && (
                <div className="api-error" style={{ marginBottom: '0.75rem' }}>
                    <i className="fas fa-exclamation-triangle"></i> Couldn't load connections — cards below may be wrong.
                    <button className="btn btn-secondary btn-small" style={{ marginLeft: '0.75rem' }} onClick={refresh}><i className="fas fa-redo"></i> Retry</button>
                </div>
            )}
            <p style={{ fontSize: '0.875rem', color: 'var(--text-3)', marginBottom: '1.25rem' }}>
                Connect outside services to this workspace. Each connection uses its own
                least-privilege key, verified and encrypted at rest.
            </p>
            {INTEGRATION_PROVIDERS.map(cfg => {
                // A live connection always renders fully (disconnect must work
                // even when the plan no longer includes the feature).
                const connection = connections.find(c => c.provider === cfg.provider);
                if (!connection && isLocked(cfg)) return <LockedProviderCard key={cfg.provider} cfg={cfg} />;
                return (
                    <ProviderCard key={cfg.provider} cfg={cfg}
                        connection={connection}
                        onChanged={refresh} />
                );
            })}
        </div>
    );
};