'use client';

import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import { Scanner } from '@yudiel/react-qr-scanner';
import Button from '@/components/button';
import axiosInstance from '@/utils/api-config';
import toast from 'react-hot-toast';

const Modal = dynamic(() => import('@/components/modal'), { ssr: false });

export default function Page() {
  const [scannedData, setScannedData] = useState<{
    id_participante: number;
    id_cuestionario: number;
  } | null>(null);

  const [showModal, setShowModal] = useState(false);
  const [enableScan, setEnableScan] = useState(true);
  const [statusMessage, setStatusMessage] = useState('');

  const [participante, setParticipante] = useState('');

  const handleScan = async (rawValue: string) => {
    console.log('QR Escaneado:', rawValue);
    if (!enableScan) return;

    try {
      const data = JSON.parse(rawValue);
      if (data.id_participante && data.id_cuestionario) {
        try {
          const response = await axiosInstance.get(
            `/participante-evento/${data.id_participante}/${data.id_cuestionario}`
          );

          setParticipante(response.data.participante.correo);
          setScannedData({
            id_participante: data.id_participante,
            id_cuestionario: data.id_cuestionario,
          });
          setShowModal(true);
          setEnableScan(false);
        } catch (err) {
          console.warn('Participante no registrado en el cuestionario:', err);
          setStatusMessage(
            '❌ El participante no está registrado en este evento.'
          );
        }
      } else {
        setStatusMessage('⚠️ El QR no contiene los campos requeridos');
      }
    } catch (err) {
      console.error('QR malformado:', err);
      setStatusMessage('❌ Error al leer el QR: formato inválido');
    }
  };

  const handleConfirm = async () => {
    if (!scannedData) return;

    try {
      const response = await axiosInstance.post(
        `/participante-evento/asistencia/${scannedData.id_participante}/${scannedData.id_cuestionario}`
      );

      console.log('Asistencia registrada:', response.data);
      toast.success('✅ Asistencia registrada correctamente');
    } catch (err) {
      console.error('Error en la petición:', err);
      setStatusMessage('❌ Error de red al registrar asistencia');
    }

    setShowModal(false);
    setEnableScan(true);
    setScannedData(null);
  };

  return (
    <main className="container flex-grow-1 d-flex flex-column align-items-center justify-content-center">
      <h1 className="mb-4">Lectura de QRs</h1>

      {enableScan ? (
        <>
          <div style={{ width: '100%', maxWidth: '400px' }}>
            <Scanner
              onScan={(codes) => {
                if (codes.length > 0) {
                  handleScan(codes[0].rawValue);
                }
              }}
              onError={(err) => console.error('QR Error:', err)}
              constraints={{ facingMode: 'environment' }}
            />
          </div>
          <Button
            onClick={() => setEnableScan(false)}
            variant="outline-danger"
            className="mt-3"
          >
            Detener cámara
          </Button>
        </>
      ) : (
        <>
          <p className="text-muted mb-3">La cámara está detenida.</p>
          <Button onClick={() => setEnableScan(true)} variant="outline-primary">
            Activar cámara
          </Button>
        </>
      )}

      {statusMessage && <p className="mt-3">{statusMessage}</p>}

      <Modal
        isVisible={showModal}
        size="md"
        onClose={() => {
          setShowModal(false);
          setEnableScan(true);
          setScannedData(null);
        }}
        closeButton
        className={{
          content: 'p-3',
          body: 'text-center',
        }}
      >
        <h5 className="mb-3">Datos escaneados</h5>
        {scannedData ? (
          <>
            <p>
              <strong>Participante:</strong> {participante}
            </p>
            <Button variant="success" onClick={handleConfirm}>
              Confirmar lectura
            </Button>
          </>
        ) : (
          <p>QR inválido</p>
        )}
      </Modal>
    </main>
  );
}
