import Card from "../../../components/ui/Card";
import { useGetStore } from "../hooks/useGetStore";

import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
import PlatesProcessed from "./PlatesProcessed";
import SystemStatusContent from "./SystemStatusContent";

const SystemOverview = () => {
  const { systemHealthQuery } = useGetSystemHealth();
  const { storeQuery } = useGetStore();

  const platesProcessed = storeQuery?.data || {};
  const upTime = systemHealthQuery?.data?.UptimeHumane || 0;
  const startTime = systemHealthQuery?.data?.StartTimeHumane || "";
  const cameraStatus = systemHealthQuery?.data?.Status || [];
  const isError = systemHealthQuery?.isError || false;

  if (systemHealthQuery.isLoading) {
    return <div>Loading system overview...</div>;
  }
  return (
    <div>
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
          <SystemStatusContent status={cameraStatus} isError={isError} />
        </Card>
        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
          <h3 className="text-lg">Active Sightings</h3>
        </Card>
        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
          <h3 className="text-lg">Reads</h3>
          <PlatesProcessed platesProcessed={platesProcessed} />
        </Card>
        <Card className="p-4 hover:bg-[#233241] cursor-pointer">
          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{upTime}</span>
          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
        </Card>
      </div>
    </div>
  );
};

export default SystemOverview;