// login-settings.jsx — Login (age gate + PIN) + Register + Settings overlay

const ACCOUNT_KEY = 'mahamon.account';

const LANGS = [
  { code: 'en', name: 'English',  native: 'English' },
  { code: 'fr', name: 'French',   native: 'Français' },
  { code: 'de', name: 'German',   native: 'Deutsch' },
  { code: 'es', name: 'Spanish',  native: 'Español' },
  { code: 'zh', name: 'Chinese',  native: '中文' },
  { code: 'ru', name: 'Russian',  native: 'Русский' },
  { code: 'ja', name: 'Japanese', native: '日本語' },
  { code: 'ko', name: 'Korean',   native: '한국어' },
];

// ─── LOGIN ────────────────────────────────────────────
function LoginScreen({ onSignIn }) {
  const t = useT();
  // Read stored account (if any) to pre-fill email and default to signin mode
  const storedAccount = React.useMemo(() => {
    try { return JSON.parse(localStorage.getItem(ACCOUNT_KEY) || 'null'); }
    catch (e) { return null; }
  }, []);

  const [mode, setMode] = React.useState(storedAccount ? 'signin' : 'create');
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState(storedAccount?.email || '');
  const [pin, setPin] = React.useState('');
  const [adult, setAdult] = React.useState(false);
  const [error, setError] = React.useState('');

  // when switching modes, gentle fade
  const [transitionKey, setTransitionKey] = React.useState(0);
  const switchMode = (m) => {
    setMode(m);
    setError('');
    setPin('');
    setTransitionKey((k) => k + 1);
  };

  const cleanName = (s) => stripEmoji(s).slice(0, 24);
  const onNameChange = (e) => setName(cleanName(e.target.value));
  const onEmailChange = (e) => {
    setEmail(e.target.value);
    setError('');
  };

  const valid = mode === 'signin'
    ? email.includes('@') && pin.length === 6
    : name.trim().length >= 2 && email.includes('@') && pin.length === 6 && adult;

  const submit = () => {
    if (!valid) return;
    setError('');
    if (mode === 'signin') {
      // Verify against stored account (local mockup; Supabase will replace this)
      if (!storedAccount
          || storedAccount.email.toLowerCase() !== email.toLowerCase()
          || storedAccount.pin !== pin) {
        setError(t('login.error'));
        return;
      }
      onSignIn({ name: storedAccount.name, email: storedAccount.email });
    } else {
      // Create account: persist {name, email, pin}, sign in with {name, email}
      const account = { name: name.trim(), email, pin };
      try { localStorage.setItem(ACCOUNT_KEY, JSON.stringify(account)); } catch (e) {}
      onSignIn({ name: account.name, email: account.email });
    }
  };

  // Keypad controls
  const addDigit = (d) => {
    setPin((p) => (p.length < 6 ? p + String(d) : p));
    setError('');
  };
  const removeDigit = () => {
    setPin((p) => p.slice(0, -1));
    setError('');
  };

  // Physical keyboard input — only when no other input is focused
  React.useEffect(() => {
    const handler = (e) => {
      const active = document.activeElement;
      if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) return;
      if (e.key >= '0' && e.key <= '9') {
        e.preventDefault();
        addDigit(e.key);
      } else if (e.key === 'Backspace') {
        e.preventDefault();
        removeDigit();
      } else if (e.key === 'Enter' && valid) {
        e.preventDefault();
        submit();
      }
    };
    document.addEventListener('keydown', handler);
    return () => document.removeEventListener('keydown', handler);
  }, [valid, mode, email, name, pin, adult]);

  return (
    <div className="login-bg fade-in" key={transitionKey}>
      {/* Brand mark — horizontal wordmark lockup */}
      <img src="logo-wordmark.png" alt="Mahamon House" style={{
        height: 100, width: 'auto', display: 'block',
        flexShrink: 0, alignSelf: 'flex-start', /* don't stretch in flex column */
        objectFit: 'contain',
        marginLeft: -10, /* optical alignment with text — the M's left bearing eats some space */
      }} />

      {/* Title */}
      <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div className="login-title">
          {mode === 'signin'
            ? <>{t('login.signin_title_1')}<br /><span style={{ color: 'var(--text-3)' }}>{t('login.signin_title_2')}</span></>
            : <>{t('login.create_title_1')}<br />{t('login.create_title_2')}</>}
        </div>
        <div className="login-sub">
          {mode === 'signin' ? t('login.signin_sub') : t('login.create_sub')}
        </div>
      </div>

      {/* Form */}
      <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 0 }}>
        {mode === 'create' && (
          <>
            <input
              className="input"
              placeholder={t('login.username')}
              value={name}
              onChange={onNameChange}
              maxLength={24}
              autoComplete="username"
              spellCheck={false}
            />
            <div className="input-counter">
              {name.length > 0 ? t('login.username_count', { n: name.length }) : t('login.username_hint')}
            </div>
          </>
        )}
        <input
          className="input"
          placeholder={t('login.email')}
          type="email"
          autoComplete="email"
          value={email}
          onChange={onEmailChange}
          style={mode === 'create' ? { marginTop: 8 } : undefined}
        />
      </div>

      {/* Age gate — only on signup, BEFORE the PIN keypad so it's visible */}
      {mode === 'create' && (
        <div className="press" onClick={() => setAdult((a) => !a)}
          style={{
            marginTop: 22, display: 'flex', gap: 14, alignItems: 'flex-start',
            cursor: 'pointer'
          }}>
          <div className={'checkbox' + (adult ? ' on' : '')}>
            {adult && <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5L4 7L8 3" stroke="#050505" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5, paddingTop: 1 }}>
            {t('login.age_text_1')} <span style={{ color: 'var(--text)' }}>{t('login.age_text_2')}</span> {t('login.age_text_3')}<br />
            <span style={{ color: 'var(--text-4)' }}>{t('login.age_disclaimer')}</span>
          </div>
        </div>
      )}

      {/* PIN — dots + on-screen numeric keypad */}
      <div style={{ marginTop: 22 }}>
        <div className="eyebrow" style={{ textAlign: 'center', marginBottom: 14, color: 'var(--text-3)' }}>
          {mode === 'signin' ? t('login.pin') : t('login.pin_create')}
        </div>

        {/* 6 dots */}
        <div style={{
          display: 'flex', gap: 14, justifyContent: 'center', marginBottom: 16,
        }}>
          {[0,1,2,3,4,5].map((i) => (
            <div key={i} style={{
              width: 11, height: 11, borderRadius: '50%',
              border: '1px solid var(--line-2)',
              background: pin.length > i ? 'var(--text)' : 'transparent',
              transition: 'background 120ms, border-color 120ms',
              borderColor: pin.length > i ? 'var(--text)' : 'var(--line-2)',
            }} />
          ))}
        </div>

        {/* 3×4 keypad */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 6,
          maxWidth: 240,
          margin: '0 auto',
        }}>
          {[1,2,3,4,5,6,7,8,9].map((n) => (
            <button
              key={n}
              type="button"
              className="press"
              onClick={() => addDigit(n)}
              style={{
                height: 50,
                border: '1px solid var(--line-2)',
                background: 'transparent',
                color: 'var(--text)',
                fontFamily: 'var(--font-mono)',
                fontSize: 18,
                letterSpacing: '0.02em',
                fontVariantNumeric: 'tabular-nums',
                cursor: 'pointer',
                transition: 'border-color 160ms, background 160ms',
              }}
            >{n}</button>
          ))}
          <div /> {/* empty slot */}
          <button
            type="button"
            className="press"
            onClick={() => addDigit(0)}
            style={{
              height: 50,
              border: '1px solid var(--line-2)',
              background: 'transparent',
              color: 'var(--text)',
              fontFamily: 'var(--font-mono)',
              fontSize: 18,
              letterSpacing: '0.02em',
              fontVariantNumeric: 'tabular-nums',
              cursor: 'pointer',
              transition: 'border-color 160ms, background 160ms',
            }}
          >0</button>
          <button
            type="button"
            className="press"
            onClick={removeDigit}
            disabled={pin.length === 0}
            style={{
              height: 50,
              border: 0,
              background: 'transparent',
              color: pin.length === 0 ? 'var(--text-4)' : 'var(--text-2)',
              cursor: pin.length === 0 ? 'default' : 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'color 160ms',
            }}
            aria-label="backspace"
          >
            <svg width="18" height="14" viewBox="0 0 18 14" fill="none">
              <path d="M5 1L1 7L5 13H17V1H5Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />
              <path d="M9 5L13 9M13 5L9 9" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
            </svg>
          </button>
        </div>

        {error && (
          <div style={{
            marginTop: 12, fontSize: 12, color: '#d1786e',
            letterSpacing: '0.04em', lineHeight: 1.5, textAlign: 'center',
          }}>
            {error}
          </div>
        )}
      </div>

      <div style={{ flex: 1 }} />

      {/* Hint when invalid — tells user what's missing */}
      {!valid && (
        <div className="eyebrow" style={{
          textAlign: 'center', color: 'var(--text-4)', marginBottom: 12,
        }}>
          {!email.includes('@') ? t('login.hint_email') :
           mode === 'create' && name.trim().length < 2 ? t('login.hint_name') :
           pin.length < 6 ? t('login.hint_pin', { n: 6 - pin.length }) :
           mode === 'create' && !adult ? t('login.hint_adult') : ''}
        </div>
      )}

      {/* Big serif italic enter */}
      <button
        className="login-enter press"
        onClick={submit}
        disabled={!valid}
      >
        {mode === 'signin' ? t('login.enter') : t('login.open')}
      </button>

      <div style={{
        textAlign: 'right', marginTop: 16, fontSize: 11,
        color: 'var(--text-3)', letterSpacing: '0.04em'
      }}>
        {mode === 'signin' ? t('login.new_here') + '  ' : t('login.already_guest') + '  '}
        <span className="rules-link press"
          onClick={() => switchMode(mode === 'signin' ? 'create' : 'signin')}
          style={{ color: 'var(--text)' }}>
          {mode === 'signin' ? t('login.open_link') : t('login.signin_link')}
        </span>
      </div>
    </div>
  );
}

// ─── SETTINGS ─────────────────────────────────────────
function SettingsOverlay({ user, onClose, onSignOut, onDelete, onUpdateUser, settings, setSettings }) {
  const t = useT();
  const [view, setView] = React.useState('main'); // main | language | confirmDelete

  // Username editing
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(user?.name || '');
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (editing && inputRef.current) inputRef.current.focus();
  }, [editing]);

  const startEdit = () => { setDraft(user?.name || ''); setEditing(true); };
  const cancelEdit = () => { setEditing(false); };
  const saveEdit = () => {
    const v = stripEmoji(draft).trim().slice(0, 24);
    if (v.length < 2) return;
    onUpdateUser({ ...user, name: v });
    setEditing(false);
  };
  const onDraftChange = (e) => {
    setDraft(stripEmoji(e.target.value).slice(0, 24));
  };

  if (view === 'language') {
    return (
      <div className="hist fade-in" style={{ background: 'var(--bg)' }}>
        <div className="topbar">
          <div className="press icon-btn" onClick={() => setView('main')}><ChevLeft /></div>
          <div style={{ flex: 1, textAlign: 'center', letterSpacing: '0.16em' }}>{t('settings.lang_screen')}</div>
          <div className="press icon-btn" onClick={onClose}><IconClose /></div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {LANGS.map((l) =>
            <button key={l.code} className="set-row press"
              onClick={() => { setSettings({ ...settings, lang: l.code }); setView('main'); }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{
                  fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                  fontSize: 22, color: 'var(--text)'
                }}>{l.native}</div>
                <div className="eyebrow" style={{ color: 'var(--text-4)' }}>{l.name}</div>
              </div>
              {settings.lang === l.code &&
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7L6 11L12 3" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
              }
            </button>
          )}
        </div>
      </div>
    );
  }

  if (view === 'confirmDelete') {
    return (
      <div className="hist fade-in" style={{ background: 'var(--bg)', padding: '0' }}>
        <div className="topbar">
          <div className="press icon-btn" onClick={() => setView('main')}><ChevLeft /></div>
          <div style={{ flex: 1, textAlign: 'center', letterSpacing: '0.16em' }}>{t('settings.delete_screen')}</div>
          <div style={{ width: 28 }} />
        </div>
        <div style={{ flex: 1, padding: '64px 32px 32px', display: 'flex', flexDirection: 'column' }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>{t('settings.delete_eye')}</div>
          <div className="serif" style={{
            fontSize: 36, fontStyle: 'italic', letterSpacing: '-0.01em',
            lineHeight: 1.05, marginBottom: 24, color: 'var(--text)'
          }}>{t('settings.delete_title')}</div>
          <div style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.55 }}>
            {t('settings.delete_body')}
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ display: 'flex', gap: 12 }}>
            <button className="btn" onClick={() => setView('main')}>{t('settings.cancel')}</button>
            <button className="btn" style={{ borderColor: '#a04338', color: '#d1786e' }}
              onClick={() => { onDelete(); onClose(); }}>{t('settings.delete_confirm')}</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="hist fade-in" style={{ background: 'var(--bg)' }}>
      <div className="topbar">
        <div className="brand">{t('settings.title')}</div>
        <div className="press icon-btn" onClick={onClose}><IconClose /></div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto' }}>

        {/* User identity */}
        {user && (
          <div style={{
            padding: '32px 24px 28px', borderBottom: '1px solid var(--line)',
            display: 'flex', flexDirection: 'column', gap: 6
          }}>
            <div className="eyebrow">{t('settings.guest')}</div>

            {!editing ? (
              <div className="name-edit-row">
                <div className="serif" style={{
                  fontSize: 28, fontStyle: 'italic', letterSpacing: '-0.01em', lineHeight: 1.1,
                  flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
                }}>
                  {user.name}
                </div>
                <button className="pencil-btn press" aria-label="edit name" onClick={startEdit}>
                  <IconEdit size={14} />
                </button>
              </div>
            ) : (
              <>
                <div className="name-edit-row">
                  <input
                    ref={inputRef}
                    className="name-input"
                    value={draft}
                    onChange={onDraftChange}
                    maxLength={24}
                    spellCheck={false}
                    autoComplete="off"
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') saveEdit();
                      else if (e.key === 'Escape') cancelEdit();
                    }}
                  />
                  <div className="name-actions">
                    <button className="name-action press" aria-label="cancel" onClick={cancelEdit}>
                      <IconClose size={12} />
                    </button>
                    <button
                      className="name-action confirm press"
                      aria-label="save"
                      onClick={saveEdit}
                      disabled={draft.trim().length < 2}
                    >
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                        <path d="M2 6L5 9L10 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    </button>
                  </div>
                </div>
                <div className="input-counter" style={{ textAlign: 'left', marginTop: 4 }}>
                  {t('settings.no_emoji_count', { n: draft.length })}
                </div>
              </>
            )}

            <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>
              {user.email}
            </div>
          </div>
        )}

        {/* Section: Preferences */}
        <div style={{ padding: '28px 24px 6px' }}>
          <div className="eyebrow">{t('settings.preferences')}</div>
        </div>

        {/* Language */}
        <button className="set-row press" onClick={() => setView('language')}>
          <span>{t('settings.language')}</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-3)' }}>
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--text)' }}>
              {LANGS.find((l) => l.code === settings.lang)?.native || 'English'}
            </span>
            <ChevRight size={12} />
          </span>
        </button>

        {/* Sound */}
        <div className="set-row" style={{ cursor: 'default' }}>
          <span>{t('settings.sound')}</span>
          <div className={'toggle press' + (settings.sound !== false ? ' on' : '')}
            onClick={() => setSettings({ ...settings, sound: settings.sound === false ? true : false })} />
        </div>

        {/* Notifications */}
        <div className="set-row" style={{ cursor: 'default' }}>
          <span>{t('settings.notifications')}</span>
          <div className={'toggle press' + (settings.notif ? ' on' : '')}
            onClick={() => setSettings({ ...settings, notif: !settings.notif })} />
        </div>

        {/* Section: Account */}
        <div style={{ padding: '28px 24px 6px' }}>
          <div className="eyebrow">{t('settings.account')}</div>
        </div>

        <button className="set-row press" onClick={onSignOut}>
          <span>{t('settings.signout')}</span>
          <span style={{ color: 'var(--text-4)' }}><ChevRight size={12} /></span>
        </button>

        <button className="set-row press danger" onClick={() => setView('confirmDelete')}>
          <span>{t('settings.delete')}</span>
          <span style={{ color: '#a04338' }}><ChevRight size={12} /></span>
        </button>

        <div style={{
          padding: '48px 24px 40px', textAlign: 'center',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
        }}>
          <img src="logo-wordmark.png" alt="Mahamon House" style={{
            height: 80, width: 'auto', opacity: 0.7, display: 'block',
          }} />
          <div style={{
            color: 'var(--text-4)', fontSize: 10,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            fontFamily: 'var(--font-mono)',
          }}>
            v 1.0
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, SettingsOverlay, LANGS });