/* global React, SKG */
const { C, FS, FF, FM, Icon, LogoMark, PrimaryBtn, SecondaryBtn, Field, ScreenBg, Eyebrow } = window.SKG;

// ─────────────────────────────────────────────────────────────
// Screen 1 + 2 — Auth (signup / login)
// ─────────────────────────────────────────────────────────────
function AuthScreen({ mode = 'signup' }) {
  const isSignup = mode === 'signup';
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '60px 24px 32px', position: 'relative', overflow: 'auto' }}>
      {/* Logo / hero */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 36 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <LogoMark size={32} />
          <div style={{ fontFamily: FF, fontSize: 26, fontWeight: 600, color: C.fg1, letterSpacing: '-0.02em' }}>skilowgue</div>
        </div>
        <div style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.3em', color: C.lilac, textTransform: 'uppercase', marginTop: 8 }}>名刺は、関係の起点である</div>
      </div>

      {/* Mode tabs */}
      <div style={{ display: 'flex', borderBottom: `1px solid ${C.border}`, marginBottom: 26 }}>
        {[
          { id: 'signup', label: '新規登録' },
          { id: 'login', label: 'ログイン' },
        ].map(t => {
          const active = (isSignup && t.id === 'signup') || (!isSignup && t.id === 'login');
          return (
            <div key={t.id}
              onClick={() => window.SKG_NAV && window.SKG_NAV.go(t.id === 'signup' ? 'signup' : 'login')}
              style={{
              flex: 1, padding: '12px 0', textAlign: 'center', cursor: 'pointer',
              fontFamily: FS, fontSize: 13, fontWeight: 500, letterSpacing: '.06em',
              color: active ? C.fg1 : C.fg3,
              borderBottom: active ? `1px solid ${C.lilac}` : `1px solid transparent`,
              boxShadow: active ? `0 1px 8px rgba(165,154,202,.4)` : 'none',
              marginBottom: -1,
            }}>{t.label}</div>
          );
        })}
      </div>

      {/* Google SSO */}
      <button onClick={() => window.SKG_NAV && window.SKG_NAV.go(isSignup ? 'profile' : 'home')} style={{
        width: '100%', padding: '13px 16px',
        background: 'transparent', border: `1px solid ${C.border2}`,
        color: C.fg1, fontFamily: FS, fontSize: 13, fontWeight: 500,
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        cursor: 'pointer', letterSpacing: '.04em',
      }}>
        <svg width="16" height="16" viewBox="0 0 16 16">
          <path d="M15.68 8.18c0-.55-.05-1.08-.14-1.59H8v3.01h4.3c-.19 1-.75 1.85-1.6 2.42v2.01h2.59c1.51-1.4 2.39-3.46 2.39-5.85z" fill="#4285F4"/>
          <path d="M8 16c2.16 0 3.97-.72 5.29-1.95l-2.59-2.01c-.72.48-1.63.77-2.7.77-2.08 0-3.84-1.4-4.46-3.29H.85v2.07A8 8 0 0 0 8 16z" fill="#34A853"/>
          <path d="M3.54 9.52A4.8 4.8 0 0 1 3.29 8c0-.53.09-1.04.25-1.52V4.41H.85A8 8 0 0 0 0 8c0 1.29.31 2.51.85 3.59l2.69-2.07z" fill="#FBBC05"/>
          <path d="M8 3.18c1.17 0 2.23.4 3.06 1.2l2.3-2.3C11.97.8 10.16 0 8 0A8 8 0 0 0 .85 4.41l2.69 2.07C4.16 4.59 5.92 3.18 8 3.18z" fill="#EA4335"/>
        </svg>
        Google で{isSignup ? '登録' : 'ログイン'}
      </button>

      {/* Divider */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '20px 0 20px' }}>
        <span style={{ flex: 1, height: 1, background: C.border }} />
        <span style={{ fontFamily: FM, fontSize: 9.5, letterSpacing: '.2em', color: C.fg3, textTransform: 'uppercase' }}>または</span>
        <span style={{ flex: 1, height: 1, background: C.border }} />
      </div>

      {/* Form */}
      <Field label="メールアドレス" placeholder="name@company.co.jp" icon="at-sign" required value="hayashi@coreLabs.jp" />
      <Field label="パスワード" type="password" placeholder="" icon="lock" required value="securepass123"
        suffix={<Icon name="eye-off" size={16} color={C.fg3} />}
      />

      {isSignup && (
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 4, marginBottom: 20 }}>
          <div style={{
            width: 18, height: 18, border: `1px solid ${C.lilac}`, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: 'rgba(165,154,202,.1)',
          }}>
            <Icon name="check" size={12} color={C.lilac} stroke={2.4} />
          </div>
          <div style={{ fontFamily: FS, fontSize: 11.5, color: C.fg2, lineHeight: 1.6 }}>
            <span style={{ color: C.lilac, textDecoration: 'underline' }}>利用規約</span> および <span style={{ color: C.lilac, textDecoration: 'underline' }}>プライバシーポリシー</span> に同意します
          </div>
        </div>
      )}

      {!isSignup && (
        <div style={{ textAlign: 'right', marginTop: -8, marginBottom: 16 }}>
          <span style={{ fontFamily: FS, fontSize: 11.5, color: C.lilac, letterSpacing: '.04em' }}>パスワードをお忘れですか?</span>
        </div>
      )}

      <PrimaryBtn full onClick={() => window.SKG_NAV && window.SKG_NAV.go(isSignup ? 'profile' : 'home')}>{isSignup ? '新規登録' : 'ログイン'}</PrimaryBtn>

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

      <div style={{ textAlign: 'center', marginTop: 24, fontFamily: FS, fontSize: 11.5, color: C.fg3 }}>
        {isSignup ? 'すでにアカウントをお持ちの方は ' : 'アカウントをお持ちでない方は '}
        <span onClick={() => window.SKG_NAV && window.SKG_NAV.go(isSignup ? 'login' : 'signup')} style={{ color: C.lilac, letterSpacing: '.04em', cursor: 'pointer', textDecoration: 'underline' }}>{isSignup ? 'ログイン' : '新規登録'}</span>
      </div>
    </div>
  );
}

window.SKG_AUTH = { AuthScreen };