'use client';
import Button from '@/components/button';
import Input from '@/components/input';
import Select from '@/components/select';
import Table, { Header } from '@/components/table';
import { GetCuestionario } from '@/types/cuestionario';
import { ParticipacionEvento } from '@/types/participante-evento';
import axiosInstance from '@/utils/api-config';
import React, { useEffect } from 'react';
import toast from 'react-hot-toast';

export default function Page() {
  const headers: Header<ParticipacionEvento>[] = [
    {
      key: 'id_participante',
      label: '#',
      render: (_, row) => row.participante.id_participante,
    },
    {
      key: 'participante',
      label: 'Correo',
      render: (_, row) => row.participante.correo,
    },
    {
      key: 'fecha_registro',
      label: 'Fecha registro',
      render: (val) => new Date(val as string).toLocaleString(),
    },
    {
      key: 'estatus',
      label: 'Asistencia',
      render: (_, row) => {
        const isLoading = loadingAsistencia[row.id_participante];

        return row.fecha_asistencia ? (
          <span className="text-success">
            <i className="bi bi-check-circle-fill me-2"></i>
            Asistió
          </span>
        ) : (
          <Button
            size="sm"
            outline
            onClick={() =>
              confirmarAsistencia(row.id_participante, row.id_evento)
            }
            disabled={isLoading}
          >
            {isLoading ? (
              <>
                <span
                  className="spinner-border spinner-border-sm me-2"
                  role="status"
                  aria-hidden="true"
                ></span>
                Confirmando...
              </>
            ) : (
              'Confirmar asistencia'
            )}
          </Button>
        );
      },
    },
  ];

  const [eventos, setEventos] = React.useState<GetCuestionario[]>([]);
  const [participantes, setParticipantes] = React.useState<
    ParticipacionEvento[]
  >([]);
  const [loadingAsistencia, setLoadingAsistencia] = React.useState<
    Record<number, boolean>
  >({});
  const [busquedaCorreo, setBusquedaCorreo] = React.useState('');

  useEffect(() => {
    const getEventos = async () => {
      try {
        const { data } = await axiosInstance.get(`/cuestionario`);
        if (!data) throw new Error('No se encontraron eventos');
        setEventos(data);
      } catch (error) {
        console.error('Error en getEventos:', error);
      }
    };

    getEventos();
  }, []);

  const handleOnSelect = async (idSeleccionado: number) => {
    try {
      const { data } = await axiosInstance.get<ParticipacionEvento[]>(
        `/participante-evento/evento/${idSeleccionado}`
      );
      setParticipantes(data);
    } catch (error) {
      console.error('Error al obtener participante-evento:', error);
    }
  };

  const confirmarAsistencia = async (
    id_participante: number,
    id_evento: number
  ) => {
    setLoadingAsistencia((prev) => ({ ...prev, [id_participante]: true }));
    try {
      await axiosInstance.post(
        `/participante-evento/asistencia/${id_participante}/${id_evento}`
      );

      toast.success('Asistencia confirmada');
      // Actualiza lista
      await handleOnSelect(id_evento);
    } catch (error) {
      toast.error('Error al confirmar asistencia');
      console.error(error);
    } finally {
      setLoadingAsistencia((prev) => ({ ...prev, [id_participante]: false }));
    }
  };

  const participantesFiltrados = participantes.filter((p) =>
    p.participante.correo.toLowerCase().includes(busquedaCorreo.toLowerCase())
  );

  return (
    <div>
      <Select
        label="Selecciona un evento"
        options={eventos.map((evento) => ({
          value: evento.id_cuestionario,
          label: evento.nombre_form,
        }))}
        onChange={(e) => {
          const id = Number(e?.target?.value ?? e);
          if (!isNaN(id)) handleOnSelect(id);
        }}
        placeholder="Selecciona un evento"
      />
      {participantes.length > 0 && (
        <>
          <Input
            label="Buscar por correo"
            placeholder="ejemplo@correo.com"
            value={busquedaCorreo}
            onChange={(e) => setBusquedaCorreo(e.target.value)}
          />

          <div className="mt-4">
            <Table
              headers={headers}
              data={participantesFiltrados}
              rowKey={(row) => row.id_participante}
            />
          </div>
        </>
      )}
    </div>
  );
}
