CA/frontend/src/components/TopNav.tsx

import { useState, useEffect } from 'react';
import { TESTIDS } from '@/utils/testids';

interface TopNavProps {
  onLogout?: () => void;
  onToggleMenu?: () => void;
  isMenuOpen?: boolean;
}

function Clock() {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <span className="font-mono tabular-nums">
      {time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
    </span>
  );
}

export function TopNav({ onLogout, onToggleMenu, isMenuOpen = false }: TopNavProps) {
  return (
    <nav className="h-[54px] shrink-0 bg-bg-card/95 border-b border-border flex items-center px-4 sm:px-5 z-50 backdrop-blur-md">
      {onToggleMenu && (
        <button
          type="button"
          onClick={onToggleMenu}
          aria-label="打开菜单"
          aria-expanded={isMenuOpen}
          aria-controls="app-drawer"
          data-testid={TESTIDS.hamburger}
          className="lg:hidden mr-2.5 -ml-0.5 w-9 h-9 flex items-center justify-center rounded-lg text-text-secondary hover:bg-bg-hover transition-colors"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      )}

      <div className="flex items-center gap-3 min-w-0">
        <div
          className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-mist flex items-center justify-center shadow-soft shrink-0"
          aria-hidden
        >
          <svg className="w-4 h-4 fill-white" viewBox="0 0 24 24">
            <path d="M12 3c-1.2 2.4-3.5 4-6 4 .6 3.4 2.8 6.2 6 7.5 3.2-1.3 5.4-4.1 6-7.5-2.5 0-4.8-1.6-6-4zm0 14.5c-2.2-.9-4-2.5-5.2-4.5C5.5 15.2 4 18 4 21h16c0-3-1.5-5.8-2.8-8-1.2 2-3 3.6-5.2 4.5z" />
          </svg>
        </div>
        <div className="min-w-0 leading-tight">
          <span className="brand-mark text-[16px] block truncate">CBPOA</span>
          <span className="text-[11px] text-text-muted hidden sm:block truncate">
            武汉儿童呼吸疾病风险评估
          </span>
        </div>
      </div>

      <div className="w-px h-6 bg-border ml-4 mr-4 hidden md:block" />

      <span className="text-[12px] text-text-secondary hidden md:inline truncate">
        监测 · 预警 · 空间风险
      </span>

      <div className="ml-auto flex items-center gap-4">
        <span className="text-[12px] text-text-muted hidden sm:inline">
          <Clock />
        </span>
        {onLogout && (
          <button
            type="button"
            onClick={onLogout}
            className="text-[12px] text-text-muted hover:text-danger transition-colors px-2 py-1 rounded-md hover:bg-danger-light/60"
          >
            退出
          </button>
        )}
      </div>
    </nav>
  );
}