/* ============================================================
   Bizia — Unified Account Hub  (/app/account-hub)
   Manage connected provider accounts. Connect when needed.
   No accounts are created automatically at sign-up.
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const { Card, Badge, Button, Icon, PageHeader, EmptyState } = window;

  const API = window.__BIZIA_API_URL || (/^(localhost|127\.0\.0\.1|\[::1\])$/.test(location.hostname) ? 'http://localhost:4000' : '');
  function getToken() { return sessionStorage.getItem('bz_token') || ''; }

  const PROVIDER_META = {
    google: { label: 'Google', icon: 'search', desc: 'Use my Google account for Google SEO, Search Console, and Analytics', color: '#4285F4' },
    github: { label: 'GitHub', icon: 'code', desc: 'Connect GitHub if you want GitHub Pages hosting or source control', color: '#24292E' },
    digitalplat: { label: 'DigitalPlat', icon: 'globe', desc: 'Free domain registration. Availability and approval controlled by the third-party provider. Not guaranteed.', color: '#6366F1', warning: true },
    cloudflare: { label: 'Cloudflare', icon: 'shield', desc: 'CDN, DNS management, and SSL for your domain', color: '#F48120' },
    stripe: { label: 'Stripe', icon: 'creditCard', desc: 'Accept payments and subscriptions on your website', color: '#635BFF' },
    sendgrid: { label: 'SendGrid', icon: 'mail', desc: 'Connect when needed for email delivery and transactional email', color: '#1A82E2' },
  };

  function StatusBadge({ status }) {
    const map = { connected: ['success', 'Connected'], not_connected: ['neutral', 'Not connected'], error: ['danger', 'Error'] };
    const [tone, label] = map[status] || ['neutral', status];
    return React.createElement(Badge, { tone, size: 'sm' }, label);
  }

  function ProviderCard({ provider, account, onConnect, onDisconnect }) {
    const meta = PROVIDER_META[provider] || { label: provider, icon: 'box', desc: '' };
    const isConnected = account?.status === 'connected';
    const [loading, setLoading] = useState(false);

    async function handleDisconnect() {
      setLoading(true);
      await onDisconnect(provider);
      setLoading(false);
    }

    return React.createElement(Card, { pad: 18, style: { display: 'flex', flexDirection: 'column', gap: 10 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
          React.createElement('div', {
            style: { width: 40, height: 40, borderRadius: 10, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--border)' },
          }, React.createElement(Icon, { name: meta.icon, size: 20 })),
          React.createElement('div', null,
            React.createElement('div', { style: { fontWeight: 650, fontSize: 14 } }, meta.label),
            account?.accountEmail && React.createElement('div', { style: { fontSize: 12, color: 'var(--muted)' } }, account.accountEmail),
            account?.accountUsername && React.createElement('div', { style: { fontSize: 12, color: 'var(--muted)' } }, '@' + account.accountUsername),
          ),
        ),
        React.createElement(StatusBadge, { status: account?.status || 'not_connected' }),
      ),
      React.createElement('div', { style: { fontSize: 13, color: 'var(--text-2)', lineHeight: 1.5 } }, meta.desc),
      meta.warning && React.createElement('div', {
        style: { fontSize: 12, color: 'var(--warning)', background: 'var(--warning-soft, #fef9c3)', padding: '6px 10px', borderRadius: 6, display: 'flex', gap: 6, alignItems: 'flex-start' },
      },
        React.createElement(Icon, { name: 'alertTriangle', size: 13, style: { marginTop: 1, flexShrink: 0 } }),
        'Free custom domain is not guaranteed. Availability, approval, ownership rules, and long-term reliability are controlled by the third-party provider.',
      ),
      React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 4 } },
        isConnected
          ? React.createElement(Button, { variant: 'outline', size: 'sm', icon: 'x', loading, onClick: handleDisconnect }, 'Disconnect')
          : React.createElement(Button, { variant: 'primary', size: 'sm', icon: 'link', onClick: () => onConnect(provider) }, 'Connect'),
      ),
    );
  }

  function ConnectModal({ provider, onClose, onSave }) {
    const meta = PROVIDER_META[provider] || { label: provider };
    const [form, setForm] = useState({ displayName: meta.label, accountEmail: '', accountUsername: '', apiKey: '' });
    const [saving, setSaving] = useState(false);
    const [err, setErr] = useState('');

    function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

    async function save() {
      if (!form.displayName.trim()) { setErr('Display name is required'); return; }
      setSaving(true); setErr('');
      try {
        await onSave(provider, form);
        onClose();
      } catch (e) {
        setErr(e.message || 'Failed to connect');
      } finally {
        setSaving(false);
      }
    }

    const overlay = { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 };
    const box = { background: 'var(--surface)', borderRadius: 'var(--r)', border: '1px solid var(--border)', padding: 28, width: '100%', maxWidth: 440, display: 'flex', flexDirection: 'column', gap: 18 };
    const inp = { width: '100%', padding: '8px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface-2)', color: 'var(--text)', fontSize: 14, boxSizing: 'border-box' };

    return React.createElement('div', { style: overlay, onClick: (e) => { if (e.target === e.currentTarget) onClose(); } },
      React.createElement('div', { style: box },
        React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
          React.createElement('div', { style: { fontWeight: 700, fontSize: 16 } }, 'Connect ' + meta.label),
          React.createElement('button', { onClick: onClose, style: { border: 'none', background: 'none', cursor: 'pointer', color: 'var(--muted)', fontSize: 18 } }, '×'),
        ),
        React.createElement('div', null,
          React.createElement('label', { style: { fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 } }, 'Display name'),
          React.createElement('input', { style: inp, value: form.displayName, onChange: (e) => set('displayName', e.target.value), placeholder: meta.label }),
        ),
        React.createElement('div', null,
          React.createElement('label', { style: { fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 } }, 'Account email (optional)'),
          React.createElement('input', { style: inp, value: form.accountEmail, onChange: (e) => set('accountEmail', e.target.value), placeholder: 'you@example.com', type: 'email' }),
        ),
        React.createElement('div', null,
          React.createElement('label', { style: { fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 } }, 'Username (optional)'),
          React.createElement('input', { style: inp, value: form.accountUsername, onChange: (e) => set('accountUsername', e.target.value), placeholder: 'username or handle' }),
        ),
        React.createElement('div', null,
          React.createElement('label', { style: { fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 } }, 'API key (optional)'),
          React.createElement('input', { style: inp, value: form.apiKey, onChange: (e) => set('apiKey', e.target.value), placeholder: 'Stored encrypted', type: 'password' }),
        ),
        err && React.createElement('div', { style: { color: 'var(--danger)', fontSize: 13 } }, err),
        React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' } },
          React.createElement(Button, { variant: 'outline', size: 'sm', onClick: onClose }, 'Cancel'),
          React.createElement(Button, { variant: 'primary', size: 'sm', loading: saving, onClick: save }, 'Connect account'),
        ),
      ),
    );
  }

  function AccountHubPage() {
    const [accounts, setAccounts] = useState([]);
    const [providers, setProviders] = useState([]);
    const [loading, setLoading] = useState(true);
    const [connecting, setConnecting] = useState(null);
    const [error, setError] = useState('');

    useEffect(() => {
      Promise.all([
        fetch(`${API}/api/account-hub`, { headers: { Authorization: `Bearer ${getToken()}` } }).then(r => r.json()),
        fetch(`${API}/api/account-hub/providers`, { headers: { Authorization: `Bearer ${getToken()}` } }).then(r => r.json()),
      ]).then(([a, p]) => {
        setAccounts(a.data || []);
        setProviders(p.data || []);
        setLoading(false);
      }).catch(() => { setError('Failed to load accounts'); setLoading(false); });
    }, []);

    async function handleConnect(provider, form) {
      const res = await fetch(`${API}/api/account-hub`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${getToken()}` },
        body: JSON.stringify({ provider, displayName: form.displayName, accountEmail: form.accountEmail || undefined, accountUsername: form.accountUsername || undefined, apiKey: form.apiKey || undefined }),
      });
      const data = await res.json();
      if (!data.success) throw new Error(data.error || 'Failed');
      setAccounts(prev => {
        const idx = prev.findIndex(a => a.provider === provider);
        return idx >= 0 ? prev.map((a, i) => i === idx ? data.data : a) : [...prev, data.data];
      });
    }

    async function handleDisconnect(provider) {
      await fetch(`${API}/api/account-hub/${provider}`, { method: 'DELETE', headers: { Authorization: `Bearer ${getToken()}` } });
      setAccounts(prev => prev.filter(a => a.provider !== provider));
    }

    const accountMap = Object.fromEntries(accounts.map(a => [a.provider, a]));

    return React.createElement('div', { style: { maxWidth: 900, margin: '0 auto', padding: '32px 24px' } },
      React.createElement(PageHeader, {
        title: 'Connected accounts',
        sub: 'Connect when needed. No accounts are created or linked automatically.',
      }),
      error && React.createElement('div', { style: { color: 'var(--danger)', marginBottom: 16 } }, error),
      React.createElement('div', { style: { background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 'var(--r)', padding: '12px 16px', marginBottom: 24, fontSize: 13, color: 'var(--text-2)', display: 'flex', gap: 10, alignItems: 'flex-start' } },
        React.createElement(Icon, { name: 'info', size: 16, style: { marginTop: 1, flexShrink: 0, color: 'var(--primary)' } }),
        React.createElement('span', null, 'Bizia uses a \"connect when needed\" model. You can use Bizia-managed hosting without any external accounts. Connect Google if you want Google SEO. Connect GitHub if you want GitHub Pages hosting.'),
      ),
      loading
        ? React.createElement('div', { style: { color: 'var(--muted)', textAlign: 'center', padding: 48 } }, 'Loading…')
        : React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 16 } },
            providers.map(p =>
              React.createElement(ProviderCard, {
                key: p.id, provider: p.id,
                account: accountMap[p.id] || null,
                onConnect: (pid) => setConnecting(pid),
                onDisconnect: handleDisconnect,
              })
            )
          ),
      connecting && React.createElement(ConnectModal, {
        provider: connecting,
        onClose: () => setConnecting(null),
        onSave: handleConnect,
      }),
    );
  }

  window.AccountHubPage = AccountHubPage;
})();