gc-wing/apps/web/src/widgets/topbar/Topbar.tsx

import { useState } from "react";

interface Props {
  total: number;
  fishing: number;
  transit: number;
  pairLinks: number;
  alarms: number;
  clock: string;
  adminMode?: boolean;
  onLogoClick?: () => void;
  userName?: string;
  onLogout?: () => void;
  theme?: "dark" | "light";
  onToggleTheme?: () => void;
  isSidebarOpen?: boolean;
  onMenuToggle?: () => void;
}

function StatChips({ total, fishing, transit, pairLinks, alarms }: Pick<Props, "total" | "fishing" | "transit" | "pairLinks" | "alarms">) {
  return (
    <>
      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
        <b className="text-xs text-wing-text">{total}</b>척
      </div>
      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
        조업 <b className="text-wing-success">{fishing}</b>
      </div>
      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
        항해 <b className="text-wing-accent">{transit}</b>
      </div>
      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
        쌍연결 <b className="text-wing-warning">{pairLinks}</b>
      </div>
      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
        경고 <b className="text-wing-danger">{alarms}</b>
      </div>
    </>
  );
}

export function Topbar({ total, fishing, transit, pairLinks, alarms, clock, adminMode, onLogoClick, userName, onLogout, theme, onToggleTheme, isSidebarOpen, onMenuToggle }: Props) {
  const [isStatsOpen, setIsStatsOpen] = useState(false);

  return (
    <div className="col-span-full relative z-[1000]">
      <div className="flex h-[44px] items-center gap-2.5 border-b border-wing-border bg-wing-surface px-3.5">
        {/* 햄버거 메뉴 (모바일) */}
        {onMenuToggle && (
          <button
            className="flex cursor-pointer items-center justify-center rounded border border-wing-border bg-transparent p-1 text-wing-muted transition-colors hover:border-wing-accent hover:text-wing-text md:hidden"
            onClick={onMenuToggle}
            aria-label={isSidebarOpen ? "메뉴 닫기" : "메뉴 열기"}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              {isSidebarOpen ? (
                <>
                  <line x1="18" y1="6" x2="6" y2="18" />
                  <line x1="6" y1="6" x2="18" y2="18" />
                </>
              ) : (
                <>
                  <line x1="3" y1="6" x2="21" y2="6" />
                  <line x1="3" y1="12" x2="21" y2="12" />
                  <line x1="3" y1="18" x2="21" y2="18" />
                </>
              )}
            </svg>
          </button>
        )}

        {/* 로고 */}
        <div
          className={`flex items-center gap-1.5 whitespace-nowrap text-sm font-extrabold${onLogoClick ? " cursor-pointer" : ""}`}
          onClick={onLogoClick}
          title={adminMode ? "ADMIN" : undefined}
        >
          <span className="text-wing-accent">WING</span>
          <span className="hidden sm:inline">조업감시·선단연관</span>
          {adminMode ? <span className="text-[10px] text-wing-warning">(ADMIN)</span> : null}
        </div>

        {/* 데스크톱: 인라인 통계 */}
        <div className="ml-auto hidden items-center gap-3.5 md:flex">
          <StatChips total={total} fishing={fishing} transit={transit} pairLinks={pairLinks} alarms={alarms} />
        </div>

        {/* 항상 표시: 시계 + 테마 + 사용자 */}
        <div className="ml-auto flex shrink-0 items-center gap-2.5 md:ml-2.5">
          <span className="whitespace-nowrap text-[10px] font-semibold text-wing-accent">{clock}</span>
          {onToggleTheme && (
            <button
              className="cursor-pointer rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
              onClick={onToggleTheme}
              title={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
            >
              {theme === "dark" ? "Light" : "Dark"}
            </button>
          )}
          {userName && (
            <div className="flex shrink-0 items-center gap-2">
              <span className="hidden whitespace-nowrap text-[10px] font-medium text-wing-text sm:inline">{userName}</span>
              {onLogout && (
                <button
                  className="cursor-pointer whitespace-nowrap rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
                  onClick={onLogout}
                >
                  로그아웃
                </button>
              )}
            </div>
          )}
        </div>
      </div>

      {/* 모바일 통계 바 (펼침 시) — 레이아웃 흐름에 포함, 지도 영역 밀어내기 */}
      {isStatsOpen && (
        <div className="flex items-center justify-center gap-4 border-b border-wing-border bg-wing-surface px-3.5 py-2 md:hidden">
          <StatChips total={total} fishing={fishing} transit={transit} pairLinks={pairLinks} alarms={alarms} />
        </div>
      )}

      {/* 모바일 통계 토글 탭 — topbar 하단 우측에 걸침 */}
      <button
        className="absolute bottom-0 right-3.5 z-10 translate-y-full cursor-pointer rounded-b-md border border-t-0 border-wing-border bg-wing-surface px-2 py-0.5 text-[8px] text-wing-muted transition-colors hover:text-wing-text md:hidden"
        onClick={() => setIsStatsOpen((v) => !v)}
        aria-label={isStatsOpen ? "통계 닫기" : "통계 열기"}
      >
        {isStatsOpen ? "▴" : "▾ 통계"}
      </button>
    </div>
  );
}