// Lee códigos de barras/QR con la cámara del dispositivo usando @zxing/library (cargada por CDN).
// Complementa (no reemplaza) al escáner físico USB: ambos terminan llenando el mismo campo de texto.
function ScannerCamera({ open, onClose, onDetected }) {
  const videoRef = React.useRef(null);
  const readerRef = React.useRef(null);
  const [error, setError] = React.useState(null);
  const [status, setStatus] = React.useState('Iniciando cámara…');

  React.useEffect(() => {
    if (!open) return;
    let cancelled = false;
    setError(null);
    setStatus('Iniciando cámara…');

    if (!window.ZXing) {
      setError('No se pudo cargar el módulo de escaneo por cámara. Verifica tu conexión a internet.');
      return;
    }

    const reader = new window.ZXing.BrowserMultiFormatReader();
    readerRef.current = reader;

    reader
      .listVideoInputDevices()
      .then((devices) => {
        if (cancelled || !devices.length) {
          if (!devices.length) setError('No se detectó ninguna cámara en este dispositivo.');
          return;
        }
        // Prioriza la cámara trasera en celulares (suele incluir "back" o "environment" en el label).
        const trasera = devices.find((d) => /back|trasera|environment/i.test(d.label)) || devices[devices.length - 1];
        setStatus('Apunta al código de barras…');

        reader.decodeFromVideoDevice(trasera.deviceId, videoRef.current, (result, err) => {
          if (cancelled) return;
          if (result) {
            const texto = result.getText();
            reader.reset();
            onDetected(texto);
          }
        });
      })
      .catch((err) => {
        if (!cancelled) setError('No se pudo acceder a la cámara: ' + err.message);
      });

    return () => {
      cancelled = true;
      try { reader.reset(); } catch (e) {}
    };
  }, [open]);

  if (!open) return null;

  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal-card">
        <div className="modal-card__header">
          <div className="modal-card__title">Escanear con cámara</div>
          <button className="icon-btn" onClick={onClose}><IconX size={16}/></button>
        </div>
        <div className="modal-card__body">
          {error ? (
            <div className="scanner-error">{error}</div>
          ) : (
            <>
              <div className="scanner-viewport">
                <video ref={videoRef} muted playsInline />
                <div className="scanner-frame" />
                <div className="scanner-line" />
              </div>
              <p className="scan-hero__hint" style={{ color: 'var(--text-secondary)', marginTop: 10 }}>{status}</p>
            </>
          )}
        </div>
        <div className="modal-card__footer">
          <button className="btn btn-ghost" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
}