import { Component, createSignal, onMount } from 'solid-js';
import { useLocation } from '@solidjs/router';
import { parseMarkdown } from './markdown';

// 导入组件以注册自定义元素
import './components';

const App: Component = () => {
  const location = useLocation();
  const [content, setContent] = createSignal('');
  const [currentPath, setCurrentPath] = createSignal('');

  onMount(async () => {
    // 根据路由加载对应的 markdown 文件
    let path = decodeURIComponent(location.pathname.slice(1));
    if (!path) {
      path = '/content/index.md';
    } else if (!path.startsWith('/content/')) {
      path = `/content/${path}`;
    }
    // 确保有 .md 扩展名
    if (!path.endsWith('.md')) {
      path = `${path}.md`;
    }
    setCurrentPath(path);
    try {
      const response = await fetch(path);
      if (response.ok) {
        const text = await response.text();
        setContent(text);
      } else {
        setContent('# 欢迎使用 TTRPG Tools\n\n没有找到对应的内容文件。');
      }
    } catch (error) {
      setContent('# 欢迎使用 TTRPG Tools\n\n这是一个 TTRPG 文档工具箱。\n\n## 功能\n\n- 使用 `:md-dice[2d6+d8]` 插入骰子组件\n- 使用 `:md-table[./data.csv]` 插入表格组件');
    }
  });

  return (
    <div class="min-h-screen bg-gray-50">
      <header class="bg-white shadow">
        <div class="max-w-4xl mx-auto px-4 py-4">
          <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">
        <article class="prose prose-lg" data-src={currentPath()}>
          <div innerHTML={parseMarkdown(content())} />
        </article>
      </main>
    </div>
  );
};

export default App;