import { User, ChevronDown } from "lucide-react";
import type { Identity } from "../lib/api";
import { useHealth } from "../lib/health";
import { cn } from "../ui";

function Light({ on, label, unknown }: { on?: boolean; label: string; unknown?: boolean }) {
  const dot = unknown ? "bg-slate-600" : on ? "bg-success shadow-[0_0_8px_rgba(52,211,153,0.7)]" : "bg-danger";
  return (
    <span className="flex items-center gap-1.5 text-[11px] text-slate-500" title={unknown ? `${label}（状态未透出）` : label}>
      <span className={cn("h-1.5 w-1.5 rounded-full", dot)} />
      {label}
    </span>
  );
}

// 顶栏：品牌 · 垂直切换 · 健康灯 · 身份/会话（深色 + 毛玻璃）。
export function TopBar({ identity, setIdentity }: { identity: Identity; setIdentity: (id: Identity) => void }) {
  const h = useHealth();
  return (
    <header className="flex h-12 shrink-0 items-center gap-3 border-b border-line bg-ink-900/80 px-3 backdrop-blur">
      <div className="flex items-center gap-2">
        <div className="flex h-6 w-6 items-center justify-center rounded-md bg-gradient-to-br from-brand to-accent text-xs font-bold text-white">
          S
        </div>
        <span className="brand-gradient text-sm font-semibold">sundynix-agentix</span>
      </div>
      <div className="relative">
        <select
          className="appearance-none rounded-md border border-line bg-ink-800 py-1 pl-2.5 pr-7 text-xs text-slate-300 focus:border-brand focus:outline-none"
          defaultValue="通用版"
        >
          <option>通用版</option>
          <option>法律版</option>
          <option>医疗版</option>
        </select>
        <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
      </div>
      <div className="ml-2 flex items-center gap-3">
        <Light on={h.gateway} label="Gateway" />
        <Light on={h.persisted} label="DB" />
        <Light unknown label="NATS" />
        <Light unknown label="Milvus" />
        <Light unknown label="Neo4j" />
      </div>
      <div className="ml-auto flex items-center gap-2">
        <div className="relative">
          <User className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500" />
          <input
            className="w-24 rounded-md border border-line bg-ink-800 py-1 pl-7 pr-2 text-xs text-slate-200 focus:border-brand focus:outline-none"
            value={identity.userId}
            onChange={(e) => setIdentity({ ...identity, userId: e.target.value })}
            title="用户"
          />
        </div>
        <input
          className="w-24 rounded-md border border-line bg-ink-800 px-2 py-1 text-xs text-slate-200 focus:border-brand focus:outline-none"
          value={identity.sessionId}
          onChange={(e) => setIdentity({ ...identity, sessionId: e.target.value })}
          title="会话"
        />
      </div>
    </header>
  );
}