import { useState } from "react";
import { useAppStore } from "../store/useAppStore";
import { useModeStore } from "../store/useModeStore";
import { applyTheme, readTheme, type ThemeMode } from "../lib/theme";
import type { Mode, WsStatus } from "../lib/types";
import { Tag } from "./primitives";
import { Icon, type IconName } from "./Icon";
import { AwakenBadge } from "./status";

const MODE_LABEL: Record<Mode, string> = {
  chat: "对话", code: "代码", home: "家居", work: "工作", docs: "知识库",
  voice: "语音", vision: "视觉", agents: "子代理", settings: "设置",
};
const MODE_ICON: Record<Mode, IconName> = {
  chat: "chat", code: "terminal", home: "home", work: "folder", docs: "docs",
  voice: "mic", vision: "vision", agents: "agent", settings: "settings",
};

const wsMeta: Record<WsStatus, { label: string; tone: "ok" | "warn" | "neutral" | "err" }> = {
  idle: { label: "未连接", tone: "neutral" },
  connecting: { label: "连接中", tone: "warn" },
  connected: { label: "实时", tone: "ok" },
  reconnecting: { label: "重连中", tone: "warn" },
  disconnected: { label: "已断开", tone: "err" },
};

export function TopBar(): React.ReactNode {
  const wsStatus = useAppStore((s) => s.wsStatus);
  const mood = useAppStore((s) => s.mood);
  const mode = useModeStore((s) => s.mode);
  const [theme, setTheme] = useState<ThemeMode>(readTheme);

  const toggleTheme = () => {
    const next: ThemeMode = theme === "dark" ? "light" : "dark";
    applyTheme(next);
    setTheme(next);
  };

  const meta = wsMeta[wsStatus];

  return (
    <header className="glass sticky top-0 z-30 flex h-[var(--mu-topbar-h)] items-center gap-3 border-b border-[var(--mu-glass-border)] px-4">
      <div className="flex items-center gap-2">
        <img src="/icon.svg" alt="Cyrene" className="h-7 w-7" />
        <div className="leading-tight">
          <div className="text-sm font-semibold">Cyrene · 昔涟</div>
          <div className="text-[11px] text-[var(--mu-text-lo)]">
            <span className="inline-flex items-center gap-1">
              <Icon name={MODE_ICON[mode]} size={12} />
              {MODE_LABEL[mode]}
            </span>
          </div>
        </div>
      </div>

      <div className="flex-1" />

      {mood ? <Tag tone="accent">心情 · {mood}</Tag> : null}

      <AwakenBadge />

      <Tag tone={meta.tone}>
        <span className={`inline-block h-1.5 w-1.5 rounded-full ${wsStatus === "connected" ? "bg-[var(--mu-ok)]" : "mu-blink"}`} />
        {meta.label}
      </Tag>

      <button
        onClick={() => { window.location.hash = "#/admin"; }}
        aria-label="管理面板"
        title="管理面板 /admin"
        className="inline-flex h-8 w-8 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-sm transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
      >
        <Icon name="shield" size={18} />
      </button>
      <button
        onClick={toggleTheme}
        aria-label="切换主题"
        className="inline-flex h-8 w-8 items-center justify-center rounded-[var(--mu-radius)] bg-[var(--mu-surface-4)] text-sm transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-5)] active:scale-95"
      >
        <Icon name={theme === "dark" ? "sun" : "moon"} size={18} />
      </button>
    </header>
  );
}