import { useAlertHitContext } from "../../context/AlertHitContext";
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
import type { CameraBlackBoardOptions } from "../../types/types";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import AlertItem from "./AlertItem";

const HistoryList = () => {
  const { state, dispatch, isLoading, error } = useAlertHitContext();
  const { mutation } = useCameraBlackboard();

  const handleClearListClick = (listName: CameraBlackBoardOptions) => {
    dispatch({ type: "DELETE", payload: [] });
    mutation.mutate({
      operation: "DELETE",
      path: listName.path,
    });
  };

  return (
    <Card className="h-100 p-4 col-span-3">
      <CardHeader title="Alert History" />
      <button
        className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition md:w-[10%] mb-2"
        onClick={() => handleClearListClick({ path: "alertHistory" })}
      >
        Clear List
      </button>
      {isLoading && <p className="px-2">Loading...</p>}
      {error && <p className="text-red-500 px-2">Error: {error.message}</p>}
      <div className="flex flex-col gap-1 px-2">
        {state?.alertList?.length > 0 ? (
          <div className="mt-3 grid grid-cols-1 gap-3">
            {state?.alertList?.map((alertItem) => (
              <AlertItem item={alertItem} key={alertItem.vrm} />
            ))}
          </div>
        ) : (
          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
              No Alert Results
            </div>
            <p className="max-w-md text-slate-300">
              Alerts will appear here in real-time once there are <span className="text-emerald-400">Hotlist</span> or{" "}
              <span className="text-amber-600">NPED</span> hits. Use{" "}
              <span className="text-emerald-400">Start Session</span> to begin capturing results, or add a{" "}
              <span className="text-emerald-400">Sighting</span> from the sighting list.
            </p>
          </div>
        )}
      </div>
    </Card>
  );
};

export default HistoryList;