import { useEffect } from "react";

import { getCanvasThread } from "../../api/threads";
import { useCanvasGraphContext } from "../../contexts/CanvasGraphContext";
import { useCanvasThreadContext } from "../../contexts/CanvasThreadContext";
import { TooltipProvider } from "@/components/ui/tooltip";
import { CanvasHeader } from "./CanvasHeader";
import { CanvasResizableLayout } from "./CanvasResizableLayout";

export function CanvasShell() {
  const { threadId, setThreadId } = useCanvasThreadContext();
  const { setMessages, setArtifact } = useCanvasGraphContext();

  // Load existing thread state when navigating to a saved thread.
  // If the thread doesn't exist in the backend (e.g. pre-generated UUID from
  // CanvasHomePage or stale URL after a DB reset), clear threadId so that
  // the next sendMessage call creates a fresh thread instead of hitting 404.
  useEffect(() => {
    if (!threadId) return;
    let cancelled = false;

    getCanvasThread(threadId)
      .then((values) => {
        if (cancelled) return;
        if (!values) {
          setThreadId(null);
          return;
        }
        if (values.messages?.length) {
          setMessages(values.messages);
        }
        if (values.artifact) {
          setArtifact(values.artifact);
        }
      })
      .catch((err) => {
        console.error("[canvas] failed to load thread state:", err);
      });

    return () => {
      cancelled = true;
    };
  }, [threadId, setMessages, setArtifact, setThreadId]);

  return (
    <TooltipProvider delayDuration={300}>
      <div className="h-full flex flex-col overflow-hidden bg-background">
        <CanvasHeader />
        <CanvasResizableLayout />
      </div>
    </TooltipProvider>
  );
}