'use client';
import SimpleInput from '@/components/input';
import Table, { Header } from '@/components/table';
import EditFormulario from '@/containers/edit-formulario';
import { useGetApi } from '@/hooks/use-get-api';
import { GetCuestionario } from '@/types/cuestionario';
import { ParticipacionEvento } from '@/types/participante-evento';
import axiosInstance from '@/utils/api-config';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import React, { useEffect } from 'react';
import toast from 'react-hot-toast';

type Params = {
  id_evento: string;
  id_cuestionario: string;
};

export default function Page() {
  const params = useParams<Params>();

  const [cuestionario, setCuestionario] =
    React.useState<GetCuestionario | null>(null);
  const [busquedaCorreo, setBusquedaCorreo] = React.useState('');
  const [loadingAsistencia, setLoadingAsistencia] = React.useState<
    Record<number, boolean>
  >({});

  const { data: participantes, setData } = useGetApi<ParticipacionEvento[]>(
    `/participante-evento/evento/${params.id_cuestionario}`
  );
  const { data } = useGetApi<GetCuestionario>(
    `/cuestionario/${params.id_cuestionario}`
  );

  useEffect(() => {
    if (data) setCuestionario(data);
  }, [data]);

  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
      const { data } = await axiosInstance.get<ParticipacionEvento[]>(
        `/participante-evento/evento/${id_evento}`
      );
      setData(data);
    } catch (error) {
      toast.error('Error al confirmar asistencia');
      console.error(error);
    } finally {
      setLoadingAsistencia((prev) => ({ ...prev, [id_participante]: false }));
    }
  };

  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: (_, row) =>
        row.fecha_registro
          ? new Date(row.fecha_registro).toLocaleString()
          : 'Sin registro',
    },
    {
      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
            className="btn btn-sm btn-outline-success"
            onClick={() =>
              confirmarAsistencia(row.id_participante, row.id_cuestionario)
            }
            disabled={isLoading}
          >
            {isLoading ? (
              <>
                <span
                  className="spinner-border spinner-border-sm me-2"
                  role="status"
                  aria-hidden="true"
                ></span>
                Confirmando...
              </>
            ) : (
              'Confirmar asistencia'
            )}
          </button>
        );
      },
    },
  ];

  const handleChange = (field: keyof GetCuestionario, value: string | Date) => {
    setCuestionario((prev) =>
      prev
        ? {
            ...prev,
            [field]: value,
          }
        : null
    );
  };

  const handleCuestionarioActualizado = (
    eventoActualizado: GetCuestionario
  ) => {
    setCuestionario(eventoActualizado);
  };

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

  return (
    <div className="my-4">
      <Link
        href={`/administrador/evento/${params.id_evento}`}
        className="btn btn-link mb-3"
      >
        <i className="bi bi-arrow-left me-2"></i>
        Volver
      </Link>

      <h2 className="mb-4">Formulario</h2>

      {cuestionario && (
        <EditFormulario
          cuestionario={cuestionario}
          handleChange={handleChange}
          handleOnChange={handleCuestionarioActualizado}
        />
      )}

      <h3 className="mt-5">Participantes</h3>

      {participantes?.length === 0 && (
        <p className="text-muted">No hay participantes registrados aún.</p>
      )}

      {participantes && participantes.length > 0 && (
        <>
          <SimpleInput
            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>
  );
}
