'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { QRScreen } from './QRScreen';

interface ConnectionGateProps {
  children: React.ReactNode;
}

export function ConnectionGate({ children }: ConnectionGateProps) {
  const [status, setStatus] = useState<'disconnected' | 'qr' | 'connecting' | 'connected'>('disconnected');
  const [qrPng, setQrPng] = useState<string | null>(null);
  const [phone, setPhone] = useState<string | null>(null);
  const [initialized, setInitialized] = useState(false); // ← previene spinner infinito
  const router = useRouter();

  const checkConnection = async () => {
    try {
      const res = await fetch('/api/connection/status');
      const data = await res.json();
      setStatus(data.status);
      if (data.qrPng) setQrPng(data.qrPng);
      if (data.phone) setPhone(data.phone);
    } catch (err) {
      console.error('Error checking connection:', err);
    } finally {
      setInitialized(true); // ← marca que ya hicimos al menos un fetch
    }
  };

  useEffect(() => {
    checkConnection();
    const interval = setInterval(checkConnection, 2000);
    return () => clearInterval(interval);
  }, []);

  /* ── Cargando por primera vez (solo brevemente) ── */
  if (!initialized) {
    return (
      <>
        <div className="backdrop" aria-hidden="true"></div>
        <div className="aurora" aria-hidden="true" />
        <div className="grid-noise" aria-hidden="true" />
        <div className="screen active" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div className="auth-wrap">
            <div className="auth-card panel" style={{ maxWidth: '400px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <div className="spinner-epic" style={{ width: '48px', height: '48px', borderWidth: '3.5px', marginBottom: '24px' }} />
              <h2 className="auth-title">Iniciando sistema</h2>
              <p className="auth-sub" style={{ margin: '8px 0 0' }}>Verificando conexión con WhatsApp…</p>
            </div>
          </div>
        </div>
      </>
    );
  }

  /* ── QR / Conectando ── */
  if (qrPng && (status === 'qr' || status === 'connecting')) {
    return <QRScreen qrPng={qrPng} status={status} />;
  }

  /* ── Conectado ── */
  if (status === 'connected') {
    return <>{children}</>;
  }

  /* ── Desconectado (estado real, ya inicializado) ── */
  return (
    <>
      <div className="backdrop" aria-hidden="true"></div>
      <div className="aurora" aria-hidden="true" />
      <div className="grid-noise" aria-hidden="true" />
      <div className="screen active" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div className="auth-wrap">
          <div className="auth-card panel" style={{ maxWidth: '420px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            {/* Ícono desconectado */}
            <div
              style={{
                width: '72px',
                height: '72px',
                borderRadius: '20px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                background: 'rgba(241,100,124,0.08)',
                border: '1px solid rgba(241,100,124,0.2)',
                boxShadow: '0 0 24px rgba(241,100,124,0.12)',
                marginBottom: '20px',
              }}
            >
              <svg style={{ color: 'var(--rose)', width: '32px', height: '32px' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
                <path strokeLinecap="round" strokeLinejoin="round"
                  d="M18.364 5.636a9 9 0 11-12.728 0M12 9v4m0 4h.01" />
              </svg>
            </div>
            <h2 className="auth-title">WhatsApp Desconectado</h2>
            <p className="auth-sub" style={{ margin: '8px 0 28px', lineHeight: '1.6', maxWidth: '300px' }}>
              El agente no está conectado a WhatsApp. Inicia sesión para comenzar a recibir mensajes.
            </p>
            <button
              onClick={() => router.push('/login')}
              className="btn-epic"
              style={{ margin: 0, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px' }}
            >
              <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
              </svg>
              Ir al Login
            </button>
          </div>
        </div>
      </div>
    </>
  );
}