import { useCallback, useEffect, useState } from "react";
import { listen } from "@tauri-apps/api/event";
import Overlay from "./Overlay";
import GeneralPage from "./pages/General";
import ModelsPage from "./pages/Models";
import EnhancePage from "./pages/Enhance";
import { getSettings, setSettings as persistSettings, toggleDictation } from "./api";
import type { RecordingState, Settings, TranscriptPayload } from "./types";

type Page = "general" | "models" | "enhance";

const NAV: { id: Page; label: string }[] = [
  { id: "general", label: "general" },
  { id: "models", label: "models" },
  { id: "enhance", label: "enhance" },
];

export default function App() {
  if (window.location.hash === "#overlay") {
    return <Overlay />;
  }
  return <SettingsApp />;
}

function SettingsApp() {
  const [page, setPage] = useState<Page>("general");
  const [settings, setSettingsState] = useState<Settings | null>(null);
  const [saveError, setSaveError] = useState<string | null>(null);
  const [recState, setRecState] = useState<RecordingState>("idle");
  const [lastTranscript, setLastTranscript] = useState<TranscriptPayload | null>(null);
  const [pipelineError, setPipelineError] = useState<string | null>(null);

  useEffect(() => {
    getSettings().then(setSettingsState).catch(console.error);
    const subs = [
      listen<{ state: RecordingState }>("recording-state", (e) =>
        setRecState(e.payload.state),
      ),
      listen<TranscriptPayload>("transcript", (e) => {
        setLastTranscript(e.payload);
        setPipelineError(null);
      }),
      listen<{ message: string }>("pipeline-error", (e) =>
        setPipelineError(e.payload.message),
      ),
      // fired when the tray switches profiles behind the UI's back
      listen("settings-changed", () => {
        getSettings().then(setSettingsState).catch(console.error);
      }),
    ];
    return () => {
      subs.forEach((s) => s.then((fn) => fn()));
    };
  }, []);

  const update = useCallback((next: Settings) => {
    setSettingsState(next);
    setSaveError(null);
    persistSettings(next).catch((e) => setSaveError(String(e)));
  }, []);

  return (
    <div className="shell">
      <aside className="sidebar">
        <div className="wordmark">
          <span className="wordmark-glyph" aria-hidden>
            ((•))
          </span>
          <h1>mutterbox</h1>
          <p className="tagline">speak anywhere, type nowhere</p>
        </div>
        <nav>
          {NAV.map((item) => (
            <button
              key={item.id}
              className={page === item.id ? "nav-item active" : "nav-item"}
              onClick={() => setPage(item.id)}
            >
              <span className="nav-marker">{page === item.id ? "▸" : " "}</span>
              {item.label}
            </button>
          ))}
        </nav>
        <div className="sidebar-foot">
          <button
            className={`dictate-btn state-${recState}`}
            onClick={() => toggleDictation()}
          >
            {recState === "recording"
              ? "■ stop"
              : recState === "processing"
                ? "… working"
                : "● dictate"}
          </button>
          <p className="hint">
            {settings ? `hotkey ${settings.hotkey}` : ""}
          </p>
        </div>
      </aside>

      <main className="content">
        {saveError && <div className="banner error">save failed: {saveError}</div>}
        {pipelineError && (
          <div className="banner error">
            {pipelineError}
            <button className="banner-dismiss" onClick={() => setPipelineError(null)}>
              ✕
            </button>
          </div>
        )}
        {settings === null ? (
          <p className="hint">loading…</p>
        ) : page === "general" ? (
          <GeneralPage
            settings={settings}
            onChange={update}
            lastTranscript={lastTranscript}
          />
        ) : page === "models" ? (
          <ModelsPage settings={settings} onChange={update} />
        ) : (
          <EnhancePage settings={settings} onChange={update} />
        )}
      </main>
    </div>
  );
}