// Login screen
function Login() {
  const [error, setError]     = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [panelNombre, setPanelNombre] = React.useState(window._appConfig?.panel_nombre || 'DESASF');
  const [empresaNombre, setEmpresaNombre] = React.useState(window._appConfig?.empresa_nombre || '');

  React.useEffect(() => {
    const tid = setInterval(() => {
      if (window._appConfig) {
        setPanelNombre(window._appConfig.panel_nombre || 'DESASF');
        setEmpresaNombre(window._appConfig.empresa_nombre || '');
        clearInterval(tid);
      }
    }, 50);
    return () => clearInterval(tid);
  }, []);

  async function handleLogin() {
    const identifier = document.querySelector('input.input:not([type="password"])').value;
    const password   = document.querySelector('input.input[type="password"]').value;
    setError(''); setLoading(true);
    try {
      const data = await DesasfAPI.post('/auth/login', { identifier, password });
      DesasfAPI.setTokens(data.token, data.refreshToken);
      DesasfAPI.setPermisos(data.permisos || {});
      const rol = data.user.rol;
      if (rol === 'cliente')             navigate('cliente-final');
      else if (rol === 'conductor')      navigate('logistica-conductor');
      else                                navigate('dashboard');
    } catch (err) {
      setError(err.message || 'Credenciales incorrectas');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="app app--login">
      <div className="login">
        <div className="login__hero">
          <div className="hex-bg"/>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12 }}>
            <DesasfLogo size={40}/>
            <div>
              <div style={{ fontFamily: 'var(--cond)', fontWeight: 700, fontSize: 18, letterSpacing: '0.02em' }}>{panelNombre}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-6)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{empresaNombre || 'Panel'}</div>
            </div>
          </div>

          <div style={{ position: 'relative', maxWidth: 460 }}>
            <div style={{ display: 'inline-block', padding: '4px 10px', background: 'var(--hi-vis)', color: 'var(--ink-0)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 22 }}>
              Plataforma operativa
            </div>
            <h2 style={{ fontFamily: 'var(--cond)', fontSize: 42, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.01em', margin: '0 0 16px' }}>
              Gestiona cada metro cúbico — del laboratorio a la obra.
            </h2>
            <p style={{ color: 'var(--ink-6)', fontSize: 14, lineHeight: 1.5, margin: 0 }}>
              Solicitudes, diseños de mezcla, despachos, certificados y pagos en un solo panel para administradores, vendedores y clientes.
            </p>
            <div style={{ display: 'flex', gap: 24, marginTop: 32 }}>
              <div>
                <div style={{ fontFamily: 'var(--cond)', fontSize: 28, fontWeight: 700, color: 'var(--hi-vis)' }}>1.2k</div>
                <div style={{ fontSize: 11, color: 'var(--ink-6)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>m³ / mes</div>
              </div>
              <div style={{ width: 1, background: 'var(--ink-3)' }}/>
              <div>
                <div style={{ fontFamily: 'var(--cond)', fontSize: 28, fontWeight: 700, color: 'var(--hi-vis)' }}>87</div>
                <div style={{ fontSize: 11, color: 'var(--ink-6)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Clientes activos</div>
              </div>
              <div style={{ width: 1, background: 'var(--ink-3)' }}/>
              <div>
                <div style={{ fontFamily: 'var(--cond)', fontSize: 28, fontWeight: 700, color: 'var(--hi-vis)' }}>24/7</div>
                <div style={{ fontSize: 11, color: 'var(--ink-6)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>Soporte</div>
              </div>
            </div>
          </div>

          <div style={{ position: 'relative', fontSize: 11, color: 'var(--ink-6)', display: 'flex', justifyContent: 'space-between' }}>
            <span>© 2026 {empresaNombre || 'Desasf'}</span>
            <span>v 2.4.1 · Producción</span>
          </div>

          <div style={{ position: 'absolute', right: 0, bottom: 0, height: 8, left: 0 }} className="caution-stripe"/>
        </div>

        <div className="login__form">
          <div style={{ maxWidth: 380 }}>
            <h2 style={{ fontFamily: 'var(--cond)', fontSize: 28, fontWeight: 700, margin: '0 0 6px', letterSpacing: '-0.01em' }}>Ingresar al panel</h2>
            <p style={{ color: 'var(--ink-5)', margin: '0 0 28px', fontSize: 13 }}>
              Acceso solo con cuentas creadas por el administrador{empresaNombre ? ` de ${empresaNombre}` : ''}. Si aún no tienes credenciales, solicítalas a tu asistente técnico comercial asignado.
            </p>

            <div style={{ display: 'flex', gap: 6, marginBottom: 22, padding: 4, background: 'var(--ink-9)', borderRadius: 6 }}>
              <div className="chip is-active" style={{ flex: 1, justifyContent: 'center', borderRadius: 4, height: 32 }}>Cliente</div>
              <div className="chip" style={{ flex: 1, justifyContent: 'center', borderRadius: 4, height: 32, background: 'transparent', border: 0 }}>Asist. téc.</div>
              <div className="chip" style={{ flex: 1, justifyContent: 'center', borderRadius: 4, height: 32, background: 'transparent', border: 0 }}>Admin</div>
            </div>

            <label className="label">Correo o usuario</label>
            <input className="input" placeholder="correo@empresa.com o tu_usuario" autoComplete="username" style={{ marginBottom: 14 }}/>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <label className="label">Contraseña</label>
              <a style={{ fontSize: 11, color: 'var(--ink-5)', cursor: 'pointer' }}>¿Olvidaste tu contraseña?</a>
            </div>
            <input className="input" type="password" autoComplete="current-password" placeholder="Tu contraseña" style={{ marginBottom: 18 }}/>

            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-3)', marginBottom: 22 }}>
              <input type="checkbox" defaultChecked/> Mantener sesión iniciada en este equipo
            </label>

            {error && (
              <div style={{ padding: '10px 14px', background: 'var(--status-danger-bg)',
                color: 'var(--status-danger)', borderRadius: 6, marginBottom: 14, fontSize: 13 }}>
                {error}
              </div>
            )}

            <button
              className="btn btn--accent"
              style={{ width: '100%', height: 44, justifyContent: 'center', fontSize: 14 }}
              onClick={handleLogin}
              disabled={loading}>
              {loading ? 'Ingresando…' : 'Ingresar al panel'} {Icon.arrow}
            </button>

            <div style={{ marginTop: 22, padding: '12px 14px', background: 'var(--ink-9)', border: '1px solid var(--line)', borderRadius: 6, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--hi-vis)', marginTop: 6, flexShrink: 0 }}/>
              <div style={{ fontSize: 11, color: 'var(--ink-5)', lineHeight: 1.5 }}>
                Las cuentas se emiten únicamente desde el panel de administración{empresaNombre ? ` de ${empresaNombre}` : ''}. No se admite inicio de sesión con Microsoft 365 ni Google Workspace.
              </div>
            </div>

            <p style={{ marginTop: 22, fontSize: 12, color: 'var(--ink-5)' }}>
              ¿Aún no tienes acceso? <a style={{ color: 'var(--ink-1)', fontWeight: 600 }}>Solicita una cuenta</a> a tu asistente técnico comercial asignado.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Login = Login;