"use client";

import { useCallback, useRef, useState } from "react";
import { useMountSubscription } from "@/hooks/use-mount-subscription";
import api from "@/lib/api/client";
import { readPageCache, writePageCache } from "@/lib/page-data-cache";
import type { UsageStats } from "@/lib/types";
import { normalizeUsageStats } from "@/features/usage/normalize-usage-stats";

export function useUsage() {
  const [stats, setStats] = useState<UsageStats | null>(() =>
    readPageCache<UsageStats>("usage:stats:provider"),
  );
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const requestSequence = useRef(0);

  const loadStats = useCallback(async () => {
    const requestId = ++requestSequence.current;
    try {
      setLoading(true);
      setError(null);
      const normalized = normalizeUsageStats(await api.getUsageStats());
      if (requestId !== requestSequence.current) return;
      writePageCache("usage:stats:provider", normalized);
      setStats(normalized);
    } catch (cause) {
      if (requestId === requestSequence.current) setError((cause as Error).message);
    } finally {
      if (requestId === requestSequence.current) setLoading(false);
    }
  }, []);

  useMountSubscription(() => {
    setStats(readPageCache<UsageStats>("usage:stats:provider"));
    void loadStats();
  }, [loadStats]);

  return { stats, loading, error, loadStats };
}