"use client";

import { useState, useCallback, useRef } from "react";
import { ToolExportPanel } from "@/components/tool-export-panel";
import { ToolSwitcher } from "./components/tool-switcher";
import { useKeyboardShortcuts } from "./hooks/use-keyboard-shortcuts";
import { setUrlSettingsOverride } from "./hooks/use-settings";
import { ArtStudioProvider } from "./lib/art-studio-context";
import { tools } from "./tools/registry";
import { useToolUrlState } from "@/hooks/use-tool-url-state";

interface UrlState {
  toolId: string;
  settings: Record<string, unknown>;
}

function decodeUrlState(): UrlState | null {
  if (typeof window === "undefined") return null;
  const param = new URLSearchParams(window.location.search).get("a");
  if (!param) return null;
  try {
    return JSON.parse(atob(param)) as UrlState;
  } catch {
    return null;
  }
}

export function ArtStudio() {
  const [activeToolId, setActiveToolId] = useState(() => {
    const urlState = decodeUrlState();
    if (urlState?.settings) {
      setUrlSettingsOverride(urlState.toolId, urlState.settings);
    }
    const fromUrl = urlState?.toolId;
    if (typeof window !== "undefined") {
      return fromUrl || localStorage.getItem("studio:last-tool") || "topo";
    }
    return fromUrl || "topo";
  });

  const [exportOpen, setExportOpen] = useState(false);
  const [exportInfo, setExportInfo] = useState({
    registryName: "topo",
    code: "",
  });
  const [currentSettings, setCurrentSettings] = useState<Record<string, unknown>>({});

  // Use ref to avoid stale closures in context
  const exportInfoRef = useRef(exportInfo);

  useKeyboardShortcuts(setActiveToolId);
  const toggleExport = useCallback(() => setExportOpen((v) => !v), []);

  const handleExportInfoChange = useCallback(
    (info: { registryName: string; code: string }) => {
      const prev = exportInfoRef.current;
      if (prev.registryName !== info.registryName || prev.code !== info.code) {
        exportInfoRef.current = info;
        setExportInfo(info);
      }
    },
    [],
  );

  const handleCurrentSettingsChange = useCallback(
    (settings: Record<string, unknown>) => {
      setCurrentSettings(settings);
    },
    [],
  );

  // URL state for share URL
  const urlState: UrlState = { toolId: activeToolId, settings: currentSettings };
  const { generateShareableUrl } = useToolUrlState("a", urlState as unknown as Record<string, unknown>);

  const activeTool = tools.find((t) => t.id === activeToolId) ?? tools[0];
  const ActiveComponent = activeTool.component;

  return (
    <div className="relative flex h-full flex-col overflow-hidden rounded-lg bg-background text-foreground antialiased">
      <ArtStudioProvider
        onExportToggle={toggleExport}
        exportInfo={exportInfo}
        onExportInfoChange={handleExportInfoChange}
        getShareableUrl={generateShareableUrl}
        onCurrentSettingsChange={handleCurrentSettingsChange}
      >
        <div className="relative flex flex-1 min-h-0">
          <ToolSwitcher
            activeToolId={activeToolId}
            onSelectTool={setActiveToolId}
          />
          <ActiveComponent />
        </div>
      </ArtStudioProvider>
      {/* Export panel overlays the bottom instead of squeezing the canvas */}
      {exportOpen && (
        <div className="absolute inset-x-0 bottom-0 z-30 max-h-[60%] overflow-y-auto border-t border-border bg-background shadow-[0_-4px_20px_rgba(0,0,0,0.1)]">
          <ToolExportPanel
            registryName={exportInfo.registryName}
            code={exportInfo.code}
            open={exportOpen}
            onToggle={toggleExport}
          />
        </div>
      )}
    </div>
  );
}
Art Studio

Installation

Dependencies
