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

const SightingEntryTable = () => {
  const { state } = useCameraFeedContext();
  const cameraFeedID = state.cameraFeedID;
  const { entryQuery } = useSightingEntryAndExit(cameraFeedID);

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

  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" key={reading?.id}>
                <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 Cards */}
      <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"
          >
            <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>
  );
};

export default SightingEntryTable;