"use client";

import Cookies from "js-cookie";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { PostImpressions } from "@/app/lib/postImpressions";
import toast from "react-hot-toast";
import Swal from "sweetalert2";

interface CostOption {
  value: number;
}

interface ImpressionsProps {
  costs: CostOption[];
  numAcount: number | null;
  id_servicio: number;
}

function Impressions({ costs, numAcount, id_servicio }: ImpressionsProps) {
  const [pages, setPages] = useState("");
  const [cost, setCost] = useState("");

  const router = useRouter();

  const handleLogout = () => {
    Cookies.remove("token");
    Cookies.remove("session");
    router.push("/Login");
  };

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

    if (!pages) {
      toast.error("Ingresa el numero de hojas a imprimir");
      return;
    }

    if (!cost) {
      toast.error("Selecciona un costo");
      return;
    }

    const result = await PostImpressions({
      id_cuenta: numAcount,
      numero_hojas: parseInt(pages),
      monto: parseInt(cost) * parseInt(pages),
      id_servicio,
    });

    if (result?.error) {
      if (result.message === "Token inválido") {
        handleLogout();
      } else {
        toast.error(result.message);
      }
      return;
    }

    setPages("");
    setCost("");
    toast.success("Impresion cobrada correctamente");
    Swal.fire({
      title: "Cobro exitoso!",
      icon: "success",
      draggable: true
    });
    router.refresh();
  };

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        handlePayment();
      }}
    >
      <div className="gap">
        <div className="groupInput">
          <label className="label">Costo:</label>
          <select value={cost} onChange={(e) => setCost(e.target.value)}>
            <option value="">Selecciona el costo</option>
            {costs.map((c) => (
              <option key={c.value} value={c.value}>
                ${c.value}
              </option>
            ))}
          </select>
        </div>

        <div className="groupInput">
          <label className="label">Hojas:</label>
          <input
            type="text"
            value={pages}
            onChange={(e) => {
              const value = e.target.value;
              if (/^\d*$/.test(value)) {
                setPages(value);
              }
            }}
            placeholder="Numero de hojas a imprimir..."
            inputMode="numeric"
            pattern="[0-9]*"
          />
        </div>

        <div
          className="groupInput"
          style={{ height: "35px", flexWrap: "nowrap" }}
        >
          <label className="label">Total:</label>
          <label
            style={{ width: "100%", minWidth: "200px", maxWidth: "500px" }}
          >
            {pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
          </label>
        </div>

        <div className="containerButton">
          <button className="button buttonCharge" type="submit">
            Cobrar
          </button>
        </div>
      </div>
    </form>
  );
}

export default Impressions;
//IO