import { Component, createMemo, createSignal } from "solid-js";
import { useLocation } from "@solidjs/router";

// 导入组件以注册自定义元素
import "./components";
import { Article, MobileSidebar, DesktopSidebar } from "./components";

const App: Component = () => {
  const location = useLocation();
  const [isSidebarOpen, setIsSidebarOpen] = createSignal(false);

  const currentPath = createMemo(() => {
    // 根据路由加载对应的 markdown 文件
    let path = decodeURIComponent(location.pathname);

    if (!path) path = "/content/";
    if (path.endsWith("/")) path += "index";
    if (!path.endsWith(".md")) path += ".md";

    return path;
  });

  return (
    <div class="min-h-screen bg-gray-50">
      {/* 桌面端固定侧边栏 */}
      <DesktopSidebar />
      {/* 移动端抽屉式侧边栏 */}
      <MobileSidebar
        isOpen={isSidebarOpen()}
        onClose={() => setIsSidebarOpen(false)}
      />
      <header class="fixed top-0 left-0 right-0 bg-white shadow z-30">
        <div class="max-w-4xl mx-auto px-4 py-4 flex items-center gap-4">
          {/* 仅在移动端显示菜单按钮 */}
          <button
            onClick={() => setIsSidebarOpen(true)}
            class="md:hidden text-gray-600 hover:text-gray-900 p-1 rounded hover:bg-gray-100"
            title="目录"
          >
            ☰
          </button>
          <h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
        </div>
      </header>
      <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64">
        <Article src={currentPath()} />
      </main>
    </div>
  );
};

export default App;