// Tiny "change password" drawer shown from the topbar button.

function Profile({ open, onClose }) {
  const [current, setCurrent] = React.useState('');
  const [next, setNext] = React.useState('');
  const [confirm, setConfirm] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState(null);

  React.useEffect(() => {
    if (open) {
      setCurrent(''); setNext(''); setConfirm('');
      setMsg(null); setBusy(false);
    }
  }, [open]);

  async function submit(e) {
    e.preventDefault();
    setMsg(null);
    if (!next || next.length < 6) { setMsg({ kind: 'err', text: 'new password must be at least 6 characters' }); return; }
    if (next !== confirm)         { setMsg({ kind: 'err', text: 'new password and confirm do not match' }); return; }
    setBusy(true);
    try {
      await window.apiFetch('/api/auth/password', {
        method: 'POST',
        body: JSON.stringify({ current, new: next }),
      });
      setMsg({ kind: 'ok', text: 'password updated — other sessions signed out' });
      setCurrent(''); setNext(''); setConfirm('');
    } catch (e2) {
      setMsg({ kind: 'err', text: e2.message || 'failed' });
    } finally { setBusy(false); }
  }

  if (!open) return <div className="drawer" />;

  const INPUT = {
    width: '100%', padding: '6px 10px', background: 'var(--surface)',
    border: '1px solid var(--border-2)', borderRadius: 2,
    color: 'var(--text)', fontFamily: 'var(--mono)', fontSize: 12, outline: 'none',
  };

  return (
    <div className="drawer open">
      <div className="drawer-head">
        <div style={{ flex: 1 }}>
          <div className="drawer-title">Change password</div>
          <div className="drawer-sub">updates your sign-in credential</div>
        </div>
        <button className="close" onClick={onClose}>×</button>
      </div>
      <form onSubmit={submit} className="drawer-body" style={{ gap: 12 }}>
        <div className="tweak-row">
          <label>Current password</label>
          <input style={INPUT} type="password" autoComplete="current-password"
                 value={current} onChange={e => setCurrent(e.target.value)} autoFocus required />
        </div>
        <div className="tweak-row">
          <label>New password</label>
          <input style={INPUT} type="password" autoComplete="new-password"
                 value={next} onChange={e => setNext(e.target.value)} required />
        </div>
        <div className="tweak-row">
          <label>Confirm new password</label>
          <input style={INPUT} type="password" autoComplete="new-password"
                 value={confirm} onChange={e => setConfirm(e.target.value)} required />
        </div>
        {msg && (
          <div style={{ color: msg.kind === 'ok' ? 'var(--ok)' : 'var(--crit)', fontSize: 11 }}>
            {msg.kind === 'ok' ? '✓' : '✗'} {msg.text}
          </div>
        )}
      </form>
      <div className="drawer-actions" style={{ gridTemplateColumns: '1fr 1fr' }}>
        <button className="action-btn" type="button" onClick={onClose} disabled={busy}>close</button>
        <button className="action-btn" type="button" onClick={submit}
          disabled={busy || !current || !next || !confirm}
          style={{ color: 'var(--accent)', borderColor: 'var(--accent-dim)', background: 'var(--accent-bg)' }}>
          {busy ? 'saving…' : 'change password'}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { Profile });