import { useCallback, useEffect, useState } from "react";
import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
import { Icon } from "../components/icon";
import { useMobileViewport } from "../hooks/use-mobile-viewport";
import { extractErrorMessage } from "../utils/errors";
import { MobileListView } from "../components/mobile-list-view";
import { MobileDetailView } from "../components/mobile-detail-view";
import { MobileEditView } from "../components/mobile-edit-view";
import { MobileFAB } from "../components/mobile-fab";
import {
  createToolType,
  deleteToolType,
  listToolTypes,
  updateToolType,
  type CreateToolTypeRequest,
  type ReadinessProbe,
  type ToolType,
  type UpdateToolTypeRequest,
} from "../api/tool_types";
import {
  createToolConfig,
  deleteToolConfig,
  listToolConfigs,
  updateToolConfig,
  type CreateToolConfigRequest,
  type ToolConfig,
} from "../api/tool_configs";
import {
  createConfigFolder,
  deleteConfigFolder,
  listConfigFolders,
  updateConfigFolder,
  type ConfigFolder,
  type CreateConfigFolderRequest,
  type UpdateConfigFolderRequest,
} from "../api/config_folders";

type RightPanelTab = "details" | "configs" | "folders";
type Status = "loading" | "ready" | "error";

type MobileView = "list" | "detail" | "edit";

export const ToolWorkshopPage = () => {
  const isMobile = useMobileViewport();
  const [mobileView, setMobileView] = useState<MobileView>("list");
  const [status, setStatus] = useState<Status>("loading");
  const [toolTypes, setToolTypes] = useState<ToolType[]>([]);
  const [configs, setConfigs] = useState<ToolConfig[]>([]);
  const [folders, setFolders] = useState<ConfigFolder[]>([]);

  // Selection state
  const [selectedToolTypeId, setSelectedToolTypeId] = useState<string | null>(null);
  const [isCreating, setIsCreating] = useState(false);
  const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>("details");

  // Tool Type form state
  const [toolTypeForm, setToolTypeForm] = useState({
    name: "",
    display_name: "",
    description: "",
    category: "",
    interface_type: "web" as "web" | "terminal",
    requires_port: true,
    default_port: "",
    definition_type: "compose" as "compose" | "dockerfile",
    compose_template: "",
    dockerfile_template: "",
    readiness_command: "",
    readiness_timeout: "30",
    readiness_interval: "2",
    required_variables: "",
    startup_command: "",
  });
  const [toolTypeError, setToolTypeError] = useState<string | null>(null);
  const [toolTypeDirty, setToolTypeDirty] = useState(false);

  // Config form state
  const [configForm, setConfigForm] = useState({
    key: "",
    value: "",
    config_type: "env",
    file_path: "",
    port_override: "",
    start_command: "",
    working_directory: "",
    env_vars_json: "{}",
    volumes_json: "[]",
  });
  const [configError, setConfigError] = useState<string | null>(null);
  const [showConfigForm, setShowConfigForm] = useState(false);
  const [selectedConfig, setSelectedConfig] = useState<ToolConfig | null>(null);

  // Folder form state
  const [folderForm, setFolderForm] = useState({
    name: "",
    description: "",
    mount_path: "/home/user",
    files_json: "{}",
    is_active: true,
  });
  const [folderError, setFolderError] = useState<string | null>(null);
  const [showFolderForm, setShowFolderForm] = useState(false);
  const [selectedFolder, setSelectedFolder] = useState<ConfigFolder | null>(null);

  const selectedToolType = (toolTypes || []).find((t) => t.id === selectedToolTypeId) || null;
  const toolConfigs = (configs || []).filter((c) => c.tool_type_id === selectedToolTypeId);
  const toolFolders = folders || []; // Config folders are global, not per-tool-type in current API

  const loadData = useCallback(async () => {
    setStatus("loading");
    try {
      const [types, cfgs, fldrs] = await Promise.all([
        listToolTypes(),
        listToolConfigs(),
        listConfigFolders(),
      ]);
      setToolTypes(types || []);
      setConfigs(cfgs || []);
      setFolders(fldrs || []);
      setStatus("ready");
    } catch {
      setStatus("error");
    }
  }, []);

  useEffect(() => {
    void loadData();
  }, [loadData]);

  const resetToolTypeForm = () => {
    setToolTypeForm({
      name: "",
      display_name: "",
      description: "",
      category: "",
      interface_type: "web",
      requires_port: true,
      default_port: "",
      definition_type: "compose",
      compose_template: "",
      dockerfile_template: "",
      readiness_command: "",
      readiness_timeout: "30",
      readiness_interval: "2",
      required_variables: "",
      startup_command: "",
    });
    setToolTypeError(null);
    setToolTypeDirty(false);
  };

  const populateToolTypeForm = (toolType: ToolType) => {
    setToolTypeForm({
      name: toolType.name,
      display_name: toolType.display_name,
      description: toolType.description || "",
      category: toolType.category || "",
      interface_type: (toolType.interface_type as "web" | "terminal") || "web",
      requires_port: toolType.requires_port ?? true,
      default_port: toolType.default_port?.toString() || "",
      definition_type: toolType.definition_type || "compose",
      compose_template: toolType.compose_template || "",
      dockerfile_template: toolType.dockerfile_template || "",
      readiness_command: toolType.readiness_probe?.command || "",
      readiness_timeout: toolType.readiness_probe?.timeout?.toString() || "30",
      readiness_interval: toolType.readiness_probe?.interval?.toString() || "2",
      required_variables: toolType.required_variables?.join(", ") || "",
      startup_command: toolType.startup_command || "",
    });
    setToolTypeError(null);
    setToolTypeDirty(false);
  };

  const handleSelectToolType = (toolType: ToolType | null) => {
    if (toolTypeDirty) {
      if (!window.confirm("You have unsaved changes. Discard them?")) {
        return;
      }
    }
    if (toolType) {
      setSelectedToolTypeId(toolType.id);
      setIsCreating(false);
      populateToolTypeForm(toolType);
    } else {
      setSelectedToolTypeId(null);
    }
    setRightPanelTab("details");
    setShowConfigForm(false);
    setShowFolderForm(false);
  };

  const handleCreateNew = () => {
    if (toolTypeDirty) {
      if (!window.confirm("You have unsaved changes. Discard them?")) {
        return;
      }
    }
    setSelectedToolTypeId(null);
    setIsCreating(true);
    resetToolTypeForm();
    setRightPanelTab("details");
    setShowConfigForm(false);
    setShowFolderForm(false);
  };

  const handleToolTypeSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setToolTypeError(null);

    if (!toolTypeForm.name.trim() || !toolTypeForm.display_name.trim()) {
      setToolTypeError("Name and display name are required");
      return;
    }

    if (toolTypeForm.requires_port && (!toolTypeForm.default_port.trim() || isNaN(Number(toolTypeForm.default_port)))) {
      setToolTypeError("Default port is required and must be a number");
      return;
    }

    const template = toolTypeForm.definition_type === "compose"
      ? toolTypeForm.compose_template
      : toolTypeForm.dockerfile_template;

    if (!template.trim()) {
      setToolTypeError(`${toolTypeForm.definition_type === "compose" ? "Compose" : "Dockerfile"} template is required`);
      return;
    }

    const variables = toolTypeForm.required_variables
      .split(",")
      .map((v) => v.trim())
      .filter((v) => v.length > 0);

    const readinessProbe: ReadinessProbe | undefined = toolTypeForm.readiness_command.trim()
      ? {
          command: toolTypeForm.readiness_command.trim(),
          timeout: parseInt(toolTypeForm.readiness_timeout) || 30,
          interval: parseInt(toolTypeForm.readiness_interval) || 2,
        }
      : undefined;

    try {
      if (isCreating) {
        const input: CreateToolTypeRequest = {
          name: toolTypeForm.name.trim(),
          display_name: toolTypeForm.display_name.trim(),
          description: toolTypeForm.description.trim() || undefined,
          category: toolTypeForm.category.trim() || undefined,
          interface_type: toolTypeForm.interface_type,
          requires_port: toolTypeForm.requires_port,
          default_port: toolTypeForm.requires_port ? Number(toolTypeForm.default_port) : 0,
          definition_type: toolTypeForm.definition_type,
          compose_template: toolTypeForm.definition_type === "compose" ? template : undefined,
          dockerfile_template: toolTypeForm.definition_type === "dockerfile" ? template : undefined,
          readiness_probe: readinessProbe,
          required_variables: variables,
          startup_command: toolTypeForm.startup_command.trim() || undefined,
        };
        const newTool = await createToolType(input);
        setIsCreating(false);
        setSelectedToolTypeId(newTool.id);
        setToolTypeDirty(false);
      } else if (selectedToolType) {
        const input: UpdateToolTypeRequest = {
          display_name: toolTypeForm.display_name.trim(),
          description: toolTypeForm.description.trim() || undefined,
          category: toolTypeForm.category.trim() || undefined,
          interface_type: toolTypeForm.interface_type,
          requires_port: toolTypeForm.requires_port,
          default_port: toolTypeForm.requires_port ? Number(toolTypeForm.default_port) : 0,
          definition_type: toolTypeForm.definition_type,
          compose_template: toolTypeForm.definition_type === "compose" ? template : undefined,
          dockerfile_template: toolTypeForm.definition_type === "dockerfile" ? template : undefined,
          readiness_probe: readinessProbe,
          required_variables: variables,
          startup_command: toolTypeForm.startup_command.trim() || undefined,
        };
        await updateToolType(selectedToolType.id, input);
        setToolTypeDirty(false);
      }
      await loadData();
    } catch (err) {
      setToolTypeError(extractErrorMessage(err));
    }
  };

  const handleDeleteToolType = async (id: string) => {
    if (!window.confirm("Delete this tool type? All associated configs will be removed.")) return;
    try {
      await deleteToolType(id);
      if (selectedToolTypeId === id) {
        setSelectedToolTypeId(null);
        setIsCreating(false);
        resetToolTypeForm();
      }
      await loadData();
    } catch {
      alert("Failed to delete tool type");
    }
  };

  // Config handlers
  const resetConfigForm = () => {
    setConfigForm({
      key: "",
      value: "",
      config_type: "env",
      file_path: "",
      port_override: "",
      start_command: "",
      working_directory: "",
      env_vars_json: "{}",
      volumes_json: "[]",
    });
    setConfigError(null);
    setSelectedConfig(null);
  };

  const openCreateConfig = () => {
    resetConfigForm();
    setShowConfigForm(true);
  };

  const openEditConfig = (config: ToolConfig) => {
    setConfigForm({
      key: config.key,
      value: config.value,
      config_type: config.config_type,
      file_path: config.file_path || "",
      port_override: config.port_override?.toString() || "",
      start_command: config.start_command || "",
      working_directory: config.working_directory || "",
      env_vars_json: config.environment_variables ? JSON.stringify(config.environment_variables, null, 2) : "{}",
      volumes_json: config.volumes ? JSON.stringify(config.volumes, null, 2) : "[]",
    });
    setConfigError(null);
    setShowConfigForm(true);
    setSelectedConfig(config);
  };

  const handleConfigSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setConfigError(null);

    if (!selectedToolTypeId || !configForm.key.trim()) {
      setConfigError("Tool type and key are required");
      return;
    }

    let envVars: Record<string, string> | undefined;
    let volumes: Array<{ source: string; target: string; type?: string }> | undefined;

    try {
      if (configForm.env_vars_json.trim() && configForm.env_vars_json.trim() !== "{}") {
        envVars = JSON.parse(configForm.env_vars_json);
      }
    } catch {
      setConfigError("Environment variables must be valid JSON");
      return;
    }

    try {
      if (configForm.volumes_json.trim() && configForm.volumes_json.trim() !== "[]") {
        volumes = JSON.parse(configForm.volumes_json);
      }
    } catch {
      setConfigError("Volumes must be valid JSON array");
      return;
    }

    const data: CreateToolConfigRequest = {
      tool_type_id: selectedToolTypeId,
      key: configForm.key.trim(),
      value: configForm.value,
      config_type: configForm.config_type,
      file_path: configForm.config_type === "file" ? configForm.file_path : undefined,
      port_override: configForm.port_override ? Number(configForm.port_override) : undefined,
      start_command: configForm.start_command.trim() || undefined,
      working_directory: configForm.working_directory.trim() || undefined,
      environment_variables: envVars,
      volumes,
    };

    try {
      if (selectedConfig) {
        await updateToolConfig(selectedConfig.id, data);
      } else {
        await createToolConfig(data);
      }
      setShowConfigForm(false);
      setSelectedConfig(null);
      resetConfigForm();
      await loadData();
    } catch (err) {
      setConfigError(extractErrorMessage(err));
    }
  };

  const handleDeleteConfig = async (id: string) => {
    if (!window.confirm("Delete this config?")) return;
    try {
      await deleteToolConfig(id);
      await loadData();
    } catch {
      alert("Failed to delete config");
    }
  };

  // Folder handlers
  const resetFolderForm = () => {
    setFolderForm({
      name: "",
      description: "",
      mount_path: "/home/user",
      files_json: "{}",
      is_active: true,
    });
    setFolderError(null);
    setSelectedFolder(null);
  };

  const openCreateFolder = () => {
    resetFolderForm();
    setShowFolderForm(true);
  };

  const openEditFolder = (folder: ConfigFolder) => {
    setFolderForm({
      name: folder.name,
      description: folder.description || "",
      mount_path: folder.mount_path,
      files_json: JSON.stringify(folder.files, null, 2),
      is_active: folder.is_active,
    });
    setFolderError(null);
    setShowFolderForm(true);
    setSelectedFolder(folder);
  };

  const handleFolderSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setFolderError(null);

    if (!folderForm.name.trim() || !folderForm.mount_path.trim()) {
      setFolderError("Name and mount path are required");
      return;
    }

    let files: Record<string, string> | undefined;
    try {
      if (folderForm.files_json.trim() && folderForm.files_json.trim() !== "{}") {
        files = JSON.parse(folderForm.files_json);
      }
    } catch {
      setFolderError("Files must be valid JSON object");
      return;
    }

    const data: CreateConfigFolderRequest | UpdateConfigFolderRequest = {
      name: folderForm.name.trim(),
      description: folderForm.description.trim() || undefined,
      mount_path: folderForm.mount_path.trim(),
      files,
      is_active: folderForm.is_active,
    };

    try {
      if (selectedFolder) {
        await updateConfigFolder(selectedFolder.id, data);
      } else {
        await createConfigFolder(data as CreateConfigFolderRequest);
      }
      setShowFolderForm(false);
      setSelectedFolder(null);
      resetFolderForm();
      await loadData();
    } catch (err) {
      setFolderError(extractErrorMessage(err));
    }
  };

  const handleDeleteFolder = async (id: string) => {
    if (!window.confirm("Delete this config folder?")) return;
    try {
      await deleteConfigFolder(id);
      await loadData();
    } catch {
      alert("Failed to delete folder");
    }
  };

  if (status === "loading") {
    return (
      <div className="container">
        <LoadingState message="Loading Tool Workshop..." />
      </div>
    );
  }

  if (status === "error") {
    return (
      <div className="container">
        <ErrorState message="Failed to load Tool Workshop." onRetry={loadData} />
      </div>
    );
  }

  if (isMobile) {
    if (mobileView === "list") {
      return (
        <div className="mobile-page">
          <div className="mobile-page-header">
            <h1>Tool Workshop</h1>
            <span className="muted">{toolTypes.length} tool types</span>
          </div>
          <MobileListView
            items={toolTypes.map((t) => ({
              id: t.id,
              title: t.display_name,
              subtitle: `${t.category || "Uncategorized"} · ${t.interface_type === "web" ? `Port ${t.default_port}` : "Terminal"}`,
            }))}
            onItemClick={(id) => {
              setSelectedToolTypeId(id);
              setIsCreating(false);
              setMobileView("detail");
            }}
            emptyMessage="No tool types yet"
          />
          <MobileFAB onClick={() => {
            setSelectedToolTypeId(null);
            setIsCreating(true);
            resetToolTypeForm();
            setMobileView("edit");
          }} />
        </div>
      );
    }

    if (mobileView === "detail" && selectedToolType) {
      return (
        <MobileDetailView
          title={selectedToolType.display_name}
          subtitle={`${selectedToolType.name} · ${selectedToolType.definition_type} · ${selectedToolType.interface_type === "web" ? `Port ${selectedToolType.default_port}` : "Terminal"}`}
          fields={[
            { label: "Name", value: selectedToolType.name },
            { label: "Display Name", value: selectedToolType.display_name },
            { label: "Description", value: selectedToolType.description },
            { label: "Category", value: selectedToolType.category },
            { label: "Interface Type", value: selectedToolType.interface_type },
            { label: "Requires Port", value: selectedToolType.requires_port, type: "boolean" },
            { label: "Default Port", value: selectedToolType.default_port },
            { label: "Definition Type", value: selectedToolType.definition_type },
            { label: "Startup Command", value: selectedToolType.startup_command },
            { label: "Readiness Command", value: selectedToolType.readiness_probe?.command ?? null },
            { label: "Readiness Timeout", value: selectedToolType.readiness_probe?.timeout ?? null },
            { label: "Readiness Interval", value: selectedToolType.readiness_probe?.interval ?? null },
            { label: "Required Variables", value: selectedToolType.required_variables?.join(", ") ?? null },
            { label: "Compose Template", value: selectedToolType.compose_template, type: "code" },
            { label: "Dockerfile Template", value: selectedToolType.dockerfile_template, type: "code" },
          ]}
          onEdit={() => {
            populateToolTypeForm(selectedToolType);
            setIsCreating(false);
            setMobileView("edit");
          }}
          onDelete={() => {
            handleDeleteToolType(selectedToolType.id);
            setMobileView("list");
          }}
          onBack={() => {
            setSelectedToolTypeId(null);
            setMobileView("list");
          }}
        />
      );
    }

    if (mobileView === "edit") {
      return (
        <MobileEditView
          title={isCreating ? "Create Tool Type" : "Edit Tool Type"}
          onCancel={() => {
            if (toolTypeDirty) {
              if (!window.confirm("You have unsaved changes. Discard them?")) {
                return;
              }
            }
            setMobileView(isCreating ? "list" : "detail");
          }}
          onSave={() => {
            // Create a synthetic form event to call handleToolTypeSubmit
            const syntheticEvent = { preventDefault: () => {} } as React.FormEvent;
            void handleToolTypeSubmit(syntheticEvent);
            if (!toolTypeError) {
              setMobileView("list");
            }
          }}
          isSaving={false}
        >
          {/* Tool Type Form Fields */}
          <div className="mobile-form-group">
            <label className="mobile-form-label">Name *</label>
            <input
              type="text"
              value={toolTypeForm.name}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, name: e.target.value })}
              className="mobile-form-input"
              placeholder="e.g., my-tool"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Display Name *</label>
            <input
              type="text"
              value={toolTypeForm.display_name}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, display_name: e.target.value })}
              className="mobile-form-input"
              placeholder="e.g., My Tool"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Description</label>
            <textarea
              value={toolTypeForm.description}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, description: e.target.value })}
              className="mobile-form-textarea"
              placeholder="What does this tool do?"
              rows={3}
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Category</label>
            <input
              type="text"
              value={toolTypeForm.category}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, category: e.target.value })}
              className="mobile-form-input"
              placeholder="e.g., development"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Interface Type</label>
            <select
              value={toolTypeForm.interface_type}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, interface_type: e.target.value as "web" | "terminal" })}
              className="mobile-form-select"
            >
              <option value="web">Web</option>
              <option value="terminal">Terminal</option>
            </select>
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Requires Port</label>
            <input
              type="checkbox"
              checked={toolTypeForm.requires_port}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, requires_port: e.target.checked })}
              className="mobile-form-checkbox"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Default Port</label>
            <input
              type="text"
              value={toolTypeForm.default_port}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, default_port: e.target.value })}
              className="mobile-form-input"
              placeholder="e.g., 8080"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Definition Type</label>
            <select
              value={toolTypeForm.definition_type}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, definition_type: e.target.value as "compose" | "dockerfile" })}
              className="mobile-form-select"
            >
              <option value="compose">Compose</option>
              <option value="dockerfile">Dockerfile</option>
            </select>
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Startup Command</label>
            <input
              type="text"
              value={toolTypeForm.startup_command}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, startup_command: e.target.value })}
              className="mobile-form-input"
              placeholder="Command to run on startup"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Readiness Command</label>
            <input
              type="text"
              value={toolTypeForm.readiness_command}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, readiness_command: e.target.value })}
              className="mobile-form-input"
              placeholder="e.g., curl -f http://localhost:8080/health"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Readiness Timeout</label>
            <input
              type="text"
              value={toolTypeForm.readiness_timeout}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, readiness_timeout: e.target.value })}
              className="mobile-form-input"
              placeholder="30"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Readiness Interval</label>
            <input
              type="text"
              value={toolTypeForm.readiness_interval}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, readiness_interval: e.target.value })}
              className="mobile-form-input"
              placeholder="2"
            />
          </div>
          <div className="mobile-form-group">
            <label className="mobile-form-label">Required Variables</label>
            <input
              type="text"
              value={toolTypeForm.required_variables}
              onChange={(e) => setToolTypeForm({ ...toolTypeForm, required_variables: e.target.value })}
              className="mobile-form-input"
              placeholder="VAR1, VAR2, VAR3"
            />
          </div>
          {toolTypeForm.definition_type === "compose" && (
            <div className="mobile-form-group">
              <label className="mobile-form-label">Compose Template</label>
              <textarea
                value={toolTypeForm.compose_template}
                onChange={(e) => setToolTypeForm({ ...toolTypeForm, compose_template: e.target.value })}
                className="mobile-form-textarea mobile-form-code"
                placeholder="version: '3'"
                rows={10}
              />
            </div>
          )}
          {toolTypeForm.definition_type === "dockerfile" && (
            <div className="mobile-form-group">
              <label className="mobile-form-label">Dockerfile Template</label>
              <textarea
                value={toolTypeForm.dockerfile_template}
                onChange={(e) => setToolTypeForm({ ...toolTypeForm, dockerfile_template: e.target.value })}
                className="mobile-form-textarea mobile-form-code"
                placeholder="FROM ubuntu:22.04"
                rows={10}
              />
            </div>
          )}
        </MobileEditView>
      );
    }
  }

  return (
    <div className="container" style={{ display: "flex", height: "calc(100vh - 4rem)", gap: 0, padding: 0 }}>
      {/* Left Sidebar - Tool List */}
      <div
        style={{
          width: "280px",
          minWidth: "280px",
          borderRight: "1px solid var(--border)",
          display: "flex",
          flexDirection: "column",
          background: "var(--panel)",
        }}
      >
        <div style={{ padding: "1rem", borderBottom: "1px solid var(--border)" }}>
          <h2 style={{ margin: 0, fontSize: "1.125rem" }}>Tool Workshop</h2>
          <p className="muted" style={{ margin: "0.25rem 0 0 0", fontSize: "0.875rem" }}>
            {toolTypes.length} tool type{toolTypes.length !== 1 ? "s" : ""}
          </p>
        </div>

        <div style={{ flex: 1, overflowY: "auto", padding: "0.5rem" }}>
          {toolTypes.map((toolType) => (
            <button
              key={toolType.id}
              onClick={() => handleSelectToolType(toolType)}
              style={{
                width: "100%",
                textAlign: "left",
                padding: "0.75rem 1rem",
                marginBottom: "0.25rem",
                borderRadius: "0.375rem",
                border: "none",
                background: selectedToolTypeId === toolType.id ? "var(--brand)" : "transparent",
                color: selectedToolTypeId === toolType.id ? "white" : "var(--ink)",
                cursor: "pointer",
                display: "flex",
                alignItems: "center",
                gap: "0.75rem",
                transition: "background 0.15s",
              }}
              onMouseEnter={(e) => {
                if (selectedToolTypeId !== toolType.id) {
                  e.currentTarget.style.background = "#ece7df";
                }
              }}
              onMouseLeave={(e) => {
                if (selectedToolTypeId !== toolType.id) {
                  e.currentTarget.style.background = "transparent";
                }
              }}
            >
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, fontSize: "0.9375rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                  {toolType.display_name}
                </div>
                <div style={{ fontSize: "0.8125rem", opacity: 0.8, marginTop: "0.125rem" }}>
                  {toolType.category || "Uncategorized"} · {toolType.interface_type === "web" ? `Port ${toolType.default_port}` : "Terminal"}
                </div>
              </div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  handleDeleteToolType(toolType.id);
                }}
                style={{
                  background: "none",
                  border: "none",
                  color: selectedToolTypeId === toolType.id ? "rgba(255,255,255,0.8)" : "var(--muted)",
                  cursor: "pointer",
                  padding: "0.25rem",
                  borderRadius: "0.25rem",
                  flexShrink: 0,
                  opacity: 0,
                }}
                className="delete-btn"
                title="Delete tool type"
              >
                <Icon name="delete" size="sm" />
              </button>
            </button>
          ))}
        </div>

        <div style={{ padding: "1rem", borderTop: "1px solid var(--border)" }}>
          <button
            onClick={handleCreateNew}
            style={{
              width: "100%",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: "0.5rem",
              padding: "0.75rem",
              borderRadius: "0.5rem",
              border: "2px dashed var(--border)",
              background: "transparent",
              color: "var(--muted)",
              cursor: "pointer",
              fontWeight: 600,
              transition: "all 0.15s",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = "var(--brand)";
              e.currentTarget.style.color = "var(--brand)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = "var(--border)";
              e.currentTarget.style.color = "var(--muted)";
            }}
          >
            <Icon name="add" size="sm" /> New Tool Type
          </button>
        </div>
      </div>

      {/* Right Panel - Editor */}
      <div style={{ flex: 1, overflow: "auto", padding: "1.5rem", minWidth: 0 }}>
        {!selectedToolTypeId && !isCreating ? (
          <div style={{ textAlign: "center", paddingTop: "4rem", color: "var(--muted)" }}>
            <div style={{ opacity: 0.3, marginBottom: "1rem" }}>
              <Icon name="code" size="lg" />
            </div>
            <h3 style={{ margin: "0 0 0.5rem 0", fontWeight: 500 }}>Select a tool type</h3>
            <p style={{ margin: 0 }}>Choose a tool from the list to edit, or create a new one.</p>
          </div>
        ) : (
          <div>
            {/* Header */}
            <div style={{ marginBottom: "1.5rem" }}>
              <h1 style={{ margin: "0 0 0.5rem 0", fontSize: "1.5rem" }}>
                {isCreating ? "Create Tool Type" : selectedToolType?.display_name}
              </h1>
              {!isCreating && (
                <p className="muted" style={{ margin: 0 }}>
                  {selectedToolType?.name} · {selectedToolType?.definition_type} · {selectedToolType?.interface_type === "web" ? `Port ${selectedToolType?.default_port}` : "Terminal"}
                </p>
              )}
            </div>

            {/* Right Panel Tabs */}
            <div style={{ display: "flex", gap: "0", marginBottom: "1.5rem", borderBottom: "1px solid var(--border)" }}>
              {(["details", "configs", "folders"] as RightPanelTab[]).map((tab) => (
                <button
                  key={tab}
                  onClick={() => setRightPanelTab(tab)}
                  style={{
                    padding: "0.625rem 1.25rem",
                    borderBottom: rightPanelTab === tab ? "2px solid var(--brand)" : "2px solid transparent",
                    background: "none",
                    border: "none",
                    cursor: "pointer",
                    fontWeight: rightPanelTab === tab ? 600 : 400,
                    color: rightPanelTab === tab ? "var(--brand)" : "var(--muted)",
                    fontSize: "0.9375rem",
                    marginBottom: "-1px",
                    textTransform: "capitalize",
                  }}
                >
                  {tab}
                </button>
              ))}
            </div>

            {/* Details Tab */}
            {rightPanelTab === "details" && (
              <form onSubmit={handleToolTypeSubmit} className="stack" style={{ gap: "1rem", maxWidth: "800px" }}>
                <div className="form-group">
                  <label htmlFor="definition-type">Definition Type</label>
                  <select
                    id="definition-type"
                    value={toolTypeForm.definition_type}
                    onChange={(e) => {
                      setToolTypeForm({ ...toolTypeForm, definition_type: e.target.value as "compose" | "dockerfile" });
                      setToolTypeDirty(true);
                    }}
                    className="form-input"
                    disabled={!isCreating}
                  >
                    <option value="compose">Docker Compose</option>
                    <option value="dockerfile">Dockerfile</option>
                  </select>
                </div>

                <div className="row" style={{ gap: "1rem" }}>
                  <div className="form-group" style={{ flex: 1 }}>
                    <label htmlFor="tool-type-name">Name *</label>
                    <input
                      id="tool-type-name"
                      type="text"
                      value={toolTypeForm.name}
                      onChange={(e) => {
                        setToolTypeForm({ ...toolTypeForm, name: e.target.value });
                        setToolTypeDirty(true);
                      }}
                      disabled={!isCreating}
                      placeholder="e.g., code-server"
                      className="form-input"
                      required
                    />
                  </div>
                  <div className="form-group" style={{ flex: 1 }}>
                    <label htmlFor="tool-type-display-name">Display Name *</label>
                    <input
                      id="tool-type-display-name"
                      type="text"
                      value={toolTypeForm.display_name}
                      onChange={(e) => {
                        setToolTypeForm({ ...toolTypeForm, display_name: e.target.value });
                        setToolTypeDirty(true);
                      }}
                      placeholder="e.g., VS Code Server"
                      className="form-input"
                      required
                    />
                  </div>
                </div>

                <div className="form-group">
                  <label htmlFor="tool-type-description">Description</label>
                  <input
                    id="tool-type-description"
                    type="text"
                    value={toolTypeForm.description}
                    onChange={(e) => {
                      setToolTypeForm({ ...toolTypeForm, description: e.target.value });
                      setToolTypeDirty(true);
                    }}
                    placeholder="Optional description"
                    className="form-input"
                  />
                </div>

                <div className="row" style={{ gap: "1rem" }}>
                  <div className="form-group" style={{ flex: 1 }}>
                    <label htmlFor="tool-type-category">Category</label>
                    <input
                      id="tool-type-category"
                      type="text"
                      value={toolTypeForm.category}
                      onChange={(e) => {
                        setToolTypeForm({ ...toolTypeForm, category: e.target.value });
                        setToolTypeDirty(true);
                      }}
                      placeholder="e.g., editor, notebook, ai-assistant"
                      className="form-input"
                    />
                  </div>
                  <div className="form-group" style={{ flex: 1 }}>
                    <label htmlFor="tool-type-interface">Interface Type</label>
                    <select
                      id="tool-type-interface"
                      value={toolTypeForm.interface_type}
                      onChange={(e) => {
                        const value = e.target.value as "web" | "terminal";
                        setToolTypeForm({
                          ...toolTypeForm,
                          interface_type: value,
                          requires_port: value === "web",
                          default_port: value === "web" ? toolTypeForm.default_port : "",
                        });
                        setToolTypeDirty(true);
                      }}
                      className="form-input"
                    >
                      <option value="web">Web</option>
                      <option value="terminal">Terminal</option>
                    </select>
                  </div>
                </div>

                {toolTypeForm.interface_type === "terminal" && (
                  <div className="form-group">
                    <label htmlFor="tool-type-startup-command">Startup Command</label>
                    <input
                      id="tool-type-startup-command"
                      type="text"
                      value={toolTypeForm.startup_command}
                      onChange={(e) => {
                        setToolTypeForm({ ...toolTypeForm, startup_command: e.target.value });
                        setToolTypeDirty(true);
                      }}
                      placeholder="e.g., cd /workspace && ls"
                      className="form-input"
                    />
                    <small className="form-help">Command to run before the interactive shell for each new terminal session.</small>
                  </div>
                )}

                {toolTypeForm.requires_port && (
                  <div className="form-group">
                    <label htmlFor="tool-type-default-port">Default Port *</label>
                    <input
                      id="tool-type-default-port"
                      type="number"
                      value={toolTypeForm.default_port}
                      onChange={(e) => {
                        setToolTypeForm({ ...toolTypeForm, default_port: e.target.value });
                        setToolTypeDirty(true);
                      }}
                      placeholder="e.g., 8443"
                      className="form-input"
                      required
                    />
                  </div>
                )}

                <div className="form-group">
                  <label htmlFor="tool-type-template">{toolTypeForm.definition_type === "compose" ? "Compose Template" : "Dockerfile"} *</label>
                  <textarea
                    id="tool-type-template"
                    value={toolTypeForm.definition_type === "compose" ? toolTypeForm.compose_template : toolTypeForm.dockerfile_template}
                    onChange={(e) => {
                      if (toolTypeForm.definition_type === "compose") {
                        setToolTypeForm({ ...toolTypeForm, compose_template: e.target.value });
                      } else {
                        setToolTypeForm({ ...toolTypeForm, dockerfile_template: e.target.value });
                      }
                      setToolTypeDirty(true);
                    }}
                    rows={12}
                    placeholder={toolTypeForm.definition_type === "compose" ? "version: '3.8'\nservices:\n  app:\n    image: ..." : "FROM node:18\nWORKDIR /app\n..."}
                    className="form-input"
                    style={{ fontFamily: "monospace", fontSize: "0.875rem" }}
                    required
                  />
                </div>

                <div className="form-group">
                  <label htmlFor="readiness-command">Readiness Probe Command</label>
                  <input
                    id="readiness-command"
                    type="text"
                    value={toolTypeForm.readiness_command}
                    onChange={(e) => {
                      setToolTypeForm({ ...toolTypeForm, readiness_command: e.target.value });
                      setToolTypeDirty(true);
                    }}
                    placeholder="e.g., curl -f http://localhost:8080"
                    className="form-input"
                  />
                </div>

                <div className="row" style={{ gap: "1rem" }}>
                  <div className="form-group" style={{ flex: 1 }}>
                    <label htmlFor="readiness-timeout">Timeout (seconds)</label>
                    <input
                      id="readiness-timeout"
                      type="number"
                      value={toolTypeForm.readiness_timeout}
                      onChange={(e) => {
                        setToolTypeForm({ ...toolTypeForm, readiness_timeout: e.target.value });
                        setToolTypeDirty(true);
                      }}
                      className="form-input"
                    />
                  </div>
                  <div className="form-group" style={{ flex: 1 }}>
                    <label htmlFor="readiness-interval">Interval (seconds)</label>
                    <input
                      id="readiness-interval"
                      type="number"
                      value={toolTypeForm.readiness_interval}
                      onChange={(e) => {
                        setToolTypeForm({ ...toolTypeForm, readiness_interval: e.target.value });
                        setToolTypeDirty(true);
                      }}
                      className="form-input"
                    />
                  </div>
                </div>

                <div className="form-group">
                  <label>Required Variables (comma-separated)</label>
                  <input
                    type="text"
                    value={toolTypeForm.required_variables}
                    onChange={(e) => {
                      setToolTypeForm({ ...toolTypeForm, required_variables: e.target.value });
                      setToolTypeDirty(true);
                    }}
                    placeholder="REPO_PATH, TOOL_NAME"
                    className="form-input"
                  />
                </div>

                {toolTypeError && <p className="text-error">{toolTypeError}</p>}

                <div className="dialog-actions" style={{ marginTop: "1rem" }}>
                  <button type="submit">
                    <Icon name={isCreating ? "add" : "save"} size="sm" />
                    {isCreating ? "Create Tool Type" : "Save Changes"}
                  </button>
                  {toolTypeDirty && (
                    <button
                      type="button"
                      onClick={() => {
                        if (isCreating) {
                          resetToolTypeForm();
                        } else if (selectedToolType) {
                          populateToolTypeForm(selectedToolType);
                        }
                      }}
                      className="button-secondary"
                    >
                      <Icon name="cancel" size="sm" /> Discard
                    </button>
                  )}
                </div>
              </form>
            )}

            {/* Configs Tab */}
            {rightPanelTab === "configs" && selectedToolTypeId && (
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
                  <h3 style={{ margin: 0 }}>Configurations for {selectedToolType?.display_name}</h3>
                  <button onClick={openCreateConfig}>
                    <Icon name="add" size="sm" /> Add Config
                  </button>
                </div>

                {showConfigForm && (
                  <div className="card stack" style={{ marginBottom: "1rem", padding: "1rem" }}>
                    <h4>{selectedConfig ? "Edit" : "Add"} Config</h4>
                    <form onSubmit={handleConfigSubmit} className="stack" style={{ gap: "0.75rem" }}>
                      <div className="form-group">
                        <label>Key *</label>
                        <input
                          type="text"
                          value={configForm.key}
                          onChange={(e) => setConfigForm({ ...configForm, key: e.target.value })}
                          placeholder="e.g., OPENAI_API_KEY"
                          className="form-input"
                          required
                        />
                      </div>

                      <div className="form-group">
                        <label>Config Type</label>
                        <select
                          value={configForm.config_type}
                          onChange={(e) => setConfigForm({ ...configForm, config_type: e.target.value })}
                          className="form-input"
                        >
                          <option value="env">Environment Variable</option>
                          <option value="file">Configuration File</option>
                        </select>
                      </div>

                      {configForm.config_type === "file" && (
                        <div className="form-group">
                          <label>File Path</label>
                          <input
                            type="text"
                            value={configForm.file_path}
                            onChange={(e) => setConfigForm({ ...configForm, file_path: e.target.value })}
                            placeholder="e.g., /app/config.json"
                            className="form-input"
                          />
                        </div>
                      )}

                      <div className="form-group">
                        <label>Value</label>
                        <textarea
                          value={configForm.value}
                          onChange={(e) => setConfigForm({ ...configForm, value: e.target.value })}
                          placeholder={configForm.config_type === "env" ? "Enter value..." : "Enter file contents..."}
                          className="form-input"
                          rows={configForm.config_type === "file" ? 8 : 2}
                          required
                        />
                      </div>

                      <div className="row" style={{ gap: "1rem" }}>
                        <div className="form-group" style={{ flex: 1 }}>
                          <label>Port Override</label>
                          <input
                            type="number"
                            value={configForm.port_override}
                            onChange={(e) => setConfigForm({ ...configForm, port_override: e.target.value })}
                            placeholder="e.g., 8080"
                            className="form-input"
                          />
                        </div>
                        <div className="form-group" style={{ flex: 1 }}>
                          <label>Start Command</label>
                          <input
                            type="text"
                            value={configForm.start_command}
                            onChange={(e) => setConfigForm({ ...configForm, start_command: e.target.value })}
                            placeholder="e.g., npm start"
                            className="form-input"
                          />
                        </div>
                      </div>

                      <div className="form-group">
                        <label>Working Directory</label>
                        <input
                          type="text"
                          value={configForm.working_directory}
                          onChange={(e) => setConfigForm({ ...configForm, working_directory: e.target.value })}
                          placeholder="e.g., /workspace"
                          className="form-input"
                        />
                      </div>

                      <div className="form-group">
                        <label>Environment Variables (JSON)</label>
                        <textarea
                          value={configForm.env_vars_json}
                          onChange={(e) => setConfigForm({ ...configForm, env_vars_json: e.target.value })}
                          placeholder='{"KEY": "value"}'
                          className="form-input"
                          rows={3}
                          style={{ fontFamily: "monospace", fontSize: "0.8125rem" }}
                        />
                      </div>

                      <div className="form-group">
                        <label>Volumes (JSON array)</label>
                        <textarea
                          value={configForm.volumes_json}
                          onChange={(e) => setConfigForm({ ...configForm, volumes_json: e.target.value })}
                          placeholder='[{"source": "/host", "target": "/container"}]'
                          className="form-input"
                          rows={3}
                          style={{ fontFamily: "monospace", fontSize: "0.8125rem" }}
                        />
                      </div>

                      {configError && <p className="text-error">{configError}</p>}

                      <div className="dialog-actions">
                        <button type="submit">{selectedConfig ? "Update" : "Add"}</button>
                        <button type="button" onClick={() => { setShowConfigForm(false); resetConfigForm(); }} className="button-secondary">Cancel</button>
                      </div>
                    </form>
                  </div>
                )}


                <div className="stack" style={{ gap: "0.5rem" }}>
                  {toolConfigs.length === 0 ? (
                    <EmptyState message="No configurations for this tool type yet." />
                  ) : (
                    toolConfigs.map((config) => (
                      <div
                        key={config.id}
                        className="card"

                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "center",
                          padding: "0.75rem 1rem",
                        }}
                      >

                        <div>
                          <div className="row" style={{ gap: "0.5rem", alignItems: "center" }}>
                            <code style={{ fontWeight: 600 }}>{config.key}</code>
                            <span
                              style={{
                                fontSize: "0.7rem",
                                textTransform: "uppercase",
                                padding: "0.125rem 0.5rem",
                                borderRadius: "9999px",
                                background: config.config_type === "env" ? "var(--info, #3b82f6)" : "var(--warning, #f59e0b)",
                                color: "white",
                                fontWeight: 600,
                              }}
                            >
                              {config.config_type}
                            </span>
                          </div>
                          <p className="muted" style={{ marginTop: "0.25rem", fontSize: "0.875rem" }}>
                            {config.config_type === "file" && config.file_path
                              ? `File: ${config.file_path}`
                              : "Environment variable"}
                            {config.port_override && ` · Port: ${config.port_override}`}
                          </p>
                        </div>
                        <div className="row" style={{ gap: "0.5rem" }}>
                          <button
                            className="ghost-button small"
                            onClick={() => openEditConfig(config)}
                            type="button"
                          >
                            <Icon name="edit" size="sm" />
                          </button>
                          <button
                            className="ghost-button small"
                            onClick={() => handleDeleteConfig(config.id)}
                            type="button"
                          >
                            <Icon name="delete" size="sm" />
                          </button>
                        </div>
                      </div>
                    ))
                  )}

                </div>
              </div>
            )}

            {/* Folders Tab */}
            {rightPanelTab === "folders" && (
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
                  <h3 style={{ margin: 0 }}>Config Folders</h3>
                  <button onClick={openCreateFolder}>
                    <Icon name="add" size="sm" /> Create Folder
                  </button>
                </div>

                {showFolderForm && (
                  <div className="card stack" style={{ marginBottom: "1rem", padding: "1rem" }}>
                    <h4>{selectedFolder ? "Edit" : "Create"} Config Folder</h4>
                    <form onSubmit={handleFolderSubmit} className="stack" style={{ gap: "0.75rem" }}>
                      <div className="form-group">
                        <label>Name *</label>
                        <input
                          type="text"
                          value={folderForm.name}
                          onChange={(e) => setFolderForm({ ...folderForm, name: e.target.value })}
                          placeholder="e.g., my-dotfiles"
                          className="form-input"
                          required
                        />
                      </div>

                      <div className="form-group">
                        <label>Description</label>
                        <input
                          type="text"
                          value={folderForm.description}
                          onChange={(e) => setFolderForm({ ...folderForm, description: e.target.value })}
                          placeholder="Optional description"
                          className="form-input"
                        />
                      </div>

                      <div className="form-group">
                        <label>Mount Path *</label>
                        <input
                          type="text"
                          value={folderForm.mount_path}
                          onChange={(e) => setFolderForm({ ...folderForm, mount_path: e.target.value })}
                          placeholder="e.g., /home/user"
                          className="form-input"
                          required
                        />
                      </div>

                      <div className="form-group">
                        <label>Files (JSON object)</label>
                        <textarea
                          value={folderForm.files_json}
                          onChange={(e) => setFolderForm({ ...folderForm, files_json: e.target.value })}
                          placeholder='{".zshrc": "export ZSH=...", ".gitconfig": "[user]\\nname = ..."}'
                          className="form-input"
                          rows={8}
                          style={{ fontFamily: "monospace", fontSize: "0.8125rem" }}
                        />
                      </div>

                      <div className="form-group">
                        <label className="checkbox-label">
                          <input
                            type="checkbox"
                            checked={folderForm.is_active}
                            onChange={(e) => setFolderForm({ ...folderForm, is_active: e.target.checked })}
                          />
                          Active (mount into new instances)
                        </label>
                      </div>

                      {folderError && <p className="text-error">{folderError}</p>}

                      <div className="dialog-actions">
                        <button type="submit">{selectedFolder ? "Update" : "Create"}</button>
                        <button type="button" onClick={() => { setShowFolderForm(false); resetFolderForm(); }} className="button-secondary">Cancel</button>
                      </div>
                    </form>
                  </div>
                )}

                <div className="card-grid">
                  {toolFolders.map((folder) => (
                    <div key={folder.id} className="card">
                      <div className="card-header">
                        <h4>{folder.name}</h4>
                        {folder.is_active && <span className="badge">Active</span>}
                      </div>
                      <p className="text-secondary">{folder.description || "No description"}</p>
                      <div className="tool-type-meta">
                        <span>Mount: {folder.mount_path}</span>
                        <span>Files: {Object.keys(folder.files || {}).length}</span>
                      </div>
                      <div className="card-actions">
                        <button onClick={() => openEditFolder(folder)} className="button-secondary">
                          <Icon name="edit" size="sm" /> Edit
                        </button>
                        <button onClick={() => handleDeleteFolder(folder.id)} className="button-danger">
                          <Icon name="delete" size="sm" /> Delete
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};