"use client";

import { useEffect, useState } from "react";
import { envConfig } from "../lib/config";
import { getEquipoByCount } from "../lib/getEquipoByCount";
import SearchUser from "./Global/SearchUser/searchUser";
import SearchEquipo from "./SearchEquipo";
import axios from "axios";
import Information from "./Global/Information/information";
import Swal from "sweetalert2";
import Cookies from "js-cookie";

async function getEquipoId(idEquipo: number) {
  try {
    const token = Cookies.get("token");
    const headers = { Authorization: `Bearer ${token}` };

    const res = await axios.get(
      `${envConfig.apiUrl}/bitacora/equipo/${idEquipo}`,
      { headers }
    );

    return res.data;
  } catch (error: any) {
    if (axios.isAxiosError(error)) {
      return {
        error: error.response?.data?.message || "Error al consultar equipo",
      };
    }
    return { error: "Error desconocido" };
  }
}

interface Props {
  numAcount?: string | null;
  machine?: string | null;
}

export default function CheckBoxEquipo({ numAcount, machine }: Props) {
  const [modo, setModo] = useState<"Equipo" | "Cuenta">("Cuenta");

  const [bitacoraCuenta, setBitacoraCuenta] = useState<any>(null);
  const [bitacoraEquipo, setBitacoraEquipo] = useState<any>(null);

  const [tiempoRestante, setTiempoRestante] = useState("");
  const [minutos, setMinutos] = useState<number>(0);

  const [errorCuenta, setErrorCuenta] = useState<string | null>(null);
  const [errorEquipo, setErrorEquipo] = useState<string | null>(null);

  const [loading, setLoading] = useState(false);

  const bitacora =
    modo === "Cuenta" ? bitacoraCuenta : bitacoraEquipo;

  const fetchByCuenta = async (idCuenta: number) => {
    const result = await getEquipoByCount(idCuenta);

    if (result?.error) {
      setErrorCuenta(result.error);
      setBitacoraCuenta(null);
    } else {
      setErrorCuenta(null);
      setBitacoraCuenta(result);
    }
  };

  const fetchByEquipo = async (idEquipo: number) => {
    const result = await getEquipoId(idEquipo);

    if (result?.error) {
      setErrorEquipo(result.error);
      setBitacoraEquipo(null);
    } else {
      setErrorEquipo(null);
      setBitacoraEquipo(result);
    }
  };

  useEffect(() => {
    if (modo !== "Cuenta" || !numAcount) return;

    const idCuenta = parseInt(numAcount);
    if (!isNaN(idCuenta)) fetchByCuenta(idCuenta);
  }, [numAcount, modo]);

  useEffect(() => {
    if (modo !== "Equipo" || !machine) return;

    const idEquipo = parseInt(machine);
    if (!isNaN(idEquipo)) fetchByEquipo(idEquipo);
  }, [machine, modo]);

  useEffect(() => {
    if (!bitacora) return;

    const entrada = new Date(bitacora.tiempo_entrada).getTime();
    const asignadoMs = bitacora.tiempo_asignado * 60 * 1000;

    const updateTimer = () => {
      const ahora = Date.now();
      const restante = entrada + asignadoMs - ahora;

      if (restante <= 0) {
        setTiempoRestante("agotado");
        setMinutos(0);
        return false;
      }

      const minutosRestantes = Math.floor(restante / 60000);
      const segundos = Math.floor((restante % 60000) / 1000);

      setMinutos(minutosRestantes+1);
      setTiempoRestante(
        `${minutosRestantes} minuto(s) con ${segundos} segundo(s)`
      );

      return true;
    };

    updateTimer();

    const interval = setInterval(() => {
      const sigue = updateTimer();
      if (!sigue) clearInterval(interval);
    }, 1000);

    return () => clearInterval(interval);
  }, [bitacora]);

  const handleButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    if (!bitacora) return;

    setLoading(true);

    try {
      const token = Cookies.get("token");
      const headers = { Authorization: `Bearer ${token}` };

      await axios.patch(
        `${envConfig.apiUrl}/bitacora/cancelar/${bitacora.id_bitacora}`,
        { tiempo_asignado: minutos },
        { headers }
      );

      Swal.fire({
        title: "Tiempo cancelado correctamente!",
        icon: "success",
      });

      if (modo === "Cuenta" && numAcount) {
        fetchByCuenta(parseInt(numAcount));
      }

      if (modo === "Equipo" && machine) {
        fetchByEquipo(parseInt(machine));
      }
    } catch (error) {
      Swal.fire({
        title: "Error al cancelar tiempo",
        icon: "error",
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="radio-grid">
        <label className="radio-card">
          <input
            type="radio"
            checked={modo === "Equipo"}
            onChange={() => setModo("Equipo")}
          />
          <span className="radio-ui"></span>
          <span className="radio-text">Equipo</span>
        </label>

        <label className="radio-card">
          <input
            type="radio"
            checked={modo === "Cuenta"}
            onChange={() => setModo("Cuenta")}
          />
          <span className="radio-ui"></span>
          <span className="radio-text">Cuenta</span>
        </label>
      </div>

      {modo === "Cuenta" && (
        <>
          <SearchUser value={numAcount ?? null} />
          <h2>{errorCuenta}</h2>
        </>
      )}

      {modo === "Equipo" && (
        <>
          <SearchEquipo value={machine ?? null} />
          <h2>{errorEquipo}</h2>
        </>
      )}

      {bitacora && tiempoRestante !== "agotado" && (
        <>
          <Information
            NoCuenta={bitacora.alumno_inscrito.alumno.id_cuenta}
            Nombre={bitacora.alumno_inscrito.alumno.nombre}
            Tiempo={tiempoRestante}
            Equipo={bitacora.equipo.ubicacion}
          />

          <button
            className="button buttonSearch"
            style={{ marginTop: "1rem" }}
            onClick={handleButton}
            disabled={loading || minutos === 0}
          >
            Cancelar tiempo
          </button>
        </>
      )}
    </>
  );
}