"use client";

import { useEffect, useState } from "react";
import { EmptyState, Panel } from "@/components/shared/panel";
import type { NozzleStatusSummary } from "@/features/chargepoints/types";
import { Chart } from "./chart";
import type { SummaryLoadState } from "./types";

const REFRESH_INTERVAL_MS = 30_000;

export function ConnectorStatusChart({
  summary: initialSummary,
}: {
  summary: SummaryLoadState<NozzleStatusSummary>;
}) {
  const [summary, setSummary] = useState(initialSummary);

  useEffect(() => {
    let active = true;

    async function refreshStatus() {
      try {
        const response = await fetch("/api/dashboard/connector-status", {
          cache: "no-store",
          credentials: "same-origin",
        });
        if (!response.ok) return;

        const nextSummary =
          (await response.json()) as SummaryLoadState<NozzleStatusSummary>;
        if (active) setSummary(nextSummary);
      } catch {
        // Keep the last successful snapshot if a periodic refresh fails.
      }
    }

    const intervalId = window.setInterval(refreshStatus, REFRESH_INTERVAL_MS);

    return () => {
      active = false;
      window.clearInterval(intervalId);
    };
  }, []);

  const labels = ["Charging", "Available", "Faulted"];
  const values = [
    summary.data?.Charging ?? 0,
    summary.data?.Available ?? 0,
    summary.data?.Faulted ?? 0,
  ];

  return (
    <Panel
      title="Latest Connector Status"
      description="Current connector status across your locations"
    >
      {summary.error ? (
        <EmptyState
          title="Connector status unavailable"
          description={summary.error}
        />
      ) : values.every((count) => count === 0) ? (
        <EmptyState
          title="No connector status data"
          description="There are no connector statuses to display."
        />
      ) : (
        <Chart
          type="donut"
          series={values}
          labels={labels}
          height={290}
          showDonutTotal
        />
      )}
    </Panel>
  );
}