TinyWaste/apps/web/src/features/game/components/BottomDock.tsx

import type { OverlayPanel } from '../types';
import type { GameAction, GameView } from '@tinywaste/game-core';
import { getActiveQuestCount, getCurrentPlace, getDominantAlert, getSupplyCounts } from '../hudModel';

export function BottomDock({
  activePanel,
  onOpenPanel,
  onSendAction,
  view,
}: {
  activePanel: OverlayPanel | null;
  onOpenPanel: (panel: OverlayPanel) => void;
  onSendAction: (action: GameAction) => void;
  view: GameView;
}) {
  const supplyCounts = getSupplyCounts(view);
  const activeQuestCount = getActiveQuestCount(view);
  const currentPlace = getCurrentPlace(view);
  const homeRoute = view.map.edges.find((edge) => edge.to === 'home');
  const dominantAlert = getDominantAlert(view);

  return (
    <footer className="command-dock tactical-dock">
      <div className="operator-card tactical-operator">
        <div className="operator-emblem">{view.player.name.slice(0, 1)}</div>
        <div className="operator-copy">
          <span>ACTIVE SURVIVOR</span>
          <strong>{view.player.name}</strong>
        </div>
      </div>

      <div className="dock-nav-groups">
        <div className="dock-tabs">
          <button className="dock-tab active">{currentPlace?.name ?? 'Expedition'}</button>
          <button
            className={`dock-tab ${activePanel === 'blueprints' ? 'active' : ''}`}
            onClick={() => onOpenPanel('blueprints')}
          >
            Crafting
          </button>
          <button
            className={`dock-tab ${activePanel === 'logs' ? 'active' : ''}`}
            onClick={() => onOpenPanel('logs')}
          >
            Logs
          </button>
          <button
            className={`dock-tab ${activePanel === 'inventory' ? 'active' : ''}`}
            onClick={() => onOpenPanel('inventory')}
          >
            Inventory
          </button>
          <button
            className={`dock-tab ${activePanel === 'missions' ? 'active' : ''}`}
            onClick={() => onOpenPanel('missions')}
          >
            Missions
          </button>
        </div>

        <div className="dock-metrics">
          <span>{dominantAlert ? dominantAlert.label : '状态稳定'}</span>
          <span>水 {supplyCounts.water}</span>
          <span>食物 {supplyCounts.food}</span>
          <span>药品 {supplyCounts.medicine}</span>
          <span>任务 {activeQuestCount}</span>
        </div>
      </div>

      <div className="dock-commit">
        {homeRoute ? (
          <button
            className="primary-button dock-commit-button"
            onClick={() => onSendAction({ type: 'travel', toPlaceId: homeRoute.to })}
          >
            返回避难点
          </button>
        ) : (
          <button className="primary-button dock-commit-button" onClick={() => onOpenPanel('inventory')}>
            打开补给终端
          </button>
        )}
      </div>
    </footer>
  );
}