import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import { UpdatesPage } from "./pages/UpdatesPage";
import { MailPage } from "./pages/MailPage";
import { MailDetailPage } from "./pages/MailDetailPage";
import { ToolsPage } from "./pages/ToolsPage";
import { ConfigsPage } from "./pages/ConfigsPage";
import { ContextSimulatorPage } from "./pages/ContextSimulatorPage";
import { HomePage } from "./pages/HomePage";
import {
  GenericWebPageDetailPage,
  MarkdownWebPageDetailPage,
  MailWebPageDetailPage,
} from "./pages/WebPageDetailPage";

function App() {
  return (
    <BrowserRouter>
      <div className="min-h-screen flex flex-col">
        <header className="sticky top-0 z-50 bg-white/80 backdrop-blur border-b border-gray-200">
          <div className="max-w-5xl mx-auto px-5 h-[52px] flex items-center justify-between">
            <Link
              to="/"
              className="text-xl font-bold text-gray-900 no-underline tracking-tight"
            >
              iAs
            </Link>
            <nav className="flex gap-1">
              <Link
                to="/updates"
                className="px-3.5 py-1.5 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition"
              >
                更新日志
              </Link>
              <Link
                to="/mail"
                className="px-3.5 py-1.5 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition"
              >
                邮件
              </Link>
              <Link
                to="/tools"
                className="px-3.5 py-1.5 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition"
              >
                工具
              </Link>
              <Link
                to="/configs"
                className="px-3.5 py-1.5 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition"
              >
                配置
              </Link>
              <Link
                to="/context"
                className="px-3.5 py-1.5 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition"
              >
                上下文
              </Link>
            </nav>
          </div>
        </header>
        <main className="flex-1 max-w-5xl mx-auto px-5 py-6 pb-16 w-full">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/updates/*" element={<UpdatesPage />} />
            <Route path="/mail/messages/:id" element={<MailDetailPage />} />
            <Route path="/mail/:slug" element={<MailWebPageDetailPage />} />
            <Route path="/md/:slug" element={<MarkdownWebPageDetailPage />} />
            <Route path="/mail" element={<MailPage />} />
            <Route path="/web/:pageType/:slug" element={<GenericWebPageDetailPage />} />
            <Route path="/tools" element={<ToolsPage />} />
            <Route path="/configs" element={<ConfigsPage />} />
            <Route path="/context" element={<ContextSimulatorPage />} />
          </Routes>
        </main>
      </div>
    </BrowserRouter>
  );
}

export default App;