import { useState } from "react";
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
import type { DecodeReading } from "../../../../types/types";
import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";

import PlatePatchModal from "./platePatchModal/PlatePatchModal";

const SightingEntryTable = () => {
  const { state } = useCameraFeedContext();
  const [isPlatePatchModalOpen, setIsPlatePatchModalOpen] = useState(false);
  const [currentPatch, setCurrentPatch] = useState<DecodeReading | null>(null);
  const cameraFeedID = state.cameraFeedID;
  const { entryQuery } = useSightingEntryAndExit(cameraFeedID);

  const isLoading = entryQuery?.isFetching;
  const readings = entryQuery?.data?.decodes;

  const handleRowClick = (reading: DecodeReading) => {
    setCurrentPatch(reading);
    setIsPlatePatchModalOpen(true);
  };

  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
    <>
      <div className="border border-gray-600 rounded-lg m-2">
        {/* Desktop Table */}
        <div className="hidden md:block overflow-y-auto">
          <table className="w-full text-left text-sm">
            <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
              <tr>
                <th className="px-4 py-3 font-semibold">VRM</th>
                <th className="px-4 py-3 font-semibold">Bay ID</th>
                <th className="px-4 py-3 font-semibold text-center">Seen Count</th>
                <th className="px-4 py-3 font-semibold">First Seen</th>
                <th className="px-4 py-3 font-semibold">Last Seen</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-700">
              {readings?.map((reading: DecodeReading) => (
                <tr
                  className="hover:bg-gray-800/30 transition-colors hover:cursor-pointer"
                  key={reading?.id}
                  onClick={() => handleRowClick(reading)}
                >
                  <td className="px-4 py-3 font-mono font-semibold text-blue-400 text-lg">{reading?.vrm}</td>
                  <td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
                  <td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
                  <td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Mobile */}
        <div className="md:hidden overflow-y-auto space-y-3 p-3">
          {readings?.map((reading: DecodeReading) => (
            <div
              key={reading?.id}
              className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
              onClick={() => handleRowClick(reading)}
            >
              <div className="flex justify-between items-start">
                <span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
                <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-400">Seen Count:</span>
                <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
              </div>
              <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
                <div className="flex justify-between">
                  <span className="text-gray-500">First Seen:</span>
                  <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-500">Last Seen:</span>
                  <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <PlatePatchModal
        isPlatePatchModalOpen={isPlatePatchModalOpen}
        handleClose={() => setIsPlatePatchModalOpen(false)}
        currentPatch={currentPatch}
        direction={"entry"}
      />
    </>
  );
};

export default SightingEntryTable;