import "./app.css";

type ThemeMode = "light" | "dark";

const themeStorageKey = "frontend-starter-theme";
const app = document.querySelector<HTMLDivElement>("#app");

function getPreferredTheme(): ThemeMode {
  const stored = window.localStorage.getItem(themeStorageKey);
  if (stored === "light" || stored === "dark") {
    return stored;
  }

  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}

function applyTheme(theme: ThemeMode): void {
  document.documentElement.classList.toggle("dark", theme === "dark");
  document.documentElement.dataset.theme = theme;
  window.localStorage.setItem(themeStorageKey, theme);
}

function toggleTheme(): void {
  const nextTheme: ThemeMode = document.documentElement.classList.contains("dark") ? "light" : "dark";
  applyTheme(nextTheme);
  renderThemeLabel(nextTheme);
}

function renderThemeLabel(theme: ThemeMode): void {
  const themeLabel = document.querySelector<HTMLSpanElement>("#theme-label");
  if (themeLabel) {
    themeLabel.textContent = theme === "dark" ? "Dark" : "Light";
  }
}

async function loadApiDemo(): Promise<void> {
  const apiResult = document.querySelector<HTMLPreElement>("#api-result");
  if (!apiResult) {
    return;
  }

  apiResult.textContent = "Loading /api/demo/hello ...";

  try {
    const response = await fetch("/api/demo/hello");
    if (!response.ok) {
      throw new Error(`Request failed with status ${response.status}`);
    }

    const payload = await response.json();
    apiResult.textContent = JSON.stringify(payload, null, 2);
  } catch (error) {
    const message = error instanceof Error ? error.message : "Unknown error";
    apiResult.textContent = `API request failed: ${message}`;
  }
}

function renderShell(): void {
  if (!app) {
    return;
  }

  app.innerHTML = `
    <main class="min-h-screen bg-slate-100 text-slate-900 transition-colors dark:bg-slate-950 dark:text-slate-100">
      <section class="mx-auto flex max-w-5xl flex-col gap-8 px-6 py-10">
        <header class="flex flex-col gap-4 rounded-3xl border border-slate-200 bg-white/90 p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900/80">
          <div class="flex items-center justify-between gap-4">
            <div class="space-y-2">
              <p class="text-sm uppercase tracking-[0.3em] text-sky-600 dark:text-sky-300">Frontend Starter</p>
              <h1 class="text-4xl font-semibold">Tailwind v4 + Font Awesome Free v7 + 双主题</h1>
            </div>
            <button id="theme-toggle" class="inline-flex items-center gap-2 rounded-full border border-slate-300 px-4 py-2 text-sm dark:border-slate-700">
              <i class="fa-solid fa-circle-half-stroke"></i>
              <span id="theme-label"></span>
            </button>
          </div>
          <p class="max-w-3xl text-sm leading-7 text-slate-600 dark:text-slate-300">
            这个样例目录对应教程里的前端初始化主线：项目创建、样式栈、图标库、主题切换、API 联调和宿主托管。
          </p>
        </header>

        <section class="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
          <article class="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="mb-4 flex items-center gap-3 text-lg font-medium">
              <i class="fa-solid fa-wand-magic-sparkles text-sky-500"></i>
              <span>当前页面验证什么</span>
            </div>
            <ul class="space-y-3 text-sm leading-7 text-slate-600 dark:text-slate-300">
              <li>项目级 npm 源通过 <code>.npmrc</code> 固定为 <code>https://npm.feinian.net</code></li>
              <li>样式层使用 Tailwind v4，图标来自 Font Awesome Free v7</li>
              <li>主题默认跟随系统，并支持手动切换与持久化</li>
              <li>通过 <code>/api/demo/hello</code> 验证与后端样例的最小联调闭环</li>
            </ul>
          </article>

          <article class="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="mb-4 flex items-center gap-3 text-lg font-medium">
              <i class="fa-solid fa-plug text-emerald-500"></i>
              <span>API Demo</span>
            </div>
            <button id="reload-api" class="mb-4 inline-flex items-center gap-2 rounded-full bg-slate-900 px-4 py-2 text-sm text-white dark:bg-slate-100 dark:text-slate-900">
              <i class="fa-solid fa-rotate-right"></i>
              <span>重新加载 API</span>
            </button>
            <pre id="api-result" class="min-h-52 overflow-auto rounded-2xl bg-slate-950 p-4 text-xs leading-6 text-slate-100"></pre>
          </article>
        </section>
      </section>
    </main>
  `;
}

renderShell();

const initialTheme = getPreferredTheme();
applyTheme(initialTheme);
renderThemeLabel(initialTheme);
void loadApiDemo();

document.querySelector<HTMLButtonElement>("#theme-toggle")?.addEventListener("click", toggleTheme);
document.querySelector<HTMLButtonElement>("#reload-api")?.addEventListener("click", () => {
  void loadApiDemo();
});