"use client";

import toast from "react-hot-toast";
import { useState } from "react";
import { useRouter } from "next/navigation";

import Selection from "../Selection/Selection";
import { envConfig } from "@/app/lib/config";
import Cookies from "js-cookie";
import axios from "axios";

import "./Receipt.css";
import Swal from "sweetalert2";

interface ReceiptsProps {
  numAcount: number | null;
  plataformasInscritas: string[];
}

const PLATAFORMA_MAP: Record<string, number> = {
  WINDOWS: 1,
  MACINTOSH: 2,
  PROFESORES: 5,
};

export default function Inscripcion({
  numAcount,
  plataformasInscritas,
}: ReceiptsProps) {
  const [conPago, setConPago] = useState<"con" | "sin">("con");
  const [plataformaSeleccionada, setPlataformaSeleccionada] = useState<
    string | null
  >(null);

  const router = useRouter();

  const [folio, setFolio] = useState("");
  const [amount, setAmount] = useState("");
  const [lock, setLock] = useState<boolean>(true);
  const todayISO = new Date().toISOString().split("T")[0];
  const [date, setDate] = useState(todayISO);

  //restrict this month//
  const day = new Date();
  const year = day.getFullYear();
  const month = day.getMonth();
  const today = day.getDate();

  const minFecha = new Date(year, month, 1).toISOString().split("T")[0];
  const maxFecha = new Date(year, month, today).toISOString().split("T")[0];
  //restrict this month//

  const handleSaveReceipt = async () => {
    if (!numAcount) {
      toast.error("busca de nuevo al estudiante");
      return;
    }

    if (!folio) {
      toast.error("Ingresa el folio del ticket");
      return;
    }

    if (!amount) {
      toast.error("Coloca el monto a depositar");
      return;
    }

    if (!date) {
      toast.error("Coloca la fecha");
      return;
    }

    if (!plataformaSeleccionada) {
      toast.error("Selecciona una plataforma");
      return;
    }

    const id_plataforma = PLATAFORMA_MAP[plataformaSeleccionada];

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

      await axios.post(
        `${envConfig.apiUrl}/operations/registration`,
        {
          monto: Number(amount),
          id_cuenta: numAcount,
          id_plataforma,
          folio_recibo: folio,
          fecha_recibo: date,
          realizo_pago: true,
        },
        { headers },
      );

      toast.success("Alumno con pago");
      Swal.fire("Alumno con pago");
      setFolio("");
      setAmount("");
      setDate(todayISO);

      router.refresh();
    } catch (err: any) {
      toast.error(String(err));
    }
  };

  const handleInscripcionSinPago = async () => {
    if (!numAcount) {
      toast.error("busca de nuevo al estudiante");
      return;
    }

    if (!plataformaSeleccionada) {
      toast.error("Selecciona una plataforma");
      return;
    }

    const id_plataforma = PLATAFORMA_MAP[plataformaSeleccionada];

    try {
      const res = await fetch(`${envConfig.apiUrl}/alumno-inscrito`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          id_cuenta: numAcount,
          id_plataforma,
          realizo_pago: false,
        }),
      });

      const data = await res.json();

      if (!res.ok) {
        Swal.fire("Error");
        throw new Error(data.message || "Error al inscribir");
      }

      toast.success("Alumno inscrito sin pago");
      Swal.fire({
        title: "Alumno inscrito sin pago!",
        icon: "success",
        draggable: true
      });
      router.refresh();
    } catch (err: any) {
      toast.error(err.message);
    }
  };

  return (
    <section>
      <Selection
        plataformasInscritas={plataformasInscritas}
        onSelect={setPlataformaSeleccionada}
      />

      <select
        value={conPago}
        onChange={(e) => setConPago(e.target.value as "con" | "sin")}
        style={{
          marginBottom: "1rem",
          maxWidth: "120px",
          minWidth: "120px",
        }}
      >
        <option value="con">con pago</option>
        <option value="sin">sin pago</option>
      </select>

      {conPago === "con" && (
        <form
          onSubmit={(e) => {
            e.preventDefault();
            handleSaveReceipt();
          }}
        >
          <div className="gap">
            <div className="groupInput">
              <label className="label">Ticket:</label>
              <input
                type="text"
                value={folio}
                onChange={(e) => {
                  const value = e.target.value;
                  if (/^\d*$/.test(value) && value.length <= 7) {
                    setFolio(value);
                  }
                }}
                placeholder="Numero de ticket..."
                inputMode="numeric"
              />
            </div>

            <div className="groupInput">
              <label className="label">Monto:</label>
              <input
                type="text"
                value={amount}
                onChange={(e) => {
                  const value = e.target.value;

                  if (/^\d*\.?\d*$/.test(value)) {
                    const numericValue = parseFloat(value);

                    if (lock && numericValue > 1000) {
                      toast.error("El monto no puede superar $1000.00");
                      return;
                    }

                    setAmount(value);
                  }
                }}
                placeholder="Monto recibido..."
                inputMode="numeric"
              />
            </div>

            <div className="groupInput">
              <label className="label">Fecha de Pago:</label>
              <input
                type="date"
                value={date}
                onChange={(e) => setDate(e.target.value)}
                min={minFecha}
                max={maxFecha}
              />
            </div>

            <div className="containerButton" style={{ position: 'relative' }}>

              <button className="button buttonSearch">Inscribir</button>
              <button
                type="button"
                className={`button buttonCancel ${lock ? "buttonLock" : "buttonOpenLock"
                  }`}
                onClick={() => {
                  setLock((prev) => !prev)
                  setAmount('');
                }}
              />
            </div>
          </div>
        </form>
      )}
      {conPago === "sin" && (

        <div className="containerButton">
          <button
            className="button buttonSearch"
            disabled={!plataformaSeleccionada}
            onClick={handleInscripcionSinPago}
          >
            Inscribir
          </button>
        </div>
      )}
    </section>
  );
}
//IO