import { useCallback, useEffect } from 'react';
import { useState } from 'react';
import { useAtelierRefresh } from 'officerdev';
import { useAtelierClient } from '../lib/api';
import type { GenerationRow } from '../lib/api';

export const useGalleryManager = () => {
  const client = useAtelierClient();
  const [rows, setRows] = useState<GenerationRow[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [refreshSignal] = useAtelierRefresh();

  const refresh = useCallback(async () => {
    try {
      setRows(await client.listGenerations());
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
    } finally {
      setLoading(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    void refresh();
  }, [refresh]);

  // A finished generation elsewhere on the dashboard (the Generate panel) bumps this — re-read.
  useEffect(() => {
    if (refreshSignal > 0) void refresh();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [refreshSignal]);

  const succeeded = rows.filter((row) => row.status === 'succeeded' && row.image_path);
  const totalCost = rows.reduce((sum, row) => sum + Number(row.cost_usd ?? 0), 0);

  return { rows, succeeded, totalCost, loading, error, refresh };
};

export type GalleryManager = ReturnType<typeof useGalleryManager>;