// mockups/login.jsx — Login screen for EasyPro Plus.
// Animated props:
//   emailText  : current visible text in email input (typewriter)
//   passwordText : current visible text in password input
//   buttonPressed: bool — flash button as pressed
//   focus       : 'email' | 'password' | 'button' | null — which input has caret
//   loading     : bool — show small spinner inside button
//
// Exports on window: LoginScreen

function LoginScreen({
  emailText = '',
  passwordText = '',
  buttonPressed = false,
  focus = null,
  loading = false,
}) {
  const lang = useTimeline().lang || 'es';
  const i18n = (window.SOL_I18N && window.SOL_I18N[lang]) || (window.SOL_I18N && window.SOL_I18N.es) || {};
  const lg = i18n.login || {};
  return (
    <div style={{
      position: 'absolute',
      inset: 0,
      background: 'radial-gradient(ellipse at 50% 100%, #e0ecff 0%, #f5f5f7 50%, #f5f5f7 100%)',
      overflow: 'hidden',
    }}>
      {/* Decorative blobs */}
      <div style={{
        position: 'absolute',
        top: -120, right: -120,
        width: 380, height: 380,
        borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(139, 92, 246, 0.18) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute',
        bottom: -100, left: -80,
        width: 320, height: 320,
        borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(0, 122, 255, 0.18) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      {/* Centered card */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        transform: 'translate(-50%, -50%)',
        width: 420,
        background: '#fff',
        borderRadius: 20,
        padding: '40px 38px 32px',
        boxShadow: '0 24px 80px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04)',
        border: '1px solid #f0f0f3',
      }}>
        {/* Logo + brand */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
          <Logo size={42} withWord={true} />
        </div>

        <div style={{
          fontSize: 22,
          fontWeight: 600,
          letterSpacing: -0.02,
          color: '#1d1d1f',
          textAlign: 'center',
          marginBottom: 6,
        }}>{lg.title || 'Iniciar sesión'}</div>
        <div style={{
          fontSize: 13,
          color: '#6e6e73',
          textAlign: 'center',
          marginBottom: 26,
          letterSpacing: -0.005,
        }}>{lg.subtitle || 'Accede a tu suite de oficina'}</div>

        {/* Email field */}
        <LoginField
          label={lg.email_label || "Correo electrónico"}
          value={emailText}
          placeholder={lg.email_placeholder || "tu@oficina.com"}
          focused={focus === 'email'}
        />

        {/* Password field */}
        <div style={{ height: 14 }} />
        <LoginField
          label={lg.password_label || "Contraseña"}
          value={'•'.repeat(passwordText.length)}
          placeholder="••••••••"
          focused={focus === 'password'}
          monoCaret
        />

        {/* Forgot link */}
        <div style={{ textAlign: 'right', margin: '10px 0 18px' }}>
          <span style={{ fontSize: 12, color: '#007AFF', fontWeight: 500 }}>{lg.forgot || '¿Olvidaste tu contraseña?'}</span>
        </div>

        {/* Submit */}
        <button style={{
          width: '100%',
          height: 44,
          background: buttonPressed ? '#0056b3' : '#007AFF',
          color: '#fff',
          border: 0,
          borderRadius: 10,
          fontSize: 15,
          fontWeight: 500,
          letterSpacing: -0.01,
          cursor: 'pointer',
          transform: buttonPressed ? 'scale(0.985)' : 'scale(1)',
          transition: 'transform 80ms, background 120ms',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 8,
          boxShadow: focus === 'button'
            ? '0 0 0 4px rgba(0, 122, 255, 0.2), 0 2px 8px rgba(0, 122, 255, 0.25)'
            : '0 2px 8px rgba(0, 122, 255, 0.25)',
        }}>
          {loading ? (
            <>
              <div style={{
                width: 14, height: 14,
                border: '2px solid rgba(255,255,255,0.35)',
                borderTopColor: '#fff',
                borderRadius: '50%',
                animation: 'sol-spin 0.7s linear infinite',
              }} />
              {lg.submitting || 'Entrando…'}
            </>
          ) : (lg.submit || 'Entrar')}
        </button>

        <div style={{
          textAlign: 'center',
          marginTop: 22,
          fontSize: 12,
          color: '#6e6e73',
        }}>
          {lg.no_account || '¿No tienes cuenta?'} <span style={{ color: '#007AFF', fontWeight: 500 }}>{lg.create_account || 'Crear cuenta'}</span>
        </div>
      </div>

      <style>{`
        @keyframes sol-spin { to { transform: rotate(360deg); } }
        @keyframes sol-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
      `}</style>
    </div>
  );
}

// NOTE: renamed from `Field` to `LoginField` to avoid global-scope collision
// with the `Field` defined in case-creation.jsx (which Babel loads later and
// overwrote this one — causing inputs to render blank because the other Field
// expects fillP/value props, not value/placeholder).
function LoginField({ label, value, placeholder, focused, monoCaret }) {
  // Defensive: handle null/undefined gracefully
  const v = (value == null) ? '' : String(value);
  const hasValue = v.length > 0;
  const text = hasValue ? v : (placeholder || '');
  return (
    <div>
      <div style={{
        fontSize: 11,
        fontWeight: 500,
        color: '#6e6e73',
        letterSpacing: '0.02em',
        marginBottom: 5,
        textTransform: 'uppercase',
      }}>{label}</div>
      <div style={{
        height: 44,
        background: '#fff',
        border: focused ? '1.5px solid #007AFF' : '1px solid #d2d2d7',
        borderRadius: 10,
        padding: '0 14px',
        display: 'flex',
        alignItems: 'center',
        boxShadow: focused ? '0 0 0 4px rgba(0, 122, 255, 0.15), 0 1px 3px rgba(0, 0, 0, 0.04)' : '0 1px 2px rgba(0, 0, 0, 0.03)',
        transition: 'border-color 100ms, box-shadow 100ms',
      }}>
        {/* Explicit span ensures text renders reliably + WebkitTextFillColor defends against background-clip leaks */}
        <span style={{
          flex: 1,
          fontSize: 15,
          fontWeight: hasValue ? 500 : 400,
          color: hasValue ? '#1d1d1f' : '#86868b',
          WebkitTextFillColor: hasValue ? '#1d1d1f' : '#86868b',
          fontFamily: monoCaret ? 'ui-monospace, "SF Mono", monospace' : 'inherit',
          letterSpacing: monoCaret ? '0.08em' : 'normal',
          whiteSpace: 'pre',
          overflow: 'hidden',
        }}>{text || '\u00A0'}</span>
        {focused && (
          <span style={{
            display: 'inline-block',
            width: 1.5, height: 18,
            background: '#007AFF',
            marginLeft: 2,
            animation: 'sol-caret 1s steps(1) infinite',
            flexShrink: 0,
          }} />
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, LoginField });