import { useState } from "react";
import { applyTheme, readTheme, type ThemeMode } from "../lib/theme";
import { createSubSession, getAuthToken } from "../lib/api";
import { useAppStore } from "../store/useAppStore";
import { Icon, type IconName } from "./Icon";
import { Tag } from "./primitives";

/**
 * Left rail — NOT a behavior-mode list (design/01 §3: mode switching is driven
 * at runtime by the agent / user, and rendered per message). This is a small
 * navigation rail: brand + connection status + theme + admin/settings entry.
 *
 * Two surface variants share the same NavContent:
 *   - Sidebar  (desktop): fixed rail, `hidden md:flex`.
 *   - MobileNav(mobile):  drawer overlay opened from TopBar's hamburger button
 *     (`md:hidden`), with a scrim + a spring slide-in panel. Content is shared
 *     so desktop and mobile never diverge.
 */

function NavContent({ onNavigate }: { onNavigate: () => void }): React.ReactNode {
  const wsStatus = useAppStore((s) => s.wsStatus);
  const mood = useAppStore((s) => s.mood);
  const sessions = useAppStore((s) => s.sessions);
  const activeSessionId = useAppStore((s) => s.activeSessionId);
  const setSessions = useAppStore((s) => s.setSessions);
  const setActiveSession = useAppStore((s) => s.setActiveSession);
  const [theme, setTheme] = useState<ThemeMode>(readTheme);
  const [creating, setCreating] = useState(false);
  const connected = wsStatus === "connected";
  const wsLabel = connected ? "实时连接" : wsStatus === "expired" ? "登录过期" : "未连接";
  const hasToken = !!getAuthToken();

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

  // Main session pinned first; secondary sessions follow by creation time.
  const sessionList = Object.values(sessions).sort((a, b) => {
    if (a.type !== b.type) return a.type === "main" ? -1 : 1;
    return a.createdAt - b.createdAt;
  });

  const selectSession = (id: string) => {
    setActiveSession(id);
    onNavigate();
  };

  const createSession = async () => {
    if (creating) return;
    setCreating(true);
    try {
      const meta = await createSubSession();
      // Optimistically append so the new session shows immediately; the backend
      // will return it on the next GET /sessions too.
      const next = Object.values(useAppStore.getState().sessions);
      setSessions([...next, ...(next.some((s) => s.id === meta.id) ? [] : [meta])]);
      setActiveSession(meta.id);
      onNavigate();
    } catch {
      // Backend not wired yet — leave the list unchanged.
    } finally {
      setCreating(false);
    }
  };

  return (
    <>
      <div className="flex items-center gap-2 px-2 py-2">
        <img src="/images/Cyrene_Avatar/2nd_Form/Cyrene-2F-N-Happy-1-192x192.png" alt="Cyrene" className="h-7 w-7 rounded-full object-cover" />
        <div className="leading-tight">
          <div className="text-sm font-semibold">Cyrene</div>
          <div className="text-[11px] text-[var(--mu-text-lo)]">昔涟</div>
        </div>
      </div>

      {/* connection status */}
      <NavItem
        active={connected}
        icon="channel"
        label={wsLabel}
        onClick={onNavigate}
        hint={wsStatus}
      />

      {mood ? (
        <div className="px-2 py-1 text-[11px] text-[var(--mu-text-lo)]">
          心情 · {mood}
        </div>
      ) : null}

      {/* conversation sessions (design/16 §2) — main fixed, secondary created */}
      {hasToken ? (
        <div className="flex flex-col gap-1">
          <div className="px-2 pt-1 text-[11px] text-[var(--mu-text-lo)]">
            会话
          </div>
          {sessionList.map((s) => (
            <NavItem
              key={s.id}
              active={s.id === activeSessionId}
              icon={s.type === "main" ? "chat" : "folder"}
              label={s.title ?? (s.type === "main" ? "主会话" : "次级会话")}
              onClick={() => selectSession(s.id)}
            />
          ))}
          <button
            onClick={() => void createSession()}
            disabled={creating}
            className="flex items-center gap-2.5 rounded-[var(--mu-radius)] px-3 py-2 text-sm text-[var(--mu-text-mid)] transition-all duration-200 ease-[var(--mu-spring)] hover:bg-[var(--mu-surface-4)] active:scale-[0.98] disabled:opacity-60"
          >
            <Icon name="chat" size={18} />
            <span>{creating ? "创建中…" : "＋ 新建会话"}</span>
          </button>
        </div>
      ) : null}

      <div className="mt-auto flex flex-col gap-1">
        <NavItem
          icon="settings"
          label="设置"
          onClick={() => {
            window.location.hash = "#/admin/system";
            onNavigate();
          }}
        />
        <NavItem
          icon="shield"
          label="管理面板"
          onClick={() => {
            window.location.hash = "#/admin";
            onNavigate();
          }}
        />
        <NavItem
          icon={theme === "dark" ? "sun" : "moon"}
          label={theme === "dark" ? "浅色" : "深色"}
          onClick={toggleTheme}
        />
        {!hasToken ? <Tag tone="warn">未登录</Tag> : null}
      </div>
    </>
  );
}

/** Desktop left rail. */
export function Sidebar(): React.ReactNode {
  return (
    <nav className="glass hidden h-full w-[var(--mu-sidebar-w)] shrink-0 flex-col gap-1 border-r border-[var(--mu-glass-border)] p-3 md:flex">
      <NavContent onNavigate={() => {}} />
    </nav>
  );
}

/** Mobile drawer — overlay + scrim + spring slide-in panel. */
export function MobileNav({ open, onClose }: { open: boolean; onClose: () => void }): React.ReactNode {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-40 md:hidden" role="dialog" aria-modal="true">
      {/* scrim */}
      <div
        className="absolute inset-0 bg-black/50 backdrop-blur-[2px]"
        onClick={onClose}
        aria-label="关闭侧边栏"
      />
      {/* panel */}
      <nav className="glass absolute inset-y-0 left-0 flex w-[var(--mu-sidebar-w)] max-w-[80vw] flex-col gap-1 border-r border-[var(--mu-glass-border)] p-3"
        style={{ animation: "mu-drawer-in 0.3s var(--mu-spring) both" }}
      >
        <div className="flex items-center justify-between px-2 pb-1">
          <span className="text-xs font-medium text-[var(--mu-text-lo)]">菜单</span>
          <button
            onClick={onClose}
            aria-label="关闭"
            className="inline-flex h-8 w-8 items-center justify-center rounded-[var(--mu-radius)] text-[var(--mu-text-mid)] transition-all duration-200 hover:bg-[var(--mu-surface-4)] active:scale-95"
          >
            <Icon name="close" size={18} />
          </button>
        </div>
        <NavContent onNavigate={onClose} />
      </nav>
    </div>
  );
}

function NavItem({
  icon,
  label,
  onClick,
  active = false,
  hint,
}: {
  icon: IconName;
  label: string;
  onClick: () => void;
  active?: boolean;
  hint?: string;
}): React.ReactNode {
  return (
    <button
      onClick={onClick}
      className={`flex items-center gap-2.5 rounded-[var(--mu-radius)] px-3 py-2 text-sm transition-all duration-200 ease-[var(--mu-spring)] active:scale-[0.98] ${
        active
          ? "bg-[var(--mu-accent)]/15 font-medium text-[var(--mu-accent-hi)]"
          : "text-[var(--mu-text-mid)] hover:bg-[var(--mu-surface-4)]"
      }`}
    >
      <Icon name={icon} size={18} />
      <span>{label}</span>
      {hint ? <span className="ml-auto text-[10px] text-[var(--mu-text-lo)]">{hint}</span> : null}
    </button>
  );
}