vignette/apps/web/src/components/shell/Topbar.tsx

import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Icon } from "../ui/Icon";
import { useAuth, roleLabel } from "../../lib/auth";

/** Vignette 워드마크 — 비네트(조리개) inline SVG. dev_dashboard 마크 계승. */
function BrandMark() {
  return (
    <svg viewBox="0 0 26 26" width={26} height={26} fill="none" aria-hidden="true">
      <circle cx="13" cy="13" r="11" stroke="var(--accent)" strokeWidth="2" />
      <path
        d="M8 14.5c1.4 1.7 3 2.5 5 2.5s3.6-.8 5-2.5"
        stroke="var(--accent)"
        strokeWidth="2"
        strokeLinecap="round"
      />
      <circle cx="13" cy="9" r="1.6" fill="var(--clay)" />
    </svg>
  );
}

const THEME_KEY = "vignette.theme";

/** 라이트/다크 토글 (data-theme 반영). 토큰만으로 전환. */
function useTheme(): [boolean, () => void] {
  const [dark, setDark] = useState<boolean>(() => {
    try {
      const saved = localStorage.getItem(THEME_KEY);
      if (saved) return saved === "dark";
    } catch {
      /* 무시 */
    }
    return (
      typeof window !== "undefined" &&
      window.matchMedia?.("(prefers-color-scheme: dark)").matches
    );
  });
  useEffect(() => {
    const root = document.documentElement;
    if (dark) root.setAttribute("data-theme", "dark");
    else root.removeAttribute("data-theme");
    try {
      localStorage.setItem(THEME_KEY, dark ? "dark" : "light");
    } catch {
      /* 무시 */
    }
  }, [dark]);
  return [dark, () => setDark((d) => !d)];
}

function initials(name?: string | null): string {
  const trimmed = (name ?? "").trim();
  if (!trimmed) return "·";
  // 한글이면 첫 글자, 영문이면 첫 글자 대문자
  return trimmed.slice(0, 1);
}

export interface TopbarProps {
  /** 역할 컨텍스트 라벨 오버라이드 (없으면 user.role 라벨) */
  contextLabel?: string;
}

/** 공통 톱바 (56px). 브랜드 + 역할 라벨 + 테마/사용자/로그아웃. §6.3 */
export function Topbar({ contextLabel }: TopbarProps) {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [dark, toggleTheme] = useTheme();

  const label = contextLabel ?? (user ? roleLabel(user.role) : null);

  const onLogout = async () => {
    await logout();
    navigate("/login", { replace: true });
  };

  return (
    <header className="vg-topbar">
      <Link className="vg-topbar__brand" to={user ? "/" : "/login"}>
        <span className="vg-topbar__mark">
          <BrandMark />
        </span>
        <span className="vg-topbar__wm">
          <span className="v">Vignette</span>
        </span>
      </Link>
      {label ? <span className="vg-topbar__role">{label}</span> : null}

      <span className="vg-topbar__spacer" />

      <div className="vg-topbar__actions">
        <button
          type="button"
          className="vg-iconbtn"
          onClick={toggleTheme}
          aria-label={dark ? "라이트 모드로" : "다크 모드로"}
          title={dark ? "라이트 모드" : "다크 모드"}
        >
          <Icon name={dark ? "sun" : "moon"} size={18} />
        </button>

        {user ? (
          <>
            <span className="vg-topbar__user">
              <span className="vg-topbar__avatar" aria-hidden="true">
                {initials(user.name)}
              </span>
              <span className="vg-topbar__uname">{user.name}</span>
            </span>
            <button
              type="button"
              className="vg-iconbtn"
              onClick={onLogout}
              aria-label="로그아웃"
              title="로그아웃"
            >
              <Icon name="logout" size={18} />
            </button>
          </>
        ) : null}
      </div>
    </header>
  );
}