// Authentication: login screen, user menu, role-based permissions
// Sales Dashboard uses `sales.team_roster` (separate from AOX WBS roster)

// --- Permissions ---------------------------------------------------------
function permissionsFor(roster) {
  const role = roster?.role || null;
  const team = roster?.team || null;
  const isAdmin = role === 'admin';
  const isStrategy = role === 'strategy';
  const isTeamMember = role === 'team_member';
  const isViewer = role === 'viewer' || role == null;

  return {
    role: role || 'viewer',
    team,
    canEdit: isAdmin || isStrategy || isTeamMember,
    canCreate: isAdmin || isStrategy,
    canDelete: isAdmin,
    isAdmin, isStrategy, isTeamMember, isViewer,
  };
}

const ROLE_COLORS = {
  admin:       { bg:'rgba(255,59,48,0.10)',  fg:'#FF3B30', border:'rgba(255,59,48,0.30)'  },
  strategy:    { bg:'rgba(88,86,214,0.12)',  fg:'#5856D6', border:'rgba(88,86,214,0.30)'  },
  team_member: { bg:'rgba(0,122,255,0.10)',  fg:'#007AFF', border:'rgba(0,122,255,0.30)'  },
  viewer:      { bg:'rgba(142,142,147,0.14)',fg:'#8E8E93', border:'rgba(142,142,147,0.32)'},
};

function RoleBadge({ role, team, lang, compact }) {
  const c = ROLE_COLORS[role] || ROLE_COLORS.viewer;
  const labels = lang === 'en'
    ? { admin:'Admin', strategy:'Strategy', team_member: team ? `Team · ${team.toUpperCase()}` : 'Team', viewer:'Viewer' }
    : { admin:'관리자', strategy:'전략', team_member: team ? `팀원 · ${team.toUpperCase()}` : '팀원', viewer:'뷰어' };
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap: 4,
      padding: compact ? '1px 6px' : '2px 8px',
      borderRadius: 999,
      background: c.bg, color: c.fg,
      border: `1px solid ${c.border}`,
      fontSize: compact ? 10 : 11, fontWeight: 600,
      whiteSpace:'nowrap'
    }}>{labels[role] || role}</span>
  );
}

// --- Login Screen --------------------------------------------------------
function LoginScreen({ lang, onLangToggle }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    if (!email || !password) return;
    setLoading(true); setError('');
    try {
      await SALES_DB.signIn(email, password);
      // Auth state change will trigger App re-render
    } catch (err) {
      setError(err?.message || (lang === 'en' ? 'Login failed' : '로그인 실패'));
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="login-wrap" style={{
      minHeight: '100vh', display: 'flex', flexDirection:'column',
      alignItems: 'center', justifyContent: 'center',
      background: 'var(--bg)', padding: 24,
    }}>
      <div style={{
        width: '100%', maxWidth: 380,
        background: 'var(--bg-solid)',
        border: '1px solid var(--border)',
        borderRadius: 20,
        padding: '36px 32px',
        boxShadow: 'var(--shadow-2)',
      }}>
        <div style={{textAlign:'center', marginBottom: 28}}>
          <div style={{fontSize: 22, fontWeight: 800, letterSpacing: 0.1, color:'var(--fg)'}}>ADRO</div>
          <div style={{fontSize: 10, fontWeight: 700, letterSpacing: 0.35, color:'var(--fg-muted)', textTransform:'uppercase', marginTop: 4}}>
            Sales Dashboard
          </div>
        </div>

        <form onSubmit={handleSubmit} style={{display:'flex', flexDirection:'column', gap: 12}}>
          <div>
            <label style={{display:'block', fontSize: 10, fontWeight: 700, letterSpacing: 0.14, textTransform:'uppercase', color:'var(--fg-muted)', marginBottom: 6}}>
              {lang === 'en' ? 'Email' : '이메일'}
            </label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)}
              autoComplete="email" required
              style={inputStyle} placeholder="name@adro.com"/>
          </div>
          <div>
            <label style={{display:'block', fontSize: 10, fontWeight: 700, letterSpacing: 0.14, textTransform:'uppercase', color:'var(--fg-muted)', marginBottom: 6}}>
              {lang === 'en' ? 'Password' : '비밀번호'}
            </label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)}
              autoComplete="current-password" required
              style={inputStyle}/>
          </div>
          {error && (
            <div style={{
              background: 'rgba(255,69,58,0.08)', border: '1px solid rgba(255,69,58,0.25)',
              borderRadius: 8, padding: '10px 14px', fontSize: 12, color:'#FF453A', textAlign:'center',
            }}>{error}</div>
          )}
          <button type="submit" disabled={loading}
            style={{
              width: '100%', background: 'var(--accent)', color: '#fff',
              fontSize: 13, fontWeight: 700, letterSpacing: 0.08, textTransform: 'uppercase',
              border: 'none', borderRadius: 10, padding: 14, cursor: 'pointer',
              marginTop: 4, opacity: loading ? 0.6 : 1,
            }}>
            {loading ? (lang === 'en' ? 'Signing in…' : '로그인 중…') : (lang === 'en' ? 'Sign in' : '로그인')}
          </button>
        </form>

        <div style={{textAlign:'center', marginTop: 20, fontSize: 11, color:'var(--fg-subtle)'}}>
          {lang === 'en'
            ? 'Invite-only. Contact admin for access.'
            : '초대 전용. 접근 권한은 관리자에게 문의하세요.'}
        </div>

        <button type="button" onClick={onLangToggle}
          style={{
            display:'block', margin: '14px auto 0', background:'none', border:'none',
            color:'var(--fg-subtle)', fontSize: 11, cursor:'pointer', textDecoration:'underline',
          }}>
          {lang === 'en' ? '한국어' : 'English'}
        </button>
      </div>
    </div>
  );
}

const inputStyle = {
  width: '100%', background: 'var(--surface-2)', border: '1px solid var(--border-strong)',
  borderRadius: 10, padding: '12px 14px', fontSize: 14, color: 'var(--fg)', outline: 'none',
  fontFamily: 'var(--font-sans)',
};

// --- User Menu -----------------------------------------------------------
function UserMenu({ session, roster, perms, lang, onSignOut }) {
  const [open, setOpen] = React.useState(false);
  const [showPwModal, setShowPwModal] = React.useState(false);
  const [signingOut, setSigningOut] = React.useState(false);
  const email = session?.user?.email || '';
  const name = roster?.full_name || email.split('@')[0];
  // Avatar: use email prefix as English initial (1 char)
  const emailPrefix = email.split('@')[0] || '?';
  const initials = emailPrefix[0].toUpperCase();

  async function handleSignOut(e) {
    e.stopPropagation();
    if (signingOut) return;
    setSigningOut(true);
    setOpen(false);
    try { await onSignOut(); } catch (err) { console.error('[signout]', err); }
    finally { setSigningOut(false); }
  }

  return (
    <React.Fragment>
      <div style={{position:'relative'}}>
        <button onClick={() => setOpen(o => !o)} className="iconbtn" style={{
          width: 32, height: 32, borderRadius: 999,
          background: 'var(--accent-soft)', color: 'var(--accent)',
          fontSize: 11, fontWeight: 700, border: '1px solid var(--border)',
        }}>{initials}</button>
        {open && (
          <React.Fragment>
            {/* backdrop to close menu on outside click */}
            <div onClick={() => setOpen(false)} style={{position:'fixed', inset:0, zIndex:99}}/>
            <div style={{
              position:'absolute', right: 0, top: 38, minWidth: 220,
              background:'var(--bg-solid)', border:'1px solid var(--border)',
              borderRadius: 12, boxShadow: 'var(--shadow-2)', padding: 8, zIndex: 100,
            }}>
              <div style={{padding: '10px 12px', borderBottom:'1px solid var(--divider)', marginBottom: 4}}>
                <div style={{fontSize: 13, fontWeight: 600, color:'var(--fg)'}}>{name}</div>
                <div style={{fontSize: 11, color:'var(--fg-muted)', marginTop: 2}}>{email}</div>
                <div style={{marginTop: 6}}>
                  <RoleBadge role={perms.role} team={perms.team} lang={lang} compact/>
                </div>
              </div>
              <button onClick={(e) => { e.stopPropagation(); setShowPwModal(true); setOpen(false); }} style={menuBtnS}>
                {lang === 'en' ? 'Change password' : '비밀번호 변경'}
              </button>
              <button onClick={handleSignOut} disabled={signingOut} style={{...menuBtnS, opacity: signingOut ? .5 : 1}}>
                {signingOut ? '...' : (lang === 'en' ? 'Sign out' : '로그아웃')}
              </button>
            </div>
          </React.Fragment>
        )}
      </div>
      {/* Modal rendered at top level (outside position:relative) to fix fixed positioning */}
      {showPwModal && (
        <ChangePasswordModal lang={lang} onClose={() => setShowPwModal(false)}/>
      )}
    </React.Fragment>
  );
}

const menuBtnS = {
  display:'block', width:'100%', textAlign:'left', padding:'8px 12px',
  background:'none', border:'none', fontSize: 13, color:'var(--fg)', cursor:'pointer',
  borderRadius: 6,
};

// --- Change Password Modal -----------------------------------------------
function ChangePasswordModal({ lang, onClose }) {
  const [pw1, setPw1] = React.useState('');
  const [pw2, setPw2] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [done, setDone] = React.useState(false);

  async function submit(e) {
    e.preventDefault();
    setErr('');
    if (pw1.length < 8) {
      setErr(lang === 'en' ? 'Password must be at least 8 characters' : '비밀번호는 최소 8자 이상이어야 합니다');
      return;
    }
    if (pw1 !== pw2) {
      setErr(lang === 'en' ? 'Passwords do not match' : '비밀번호가 일치하지 않습니다');
      return;
    }
    setBusy(true);
    try {
      await SALES_DB.changePassword(pw1);
      setDone(true);
      // Auto-close after a brief success state
      setTimeout(() => onClose(), 1800);
    } catch (e) {
      setErr(e?.message || (lang === 'en' ? 'Failed to update password' : '비밀번호 변경 실패'));
    } finally {
      setBusy(false);
    }
  }

  return ReactDOM.createPortal(
    <div onClick={onClose} style={{
      position:'fixed', inset:0, zIndex:200,
      background:'rgba(0,0,0,0.45)', display:'flex', alignItems:'center', justifyContent:'center',
      padding:16,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background:'var(--bg-solid)', borderRadius:16, border:'1px solid var(--border)',
        boxShadow:'var(--shadow-2)', padding:'24px 28px', width:'100%', maxWidth:380,
      }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
          <h3 style={{ margin:0, fontSize:15, fontWeight:700, color:'var(--fg)' }}>
            {lang === 'en' ? 'Change Password' : '비밀번호 변경'}
          </h3>
          <button onClick={onClose} className="iconbtn" style={{
            width:28, height:28, fontSize:14, color:'var(--fg-muted)',
            background:'none', border:'none', cursor:'pointer',
          }}>×</button>
        </div>
        {done ? (
          <div style={{ padding:'14px 0', textAlign:'center' }}>
            <div style={{ fontSize:32 }}>✓</div>
            <div style={{ fontSize:13, color:'var(--fg)', marginTop:6 }}>
              {lang === 'en' ? 'Password updated successfully' : '비밀번호가 변경되었습니다'}
            </div>
          </div>
        ) : (
          <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap:12 }}>
            <div>
              <label style={pwLabelS}>{lang === 'en' ? 'New password' : '새 비밀번호'}</label>
              <input type="password" value={pw1} onChange={e => setPw1(e.target.value)}
                autoComplete="new-password" required minLength={8} autoFocus
                style={inputStyle}
                placeholder={lang === 'en' ? 'At least 8 characters' : '최소 8자 이상'}
              />
            </div>
            <div>
              <label style={pwLabelS}>{lang === 'en' ? 'Confirm new password' : '새 비밀번호 확인'}</label>
              <input type="password" value={pw2} onChange={e => setPw2(e.target.value)}
                autoComplete="new-password" required minLength={8}
                style={inputStyle}
              />
            </div>
            {err && <div style={{ fontSize:12, color:'#FF453A' }}>{err}</div>}
            <button type="submit" disabled={busy} style={{
              marginTop:6, padding:'11px 16px', fontSize:14, fontWeight:600, borderRadius:10,
              background:'var(--accent)', color:'#fff', border:'none', cursor: busy ? 'wait' : 'pointer',
              opacity: busy ? .6 : 1,
            }}>
              {busy ? '…' : (lang === 'en' ? 'Update Password' : '변경')}
            </button>
          </form>
        )}
      </div>
    </div>,
    document.body
  );
}

const pwLabelS = {
  display:'block', fontSize:11, fontWeight:600, color:'var(--fg-muted)',
  marginBottom:4, textTransform:'uppercase', letterSpacing:.04,
};

window.SALES_AUTH = { permissionsFor, RoleBadge, LoginScreen, UserMenu };