// V1 — Klasik ortalanmış kart
// Tek odak: 420px kart, hafif grid pattern arka plan.

function LoginV1({ initialDark = false }) {
  const f = useLoginForm();
  const [dark, setDark] = React.useState(initialDark);
  const [forgotOpen, setForgotOpen] = React.useState(false);

  React.useEffect(() => { setDark(initialDark); }, [initialDark]);

  const c = dark
    ? {
        bg: '#0B1220',
        bgGrid: 'rgba(255,255,255,0.035)',
        card: '#0F172A',
        cardBorder: 'rgba(255,255,255,0.06)',
        text: '#F1F5F9',
        muted: '#94A3B8',
        border: '#1F2A3D',
        input: '#0B1220',
        inputFocus: '#111B30',
        divider: '#1F2A3D',
        ssoBg: 'rgba(255,255,255,0.04)',
      }
    : {
        bg: '#F6F8FB',
        bgGrid: 'rgba(15,23,42,0.04)',
        card: '#FFFFFF',
        cardBorder: 'rgba(15,23,42,0.05)',
        text: '#0F172A',
        muted: '#64748B',
        border: '#E2E8F0',
        input: '#FFFFFF',
        inputFocus: '#FFFFFF',
        divider: '#E2E8F0',
        ssoBg: '#FFFFFF',
      };

  const primary = '#2563EB';

  return (
    <div style={{
      position: 'relative',
      width: '100%', height: '100%',
      background: c.bg, color: c.text,
      fontFamily: 'Inter, system-ui, sans-serif',
      overflow: 'hidden',
    }}>
      {/* Subtle grid pattern */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(${c.bgGrid} 1px, transparent 1px), linear-gradient(90deg, ${c.bgGrid} 1px, transparent 1px)`,
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, #000 30%, transparent 75%)',
        pointerEvents: 'none',
      }} />

      {/* Soft accent glow */}
      <div style={{
        position: 'absolute', top: '-20%', left: '50%', transform: 'translateX(-50%)',
        width: 700, height: 500, pointerEvents: 'none',
        background: dark
          ? 'radial-gradient(closest-side, rgba(37,99,235,0.18), transparent 70%)'
          : 'radial-gradient(closest-side, rgba(37,99,235,0.10), transparent 70%)',
      }} />

      {/* Top bar: dark toggle */}
      <div style={{
        position: 'absolute', top: 24, right: 28, zIndex: 5,
      }}>
        <DarkToggle dark={dark} onToggle={() => setDark((d) => !d)} />
      </div>

      {/* Bottom-left brand line */}
      <div style={{
        position: 'absolute', bottom: 24, left: 28,
        fontSize: 12, color: c.muted, letterSpacing: '0.04em',
      }}>
        © 2026 · IT Talep Sistemi
      </div>
      <div style={{
        position: 'absolute', bottom: 24, right: 28,
        display: 'flex', gap: 18,
        fontSize: 12, color: c.muted,
      }}>
        <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Yardım</a>
        <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Gizlilik</a>
      </div>

      {/* Centered card */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
      }}>
        <div style={{
          width: 420, maxWidth: '100%',
          background: c.card,
          borderRadius: 16,
          padding: '36px 36px 32px',
          boxShadow: dark
            ? `0 1px 0 ${c.cardBorder}, 0 24px 48px -16px rgba(0,0,0,0.6)`
            : `0 1px 0 ${c.cardBorder}, 0 24px 48px -20px rgba(15,23,42,0.18)`,
          position: 'relative',
        }}>
          {f.submitState === 'success' ? (
            <SuccessState dark={dark} onReset={f.reset} c={c} email={f.email} />
          ) : (
            <React.Fragment>
              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}>
                <LogoPlaceholder size="md" dark={dark} />
              </div>
              <div style={{ textAlign: 'center', marginBottom: 28 }}>
                <h1 style={{
                  margin: 0, fontSize: 22, fontWeight: 600,
                  letterSpacing: '-0.01em',
                }}>IT Talep Sistemi</h1>
                <p style={{
                  margin: '6px 0 0', fontSize: 13.5,
                  color: c.muted, lineHeight: 1.5,
                }}>Kurumsal hesabınızla giriş yapın</p>
              </div>

              <FieldEmail f={f} c={c} primary={primary} />
              <FieldPassword f={f} c={c} primary={primary} />

              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                marginTop: 14, marginBottom: 20,
              }}>
                <RememberCheckbox checked={f.remember} onChange={f.setRemember} c={c} primary={primary} />
                <button
                  type="button"
                  onClick={() => setForgotOpen(true)}
                  style={{
                    appearance: 'none', background: 'none', border: 'none', padding: 0,
                    cursor: 'pointer',
                    fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
                    color: primary,
                  }}>Şifremi unuttum</button>
              </div>

              <PrimaryButton f={f} c={c} primary={primary} />

              <Divider c={c} label="veya" />

              <SSOButton c={c} dark={dark} />
            </React.Fragment>
          )}
        </div>
      </div>

      <ForgotModal open={forgotOpen} onClose={() => setForgotOpen(false)} dark={dark} />

      <style>{`
        @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
        @keyframes popIn  { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
        @keyframes spin   { to { transform: rotate(360deg) } }
        @keyframes checkPop { 0% { transform: scale(0); opacity: 0 } 60% { transform: scale(1.15); opacity: 1 } 100% { transform: scale(1) } }
      `}</style>
    </div>
  );
}

// ─────────────────── shared sub-components ───────────────────

function FieldEmail({ f, c, primary }) {
  const has = f.email.length > 0;
  const err = f.emailErr;
  return (
    <div style={{ marginBottom: 14 }}>
      <label style={{ display: 'block', fontSize: 12.5, fontWeight: 500, color: c.muted, marginBottom: 6 }}>
        E-posta
      </label>
      <div style={{ position: 'relative' }}>
        <span style={{
          position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
          color: err ? '#EF4444' : (has ? c.text : c.muted),
          display: 'flex', pointerEvents: 'none',
        }}><IconMail /></span>
        <input
          type="email"
          value={f.email}
          onChange={(e) => f.setEmail(e.target.value)}
          onBlur={() => f.setTouched((t) => ({ ...t, email: true }))}
          placeholder="ad.soyad@sirket.com"
          style={{
            width: '100%', boxSizing: 'border-box',
            padding: '11px 14px 11px 40px',
            background: c.input, color: c.text,
            border: `1px solid ${err ? '#EF4444' : c.border}`,
            borderRadius: 10,
            fontSize: 14, fontFamily: 'inherit', outline: 'none',
            transition: 'border-color 120ms, box-shadow 120ms',
          }}
          onFocus={(e) => {
            if (!err) {
              e.target.style.borderColor = primary;
              e.target.style.boxShadow = `0 0 0 3px ${primary}22`;
            } else {
              e.target.style.boxShadow = `0 0 0 3px #EF444422`;
            }
          }}
          onBlurCapture={(e) => {
            e.target.style.borderColor = err ? '#EF4444' : c.border;
            e.target.style.boxShadow = 'none';
          }}
        />
      </div>
      {err && <div style={{ marginTop: 6, fontSize: 12, color: '#EF4444' }}>{err}</div>}
    </div>
  );
}

function FieldPassword({ f, c, primary }) {
  const err = f.pwErr;
  return (
    <div>
      <label style={{ display: 'block', fontSize: 12.5, fontWeight: 500, color: c.muted, marginBottom: 6 }}>
        Şifre
      </label>
      <div style={{ position: 'relative' }}>
        <span style={{
          position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
          color: err ? '#EF4444' : (f.password.length ? c.text : c.muted),
          display: 'flex', pointerEvents: 'none',
        }}><IconLock /></span>
        <input
          type={f.showPw ? 'text' : 'password'}
          value={f.password}
          onChange={(e) => f.setPassword(e.target.value)}
          onBlur={() => f.setTouched((t) => ({ ...t, password: true }))}
          placeholder="••••••••"
          style={{
            width: '100%', boxSizing: 'border-box',
            padding: '11px 44px 11px 40px',
            background: c.input, color: c.text,
            border: `1px solid ${err ? '#EF4444' : c.border}`,
            borderRadius: 10,
            fontSize: 14, fontFamily: 'inherit', outline: 'none',
            transition: 'border-color 120ms, box-shadow 120ms',
            letterSpacing: f.showPw ? 'normal' : '0.12em',
          }}
          onFocus={(e) => {
            if (!err) {
              e.target.style.borderColor = primary;
              e.target.style.boxShadow = `0 0 0 3px ${primary}22`;
            } else {
              e.target.style.boxShadow = `0 0 0 3px #EF444422`;
            }
          }}
          onBlurCapture={(e) => {
            e.target.style.borderColor = err ? '#EF4444' : c.border;
            e.target.style.boxShadow = 'none';
          }}
        />
        <button
          type="button"
          onClick={() => f.setShowPw((s) => !s)}
          title={f.showPw ? 'Şifreyi gizle' : 'Şifreyi göster'}
          style={{
            position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)',
            appearance: 'none', background: 'transparent', border: 'none',
            cursor: 'pointer',
            color: c.muted, padding: 6, borderRadius: 6,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
          <IconEye open={f.showPw} />
        </button>
      </div>
      {err && <div style={{ marginTop: 6, fontSize: 12, color: '#EF4444' }}>{err}</div>}
    </div>
  );
}

function RememberCheckbox({ checked, onChange, c, primary }) {
  return (
    <label style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      cursor: 'pointer', fontSize: 13, color: c.text,
      userSelect: 'none',
    }}>
      <span style={{
        width: 16, height: 16, borderRadius: 5,
        background: checked ? primary : 'transparent',
        border: `1.5px solid ${checked ? primary : c.border}`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        transition: 'all 120ms',
      }}>
        {checked && (
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 6L9 17l-5-5" />
          </svg>
        )}
      </span>
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} style={{ display: 'none' }} />
      Beni hatırla
    </label>
  );
}

function PrimaryButton({ f, c, primary }) {
  const loading = f.submitState === 'loading';
  return (
    <button
      type="button"
      onClick={f.submit}
      disabled={loading}
      style={{
        width: '100%', boxSizing: 'border-box',
        appearance: 'none', cursor: loading ? 'progress' : 'pointer',
        padding: '12px 18px', borderRadius: 10,
        background: primary, color: '#fff',
        border: 'none',
        fontSize: 14.5, fontWeight: 600,
        fontFamily: 'inherit',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        boxShadow: `0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 14px -4px ${primary}55`,
        transition: 'transform 120ms, filter 120ms',
      }}
      onMouseDown={(e) => e.currentTarget.style.transform = 'translateY(1px)'}
      onMouseUp={(e) => e.currentTarget.style.transform = 'none'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}>
      {loading && (
        <span style={{
          width: 16, height: 16, borderRadius: '50%',
          border: '2px solid rgba(255,255,255,0.4)',
          borderTopColor: '#fff',
          animation: 'spin 700ms linear infinite',
        }} />
      )}
      {loading ? 'Giriş yapılıyor…' : 'Giriş Yap'}
    </button>
  );
}

function Divider({ c, label }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      margin: '20px 0',
    }}>
      <span style={{ flex: 1, height: 1, background: c.divider }} />
      <span style={{ fontSize: 11.5, color: c.muted, textTransform: 'uppercase', letterSpacing: '0.12em' }}>{label}</span>
      <span style={{ flex: 1, height: 1, background: c.divider }} />
    </div>
  );
}

function SSOButton({ c, dark }) {
  return (
    <button
      type="button"
      style={{
        width: '100%', boxSizing: 'border-box',
        appearance: 'none', cursor: 'pointer',
        padding: '11px 16px', borderRadius: 10,
        background: c.ssoBg, color: c.text,
        border: `1px solid ${c.border}`,
        fontSize: 14, fontWeight: 500,
        fontFamily: 'inherit',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        transition: 'background 120ms',
      }}
      onMouseEnter={(e) => e.currentTarget.style.background = dark ? 'rgba(255,255,255,0.06)' : '#F8FAFC'}
      onMouseLeave={(e) => e.currentTarget.style.background = c.ssoBg}>
      <MSMark />
      <span>Şirket SSO ile devam et</span>
    </button>
  );
}

function SuccessState({ c, onReset, email }) {
  return (
    <div style={{ textAlign: 'center', padding: '20px 0 8px' }}>
      <div style={{
        width: 64, height: 64, borderRadius: 999,
        background: 'rgba(16,185,129,0.12)', color: '#10B981',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 18,
        animation: 'checkPop 380ms cubic-bezier(.2,.9,.3,1.2)',
      }}><IconCheck /></div>
      <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Hoş geldiniz</h2>
      <p style={{ margin: '8px 0 22px', fontSize: 13.5, color: c.muted, lineHeight: 1.55 }}>
        <strong style={{ color: c.text, fontWeight: 600 }}>{email}</strong><br />
        ile başarılı şekilde giriş yapıldı. Yönlendiriliyorsunuz…
      </p>
      <button onClick={onReset} style={{
        appearance: 'none', cursor: 'pointer',
        padding: '9px 18px', borderRadius: 10,
        background: 'transparent', color: c.text,
        border: `1px solid ${c.border}`,
        fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
      }}>Tekrar dene</button>
    </div>
  );
}

Object.assign(window, {
  LoginV1,
  FieldEmail, FieldPassword, RememberCheckbox, PrimaryButton, Divider, SSOButton, SuccessState,
});