import { faCheck, faTrash, faX } from "@fortawesome/free-solid-svg-icons";
import type { SightingType } from "../../types/types";
import NumberPlate from "../PlateStack/NumberPlate";
import ModalComponent from "../UI/ModalComponent";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAlertHitContext } from "../../context/AlertHitContext";
import { toast, Toaster } from "sonner";
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
import HotListImg from "/Hotlist_Hit.svg";
import NPED_CAT_A from "/NPED_Cat_A.svg";
import NPED_CAT_B from "/NPED_Cat_B.svg";
import NPED_CAT_C from "/NPED_Cat_C.svg";
import { checkIsHotListHit } from "../../utils/utils";

type SightingModalProps = {
  isSightingModalOpen: boolean;
  handleClose: () => void;
  sighting: SightingType | null;
  onDelete?: () => void;
};

const SightingModal = ({
  isSightingModalOpen,
  handleClose,
  sighting,
  onDelete,
}: SightingModalProps) => {
  const { dispatch } = useAlertHitContext();
  const { query, mutation } = useCameraBlackboard();

  const handleAcknowledgeButton = () => {
    try {
      if (!sighting) {
        toast.error("Cannot add sighting to alert list");
        handleClose();
        return;
      }
      if (!query.data.alertHistory) {
        mutation.mutate({
          operation: "INSERT",
          path: "alertHistory",
          value: [sighting],
        });
      } else {
        mutation.mutate({
          operation: "APPEND",
          path: "alertHistory",
          value: sighting,
        });
      }

      dispatch({ type: "ADD", payload: sighting });
      handleClose();
    } catch (error) {
      console.error(error);
      toast.error("Failed to add sighting to alert list");
      handleClose();
    }
  };

  const handleDeleteClick = () => {
    if (!onDelete) return;
    onDelete();
    handleClose();
    toast.success("Sighting removed from alert list");
  };

  const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
  const isHotListHit = checkIsHotListHit(sighting);
  const isNPEDHitA = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "A";
  const isNPEDHitB = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
  const isNPEDHitC = sighting?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";

  return (
    <>
      <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
        <div className="max-w-screen-lg mx-auto py-4 px-2">
          <div className="border-b border-gray-600 mb-4">
            <h2 className="text-lg md:text-xl font-semibold">
              Sighting Details
            </h2>
          </div>
          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center flex md:hidden">
            {onDelete ? (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
                onClick={handleDeleteClick}
              >
                <FontAwesomeIcon icon={faTrash} />
                Delete
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
                onClick={handleClose}
              >
                <FontAwesomeIcon icon={faX} />
                Deny
              </button>
            )}
            {onDelete ? (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
                onClick={handleClose}
              >
                <FontAwesomeIcon icon={faX} />
                Close
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
                onClick={handleAcknowledgeButton}
              >
                <FontAwesomeIcon icon={faCheck} />
                Accept
              </button>
            )}
          </div>
          <div className="flex flex-col md:flex-row gap-3 items-center mb-2 justify-between">
            <div className="flex flex-col md:flex-row gap-3 items-center">
              <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
              <img
                src={sighting?.plateUrlColour}
                alt="plate patch"
                className="h-16 object-contain rounded-md"
              />
            </div>

            {isHotListHit && (
              <img
                src={HotListImg}
                alt="hotlistHit"
                className="h-20 object-contain rounded-md"
              />
            )}
            {isNPEDHitA && (
              <img
                src={NPED_CAT_A}
                alt="hotlistHit"
                className="h-20 object-contain rounded-md"
              />
            )}
            {isNPEDHitB && (
              <img
                src={NPED_CAT_B}
                alt="hotlistHit"
                className="h-20 object-contain rounded-md"
              />
            )}
            {isNPEDHitC && (
              <img
                src={NPED_CAT_C}
                alt="hotlistHit"
                className="h-20 object-contain rounded-md"
              />
            )}
          </div>
          <div className="flex flex-col lg:flex-row items-center gap-3">
            <img
              src={sighting?.overviewUrl}
              alt="overview patch"
              className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
            />
            <aside className="w-full lg:w-80  bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
              <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
                Vehicle Info
              </h3>
              <dl className="mt-3  gap-x-4 gap-y-2 text-sm">
                <div>
                  <dt className="text-gray-300">VRM</dt>
                  <dd className="font-medium text-2xl break-all">
                    {sighting?.vrm ?? "-"}
                  </dd>
                </div>
                <div>
                  <dt className="text-gray-300">Motion</dt>
                  <dd className="font-medium text-2xl">
                    {sighting?.motion ?? "-"}
                  </dd>
                </div>
                <div>
                  <dt className="text-gray-300">Seen Count</dt>
                  <dd className="font-medium text-2xl">
                    {sighting?.seenCount ?? "-"}
                  </dd>
                </div>

                <div>
                  <dt className="text-gray-300">Make</dt>
                  <dd className="font-medium text-2xl">
                    {sighting?.make ?? "-"}
                  </dd>
                </div>
                <div>
                  <dt className="text-gray-300">Model</dt>
                  <dd className="font-medium text-2xl">
                    {sighting?.model ?? "-"}
                  </dd>
                </div>
                <div className="sm:col-span-2">
                  <dt className="text-gray-300">Colour</dt>
                  <dd className="font-medium text-2xl">
                    {sighting?.color ?? "-"}
                  </dd>
                </div>
                <div>
                  <dt className="text-gray-300">Time</dt>
                  <dd className="font-medium text-xl">
                    {sighting?.timeStamp ?? "-"}
                  </dd>
                </div>
              </dl>
            </aside>
          </div>

          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center hidden md:flex">
            {onDelete ? (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
                onClick={handleClose}
              >
                <FontAwesomeIcon icon={faX} />
                Close
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
                onClick={handleAcknowledgeButton}
              >
                <FontAwesomeIcon icon={faCheck} />
                Accept
              </button>
            )}
            {onDelete ? (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
                onClick={handleDeleteClick}
              >
                <FontAwesomeIcon icon={faTrash} />
                Delete
              </button>
            ) : (
              <button
                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
                onClick={handleClose}
              >
                <FontAwesomeIcon icon={faX} />
                Deny
              </button>
            )}
          </div>
        </div>
      </ModalComponent>
      <Toaster />
    </>
  );
};

export default SightingModal;