import { useEffect, useState } from "react";
import TitleBar from "./components/TitleBar";
import { getWorkspaceMeta, updateWorkspaceMeta } from "./db";
import { applyTheme, useUi } from "./store/ui";

export default function App() {
  const { theme, sidebarWidth, sidebarCollapsed } = useUi();
  const [dbStatus, setDbStatus] = useState<string>("connecting…");

  // Theme handling (system-aware)
  useEffect(() => {
    applyTheme(theme);
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    const onChange = () => applyTheme(theme);
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, [theme]);

  // M0 smoke test: SQLite round-trip through the migration-created table
  useEffect(() => {
    (async () => {
      try {
        const meta = await getWorkspaceMeta();
        await updateWorkspaceMeta({ name: meta.name }); // write round-trip
        setDbStatus(
          `SQLite OK — workspace “${meta.name}”, onboarded=${meta.onboarded}`,
        );
      } catch (e) {
        setDbStatus(`SQLite ERROR: ${String(e)}`);
      }
    })();
  }, []);

  return (
    <div className="flex h-full flex-col">
      <TitleBar />
      <div className="flex min-h-0 flex-1">
        {/* Sidebar (placeholder — page tree lands in Milestone 1) */}
        {!sidebarCollapsed && (
          <aside
            style={{ width: sidebarWidth }}
            className="shrink-0 border-r border-divider bg-bg-sidebar p-2"
          >
            <div className="rounded px-2 py-1 text-sm font-medium text-text-secondary hover:bg-bg-hover">
              My Workspace
            </div>
            <div className="mt-4 px-2 text-[11px] font-semibold uppercase tracking-wide text-text-tertiary">
              Private
            </div>
            <div className="mt-1 rounded px-2 py-1 text-sm text-text-secondary hover:bg-bg-hover">
              Getting started
            </div>
          </aside>
        )}

        {/* Content area */}
        <main className="flex min-w-0 flex-1 flex-col overflow-y-auto">
          <div className="mx-auto w-full max-w-[708px] px-6 pt-24">
            <h1 className="text-[2.5rem] font-bold leading-tight">
              Notara
            </h1>
            <p className="mt-3 text-text-secondary">
              Milestone 0 shell — Tauri v2 · React · SQLite · Notion tokens.
            </p>
            <p className="mt-6 text-sm text-text-tertiary">{dbStatus}</p>
          </div>
        </main>
      </div>
    </div>
  );
}