mnote/wolai-frontend/src/components/editor/blocks/MindmapSidebar.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useMemo, useState } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Toggle } from "@/components/ui/toggle";
import {
  Bold,
  Italic,
  Underline,
  Type,
  Strikethrough,
  Palette,
  X,
  Network,
  ListTree,
  Sliders,
  Calculator,
  StickyNote,
  Bot,
} from "lucide-react";
import {
  fontFamilyList,
  fontSizeList,
  lineHeightList,
  colorList,
  borderDasharrayList,
  borderRadiusList,
  borderWidthList,
  lineWidthList,
  shapeList,
  lineStyleList,
  themeList,
  layoutList,
  outlineDepthOptions,
} from "./mindmapOptions";
import iconConfig from "./mindmapIconConfig";
import imageConfig from "./mindmapImageConfig";
// 避免 SSR 阶段触发浏览器依赖，改为运行时动态引入
// @ts-expect-error 第三方库缺少类型定义
const loadIconModules = async () => {
  const { nodeIconList } = await import("simple-mind-map/src/svg/icons.js");
  const { mergerIconList } = await import("simple-mind-map/src/utils/index.js");
  return { nodeIconList, mergerIconList };
};

type MindMapNode = {
  getStyle: (prop: string, checkRoot?: boolean) => any;
  setStyle: (prop: string, value: any) => void;
  setIcon: (icons: string[]) => void;
  getData: (key: string) => any;
};

type SidebarProps = {
  mindmap: any;
  activeNodes: MindMapNode[];
  activeTab: SidebarPanel | null;
  onClose: () => void;
};

const predefinedIcons = [
  {
    type: 'priority',
    name: '优先级',
    list: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
  },
  {
    type: 'progress',
    name: '进度',
    list: ['start', 'quarter', 'half', '3quarter', 'done'] // Standard keys usually
  }
];

const ColorInput = ({
  value,
  onChange,
  label,
}: {
  value: string;
  onChange: (val: string) => void;
  label?: string;
}) => (
  <div className="flex items-center gap-2">
    {label && <span className="text-xs text-gray-500">{label}</span>}
    <div className="relative h-6 w-full flex-1 overflow-hidden rounded border border-gray-200">
      <input
        type="color"
        value={value || "#000000"}
        onChange={(e) => onChange(e.target.value)}
        className="absolute inset-[-50%] h-[200%] w-[200%] cursor-pointer border-0 p-0"
      />
    </div>
  </div>
);

const NativeSelect = ({
  value,
  onChange,
  options,
  placeholder,
  disabled,
}: {
  value: string | number;
  onChange: (val: string) => void;
  options: { label: string | number; value: string | number }[];
  placeholder?: string;
  disabled?: boolean;
}) => (
  <div className="relative">
    <select
      disabled={disabled}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className="flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 appearance-none"
    >
      {placeholder && <option value="" disabled>{placeholder}</option>}
      {options.map((opt) => (
        <option key={opt.value} value={opt.value}>
          {opt.label}
        </option>
      ))}
    </select>
  </div>
);

const StylePanel = ({ activeNodes }: { activeNodes: MindMapNode[] }) => {
  const [style, setStyle] = useState<Record<string, any>>({});

  useEffect(() => {
    if (activeNodes.length > 0) {
      const node = activeNodes[0];
      const newStyle: Record<string, any> = {};
      [
        "fontFamily", "fontSize", "lineHeight", "color", "fontWeight", "fontStyle",
        "textDecoration", "borderWidth", "borderColor", "fillColor", "shape",
        "lineColor", "lineWidth", "lineDasharray", "borderRadius", "borderDasharray"
      ].forEach((prop) => {
        newStyle[prop] = node.getStyle(prop, false);
      });
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setStyle(newStyle);
    }
  }, [activeNodes]);

  const updateStyle = (prop: string, value: any) => {
    setStyle((prev) => ({ ...prev, [prop]: value }));
    activeNodes.forEach((node) => {
      node.setStyle(prop, value);
    });
  };

  if (activeNodes.length === 0) {
    return (
      <div className="flex h-full flex-col items-center justify-center p-4 text-center text-gray-400">
        <Type className="mb-2 h-10 w-10 opacity-20" />
        <p className="text-sm">请选择一个节点以编辑样式</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="space-y-3">
        <Label className="text-xs font-semibold text-gray-500">文字</Label>
        <NativeSelect
          value={style.fontFamily || fontFamilyList[0]?.value}
          options={fontFamilyList.map((f) => ({ label: f.name, value: f.value }))}
          onChange={(v) => updateStyle("fontFamily", v)}
        />
        <div className="grid grid-cols-2 gap-2">
          <NativeSelect
            value={style.fontSize || 14}
            options={fontSizeList.map((s) => ({ label: `${s}px`, value: s }))}
            onChange={(v) => updateStyle("fontSize", Number(v))}
          />
          <NativeSelect
            value={style.lineHeight || 1.5}
            options={lineHeightList.map((h) => ({ label: h, value: h }))}
            onChange={(v) => updateStyle("lineHeight", Number(v))}
          />
        </div>
        <div className="flex items-center gap-2">
          <Toggle
            size="sm"
            pressed={style.fontWeight === "bold"}
            onPressedChange={(pressed) => updateStyle("fontWeight", pressed ? "bold" : "normal")}
          >
            <Bold className="h-4 w-4" />
          </Toggle>
          <Toggle
            size="sm"
            pressed={style.fontStyle === "italic"}
            onPressedChange={(pressed) => updateStyle("fontStyle", pressed ? "italic" : "normal")}
          >
            <Italic className="h-4 w-4" />
          </Toggle>
           <Toggle
            size="sm"
            pressed={style.textDecoration === "underline"}
            onPressedChange={(pressed) => updateStyle("textDecoration", pressed ? "underline" : "none")}
          >
            <Underline className="h-4 w-4" />
          </Toggle>
          <Toggle
            size="sm"
            pressed={style.textDecoration === "line-through"}
            onPressedChange={(pressed) => updateStyle("textDecoration", pressed ? "line-through" : "none")}
          >
            <Strikethrough className="h-4 w-4" />
          </Toggle>
        </div>
        <ColorInput
          label="颜色"
          value={style.color}
          onChange={(v) => updateStyle("color", v)}
        />
      </div>

      <div className="space-y-3">
        <Label className="text-xs font-semibold text-gray-500">边框 & 背景</Label>
        <div className="grid grid-cols-2 gap-2">
            <NativeSelect
               value={style.shape || "rectangle"}
               options={shapeList.map(s => ({label: s.name, value: s.value}))}
               onChange={(v) => updateStyle("shape", v)}
            />
            <NativeSelect
               value={style.borderDasharray || "none"}
               options={borderDasharrayList.map(s => ({label: s.name, value: s.value}))}
               onChange={(v) => updateStyle("borderDasharray", v)}
            />
        </div>
        <div className="grid grid-cols-2 gap-2">
             <NativeSelect
               value={Number.isFinite(style.borderWidth) ? style.borderWidth : (style.borderWidth ?? 0)}
               options={borderWidthList.map((n) => ({ label: `${n}px`, value: n }))}
               onChange={(v) => updateStyle("borderWidth", Number(v))}
             />
             <NativeSelect
               value={Number.isFinite(style.borderRadius) ? style.borderRadius : (style.borderRadius ?? 0)}
               options={borderRadiusList.map((n) => ({ label: `${n}px`, value: n }))}
               onChange={(v) => updateStyle("borderRadius", Number(v))}
             />
        </div>
        <div className="grid grid-cols-2 gap-2">
           <ColorInput
             label="边框"
             value={style.borderColor}
              onChange={(v) => updateStyle("borderColor", v)}
            />
            <ColorInput
              label="填充"
              value={style.fillColor}
              onChange={(v) => updateStyle("fillColor", v)}
            />
         </div>
      </div>

      <div className="space-y-3">
        <Label className="text-xs font-semibold text-gray-500">连线</Label>
        <div className="grid grid-cols-2 gap-2">
            <NativeSelect
               value={style.lineDasharray || "none"}
               options={borderDasharrayList.map(s => ({label: s.name, value: s.value}))}
               onChange={(v) => updateStyle("lineDasharray", v)}
            />
             <NativeSelect
               value={Number.isFinite(style.lineWidth) ? style.lineWidth : (style.lineWidth ?? 0)}
               options={lineWidthList.map((n) => ({ label: `${n}px`, value: n }))}
               onChange={(v) => updateStyle("lineWidth", Number(v))}
             />
        </div>
        <ColorInput
          label="连线颜色"
          value={style.lineColor}
          onChange={(v) => updateStyle("lineColor", v)}
        />
      </div>
    </div>
  );
};

const BaseStylePanel = ({ mindmap }: { mindmap: any }) => {
  const [style, setStyle] = useState<Record<string, any>>({});

  useEffect(() => {
    if (!mindmap) return;
    const initStyle = () => {
      const newStyle: Record<string, any> = {};
      [
        "backgroundColor", "lineColor", "lineWidth", "lineStyle",
        "paddingX", "paddingY"
      ].forEach(key => {
        newStyle[key] = mindmap.getThemeConfig(key);
      });
      setStyle(newStyle);
    };
    
    initStyle();
  }, [mindmap]);

  const updateThemeConfig = (key: string, value: any) => {
    if (!mindmap) return;
    setStyle(prev => ({ ...prev, [key]: value }));
    mindmap.setThemeConfig({ [key]: value });
  };

  if (!mindmap) return null;

  return (
    <div className="space-y-6">
      <div className="space-y-3">
        <Label className="text-xs font-semibold text-gray-500">背景</Label>
        <ColorInput
          label="背景颜色"
          value={style.backgroundColor}
          onChange={(v) => updateThemeConfig("backgroundColor", v)}
        />
      </div>

      <div className="space-y-3">
        <Label className="text-xs font-semibold text-gray-500">连线 (默认)</Label>
        <div className="grid grid-cols-2 gap-2">
            <NativeSelect
              value={style.lineStyle || "curve"}
              options={lineStyleList.map(s => ({ label: s.name, value: s.value }))}
              onChange={(v) => updateThemeConfig("lineStyle", v)}
            />
             <NativeSelect
               value={Number.isFinite(style.lineWidth) ? style.lineWidth : (style.lineWidth ?? 0)}
               options={lineWidthList.map((n) => ({ label: `${n}px`, value: n }))}
               onChange={(v) => updateThemeConfig("lineWidth", Number(v))}
             />
        </div>
        <ColorInput
          label="连线颜色"
          value={style.lineColor}
          onChange={(v) => updateThemeConfig("lineColor", v)}
        />
      </div>

       <div className="space-y-3">
        <Label className="text-xs font-semibold text-gray-500">节点内边距 (默认)</Label>
        <div className="grid grid-cols-2 gap-2">
             <div className="flex items-center gap-2">
                 <span className="text-xs text-gray-500 whitespace-nowrap">水平</span>
                 <Input 
                    type="number" 
                    className="h-8" 
                    min={0}
                    value={parseInt(style.paddingX) || 0} 
                    onChange={e => updateThemeConfig("paddingX", Number(e.target.value))} 
                 />
             </div>
             <div className="flex items-center gap-2">
                 <span className="text-xs text-gray-500 whitespace-nowrap">垂直</span>
                 <Input 
                    type="number" 
                    className="h-8" 
                    min={0}
                    value={parseInt(style.paddingY) || 0} 
                    onChange={e => updateThemeConfig("paddingY", Number(e.target.value))} 
                 />
             </div>
        </div>
      </div>
    </div>
  );
};

const ThemePanel = ({ mindmap }: { mindmap: any }) => {
    const changeTheme = (theme: string) => {
        if (!mindmap) return;
        mindmap.setTheme(theme);
    };

    if (!mindmap) return null;

    return (
        <div className="grid grid-cols-2 gap-3">
            {themeList.map(t => (
                <button
                    key={t.value}
                    onClick={() => changeTheme(t.value)}
                    className="flex flex-col items-center justify-center rounded border border-gray-100 bg-gray-50 p-3 hover:border-blue-500 hover:bg-blue-50"
                >
                    <Palette className="mb-2 h-6 w-6 text-gray-400" />
                    <span className="text-xs text-gray-600">{t.name}</span>
                </button>
            ))}
        </div>
    )
}

const StructurePanel = ({ mindmap }: { mindmap: any }) => {
    const changeLayout = (layout: string) => {
        if (!mindmap) return;
        mindmap.setLayout(layout);
    };

    if (!mindmap) return null;

    return (
        <div className="grid grid-cols-2 gap-3">
            {layoutList.map(l => (
                <button
                    key={l.value}
                    onClick={() => changeLayout(l.value)}
                    className="flex flex-col items-center justify-center rounded border border-gray-100 bg-gray-50 p-3 hover:border-blue-500 hover:bg-blue-50"
                >
                    <Network className="mb-2 h-6 w-6 text-gray-400" />
                    <span className="text-xs text-gray-600">{l.name}</span>
                </button>
            ))}
        </div>
    )
}

const IconPanel = ({ activeNodes }: { activeNodes: MindMapNode[] }) => {        
  const [activeSubTab, setActiveSubTab] = useState<"icon" | "sticker">("icon");
  const [{ iconGroups, loading }, setIconGroups] = useState<{
    iconGroups: any[];
    loading: boolean;
  }>({ iconGroups: [], loading: true });
  useEffect(() => {
    let mounted = true;
    (async () => {
      const { nodeIconList, mergerIconList } = await loadIconModules();
      if (!mounted) return;
      setIconGroups({
        iconGroups: mergerIconList([
          ...nodeIconList,
          ...(iconConfig as unknown as any[]),
        ]),
        loading: false,
      });
    })();
    return () => {
      mounted = false;
    };
  }, []);
  const [stickerGroups] = useState(imageConfig);

  const addIcon = (type: string, name: string) => {
    const key = `${type}_${name}`;
    activeNodes.forEach((node) => {
      const icons = node.getData("icon") || [];
      const newIcons = icons.filter((i: string) => !i.startsWith(`${type}_`));
      newIcons.push(key);
      node.setIcon(newIcons);
    });
  };

  const removeIcon = (type: string) => {
    activeNodes.forEach((node) => {
      const icons = node.getData("icon") || [];
      const newIcons = icons.filter((i: string) => !i.startsWith(`${type}_`));  
      node.setIcon(newIcons);
    });
  };

  const setSticker = (img: { url: string; width?: number; height?: number }) => {
    activeNodes.forEach((node) => {
      // simple-mind-map 支持 setImage 接收对象，包含 url/width/height
      // @ts-expect-error 第三方库无类型
      node.setImage({
        url: img.url,
        width: img.width || 100,
        height: img.height || 100,
      });
    });
  };

  const clearSticker = () => {
    activeNodes.forEach((node) => {
      // 传入 null 以清除贴纸
      // @ts-expect-error 第三方库无类型
      node.setImage(null);
    });
  };

  if (loading) return <div className="p-4 text-center text-gray-400">图标加载中…</div>;
  if (iconGroups.length === 0) return <div className="p-4 text-center text-gray-400">暂无图标</div>;
  if (activeNodes.length === 0) return <div className="p-4 text-center text-gray-400">请选择节点</div>;

  return (
    <div className="space-y-4 py-2">
      <div className="flex gap-2 px-1">
        <button
          className={`flex-1 rounded border px-2 py-1 text-xs ${activeSubTab === "icon" ? "border-blue-500 bg-blue-50 text-blue-600" : "border-gray-200"}`}
          onClick={() => setActiveSubTab("icon")}
        >
          图标
        </button>
        <button
          className={`flex-1 rounded border px-2 py-1 text-xs ${activeSubTab === "sticker" ? "border-blue-500 bg-blue-50 text-blue-600" : "border-gray-200"}`}
          onClick={() => setActiveSubTab("sticker")}
        >
          贴纸
        </button>
      </div>

      {activeSubTab === "icon" && iconGroups.map((group) => (
        <div key={group.type}>
          <div className="mb-2 flex items-center justify-between">
            <Label className="text-xs font-bold text-gray-600">{group.name}</Label>
            <button onClick={() => removeIcon(group.type)} className="text-[10px] text-blue-500 hover:underline">
              清除
            </button>
          </div>
          <div className="flex flex-wrap gap-2">
            {group.list.map((item) => (
              <button
                key={`${group.type}-${item.name}`}
                onClick={() => addIcon(group.type, item.name)}
                className="flex h-9 w-9 items-center justify-center rounded border border-gray-200 bg-white text-xs hover:border-blue-400 hover:shadow-sm"      
              >
                {item.icon ? (
                  typeof item.icon === "string" && item.icon.trim().startsWith("<svg") ? (
                    <span
                      className="inline-flex h-6 w-6 items-center justify-center"
                      // @ts-expect-error: dangerouslySetInnerHTML 用于复用官方 SVG 片段
                      dangerouslySetInnerHTML={{ __html: item.icon }}
                    />
                  ) : (
                    <img src={item.icon} alt={item.name} className="h-6 w-6 object-contain" />
                  )
                ) : (
                  <span className="text-xs text-gray-700">{item.name}</span>
                )}
              </button>
            ))}
          </div>
        </div>
      ))}

      {activeSubTab === "sticker" && (
        <div className="space-y-4">
          <div className="flex items-center justify-between px-1">
            <Label className="text-xs font-bold text-gray-600">贴纸</Label>
            <button onClick={clearSticker} className="text-[10px] text-blue-500 hover:underline">清除</button>
          </div>
          {stickerGroups.map((group: any) => (
            <div key={group.name}>
              <div className="mb-2 text-xs font-semibold text-gray-600">{group.name}</div>
              <div className="flex flex-wrap gap-2">
                {group.list.map((item: any, idx: number) => (
                  <button
                    key={`${group.name}-${idx}`}
                    onClick={() => setSticker(item)}
                    className="flex h-16 w-16 items-center justify-center rounded border border-gray-200 bg-white hover:border-blue-400 hover:shadow-sm"
                  >
                    <img src={item.url} alt={group.name} className="h-14 w-14 object-contain" />
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const OutlinePanel = ({ mindmap }: { mindmap: any }) => {
  const [depth, setDepth] = useState<number>(-1);

  const nodes = useMemo(() => {
    const root = mindmap?.renderer?.renderTree?._node;
    const list: { node: any; text: string; depth: number }[] = [];
    const walk = (n: any, d: number) => {
      if (!n) return;
      const raw =
        n.nodeData?.data?.text ||
        n.nodeData?.text ||
        n.data?.text ||
        n.data?.data?.text ||
        "未命名";
      const text =
        typeof raw === "string"
          ? raw.replace(/<[^>]+>/g, "").trim() || "未命名"
          : "未命名";
      list.push({ node: n, text, depth: d });
      (n.children || []).forEach((c: any) => walk(c, d + 1));
    };
    if (root) walk(root, 0);
    return list;
  }, [mindmap]);

  const visibleNodes = useMemo(
    () => nodes.filter((item) => depth < 0 || item.depth < depth),
    [nodes, depth],
  );

  const activate = (node: any) => {
    const r = mindmap?.renderer;
    if (!node || !r) return;
    r.activeNodeList = [node];
    r.lastActiveNodeList = [node];
    mindmap.emit?.("node_active", node, [node]);
    r.setRootNodeCenter?.();
  };

  if (!nodes.length) return <div className="p-4 text-sm text-gray-400">暂无节点</div>;

  return (
    <div className="space-y-3">
      <div>
        <Label className="text-xs text-gray-500">显示层级</Label>
        <NativeSelect
          value={depth}
          options={outlineDepthOptions.map((o) => ({ label: o.name, value: o.value }))}
          onChange={(v) => setDepth(Number(v))}
        />
      </div>
      <div className="max-h-[70vh] space-y-1 overflow-auto pr-2">
        {visibleNodes.map((item, idx) => (
          <button
            key={`${item.text}-${idx}`}
            className="flex w-full items-center gap-2 rounded-lg px-2 py-1 text-left text-sm hover:bg-gray-50"
            onClick={() => activate(item.node)}
          >
            <span className="text-gray-300" style={{ paddingLeft: item.depth * 12 }}>
              {"•".repeat(Math.max(1, item.depth + 1))}
            </span>
            <span className="text-gray-700">{item.text}</span>
          </button>
        ))}
      </div>
    </div>
  );
};

const SettingsPanel = ({ mindmap }: { mindmap: any }) => {
  const [freeDrag, setFreeDrag] = useState<boolean>(!!mindmap?.opt?.enableFreeDrag);
  const [wheel, setWheel] = useState<string>(mindmap?.opt?.mousewheelAction || "zoom");
  const [aiOn, setAiOn] = useState<boolean>(true);

  const updateFreeDrag = (val: boolean) => {
    setFreeDrag(val);
    if (mindmap) mindmap.opt.enableFreeDrag = val;
  };
  const updateWheel = (val: string) => {
    setWheel(val);
    if (mindmap) mindmap.opt.mousewheelAction = val;
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <Label className="text-xs text-gray-500">自由拖拽</Label>
        <Toggle size="sm" pressed={freeDrag} onPressedChange={updateFreeDrag}>
          {freeDrag ? "开" : "关"}
        </Toggle>
      </div>
      <div className="space-y-2">
        <Label className="text-xs text-gray-500">滚轮行为</Label>
        <NativeSelect
          value={wheel}
          onChange={updateWheel}
          options={[
            { label: "缩放", value: "zoom" },
            { label: "平移", value: "move" },
          ]}
        />
      </div>
      <div className="flex items-center justify-between">
        <Label className="text-xs text-gray-500">AI 功能</Label>
        <Toggle size="sm" pressed={aiOn} onPressedChange={setAiOn}>
          {aiOn ? "开" : "关"}
        </Toggle>
      </div>
      <p className="text-xs text-gray-400">其余设置后续接入（滚轮缩放方向、拖拽导入等）。</p>
    </div>
  );
};

const FormulaPanel = ({ mindmap }: { mindmap: any }) => {
  const [formula, setFormula] = useState("a^2+b^2=c^2");
  const insert = () => {
    const active = mindmap?.renderer?.activeNodeList || [];
    mindmap?.execCommand?.("INSERT_FORMULA", formula, active);
  };
  return (
    <div className="space-y-3">
      <Label className="text-xs text-gray-500">LaTeX 公式</Label>
      <Input value={formula} onChange={(e) => setFormula(e.target.value)} />
      <button className="w-full rounded-md bg-blue-500 px-3 py-2 text-sm text-white hover:bg-blue-600" onClick={insert}>
        插入公式
      </button>
    </div>
  );
};

const NotePanel = ({ mindmap }: { mindmap: any }) => {
  const [note, setNote] = useState("备注内容");
  const apply = () => {
    const active = mindmap?.renderer?.activeNodeList || [];
    active.forEach((node: any) => mindmap?.execCommand?.("SET_NODE_NOTE", node, note));
  };
  return (
    <div className="space-y-3">
      <Label className="text-xs text-gray-500">节点备注</Label>
      <Input value={note} onChange={(e) => setNote(e.target.value)} />
      <button className="w-full rounded-md bg-blue-500 px-3 py-2 text-sm text-white hover:bg-blue-600" onClick={apply}>
        应用到选中节点
      </button>
    </div>
  );
};

const AiPanel = () => {
  const [prompt, setPrompt] = useState("");
  const send = () => window.alert("AI 对话占位，后续接入大模型：\n" + prompt);
  return (
    <div className="space-y-3">
      <Label className="text-xs text-gray-500">AI 对话</Label>
      <textarea
        className="w-full rounded-md border border-gray-200 p-2 text-sm"
        rows={4}
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="输入需求，后续将调用 AI 生成/优化节点"
      />
      <button className="w-full rounded-md bg-blue-500 px-3 py-2 text-sm text-white hover:bg-blue-600" onClick={send}>
        发送
      </button>
    </div>
  );
};

import { sidebarTitles, type SidebarPanel } from "./mindmapSidebarConfig";

export const MindmapSidebar = ({ mindmap, activeNodes, activeTab, onClose }: SidebarProps) => {
  const content = useMemo(() => {
    switch (activeTab as SidebarPanel | null) {
      case "style":
        return <StylePanel activeNodes={activeNodes} />;
      case "base":
        return <BaseStylePanel mindmap={mindmap} />;
      case "theme":
        return <ThemePanel mindmap={mindmap} />;
      case "structure":
        return <StructurePanel mindmap={mindmap} />;
      case "icons":
        return <IconPanel activeNodes={activeNodes} />;
      case "outline":
        return <OutlinePanel mindmap={mindmap} />;
      case "settings":
        return <SettingsPanel mindmap={mindmap} />;
      case "formula":
        return <FormulaPanel mindmap={mindmap} />;
      case "note":
        return <NotePanel mindmap={mindmap} />;
      case "ai":
        return <AiPanel />;
      default:
        return null;
    }
  }, [activeTab, mindmap, activeNodes]);

  const title = useMemo(() => {
    if (!activeTab) return "";
    return sidebarTitles[activeTab as SidebarPanel] ?? "";
  }, [activeTab]);

  return (
    <div
      className={`absolute top-0 bottom-0 right-0 z-20 w-[300px] flex flex-col border-l border-gray-200 bg-white transition-transform duration-300 ease-in-out shadow-lg ${
        activeTab ? "translate-x-0" : "translate-x-full"
      }`}
    >
        <div className="flex items-center justify-between border-b px-4 py-3 shrink-0">
            <span className="font-medium text-gray-700">{title}</span>
            <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
                <X className="h-4 w-4" />
            </button>
        </div>
        <div className="flex-1 overflow-y-auto px-4 py-4">
            {content}
        </div>
    </div>
  );
};