import { useState, useCallback, useEffect } from "react";
import {
  getDirective,
  getDirectiveGraph,
  startDirective,
  pauseDirective,
  resumeDirective,
  stopDirective,
  type DirectiveWithProgress,
  type DirectiveGraphResponse,
  type StartDirectiveResponse,
} from "../lib/api";

interface UseDirectiveDetailResult {
  directive: DirectiveWithProgress | null;
  graph: DirectiveGraphResponse | null;
  loading: boolean;
  error: string | null;
  refresh: () => Promise<void>;
  start: () => Promise<StartDirectiveResponse | null>;
  pause: () => Promise<boolean>;
  resume: () => Promise<boolean>;
  stop: () => Promise<boolean>;
}

export function useDirectiveDetail(directiveId: string | undefined): UseDirectiveDetailResult {
  const [directive, setDirective] = useState<DirectiveWithProgress | null>(null);
  const [graph, setGraph] = useState<DirectiveGraphResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchDetail = useCallback(async () => {
    if (!directiveId) {
      setDirective(null);
      setGraph(null);
      return;
    }

    setLoading(true);
    setError(null);
    try {
      const [d, g] = await Promise.all([
        getDirective(directiveId),
        getDirectiveGraph(directiveId).catch(() => null),
      ]);
      setDirective(d);
      setGraph(g);
    } catch (err) {
      console.error("Failed to fetch directive detail:", err);
      setError(err instanceof Error ? err.message : "Failed to fetch directive");
      setDirective(null);
      setGraph(null);
    } finally {
      setLoading(false);
    }
  }, [directiveId]);

  useEffect(() => {
    fetchDetail();
  }, [fetchDetail]);

  const start = useCallback(async (): Promise<StartDirectiveResponse | null> => {
    if (!directiveId) return null;
    try {
      const response = await startDirective(directiveId);
      await fetchDetail();
      return response;
    } catch (err) {
      console.error("Failed to start directive:", err);
      setError(err instanceof Error ? err.message : "Failed to start directive");
      return null;
    }
  }, [directiveId, fetchDetail]);

  const pause = useCallback(async (): Promise<boolean> => {
    if (!directiveId) return false;
    try {
      await pauseDirective(directiveId);
      await fetchDetail();
      return true;
    } catch (err) {
      console.error("Failed to pause directive:", err);
      setError(err instanceof Error ? err.message : "Failed to pause directive");
      return false;
    }
  }, [directiveId, fetchDetail]);

  const resume = useCallback(async (): Promise<boolean> => {
    if (!directiveId) return false;
    try {
      await resumeDirective(directiveId);
      await fetchDetail();
      return true;
    } catch (err) {
      console.error("Failed to resume directive:", err);
      setError(err instanceof Error ? err.message : "Failed to resume directive");
      return false;
    }
  }, [directiveId, fetchDetail]);

  const stop = useCallback(async (): Promise<boolean> => {
    if (!directiveId) return false;
    try {
      await stopDirective(directiveId);
      await fetchDetail();
      return true;
    } catch (err) {
      console.error("Failed to stop directive:", err);
      setError(err instanceof Error ? err.message : "Failed to stop directive");
      return false;
    }
  }, [directiveId, fetchDetail]);

  return {
    directive,
    graph,
    loading,
    error,
    refresh: fetchDetail,
    start,
    pause,
    resume,
    stop,
  };
}