viewer/src/hooks/useCreateAnimation.ts

import { useState } from "react";
import { supabase } from "@/lib/supabase";
import { AnimationRequest, RobotAnimationConfig } from "@/lib/types";
import { toast } from "sonner";

export const useCreateAnimation = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [animation, setAnimation] = useState<RobotAnimationConfig | null>(null);

  const createAnimation = async (
    request: AnimationRequest
  ): Promise<RobotAnimationConfig | null> => {
    const requestId = `anim-${Date.now()}`; // Generate unique ID for tracking
    console.log(`[${requestId}] 🚀 Animation Generator: Starting request`);
    console.log(`[${requestId}] 🔍 Description: "${request.description}"`);

    setIsLoading(true);
    setError(null);

    const startTime = performance.now();

    try {
      console.log(
        `[${requestId}] 📡 Calling Supabase edge function "create-animation"...`
      );

      const { data, error } = await supabase.functions.invoke(
        "create-animation",
        {
          body: {
            robotName: request.robotName,
            urdfContent: request.urdfContent,
            description: request.description,
          },
        }
      );

      if (error) {
        console.error(`[${requestId}] ❌ Supabase function error:`, error);

        // Format the error message for display
        const errorMessage = error.message || "Unknown error occurred";
        setError(errorMessage);

        toast.error("Animation Generation Failed", {
          description: errorMessage.includes("non-2xx status code")
            ? "The animation generator encountered a server error."
            : errorMessage,
          duration: 5000,
        });

        throw new Error(errorMessage);
      }

      const endTime = performance.now();
      console.log(
        `[${requestId}] ✅ Edge function responded in ${(
          endTime - startTime
        ).toFixed(2)}ms`
      );

      if (!data) {
        throw new Error("No data returned from edge function");
      }

      // Quick validation of minimum required structure
      if (
        !data.joints ||
        !Array.isArray(data.joints) ||
        data.joints.length === 0
      ) {
        console.error(`[${requestId}] ⚠️ Invalid animation data:`, data);
        throw new Error(
          "Invalid animation configuration: Missing joint animations"
        );
      }

      console.log(
        `[${requestId}] 🤖 Animation generated with ${data.joints.length} joint(s)`
      );

      // Store the animation data
      setAnimation(data);
      return data;
    } catch (err) {
      const errorMessage =
        err instanceof Error ? err.message : "Unknown error occurred";
      const endTime = performance.now();

      console.error(
        `[${requestId}] ❌ Error generating animation after ${(
          endTime - startTime
        ).toFixed(2)}ms:`,
        err
      );

      setError(errorMessage);
      return null;
    } finally {
      setIsLoading(false);
      console.log(`[${requestId}] 🏁 Animation request completed`);
    }
  };

  return {
    createAnimation,
    animation,
    isLoading,
    error,
    clearAnimation: () => setAnimation(null),
    clearError: () => setError(null),
  };
};