// Login.jsx — Premium SwiftUI-style login

function EyeIcon({ open }) {
  return open ? (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
      <circle cx="12" cy="12" r="3" />
    </svg>
  ) : (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 19c-7 0-10-7-10-7a18.45 18.45 0 0 1 5.06-5.94" />
      <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19" />
      <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" />
      <line x1="2" y1="2" x2="22" y2="22" />
    </svg>
  );
}

function LoginScreen({ onLogin }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPassword, setShowPassword] = React.useState(false);
  const [focused, setFocused] = React.useState(null);
  const [pressed, setPressed] = React.useState(false);

  // Light client-side validation. Real auth lives upstream.
  const canSubmit = /.+@.+\..+/.test(email) && password.length >= 6;

  const submit = (e) => {
    e.preventDefault();
    if (canSubmit) onLogin && onLogin();
  };

  const fieldStyle = (key) => ({
    height: 54, borderRadius: 16, padding: '0 18px',
    background: focused === key ? 'rgba(168,85,247,0.10)' : 'rgba(255,255,255,0.05)',
    border: `1px solid ${focused === key ? 'rgba(192,132,252,0.55)' : 'rgba(255,255,255,0.08)'}`,
    boxShadow: focused === key ? '0 0 0 4px rgba(168,85,247,0.12), inset 0 1px 0 rgba(255,255,255,0.06)' : 'inset 0 1px 0 rgba(255,255,255,0.04)',
    color: '#fff', fontSize: 16, fontFamily: 'var(--hl-font-ui)',
    outline: 'none', width: '100%', boxSizing: 'border-box',
    transition: 'all 0.22s cubic-bezier(0.22, 1, 0.36, 1)',
    fontWeight: 500, letterSpacing: -0.2,
  });

  const labelStyle = {
    display: 'block', fontSize: 10, color: 'rgba(255,255,255,0.55)',
    textTransform: 'uppercase', letterSpacing: 1.6, marginBottom: 8,
    fontFamily: 'var(--hl-font-mono)', fontWeight: 500,
  };

  const linkButtonStyle = {
    background: 'transparent', border: 'none', padding: 0,
    color: 'var(--hl-accent-light)',
    fontFamily: 'var(--hl-font-ui)',
    fontSize: 13, fontWeight: 500, letterSpacing: -0.1,
    cursor: 'pointer',
  };

  return (
    <div style={{
      height: '100%', position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(180deg, #0E0726 0%, #08051A 100%)',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* aurora — top */}
      <div style={{
        position: 'absolute', top: -160, left: -100, width: 440, height: 440,
        borderRadius: '50%', filter: 'blur(90px)', opacity: 0.55, pointerEvents: 'none',
        background: 'radial-gradient(circle, #A855F7 0%, transparent 60%)',
        animation: 'hldrift 14s ease-in-out infinite',
      }} />
      <div style={{
        position: 'absolute', bottom: -180, right: -100, width: 420, height: 420,
        borderRadius: '50%', filter: 'blur(100px)', opacity: 0.42, pointerEvents: 'none',
        background: 'radial-gradient(circle, #4F1FCB 0%, transparent 65%)',
        animation: 'hldrift 18s ease-in-out infinite reverse',
      }} />
      <div style={{
        position: 'absolute', top: '40%', right: '-20%', width: 280, height: 280,
        borderRadius: '50%', filter: 'blur(80px)', opacity: 0.25, pointerEvents: 'none',
        background: 'radial-gradient(circle, #EC4899, transparent 65%)',
      }} />

      {/* grain */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.05, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px)',
        backgroundSize: '3px 3px',
      }} />

      <div style={{ height: 'calc(var(--safe-top, 44px) + 14px)', flexShrink: 0 }} />

      <div className="hl-stagger" style={{
        flex: 1, padding: '0 28px',
        display: 'flex', flexDirection: 'column',
        position: 'relative', zIndex: 2,
      }}>
        {/* brand row */}
        <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            display: 'flex',
            filter: 'drop-shadow(0 0 14px rgba(192, 132, 252, 0.45)) drop-shadow(0 0 28px rgba(168, 85, 247, 0.25))',
          }}>
            <LavidMark size={52} loop strokeWidth={80} />
          </div>
          <div>
            <div style={{
              fontFamily: 'var(--hl-font-display)', fontSize: 26, fontWeight: 400,
              color: '#fff', letterSpacing: -0.6, lineHeight: 1, fontStyle: 'italic',
            }}>LaVid</div>
            <div style={{
              fontFamily: 'var(--hl-font-mono)', fontSize: 9,
              color: 'var(--hl-accent-light)', letterSpacing: 2.4,
              textTransform: 'uppercase', marginTop: 4, fontWeight: 500,
            }}>Worship Studio</div>
          </div>
        </div>

        {/* heading */}
        <div style={{ marginTop: 44 }}>
          <h1 style={{
            margin: 0,
            fontFamily: 'var(--hl-font-display)',
            fontSize: 44, fontWeight: 300, color: '#fff',
            letterSpacing: -1.6, lineHeight: 1.0,
          }}>
            Bienvenido<br/>
            <span style={{
              fontStyle: 'italic', fontWeight: 400,
              background: 'linear-gradient(90deg, #C084FC, #FFFFFF 50%, #DDD6FE)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>de vuelta.</span>
          </h1>
          <p style={{
            margin: 0, marginTop: 12, color: 'rgba(255,255,255,0.6)',
            fontSize: 15, lineHeight: 1.5, letterSpacing: -0.2, maxWidth: 280,
          }}>
            Prepara las letras del próximo culto en LaVid Valencia.
          </p>
        </div>

        {/* form */}
        <form onSubmit={submit} noValidate
          style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <label htmlFor="login-email" style={labelStyle}>Email</label>
            <input
              id="login-email" name="email" type="email"
              value={email} onChange={e => setEmail(e.target.value)}
              onFocus={() => setFocused('email')} onBlur={() => setFocused(null)}
              placeholder="tu@iglesia.es"
              autoComplete="email" inputMode="email"
              autoCapitalize="off" autoCorrect="off" spellCheck={false}
              required
              style={fieldStyle('email')}
            />
          </div>

          <div>
            <label htmlFor="login-password" style={labelStyle}>Contraseña</label>
            <div style={{ position: 'relative' }}>
              <input
                id="login-password" name="password"
                type={showPassword ? 'text' : 'password'}
                value={password} onChange={e => setPassword(e.target.value)}
                onFocus={() => setFocused('password')} onBlur={() => setFocused(null)}
                placeholder="Mínimo 6 caracteres"
                autoComplete="current-password"
                required minLength={6}
                style={{ ...fieldStyle('password'), paddingRight: 50 }}
              />
              <button
                type="button"
                onClick={() => setShowPassword(s => !s)}
                aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
                aria-pressed={showPassword}
                style={{
                  position: 'absolute', right: 6, top: '50%',
                  transform: 'translateY(-50%)',
                  width: 40, height: 40, borderRadius: 12,
                  background: 'transparent', border: 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: showPassword ? 'var(--hl-accent-light)' : 'rgba(255,255,255,0.45)',
                  cursor: 'pointer',
                  transition: 'color 0.2s ease',
                }}
              >
                <EyeIcon open={showPassword} />
              </button>
            </div>
          </div>

          <div style={{ textAlign: 'right' }}>
            <button type="button"
              onClick={() => { /* TODO: handle password recovery */ }}
              style={linkButtonStyle}>
              ¿Olvidaste tu contraseña?
            </button>
          </div>

          <button type="submit" disabled={!canSubmit}
            onMouseDown={() => setPressed(true)}
            onMouseUp={() => setPressed(false)}
            onMouseLeave={() => setPressed(false)}
            style={{
              marginTop: 8, height: 56, borderRadius: 18, border: 'none',
              background: canSubmit
                ? 'linear-gradient(135deg, #B45EFF 0%, #7C3AED 50%, #4F1FCB 100%)'
                : 'linear-gradient(135deg, rgba(180,94,255,0.35) 0%, rgba(124,58,237,0.35) 50%, rgba(79,31,203,0.35) 100%)',
              color: canSubmit ? '#fff' : 'rgba(255,255,255,0.55)',
              fontSize: 16, fontWeight: 600,
              fontFamily: 'var(--hl-font-ui)', letterSpacing: -0.2,
              cursor: canSubmit ? 'pointer' : 'not-allowed',
              width: '100%', position: 'relative', overflow: 'hidden',
              boxShadow: !canSubmit
                ? 'inset 0 1px 0 rgba(255,255,255,0.08)'
                : pressed
                  ? '0 4px 16px rgba(168,85,247,0.4), inset 0 1px 0 rgba(255,255,255,0.25)'
                  : '0 12px 40px rgba(168,85,247,0.45), 0 2px 6px rgba(168,85,247,0.3), inset 0 1px 0 rgba(255,255,255,0.25)',
              transition: 'background 0.25s ease, box-shadow 0.2s ease, color 0.2s ease',
            }}>
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: '50%',
              background: 'linear-gradient(180deg, rgba(255,255,255,0.18), transparent)',
              pointerEvents: 'none', opacity: canSubmit ? 1 : 0.4,
            }} />
            <span style={{ position: 'relative' }}>Entrar</span>
          </button>
        </form>

        {/* divider */}
        <div style={{
          marginTop: 22, display: 'flex', alignItems: 'center', gap: 12,
          color: 'rgba(255,255,255,0.35)', fontSize: 10, letterSpacing: 2,
          fontFamily: 'var(--hl-font-mono)', fontWeight: 500,
        }}>
          <div style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.12))' }} />
          O
          <div style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, rgba(255,255,255,0.12), transparent)' }} />
        </div>

        <button type="button" onClick={onLogin} style={{
            marginTop: 16, height: 54, borderRadius: 18,
            background: '#fff', color: '#000', border: 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            fontSize: 16, fontWeight: 500, cursor: 'pointer', width: '100%',
            fontFamily: 'var(--hl-font-ui)', letterSpacing: -0.2,
            boxShadow: '0 4px 16px rgba(0,0,0,0.25)',
          }}>
          <svg width="18" height="20" viewBox="0 0 18 20" fill="black" aria-hidden="true">
            <path d="M14.94 10.62c-.02-2.5 2.04-3.7 2.13-3.76-1.16-1.7-2.97-1.93-3.6-1.96-1.54-.16-3 .9-3.78.9-.78 0-1.98-.88-3.25-.86-1.67.02-3.21.97-4.07 2.46-1.74 3-.45 7.45 1.25 9.9.83 1.2 1.82 2.54 3.1 2.49 1.25-.05 1.72-.8 3.22-.8 1.5 0 1.93.8 3.25.78 1.34-.02 2.2-1.22 3.02-2.42.95-1.39 1.34-2.74 1.36-2.81-.03-.01-2.6-1-2.63-3.97zM12.5 3.06c.69-.83 1.15-1.99 1.02-3.14-.99.04-2.18.66-2.89 1.49-.64.74-1.2 1.92-1.05 3.05 1.1.08 2.23-.56 2.92-1.4z"/>
          </svg>
          Continuar con Apple
        </button>

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

        <div style={{
          textAlign: 'center', marginBottom: 'calc(32px + var(--safe-bottom, 16px))',
          color: 'rgba(255,255,255,0.5)', fontSize: 14,
        }}>
          ¿Nuevo en LaVid?{' '}
          <button type="button"
            onClick={() => { /* TODO: handle access request */ }}
            style={{
              ...linkButtonStyle, fontSize: 14, fontWeight: 600,
              color: 'var(--hl-accent-light)',
            }}>
            Solicitar acceso
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });