// settings.jsx — fully API-connected, no hardcoded data
(function () {
  const { Icon, Toggle } = window;

  const CURRENCIES = ['Rs.', '$', '€', '£', '₹'];

  function Settings({ store, theme, setTheme, user, onLogout }) {
    // ── Profile edit state
    const [editing, setEditing]   = React.useState(false);
    const [editName, setEditName] = React.useState('');
    const [editBiz, setEditBiz]   = React.useState('');
    const [editLoc, setEditLoc]   = React.useState('');
    const [saving, setSaving]     = React.useState(false);
    const [saveErr, setSaveErr]   = React.useState('');

    const openEdit = () => {
      setEditName(user?.name || '');
      setEditBiz(user?.business_name || '');
      setEditLoc(user?.location || '');
      setSaveErr('');
      setEditing(true);
    };

    const saveProfile = async () => {
      if (!editName.trim()) { setSaveErr('Name is required'); return; }
      setSaving(true); setSaveErr('');
      try {
        const token = localStorage.getItem('finflow_token');
        const res = await fetch('/api/profile', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
          body: JSON.stringify({
            name: editName.trim(),
            business_name: editBiz.trim() || null,
            location: editLoc.trim() || null,
            initials: editName.trim().split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase(),
          }),
        });
        if (!res.ok) throw new Error((await res.json()).error || 'Failed');
        window.location.reload();
      } catch (err) {
        setSaveErr(err.message);
        setSaving(false);
      }
    };

    // ── Currency (saved to profile)
    const [currency, setCurrency] = React.useState(user?.currency || 'Rs.');
    const saveCurrency = async (cur) => {
      setCurrency(cur);
      const token = localStorage.getItem('finflow_token');
      await fetch('/api/profile', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
        body: JSON.stringify({ currency: cur }),
      }).catch(() => {});
    };

    const initials = user?.initials || (user?.name || 'BO').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();

    return React.createElement('div', { className: 'page', 'data-screen-label': 'Settings' }, [

      React.createElement('h1', { key: 't', className: 'page-title', style: { marginBottom: 24 } }, 'Settings'),

      // ── Appearance
      React.createElement('div', { key: 'appear', className: 'card', style: { marginBottom: 16 } }, [
        React.createElement('div', { key: 'h', className: 'eyebrow', style: { marginBottom: 12 } }, 'Appearance'),
        React.createElement('div', { key: 'row', className: 'settings-row', style: { paddingTop: 0, borderBottom: 'none' } }, [
          React.createElement('div', { key: 'l' }, [
            React.createElement('div', { key: 't', className: 'sr-label' }, 'Theme'),
            React.createElement('div', { key: 's', className: 'sr-sub' },
              theme === 'light' ? 'Warm paper — easy on the eyes by day' : 'Precision dark — built for focus'),
          ]),
          React.createElement('div', { key: 'seg', className: 'segment' },
            ['light', 'dark'].map((m) =>
              React.createElement('button', { key: m, className: theme === m ? 'active' : '', onClick: () => setTheme(m) },
                m === 'light' ? 'Light' : 'Dark'))),
        ]),
      ]),

      // ── Profile
      React.createElement('div', { key: 'profile', className: 'card', style: { marginBottom: 16 } },
        editing
          ? React.createElement('div', { key: 'form' }, [
              React.createElement('div', { key: 'h', className: 'eyebrow', style: { marginBottom: 16 } }, 'Edit Profile'),
              React.createElement('div', { key: 'fn', className: 'form-field', style: { marginBottom: 12 } }, [
                React.createElement('label', { key: 'l', className: 'field-label' }, 'Name'),
                React.createElement('input', { key: 'i', className: 'input', value: editName, onChange: e => setEditName(e.target.value), placeholder: 'Your name' }),
              ]),
              React.createElement('div', { key: 'fb', className: 'form-field', style: { marginBottom: 12 } }, [
                React.createElement('label', { key: 'l', className: 'field-label' }, 'Business Name'),
                React.createElement('input', { key: 'i', className: 'input', value: editBiz, onChange: e => setEditBiz(e.target.value), placeholder: 'Optional' }),
              ]),
              React.createElement('div', { key: 'fl', className: 'form-field', style: { marginBottom: 16 } }, [
                React.createElement('label', { key: 'l', className: 'field-label' }, 'Location'),
                React.createElement('input', { key: 'i', className: 'input', value: editLoc, onChange: e => setEditLoc(e.target.value), placeholder: 'Optional' }),
              ]),
              saveErr && React.createElement('div', { key: 'err', style: { fontSize: 13, color: 'var(--red)', marginBottom: 12 } }, saveErr),
              React.createElement('div', { key: 'btns', style: { display: 'flex', gap: 10 } }, [
                React.createElement('button', { key: 'c', className: 'btn btn-sm btn-outline', style: { color: 'var(--text-2)' }, onClick: () => setEditing(false), disabled: saving }, 'Cancel'),
                React.createElement('button', { key: 's', className: 'btn btn-sm', style: { background: 'var(--accent)', color: '#0A0F1E', flex: 1 }, onClick: saveProfile, disabled: saving },
                  saving ? 'Saving…' : 'Save Changes'),
              ]),
            ])
          : React.createElement('div', { key: 'view', style: { display: 'flex', alignItems: 'center', gap: 16 } }, [
              React.createElement('div', { key: 'av', className: 'sb-avatar', style: { width: 56, height: 56, fontSize: 20, flexShrink: 0 } }, initials),
              React.createElement('div', { key: 'meta', style: { flex: 1, minWidth: 0 } }, [
                React.createElement('div', { key: 'n', style: { fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--text)' } }, user?.name || '—'),
                React.createElement('div', { key: 's', className: 'sr-sub' },
                  [user?.business_name, user?.location].filter(Boolean).join(' · ') || 'No business info set'),
              ]),
              React.createElement('button', { key: 'e', className: 'btn btn-sm btn-outline', style: { color: 'var(--accent-ink)' }, onClick: openEdit }, 'Edit'),
            ])
      ),

      // ── Categories
      React.createElement('div', { key: 'cat', className: 'card', style: { marginBottom: 16 } }, [
        React.createElement('div', { key: 'h', className: 'eyebrow', style: { marginBottom: 4 } }, 'Categories'),
        React.createElement('div', { key: 'is', className: 'sr-sub', style: { marginBottom: 0 } }, 'Income'),
        React.createElement('div', { key: 'ig', className: 'cat-grid' },
          store.incomeCats.map((c) =>
            React.createElement('div', { key: c.id, className: 'cat-pill' }, [
              React.createElement(Icon[c.icon] || Icon.tag, { key: 'i', size: 15, stroke: c.color }),
              c.label,
            ])
          )
        ),
        React.createElement('div', { key: 'es', className: 'sr-sub', style: { marginTop: 16 } }, 'Expense'),
        React.createElement('div', { key: 'eg', className: 'cat-grid' }, [
          ...store.expenseCats.map((c) =>
            React.createElement('div', { key: c.id, className: 'cat-pill' }, [
              React.createElement(Icon[c.icon] || Icon.tag, { key: 'i', size: 15, stroke: c.color }),
              c.label,
            ])
          ),
          React.createElement('button', { key: 'add', className: 'cat-pill', style: { color: 'var(--accent-ink)', borderStyle: 'dashed', cursor: 'pointer' } }, [
            React.createElement(Icon.plus, { key: 'i', size: 15, stroke: 'var(--accent-ink)' }),
            'Add',
          ]),
        ]),
      ]),

      // ── Currency
      React.createElement('div', { key: 'cur', className: 'card', style: { marginBottom: 16 } }, [
        React.createElement('div', { key: 'h', className: 'eyebrow', style: { marginBottom: 12 } }, 'Currency'),
        React.createElement('div', { key: 'opts', style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
          CURRENCIES.map((c) =>
            React.createElement('button', {
              key: c, className: 'cur-opt' + (currency === c ? ' active' : ''),
              onClick: () => saveCurrency(c),
            }, c + (c === 'Rs.' ? '  LKR' : ''))
          )
        ),
      ]),

      // ── Account / Logout
      React.createElement('div', { key: 'acct', className: 'card', style: { marginBottom: 16 } }, [
        React.createElement('div', { key: 'h', className: 'eyebrow', style: { marginBottom: 12 } }, 'Account'),
        React.createElement('button', {
          key: 'logout',
          onClick: onLogout,
          style: {
            width: '100%', height: 44, borderRadius: 8,
            background: 'rgba(255,71,87,0.08)', border: '1px solid rgba(255,71,87,0.25)',
            color: 'var(--red)', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            transition: 'background 150ms',
            cursor: 'pointer',
          },
        }, [
          React.createElement(Icon.logout || Icon.arrowRight, { key: 'i', size: 16, stroke: 'var(--red)' }),
          'Sign Out',
        ]),
      ]),

    ]);
  }

  window.Settings = Settings;
})();