// login.jsx — PIN login + account creation screen
(function () {

  const DEVICE_USER_KEY = 'finflow_device_user'; // stores {id, name, initials, business_name}

  function getDeviceUser() {
    try { return JSON.parse(localStorage.getItem(DEVICE_USER_KEY)); } catch { return null; }
  }
  function setDeviceUser(user) {
    try { localStorage.setItem(DEVICE_USER_KEY, JSON.stringify(user)); } catch {}
  }
  function clearDeviceUser() {
    try { localStorage.removeItem(DEVICE_USER_KEY); } catch {}
  }

  /* ── Number pad ─────────────────────────────────────────── */
  function NumPad({ onDigit, onBack, disabled }) {
    const keys = [1, 2, 3, 4, 5, 6, 7, 8, 9, null, 0, 'back'];
    return React.createElement('div', { className: 'lp-numpad' },
      keys.map((k, i) => {
        if (k === null) return React.createElement('div', { key: i, className: 'lp-numpad-spacer' });
        if (k === 'back') return React.createElement('button', {
          key: i, className: 'lp-key lp-back', onClick: onBack, disabled,
          'aria-label': 'Delete',
        }, React.createElement('svg', { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8 },
          React.createElement('path', { d: 'M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z' }),
          React.createElement('line', { x1: 18, y1: 9, x2: 12, y2: 15 }),
          React.createElement('line', { x1: 12, y1: 9, x2: 18, y2: 15 })));
        return React.createElement('button', {
          key: i, className: 'lp-key', onClick: () => onDigit(String(k)), disabled,
        }, k);
      })
    );
  }

  /* ── PIN dots ───────────────────────────────────────────── */
  function PinDots({ count, error }) {
    return React.createElement('div', { className: 'lp-dots' + (error ? ' lp-dots-error' : '') },
      Array.from({ length: 6 }, (_, i) =>
        React.createElement('div', { key: i, className: 'lp-dot' + (i < count ? ' filled' : '') + (error ? ' err' : '') })
      )
    );
  }

  /* ── Logo ───────────────────────────────────────────────── */
  function Logo() {
    return React.createElement('div', { className: 'lp-logo' },
      React.createElement('span', { style: { color: 'var(--text)' } }, 'FIN'),
      React.createElement('span', { style: { color: 'var(--accent-ink)' } }, 'FLOW')
    );
  }

  /* ── Avatar circle ──────────────────────────────────────── */
  function Avatar({ initials, size = 72 }) {
    return React.createElement('div', {
      className: 'lp-avatar',
      style: { width: size, height: size, fontSize: size * 0.33 },
    }, initials);
  }

  /* ── PIN entry screen ───────────────────────────────────── */
  function PinScreen({ user, onSuccess, onSwitchAccount, label = 'Enter your passcode', confirmPin = null }) {
    const [pin, setPin] = React.useState('');
    const [error, setError] = React.useState(false);
    const [loading, setLoading] = React.useState(false);

    const addDigit = (d) => {
      if (pin.length >= 6 || loading) return;
      setError(false);
      const next = pin + d;
      setPin(next);
      if (next.length === 6) verify(next);
    };

    const removeDigit = () => { if (!loading) { setPin(p => p.slice(0, -1)); setError(false); } };

    const verify = async (code) => {
      setLoading(true);
      try {
        await onSuccess(code);
      } catch {
        setError(true);
        setPin('');
        setLoading(false);
      }
    };

    return React.createElement('div', { className: 'lp-pin-screen' },
      React.createElement(Logo),
      React.createElement('div', { style: { marginTop: 40 } },
        React.createElement(Avatar, { initials: user.initials, size: 72 })),
      React.createElement('div', { className: 'lp-pin-name' }, user.name),
      user.business_name && React.createElement('div', { className: 'lp-user-biz', style: { textAlign: 'center', marginTop: 2, marginBottom: 0 } }, user.business_name),
      React.createElement('div', { className: 'lp-pin-label' }, label),
      React.createElement(PinDots, { count: pin.length, error }),
      error && React.createElement('div', { className: 'lp-error' }, 'Wrong passcode. Try again.'),
      React.createElement(NumPad, { onDigit: addDigit, onBack: removeDigit, disabled: loading }),
      onSwitchAccount && React.createElement('button', {
        className: 'lp-switch-link',
        onClick: onSwitchAccount,
        style: { marginTop: 28 },
      }, 'Not you? Switch account')
    );
  }

  /* ── Register flow ──────────────────────────────────────── */
  function RegisterScreen({ onBack, onRegistered }) {
    const [step, setStep] = React.useState('info');
    const [name, setName] = React.useState('');
    const [biz, setBiz] = React.useState('');
    const [loc, setLoc] = React.useState('');
    const [pin, setPin] = React.useState('');
    const [err, setErr] = React.useState('');

    const goToPin = () => {
      if (!name.trim()) { setErr('Please enter your name'); return; }
      setErr(''); setStep('pin');
    };

    const handleSetPin = async (code) => {
      setPin(code); setStep('confirm');
      throw new Error('moving to confirm');
    };

    const handleConfirmPin = async (code) => {
      if (code !== pin) throw new Error('mismatch');
      const res = await fetch('/api/auth/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: name.trim(), business_name: biz.trim() || null, location: loc.trim() || null, passcode: code }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Registration failed');
      onRegistered(data.token, data.user);
    };

    const autoInitials = name.trim().split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase() || 'ME';

    if (step === 'pin') return React.createElement(PinScreen, {
      user: { initials: autoInitials, name: name.trim() },
      label: 'Set a 6-digit passcode',
      onSuccess: handleSetPin,
      onSwitchAccount: null,
    });

    if (step === 'confirm') return React.createElement(PinScreen, {
      user: { initials: autoInitials, name: name.trim() },
      label: 'Confirm your passcode',
      onSuccess: handleConfirmPin,
      onSwitchAccount: null,
    });

    return React.createElement('div', { className: 'lp-register' },
      onBack && React.createElement('button', { className: 'lp-back-btn', onClick: onBack },
        React.createElement('svg', { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },
          React.createElement('polyline', { points: '15 18 9 12 15 6' })),
        'Back'
      ),
      React.createElement(Logo),
      React.createElement('div', { className: 'lp-reg-title' }, 'Create Account'),
      React.createElement('div', { className: 'lp-reg-sub' }, 'Tell us a little about yourself'),
      React.createElement('div', { className: 'lp-form' }, [
        React.createElement('div', { key: 'fn', className: 'lp-field' }, [
          React.createElement('label', { key: 'l', className: 'lp-label' }, 'Your Name'),
          React.createElement('input', { key: 'i', className: 'input lp-input', placeholder: 'e.g. Dinesh Kumara', value: name, autoFocus: true, onChange: e => { setName(e.target.value); setErr(''); }, onKeyDown: e => e.key === 'Enter' && goToPin() }),
        ]),
        React.createElement('div', { key: 'fb', className: 'lp-field' }, [
          React.createElement('label', { key: 'l', className: 'lp-label' }, 'Business Name'),
          React.createElement('input', { key: 'i', className: 'input lp-input', placeholder: 'Optional', value: biz, onChange: e => setBiz(e.target.value) }),
        ]),
        React.createElement('div', { key: 'fl', className: 'lp-field' }, [
          React.createElement('label', { key: 'l', className: 'lp-label' }, 'Location'),
          React.createElement('input', { key: 'i', className: 'input lp-input', placeholder: 'Optional', value: loc, onChange: e => setLoc(e.target.value), onKeyDown: e => e.key === 'Enter' && goToPin() }),
        ]),
        err && React.createElement('div', { key: 'err', className: 'lp-error' }, err),
        React.createElement('button', { key: 'btn', className: 'btn lp-continue', onClick: goToPin }, 'Continue →'),
      ])
    );
  }

  /* ── Account picker (only shown when "Switch account" tapped) ── */
  function AccountPicker({ users, onSelect, onCreateNew }) {
    return React.createElement('div', { className: 'lp-select' },
      React.createElement(Logo),
      React.createElement('div', { className: 'lp-welcome' }, 'Choose account'),
      React.createElement('div', { className: 'lp-welcome-sub' }, 'Select the account you want to sign in to'),
      React.createElement('div', { className: 'lp-user-list' },
        users.map(u => React.createElement('button', { key: u.id, className: 'lp-user-card', onClick: () => onSelect(u) },
          React.createElement('div', { className: 'lp-avatar', style: { width: 44, height: 44, fontSize: 15, flexShrink: 0 } }, u.initials),
          React.createElement('div', { className: 'lp-user-info' },
            React.createElement('div', { className: 'lp-user-name' }, u.name),
            u.business_name && React.createElement('div', { className: 'lp-user-biz' }, u.business_name)
          ),
          React.createElement('svg', { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'var(--text-3)', strokeWidth: 2 },
            React.createElement('polyline', { points: '9 18 15 12 9 6' }))
        ))
      ),
      React.createElement('button', { className: 'lp-new-account', onClick: onCreateNew },
        React.createElement('svg', { width: 15, height: 15, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2 },
          React.createElement('circle', { cx: 12, cy: 12, r: 10 }),
          React.createElement('line', { x1: 12, y1: 8, x2: 12, y2: 16 }),
          React.createElement('line', { x1: 8, y1: 12, x2: 16, y2: 12 })),
        'Create new account'
      )
    );
  }

  /* ── Main LoginScreen ───────────────────────────────────── */
  function LoginScreen({ onLogin }) {
    const [view, setView]         = React.useState('loading'); // 'loading'|'pin'|'picker'|'register'
    const [deviceUser, setDeviceUser_] = React.useState(null);
    const [allUsers, setAllUsers] = React.useState([]);

    React.useEffect(() => {
      fetch('/api/auth/users')
        .then(r => r.json())
        .then(users => {
          setAllUsers(users);
          const saved = getDeviceUser();
          // Check if the saved device user still exists in the DB
          const found = saved && users.find(u => u.id === saved.id);
          if (found) {
            setDeviceUser_(found);
            setView('pin');
          } else if (users.length === 0) {
            setView('register');
          } else {
            // No device user saved — show picker once to let them choose
            setView('picker');
          }
        })
        .catch(() => setView('register'));
    }, []);

    const handleLogin = async (code) => {
      const res = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ user_id: deviceUser.id, passcode: code }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Login failed');
      // Remember this user on this device
      setDeviceUser(data.user);
      onLogin(data.token, data.user);
    };

    const handleSelectUser = (user) => {
      setDeviceUser_(user);
      setView('pin');
    };

    const handleRegistered = (token, user) => {
      setDeviceUser(user);
      onLogin(token, user);
    };

    const handleSwitchAccount = () => {
      clearDeviceUser();
      setDeviceUser_(null);
      setView('picker');
    };

    if (view === 'loading') {
      return React.createElement('div', { className: 'lp-root lp-loading' },
        React.createElement(Logo),
        React.createElement('div', { className: 'lp-spinner' })
      );
    }

    if (view === 'register') {
      return React.createElement('div', { className: 'lp-root' },
        React.createElement(RegisterScreen, {
          onBack: allUsers.length ? () => setView('picker') : null,
          onRegistered: handleRegistered,
        })
      );
    }

    if (view === 'picker') {
      return React.createElement('div', { className: 'lp-root' },
        React.createElement(AccountPicker, {
          users: allUsers,
          onSelect: handleSelectUser,
          onCreateNew: () => setView('register'),
        })
      );
    }

    // PIN view — goes straight here on return visits
    return React.createElement('div', { className: 'lp-root' },
      React.createElement(PinScreen, {
        user: deviceUser,
        onSuccess: handleLogin,
        onSwitchAccount: allUsers.length > 1 ? handleSwitchAccount : null,
      })
    );
  }

  window.LoginScreen = LoginScreen;
})();