/** FigRecipe Editor — Bootstrap with Workspace Shell.
 *
 * Uses scitex-ui's React Workspace shell for the universal frame:
 * AI Chat (left) | File Tree (middle) | App Content (right) | Terminal (bottom)
 *
 * In embedded mode (?mode=embedded), skips the shell and mounts React directly.
 */

import React, { useMemo } from "react";
import ReactDOM from "react-dom/client";

// scitex-ui React workspace shell
import { Workspace } from "@scitex/ui/src/scitex_ui/static/scitex_ui/react/shell/workspace";
import { LocalTerminalBackend } from "@scitex/ui/src/scitex_ui/static/scitex_ui/react/shell/terminal/backends/LocalTerminalBackend";
import type {
  FileTreeBackend,
  FileNode,
} from "@scitex/ui/src/scitex_ui/static/scitex_ui/react/shell/workspace/types";

// Chat backend
import { DjangoChatBackend } from "./backends/DjangoChatBackend";

// React app content
import { InnerEditor } from "./InnerEditor";
import { api } from "./api/client";
import { useEditorStore } from "./store/useEditorStore";

// Styles
import "./styles/app-variables.css";
import "./styles/layout.css";
import "./styles/context-menu.css";
import "./styles/canvas.css";
import "./styles/panels.css";
import "./styles/gallery.css";
import "./styles/export-dialog.css";
import "./styles/feedback.css";

// scitex-ui CSS — single bundle import (shell + app + utils)
// @ts-ignore
import "@scitex/ui/src/scitex_ui/static/scitex_ui/css/all.css";

// Element inspector — debug overlay (Alt+I to toggle)
// @ts-ignore
import "@scitex/ui/src/scitex_ui/static/scitex_ui/ts/utils/element-inspector";

// Context-aware zoom — app-specific panes only (shell panes auto-registered by Workspace)
import { bootstrapContextZoom } from "@scitex/ui/src/scitex_ui/static/scitex_ui/ts/utils/context-zoom";

const root = document.getElementById("root")!;
const params = new URLSearchParams(window.location.search);
const embedded = params.get("mode") === "embedded";

/** File tree backend — returns ALL files (general directory tree) */
class GeneralFileTreeBackend implements FileTreeBackend {
  async fetchTree(): Promise<FileNode[]> {
    const data = await api.get<{ tree: FileNode[] }>("api/tree");
    return data.tree || [];
  }
}

function FigrecipeApp() {
  const { switchFile } = useEditorStore();

  // Terminal backend — connects to pty server on port+1
  const terminalBackend = useMemo(() => {
    const port = parseInt(window.location.port || "5050", 10);
    return new LocalTerminalBackend(`ws://127.0.0.1:${port + 1}/`);
  }, []);

  // Chat backend — connects to Django SSE endpoint
  const chatBackend = useMemo(() => new DjangoChatBackend(), []);

  // File tree backend — general directory listing
  const fileTreeBackend = useMemo(() => new GeneralFileTreeBackend(), []);

  return (
    <Workspace
      appName="figrecipe"
      accentColor="#a07ae0"
      terminalBackend={terminalBackend}
      chatBackend={chatBackend}
      fileTreeBackend={fileTreeBackend}
      getFileUrl={(path, raw) =>
        `api/file-content/${encodeURIComponent(path)}${raw ? "?raw=true" : ""}`
      }
      highlightExtensions={[".yaml", ".yml"]}
      onImageCapture={(dataUrl, _mime) => {
        console.log("[FigRecipe] Image captured, size:", dataUrl.length);
        useEditorStore.getState().showToast?.("Image captured");
      }}
      onVoiceTranscript={(text) => {
        console.log("[FigRecipe] Voice transcript:", text);
        useEditorStore.getState().showToast?.(`Voice: ${text}`);
      }}
      onFileSelect={(node) => {
        if (node.path.endsWith(".yaml") || node.path.endsWith(".yml")) {
          switchFile(node.path);
        }
      }}
      onFileDoubleClick={(node) => {
        if (
          node.type === "file" &&
          (node.path.endsWith(".yaml") || node.path.endsWith(".yml"))
        ) {
          switchFile(node.path);
        }
      }}
      onFileDrop={async (path) => {
        if (path.endsWith(".csv") || path.endsWith(".tsv")) {
          try {
            const resp = await api.post<{ success: boolean }>(
              "datatable/import",
              { path, format: path.endsWith(".tsv") ? "tsv" : "csv" },
            );
            if (resp.success) {
              useEditorStore.getState().loadDatatable();
            }
          } catch (e) {
            console.warn("Drop import failed:", e);
          }
        }
      }}
      onFileContextAction={async (action, node) => {
        const { loadFiles, showToast } = useEditorStore.getState();
        try {
          if (action === "copy-path") {
            await navigator.clipboard.writeText(node.path);
            showToast?.("Path copied");
            return;
          }
          if (action === "delete") {
            await api.post("api/delete", { path: node.path });
            loadFiles();
          } else if (action === "duplicate") {
            await api.post("api/duplicate", { path: node.path });
            loadFiles();
          } else if (action === "rename") {
            const newName = prompt("New name:", node.name);
            if (newName && newName !== node.name) {
              await api.post("api/rename", {
                path: node.path,
                new_name: newName,
              });
              loadFiles();
            }
          } else if (action === "new") {
            await api.post("api/new", {});
            loadFiles();
          }
        } catch (e) {
          console.warn("Context action failed:", e);
        }
      }}
    >
      <InnerEditor />
    </Workspace>
  );
}

if (embedded) {
  ReactDOM.createRoot(root).render(
    <React.StrictMode>
      <InnerEditor embedded />
    </React.StrictMode>,
  );
} else {
  // Apply dark theme by default
  document.documentElement.setAttribute("data-theme", "dark");

  ReactDOM.createRoot(root).render(
    <React.StrictMode>
      <FigrecipeApp />
    </React.StrictMode>,
  );
}

// Register zoom on app-specific panes (shell panes handled by Workspace automatically)
// bootstrapContextZoom uses MutationObserver internally for lazy React renders
bootstrapContextZoom(
  [
    {
      selector: ".split-pane-left",
      storageKey: "figrecipe-table-zoom",
      min: 0.7,
      max: 1.6,
    },
    {
      selector: ".split-pane-center",
      storageKey: "figrecipe-center-zoom",
      min: 0.7,
      max: 1.6,
    },
    {
      selector: ".split-pane-right",
      storageKey: "figrecipe-props-zoom",
      min: 0.7,
      max: 1.6,
    },
  ],
  [],
);
