// V2 — Split-screen modern
// Sol %42 marka paneli (mavi mesh + tagline + bullet list)
// Sağ %58 ferah form alanı

function LoginV2({ 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',
        panel: '#0F172A',
        text: '#F1F5F9',
        muted: '#94A3B8',
        border: '#1F2A3D',
        input: '#0B1220',
        ssoBg: 'rgba(255,255,255,0.04)',
        divider: '#1F2A3D',
      }
    : {
        bg: '#FFFFFF',
        panel: '#FFFFFF',
        text: '#0F172A',
        muted: '#64748B',
        border: '#E2E8F0',
        input: '#FFFFFF',
        ssoBg: '#FFFFFF',
        divider: '#E2E8F0',
      };

  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',
      display: 'flex',
    }}>
      {/* ─── LEFT brand panel ─── */}
      <div style={{
        position: 'relative',
        width: '42%',
        background: '#0B1F4D',
        color: '#fff',
        padding: '40px 44px',
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
      }}>
        {/* Mesh / gradient overlay */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `
            radial-gradient(60% 50% at 20% 20%, rgba(59,130,246,0.55) 0%, transparent 60%),
            radial-gradient(50% 50% at 90% 30%, rgba(96,165,250,0.35) 0%, transparent 60%),
            radial-gradient(70% 60% at 70% 90%, rgba(29,78,216,0.55) 0%, transparent 60%),
            linear-gradient(135deg, #0B1F4D 0%, #102B6B 60%, #0B1F4D 100%)
          `,
        }} />

        {/* Faint grid */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: `linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px)`,
          backgroundSize: '40px 40px',
          maskImage: 'linear-gradient(180deg, #000 30%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(180deg, #000 30%, transparent 100%)',
        }} />

        {/* Decorative concentric rings, bottom-right */}
        <svg
          width="380" height="380" viewBox="0 0 380 380"
          style={{ position: 'absolute', right: -120, bottom: -120, opacity: 0.18, pointerEvents: 'none' }}
          aria-hidden="true">
          <g fill="none" stroke="rgba(255,255,255,0.7)" strokeWidth="1">
            {[40, 80, 120, 160, 200, 240, 280].map((r) => (
              <circle key={r} cx="190" cy="190" r={r} />
            ))}
          </g>
        </svg>

        {/* Top: logo + marka adı */}
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', alignItems: 'center', gap: 12 }}>
          <LogoPlaceholderInverted />
          <div style={{
            fontSize: 16, fontWeight: 600, color: '#fff',
            letterSpacing: '-0.005em',
          }}>IT Talep Sistemi</div>
        </div>

        {/* Middle: tagline */}
        <div style={{
          position: 'relative', zIndex: 2,
          marginTop: 'auto',
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '5px 11px', borderRadius: 999,
            background: 'rgba(255,255,255,0.10)',
            border: '1px solid rgba(255,255,255,0.14)',
            fontSize: 11.5, fontWeight: 500,
            letterSpacing: '0.06em', textTransform: 'uppercase',
            marginBottom: 18,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: '#34D399' }} />
            IT Talep Sistemi
          </div>
          <h2 style={{
            margin: 0, fontSize: 30, fontWeight: 600, lineHeight: 1.18,
            letterSpacing: '-0.015em',
            textWrap: 'balance',
            maxWidth: 380,
          }}>
            Donanım ve yazılım talepleri,<br />
            <span style={{ color: '#93C5FD' }}>tek bir akışta.</span>
          </h2>
          <p style={{
            margin: '14px 0 28px',
            fontSize: 14, color: 'rgba(255,255,255,0.72)',
            lineHeight: 1.6, maxWidth: 380,
          }}>
            Ürün seç, sepete ekle, onay sürecini takip et.
            Bütçeniz her zaman görünür.
          </p>

          <ul style={{
            listStyle: 'none', padding: 0, margin: 0,
            display: 'flex', flexDirection: 'column', gap: 12,
          }}>
            {[
              'Tek tıkla talep oluştur',
              'Çok aşamalı onay görünürlüğü',
              'Bütçe ve harcama takibi',
            ].map((t) => (
              <li key={t} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                fontSize: 13.5, color: 'rgba(255,255,255,0.88)',
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 6,
                  background: 'rgba(255,255,255,0.10)',
                  border: '1px solid rgba(255,255,255,0.14)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#93C5FD',
                }}>
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M20 6L9 17l-5-5" />
                  </svg>
                </span>
                {t}
              </li>
            ))}
          </ul>
        </div>

        {/* Footer copyright */}
        <div style={{
          position: 'relative', zIndex: 2,
          marginTop: 32,
          fontSize: 11.5, color: 'rgba(255,255,255,0.5)',
          letterSpacing: '0.04em',
        }}>
          © 2026 · Tüm hakları saklıdır
        </div>
      </div>

      {/* ─── RIGHT form panel ─── */}
      <div style={{
        position: 'relative',
        width: '58%',
        background: c.panel,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 48,
      }}>
        {/* Top-right toggle */}
        <div style={{ position: 'absolute', top: 24, right: 28 }}>
          <DarkToggle dark={dark} onToggle={() => setDark((d) => !d)} />
        </div>

        <div style={{ width: '100%', maxWidth: 400 }}>
          {f.submitState === 'success' ? (
            <SuccessState c={c} onReset={f.reset} email={f.email} />
          ) : (
            <React.Fragment>
              <h1 style={{
                margin: 0, fontSize: 26, fontWeight: 600,
                letterSpacing: '-0.015em',
              }}>Tekrar hoş geldiniz</h1>
              <p style={{
                margin: '8px 0 32px',
                fontSize: 14, color: c.muted, lineHeight: 1.55,
              }}>
                Devam etmek için kurumsal hesabınızla giriş yapın.
              </p>

              <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: 22,
              }}>
                <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} />

              <p style={{
                margin: '28px 0 0',
                textAlign: 'center', fontSize: 12.5, color: c.muted,
              }}>
                Erişim sorunu mu yaşıyorsunuz?{' '}
                <a href="#" style={{ color: primary, textDecoration: 'none', fontWeight: 500 }}>
                  IT ekibiyle iletişime geçin
                </a>
              </p>
            </React.Fragment>
          )}
        </div>
      </div>

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

// Renkli/koyu yan panel için ters varyant — beyaz tile + mavi chevron
function LogoPlaceholderInverted() {
  return (
    <img
      src="images/logo/mark-reversed.svg"
      alt="IT Talep Sistemi"
      width="48" height="48"
      style={{ display: 'block', borderRadius: 10 }}
    />
  );
}

Object.assign(window, { LoginV2 });