var Account = function (props) {
  var navigate = props.navigate;
  var user = props.user;
  var onLogout = props.onLogout;

  var _loading = React.useState(!user);
  var loading = _loading[0], setLoading = _loading[1];

  var _profile = React.useState(user || null);
  var profile = _profile[0], setProfile = _profile[1];

  var _error = React.useState(null);
  var error = _error[0], setError = _error[1];

  var _nlToggle = React.useState(false);
  var nlEnabled = _nlToggle[0], setNlEnabled = _nlToggle[1];

  React.useEffect(function () {
    if (user) { setProfile(user); setLoading(false); return; }
    fetch('/api/auth', {
      method: 'POST', credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'me' })
    }).then(function (r) { return r.json(); }).then(function (data) {
      if (!data.user) { navigate('login'); return; }
      setProfile(data.user);
      setNlEnabled(!!data.user.newsletter);
      setLoading(false);
    }).catch(function () { setError('Failed to load profile'); setLoading(false); });
  }, []);

  var handleLogout = function () {
    fetch('/api/auth', {
      method: 'POST', credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'logout' })
    }).then(function () {
      if (onLogout) onLogout();
      navigate('home');
    }).catch(function () { navigate('home'); });
  };

  var handleNewsletterToggle = function () {
    var next = !nlEnabled;
    setNlEnabled(next);
    fetch('/api/auth', {
      method: 'POST', credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'newsletter_toggle', enabled: next })
    }).catch(function () { setNlEnabled(!next); });
  };

  var formatDate = function (dateStr) {
    if (!dateStr) return '---';
    var d = new Date(dateStr);
    var months = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
    return months[d.getMonth()] + ' ' + d.getFullYear();
  };

  // -- styles --
  var wrap = { maxWidth: '640px', margin: '0 auto', padding: '48px 28px 64px' };
  var heading = { fontFamily: 'var(--font-display)', fontSize: '28px', color: 'var(--text)', margin: '0 0 32px', letterSpacing: '0.02em' };
  var card = { background: 'var(--surface)', border: '1px solid var(--border)', padding: '24px', marginBottom: '24px' };
  var sectionTitle = { fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.16em', color: 'var(--amber)', textTransform: 'uppercase', margin: '0 0 16px' };
  var label = { fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.12em', marginBottom: '4px' };
  var mono = { fontFamily: 'var(--font-mono)' };
  var muted = { color: 'var(--text-muted)' };
  var row = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid var(--border)' };
  var linkBtn = { background: 'none', border: '1px solid var(--amber-dim)', color: 'var(--amber)', fontFamily: 'var(--font-mono)', fontSize: '11px', padding: '5px 12px', cursor: 'pointer', textTransform: 'uppercase', letterSpacing: '0.08em' };
  var primaryBtn = { background: 'var(--amber)', color: 'var(--bg)', border: 'none', fontFamily: 'var(--font-mono)', fontSize: '12px', fontWeight: 700, padding: '12px 24px', cursor: 'pointer', textTransform: 'uppercase', letterSpacing: '0.1em', width: '100%' };

  if (loading) {
    return React.createElement('div', { style: wrap },
      React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-muted)', padding: '60px 0', textAlign: 'center' } },
        React.createElement('span', { style: { color: 'var(--amber)' } }, '$ '), 'loading profile...'
      )
    );
  }

  if (error) {
    return React.createElement('div', { style: wrap },
      React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--error)', padding: '60px 0', textAlign: 'center' } }, error)
    );
  }

  if (!profile) return null;

  var tierColors = { CITIZEN: 'var(--text-2)', GLADIATOR: 'var(--amber)', CHAMPION: 'var(--deep-amber)' };
  var tier = (profile.tier || 'CITIZEN').toUpperCase();
  var providers = ['discord', 'github', 'google'];
  var linked = profile.linked_accounts || {};

  var badge = React.createElement('span', {
    style: { fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase', border: '1px solid ' + (tierColors[tier] || 'var(--amber-dim)'), color: tierColors[tier] || 'var(--text-2)', padding: '3px 10px', display: 'inline-block' }
  }, tier);

  var regSource = profile.registration_source === 'colosseum' ? 'registered via colosseum' : 'registered via itsbroken.ai';

  return React.createElement('div', { style: wrap },
    React.createElement('h1', { style: heading }, '$ whoami'),

    // -- Profile card --
    React.createElement('div', { style: card },
      React.createElement('div', { style: { fontFamily: 'var(--font-display)', fontSize: '24px', color: 'var(--text)', marginBottom: '4px' } }, profile.display_name || profile.name || 'Operator'),
      profile.handle && React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-muted)', marginBottom: '12px' } }, '@' + profile.handle),
      React.createElement('div', { style: { display: 'flex', gap: '12px', alignItems: 'center', marginBottom: '8px' } }, badge),
      React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', marginBottom: '4px' } }, regSource),
      React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)' } }, 'member since ' + formatDate(profile.created_at))
    ),

    // -- Linked accounts --
    React.createElement('div', { style: card },
      React.createElement('h2', { style: sectionTitle }, '$ ls /linked'),
      providers.map(function (p) {
        var isLinked = linked[p];
        return React.createElement('div', { key: p, style: row },
          React.createElement('div', null,
            React.createElement('span', { style: Object.assign({}, mono, { fontSize: '13px', color: isLinked ? 'var(--text)' : 'var(--text-muted)', textTransform: 'capitalize' }) }, p),
            isLinked && React.createElement('span', { style: Object.assign({}, mono, { fontSize: '11px', color: 'var(--text-muted)', marginLeft: '8px' }) }, isLinked)
          ),
          !isLinked && React.createElement('a', { href: '/auth/oauth/' + p, style: linkBtn }, 'Connect')
        );
      })
    ),

    // -- Newsletter --
    React.createElement('div', { style: card },
      React.createElement('h2', { style: sectionTitle }, '$ cat /subscriptions'),
      React.createElement('div', { style: row },
        React.createElement('span', { style: Object.assign({}, mono, { fontSize: '13px', color: 'var(--text)' }) }, 'itsbroken.ai newsletter'),
        React.createElement('button', {
          onClick: handleNewsletterToggle,
          style: Object.assign({}, linkBtn, { color: nlEnabled ? 'var(--amber)' : 'var(--text-muted)', borderColor: nlEnabled ? 'var(--amber)' : 'var(--border)' })
        }, nlEnabled ? 'ON' : 'OFF')
      )
    ),

    // -- Colosseum --
    React.createElement('div', { style: card },
      React.createElement('h2', { style: sectionTitle }, '$ cat /colosseum'),
      profile.registration_source === 'itsbroken' && profile.is_system_generated
        ? React.createElement('div', null,
            React.createElement('p', { style: Object.assign({}, mono, { fontSize: '13px', color: 'var(--text-2)', margin: '0 0 12px' }) }, 'You have a Colosseum account but haven\'t set up a handle yet.'),
            React.createElement('a', { href: 'https://colosseum.itsbroken.ai/settings', target: '_blank', rel: 'noopener', style: Object.assign({}, mono, { fontSize: '12px', color: 'var(--amber)', textDecoration: 'none', borderBottom: '1px solid var(--amber-dim)' }) }, 'Set up Colosseum handle →')
          )
        : React.createElement('div', null,
            React.createElement('div', { style: Object.assign({}, mono, { fontSize: '13px', color: 'var(--text-2)', marginBottom: '12px' }) }, 'Tier: ', badge),
            React.createElement('a', { href: 'https://colosseum.itsbroken.ai', target: '_blank', rel: 'noopener', style: Object.assign({}, mono, { fontSize: '12px', color: 'var(--amber)', textDecoration: 'none', borderBottom: '1px solid var(--amber-dim)' }) }, 'Go to Colosseum →')
          )
    ),

    // -- Actions --
    React.createElement('div', { style: { marginTop: '8px' } },
      React.createElement('button', { onClick: handleLogout, style: primaryBtn }, 'SIGN OUT'),
      React.createElement('div', { style: { display: 'flex', gap: '24px', marginTop: '16px', justifyContent: 'center' } },
        React.createElement('a', { href: '#', style: Object.assign({}, mono, { fontSize: '11px', color: 'var(--text-2)', textDecoration: 'none' }) }, 'Change password'),
        React.createElement('a', { href: '#', style: Object.assign({}, mono, { fontSize: '11px', color: 'var(--text-muted)', textDecoration: 'none' }) }, 'Delete account')
      )
    )
  );
};

window.Account = Account;