// login.jsx — first-run sign-in screen using OAuth providers
// Mascot hero + brand line + provider buttons + ToS footer

const LT = window.__cpMakeTheme();

function LoginScreen({ accent, onSignedIn }) {
  const [busy, setBusy] = React.useState(null); // 'apple' | 'google' | 'kakao' | 'email'

  const signIn = (provider) => {
    if (busy) return;
    setBusy(provider);
    // Simulate OAuth round-trip
    setTimeout(() => {
      onSignedIn && onSignedIn({ provider });
    }, 1100);
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: LT.bg,
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      fontFamily: 'Pretendard, -apple-system, system-ui, sans-serif',
    }}>
      {/* Decorative gradient blob */}
      <div style={{
        position: 'absolute', top: -120, right: -100,
        width: 320, height: 320, borderRadius: 320,
        background: `radial-gradient(circle at 35% 35%, ${accent}24 0%, ${accent}10 50%, transparent 75%)`,
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', bottom: -160, left: -120,
        width: 320, height: 320, borderRadius: 320,
        background: `radial-gradient(circle at 60% 50%, ${accent}18 0%, ${accent}08 55%, transparent 80%)`,
        pointerEvents: 'none',
      }} />

      {/* Hero */}
      <div style={{
        flex: 1,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        padding: '0 32px',
        position: 'relative', zIndex: 1,
      }}>
        {/* Mascot */}
        <div style={{
          width: 160, height: 160,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 26,
        }}>
          <CheekPouch count={5} max={10} accent={accent} size={160}
                      animateOnChange={false} face="happy" />
        </div>

        <div style={{
          fontSize: 36, fontWeight: 800, color: LT.ink,
          letterSpacing: '-0.04em', lineHeight: 1,
          marginBottom: 16,
        }}>CheekPouch</div>

        <div style={{
          fontSize: 16, color: LT.ink2,
          letterSpacing: '-0.01em', lineHeight: 1.45,
          textAlign: 'center',
          textWrap: 'balance',
          maxWidth: 280,
        }}>
          한 입씩, 한 문장씩.<br/>
          볼주머니에 담아두면 잊지 않아요.
        </div>
      </div>

      {/* Provider buttons */}
      <div style={{
        padding: '0 24px 28px',
        display: 'flex', flexDirection: 'column', gap: 10,
        position: 'relative', zIndex: 1,
      }}>
        {/* Apple (primary, iOS native) */}
        <ProviderButton
          provider="apple"
          label="Apple로 계속하기"
          busy={busy === 'apple'} disabled={!!busy && busy !== 'apple'}
          background="#000" color="#FFF"
          icon={<AppleGlyph />}
          onClick={() => signIn('apple')}
        />

        {/* Google */}
        <ProviderButton
          provider="google"
          label="Google로 계속하기"
          busy={busy === 'google'} disabled={!!busy && busy !== 'google'}
          background="#FFF" color={LT.ink}
          border={`0.5px solid ${LT.hairlineStrong}`}
          icon={<GoogleGlyph />}
          onClick={() => signIn('google')}
        />

        {/* Kakao */}
        <ProviderButton
          provider="kakao"
          label="카카오로 계속하기"
          busy={busy === 'kakao'} disabled={!!busy && busy !== 'kakao'}
          background="#FEE500" color="#191919"
          icon={<KakaoGlyph />}
          onClick={() => signIn('kakao')}
        />

        {/* Email link */}
        <button onClick={() => signIn('email')}
                disabled={!!busy && busy !== 'email'}
                style={{
          marginTop: 4,
          height: 36, background: 'transparent', border: 'none',
          color: LT.ink2, fontFamily: 'inherit',
          fontSize: 13.5, letterSpacing: '-0.01em',
          cursor: 'pointer',
          opacity: busy && busy !== 'email' ? 0.4 : 1,
          WebkitTapHighlightColor: 'transparent',
        }}>
          이메일로 시작하기
        </button>

        {/* ToS */}
        <div style={{
          marginTop: 6,
          fontSize: 11, color: LT.ink3,
          letterSpacing: '-0.01em', lineHeight: 1.6,
          textAlign: 'center',
        }}>
          계속하면{' '}
          <span style={{ color: LT.ink2, textDecoration: 'underline', cursor: 'pointer' }}>이용약관</span>
          {' '}및{' '}
          <span style={{ color: LT.ink2, textDecoration: 'underline', cursor: 'pointer' }}>개인정보 처리방침</span>에<br/>
          동의하는 것으로 간주합니다
        </div>
      </div>
    </div>
  );
}

function ProviderButton({ provider, label, icon, background, color, border, busy, disabled, onClick }) {
  return (
    <button onClick={onClick} disabled={disabled || busy} style={{
      width: '100%', height: 52, borderRadius: 14,
      background, color, border: border || 'none',
      padding: '0 18px',
      display: 'flex', alignItems: 'center', gap: 10,
      fontFamily: 'inherit', fontSize: 15.5, fontWeight: 600,
      letterSpacing: '-0.01em',
      cursor: busy || disabled ? 'default' : 'pointer',
      opacity: disabled ? 0.4 : 1,
      transition: 'opacity 0.18s ease, transform 0.12s ease',
      WebkitTapHighlightColor: 'transparent',
      position: 'relative',
    }}
    onMouseDown={(e) => !disabled && !busy && (e.currentTarget.style.transform = 'scale(0.98)')}
    onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
    onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
    >
      <span style={{
        width: 22, height: 22,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>{busy ? <Spinner color={color} /> : icon}</span>
      <span style={{ flex: 1, textAlign: 'center', paddingRight: 22 }}>
        {busy ? '계속 진행 중…' : label}
      </span>
    </button>
  );
}

function Spinner({ color = '#FFF' }) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" style={{ animation: 'cp-spin 0.9s linear infinite' }}>
      <circle cx="12" cy="12" r="9" stroke={color} strokeOpacity="0.25" strokeWidth="2.4" fill="none"/>
      <path d="M21 12a9 9 0 0 0-9-9" stroke={color} strokeWidth="2.4" strokeLinecap="round" fill="none"/>
    </svg>
  );
}

function AppleGlyph() {
  return (
    <svg width="18" height="20" viewBox="0 0 18 20" fill="none">
      <path d="M14.5 10.5c0-2.4 2-3.5 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.5-.1-2.8.8-3.6.8-.8 0-1.9-.8-3.2-.8-1.6 0-3.2.9-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3 2.5 1.2 0 1.7-.8 3.1-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.8 1.3-2.9-.1 0-2.6-1-2.6-4z"
            fill="currentColor"/>
      <path d="M12.4 3.6c.7-.8 1.1-2 1-3.2-1 0-2.3.7-3 1.6-.6.7-1.2 1.9-1 3 1.1.1 2.3-.5 3-1.4z"
            fill="currentColor"/>
    </svg>
  );
}
function GoogleGlyph() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M17.6 9.2c0-.6 0-1.1-.1-1.7H9v3.2h4.8c-.2 1.1-.8 2-1.8 2.7v2.2h2.9c1.7-1.5 2.7-3.8 2.7-6.4z" fill="#4285F4"/>
      <path d="M9 18c2.4 0 4.5-.8 6-2.2l-2.9-2.2c-.8.5-1.8.9-3.1.9-2.4 0-4.4-1.6-5.1-3.7H.9v2.3C2.4 16.1 5.5 18 9 18z" fill="#34A853"/>
      <path d="M3.9 10.8c-.2-.5-.3-1.1-.3-1.8s.1-1.2.3-1.8V4.9H.9C.3 6.1 0 7.5 0 9s.3 2.9.9 4.1l3-2.3z" fill="#FBBC05"/>
      <path d="M9 3.6c1.3 0 2.5.5 3.5 1.4l2.6-2.6C13.5.9 11.4 0 9 0 5.5 0 2.4 1.9.9 4.9l3 2.3C4.6 5.2 6.6 3.6 9 3.6z" fill="#EA4335"/>
    </svg>
  );
}
function KakaoGlyph() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M9 2C4.6 2 1 4.7 1 8c0 2.1 1.4 4 3.6 5.1l-.7 2.7c-.1.3.3.6.6.4l3.2-2.1c.4 0 .8.1 1.3.1 4.4 0 8-2.7 8-6.2S13.4 2 9 2z"
            fill="#191919"/>
    </svg>
  );
}

Object.assign(window, { LoginScreen });