"use client";

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

const REFRESH_INTERVAL_MS = 30_000;

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

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

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

        const nextSummary =
          (await response.json()) as SummaryLoadState<ChargeStatusDistribution>;
        if (active && !nextSummary.error) 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 distribution = summary.data;
  const items = distribution?.items ?? [];
  const hasStatusData = (distribution?.totalConnectors ?? 0) > 0;

  return (
    <Panel
      title="Charge Status Distribution"
      description={
        distribution
          ? `Connectors are considered offline after ${distribution.offlineThresholdMinutes} minutes without a status update.`
          : "Current connector status across your locations."
      }
    >
      {summary.error ? (
        <EmptyState
          title="Charge status unavailable"
          description={summary.error}
        />
      ) : !hasStatusData ? (
        <EmptyState
          title="No charge status data"
          description="There are no connector statuses to display."
        />
      ) : (
        <Chart
          type="donut"
          series={items.map((item) => item.total)}
          labels={items.map((item) => item.status)}
          height={290}
          showLegend
          showDonutTotal
        />
      )}
    </Panel>
  );
}