import React, { useState, useCallback, useRef } from 'react';
import { BarcodeScanner, BarcodeFormat } from '@capacitor-mlkit/barcode-scanning';
import { Capacitor } from '@capacitor/core';
import { BrowserMultiFormatReader } from '@zxing/browser';
import { BarcodeFormat as ZxingFormat, DecodeHintType } from '@zxing/library';
import './ScannerView.css';

const CIP_REGEX = /^[A-Z0-9]{8,30}$/i;

function playBeep() {
  try {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(1046, ctx.currentTime);
    osc.frequency.exponentialRampToValueAtTime(1318, ctx.currentTime + 0.08);
    gain.gain.setValueAtTime(0.28, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
    osc.connect(gain);
    gain.connect(ctx.destination);
    osc.start();
    osc.stop(ctx.currentTime + 0.38);
  } catch (_) { }
}

function ScannerView({ onClose, onSelectMedicine }) {
  const videoRef = useRef(null);
  const streamRef = useRef(null);
  const rafRef = useRef(null);
  const detectorRef = useRef(null);

  // Log de diagnóstico al montar
  React.useEffect(() => {
    console.log('[Scanner] BarcodeDetector global:', typeof BarcodeDetector);
    console.log('[Scanner] Navegador:', navigator.userAgent);
  }, []);

  const [phase, setPhase] = useState('idle');
  const [manualCip, setManualCip] = useState('');
  const [prescriptions, setPrescriptions] = useState([]);
  const [scannedCip, setScannedCip] = useState(null);
  const [loadingPrescriptions, setLoadingPrescriptions] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  // Photo upload state
  const [previewUrl, setPreviewUrl] = useState(null);
  const [ocrLoading, setOcrLoading] = useState(false);
  const cameraInputRef = useRef(null);
  const galleryInputRef = useRef(null);

  const isNative = Capacitor.isNativePlatform();

  const fetchPrescriptions = useCallback(async (cip) => {
    setLoadingPrescriptions(true);
    try {
      const res = await fetch(`/api/tsi/${encodeURIComponent(cip)}/prescriptions`);
      const data = await res.json();
      setPrescriptions(data);
    } catch {
      setPrescriptions([]);
    } finally {
      setLoadingPrescriptions(false);
    }
  }, []);

  function stopCamera() {
    streamRef.current?.getTracks().forEach(t => t.stop());
    streamRef.current = null;
    if (rafRef.current) {
      cancelAnimationFrame(rafRef.current);
      rafRef.current = null;
    }
  }

  async function handleNativeScan() {
    setErrorMsg('');
    try {
      const supported = await BarcodeScanner.isSupported();
      if (!supported) {
        setErrorMsg('El escáner no está disponible en este dispositivo.');
        setPhase('error');
        return;
      }

      const permission = await BarcodeScanner.checkPermissions();
      if (permission.camera !== 'granted') {
        const request = await BarcodeScanner.requestPermissions();
        if (request.camera !== 'granted') {
          setErrorMsg('Permiso de cámara denegado. Actívalo en ajustes o introduce el código CIP manualmente.');
          setPhase('error');
          return;
        }
      }

      setPhase('scanning');

      const result = await BarcodeScanner.scan({
        formats: [BarcodeFormat.PDF417, BarcodeFormat.Code128, BarcodeFormat.QrCode],
        autoZoom: true,
      });

      const barcode = result.barcodes[0];
      const rawValue = barcode?.rawValue;

      if (!rawValue || !CIP_REGEX.test(rawValue)) {
        setErrorMsg('Código de barras inválido. Intenta de nuevo o introduce el CIP manualmente.');
        setPhase('error');
        return;
      }

      playBeep();
      setScannedCip(rawValue);
      setPhase('prescriptions');
      fetchPrescriptions(rawValue);
    } catch (err) {
      if (err?.message?.includes('cancel') || err?.message?.includes('User')) {
        setPhase('idle');
        return;
      }
      setErrorMsg(`Error al escanear: ${err.message || 'Error desconocido'}`);
      setPhase('error');
    }
  }

  async function handleWebScan() {
    setErrorMsg('');
    console.log('[Scanner] Iniciando escaneo web...');
    try {
      if (!navigator.mediaDevices?.getUserMedia) {
        setErrorMsg('Cámara no disponible en este navegador.');
        setPhase('error');
        return;
      }

      const stream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: { ideal: 'environment' }, width: { ideal: 1280 }, height: { ideal: 720 } },
      });
      console.log('[Scanner] Stream de cámara obtenido');

      streamRef.current = stream;
      setPhase('scanning');

      await new Promise((resolve) => {
        const waitForVideo = () => {
          if (videoRef.current) {
            videoRef.current.srcObject = stream;
            videoRef.current.play().then(() => {
              console.log('[Scanner] Video reproduciéndose');
              console.log('[Scanner] Video dims:', videoRef.current.videoWidth, 'x', videoRef.current.videoHeight);
              resolve();
            }).catch((e) => {
              console.error('[Scanner] Error al reproducir video:', e);
              resolve();
            });
          } else {
            requestAnimationFrame(waitForVideo);
          }
        };
        requestAnimationFrame(waitForVideo);
      });

      console.log('[Scanner] Usando zxing local (@zxing/browser)...');
      const hints = new Map();
      hints.set(DecodeHintType.POSSIBLE_FORMATS, [
        ZxingFormat.CODE_128,
        ZxingFormat.CODE_39,
        ZxingFormat.CODE_93,
        ZxingFormat.PDF_417,
        ZxingFormat.QR_CODE,
        ZxingFormat.EAN_13,
        ZxingFormat.EAN_8,
        ZxingFormat.UPC_A,
        ZxingFormat.UPC_E,
        ZxingFormat.ITF,
      ]);
      hints.set(DecodeHintType.TRY_HARDER, true);
      const zxingReader = new BrowserMultiFormatReader(hints);
      detectorRef.current = zxingReader;

      const formatNames = { 0:'AZTEC', 1:'CODABAR', 2:'CODE_39', 3:'CODE_93', 4:'CODE_128', 5:'DATA_MATRIX', 6:'EAN_8', 7:'EAN_13', 8:'ITF', 10:'PDF_417', 11:'QR_CODE', 12:'RSS_14', 14:'UPC_A', 15:'UPC_E' };

      console.log('[Scanner] Iniciando decodeFromVideoElement...');
      const controls = await zxingReader.decodeFromVideoElement(videoRef.current, (result, error) => {
        if (result) {
          const rawValue = result.getText();
          const cleaned = rawValue.replace(/[^A-Z0-9]/gi, '');
          const format = result.getBarcodeFormat();
          console.log('[Scanner] zxing detectó! raw:', rawValue, '| limpio:', cleaned, '| formato:', formatNames[format] || format);
          if (cleaned && CIP_REGEX.test(cleaned)) {
            console.log('[Scanner] CIP válido ✓');
            controls.stop();
            stopCamera();
            playBeep();
            setScannedCip(cleaned);
            setPhase('prescriptions');
            fetchPrescriptions(cleaned);
          } else if (rawValue) {
            console.log('[Scanner] Código no cumple regex:', cleaned);
          }
        }
      });
      console.log('[Scanner] Escaneando...');

    } catch (err) {
      console.error('[Scanner] Error general:', err);
      stopCamera();
      if (err.name === 'NotAllowedError') {
        setErrorMsg('Permiso de cámara denegado. Permite el acceso e intenta de nuevo.');
      } else if (err.name === 'NotFoundError') {
        setErrorMsg('No se detectó ninguna cámara. Introduce el código CIP manualmente.');
      } else {
        setErrorMsg(`Error de cámara: ${err.message || 'Error desconocido'}`);
      }
      setPhase('error');
    }
  }

  function handleStartScan() {
    if (isNative) {
      handleNativeScan();
    } else {
      handleWebScan();
    }
  }

  function handleManualSubmit(e) {
    e.preventDefault();
    const cip = manualCip.trim();
    if (!cip) {
      setErrorMsg('Introduce un código CIP.');
      setPhase('error');
      return;
    }
    if (!CIP_REGEX.test(cip)) {
      setErrorMsg('Formato CIP inválido. Debe tener 16 caracteres alfanuméricos.');
      setPhase('error');
      return;
    }
    playBeep();
    setScannedCip(cip);
    setPhase('prescriptions');
    fetchPrescriptions(cip);
  }

  // Photo upload handlers
  function handlePhotoSelect(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    setErrorMsg('');
    setPreviewUrl(URL.createObjectURL(file));
    setPhase('photo-preview');
    // Reset input so selecting the same file again triggers onChange
    e.target.value = '';
  }

  async function handlePhotoOcr() {
    if (!previewUrl) return;
    setOcrLoading(true);
    setErrorMsg('');
    try {
      const res = await fetch(previewUrl);
      const blob = await res.blob();
      const formData = new FormData();
      formData.append('photo', blob, 'tsi.jpg');

      const ocrRes = await fetch('/api/tsi/ocr', { method: 'POST', body: formData });
      const data = await ocrRes.json();

      if (!ocrRes.ok) {
        setErrorMsg(data.error || 'No se pudo leer la imagen. Intenta con otra foto.');
        setPhase('error');
        return;
      }

      const cip = data.cip;
      if (!CIP_REGEX.test(cip)) {
        setErrorMsg(`CIP detectado "${cip}" no tiene formato válido. Introduce el código manualmente.`);
        setPhase('error');
        return;
      }

      playBeep();
      setScannedCip(cip);
      setPreviewUrl(null);
      setPhase('prescriptions');
      fetchPrescriptions(cip);
    } catch (err) {
      setErrorMsg(`Error al procesar la imagen: ${err.message || 'Error desconocido'}`);
      setPhase('error');
    } finally {
      setOcrLoading(false);
    }
  }

  function handlePhotoDiscard() {
    setPreviewUrl(null);
    setPhase('idle');
  }

  function handlePickPrescription(rx) {
    stopCamera();
    onSelectMedicine(rx.name);
  }

  function handleBack() {
    stopCamera();
    if (phase === 'prescriptions') {
      setPhase('idle');
      setPrescriptions([]);
      setScannedCip(null);
    } else if (phase === 'photo-preview') {
      setPreviewUrl(null);
      setPhase('idle');
    } else {
      onClose();
    }
  }

  return (
    <div className="scanner-view">
      <div className="scanner-content">
        <div className="scanner-hero">
          <div className="scanner-icon-circle">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M3 7V5a2 2 0 0 1 2-2h2" />
              <path d="M17 3h2a2 2 0 0 1 2 2v2" />
              <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
              <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
              <path d="M7 8v8M11 8v8M15 8v8M19 8v8" />
            </svg>
          </div>
          <h2 className="scanner-heading">Escanear TSI</h2>
          <p className="scanner-desc">Escanea el código de barras de tu tarjeta sanitaria para ver tus recetas activas</p>
        </div>

        {phase !== 'prescriptions' && (
          <>
            {phase === 'error' && (
              <div className="scan-error-card">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="scan-error-icon">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
                </svg>
                <p className="scan-error-text">{errorMsg}</p>
                <button className="scan-btn scan-btn--outline" onClick={() => { setErrorMsg(''); setPhase('idle'); }}>
                  Intentar de nuevo
                </button>
              </div>
            )}

            {phase === 'idle' && (
              <>
                <button className="scan-btn scan-btn--primary scan-btn--start" onClick={handleStartScan}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                    <circle cx="12" cy="13" r="4" />
                  </svg>
                  Abrir cámara
                </button>

                <div className="upload-section">
                  <label className="upload-label">O sube una foto de tu TSI</label>
                  <div className="upload-row">
                    <button className="upload-option" onClick={() => cameraInputRef.current?.click()}>
                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                        <circle cx="12" cy="13" r="4" />
                      </svg>
                      <span>Hacer foto</span>
                    </button>
                    <button className="upload-option" onClick={() => galleryInputRef.current?.click()}>
                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                        <circle cx="8.5" cy="8.5" r="1.5" />
                        <polyline points="21 15 16 10 5 21" />
                      </svg>
                      <span>Subir de galería</span>
                    </button>
                  </div>
                  <input
                    ref={cameraInputRef}
                    type="file"
                    accept="image/*"
                    capture="environment"
                    onChange={handlePhotoSelect}
                    className="upload-hidden-input"
                  />
                  <input
                    ref={galleryInputRef}
                    type="file"
                    accept="image/*"
                    onChange={handlePhotoSelect}
                    className="upload-hidden-input"
                  />
                </div>
              </>
            )}

            {phase === 'scanning' && !isNative && (
              <div className="scanner-camera-container">
                <video ref={videoRef} className="scanner-video" autoPlay muted playsInline />
                <div className="scanner-frame">
                  <div className="corner tl" />
                  <div className="corner tr" />
                  <div className="corner bl" />
                  <div className="corner br" />
                </div>
                <p className="scanner-hint">Apunta al código de barras</p>
              </div>
            )}

            {phase === 'scanning' && isNative && (
              <div className="scanning-active">
                <div className="scanner-spinner" />
                <p>Abriendo cámara…</p>
              </div>
            )}

            {phase === 'photo-preview' && (
              <div className="photo-preview-panel">
                <div className="photo-preview-container">
                  <img src={previewUrl} alt="TSI capturada" className="photo-preview-img" />
                </div>
                {ocrLoading ? (
                  <div className="scanning-active">
                    <div className="scanner-spinner" />
                    <p>Procesando imagen…</p>
                  </div>
                ) : (
                  <div className="photo-preview-actions">
                    <button className="scan-btn scan-btn--primary scan-btn--start" onClick={handlePhotoOcr}>
                      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="4 7 4 4 20 4 20 7" />
                        <line x1="9" y1="20" x2="15" y2="20" />
                        <line x1="12" y1="4" x2="12" y2="20" />
                      </svg>
                      Escanear imagen
                    </button>
                    <button className="scan-btn scan-btn--ghost" onClick={handlePhotoDiscard}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18" />
                        <line x1="6" y1="6" x2="18" y2="18" />
                      </svg>
                      Descartar
                    </button>
                  </div>
                )}
              </div>
            )}

            <form className="cip-form" onSubmit={handleManualSubmit}>
              <label className="cip-label" htmlFor="cip-input">O introduce el código CIP manualmente</label>
              <div className="cip-row">
                <input
                  id="cip-input"
                  className="cip-input"
                  type="text"
                  placeholder="Código CIP de 16 dígitos"
                  value={manualCip}
                  onChange={(e) => setManualCip(e.target.value)}
                  maxLength={16}
                  autoComplete="off"
                  spellCheck={false}
                />
                <button type="submit" className="scan-btn scan-btn--primary">Buscar</button>
              </div>
            </form>
          </>
        )}

        {phase === 'prescriptions' && (
          <div className="prescriptions-panel">
            <div className="cip-badge">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm3 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
              </svg>
              <div>
                <p className="cip-badge-label">TSI Escaneada</p>
                <p className="cip-badge-value">{scannedCip}</p>
              </div>
            </div>

            <h3 className="rx-title">Recetas Activas</h3>
            <p className="rx-subtitle">Toca un medicamento para ver disponibilidad en farmacias cercanas.</p>

            {loadingPrescriptions && (
              <div className="rx-loading">
                <div className="scanner-spinner" />
                <p>Cargando recetas…</p>
              </div>
            )}

            {!loadingPrescriptions && prescriptions.length === 0 && (
              <p className="rx-empty">No se encontraron recetas activas para esta tarjeta.</p>
            )}

            <ul className="rx-list">
              {prescriptions.map((rx, i) => (
                <li key={i}>
                  <button className="rx-item" onClick={() => handlePickPrescription(rx)}>
                    <div className="rx-item-info">
                      <span className="rx-name">{rx.name}</span>
                      <span className="rx-detail">{rx.dosage} · {rx.form}</span>
                      {rx.active_ingredient && (
                        <span className="rx-ingredient">{rx.active_ingredient}</span>
                      )}
                    </div>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="rx-arrow">
                      <polyline points="9 18 15 12 9 6" />
                    </svg>
                  </button>
                </li>
              ))}
            </ul>

            <button className="scan-btn scan-btn--ghost" onClick={() => {
              stopCamera();
              setPhase('idle');
              setPrescriptions([]);
              setScannedCip(null);
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="1 4 1 10 7 10" />
                <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
              </svg>
              Escanear otra tarjeta
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default ScannerView;