import { Globe, Hand, Play } from './Icons';
import { STATUS_LABEL, type Task } from '../types';

export function TopBar({ task, browserOpen, onToggleBrowser, onTakeover, onTakeoverDone }: {
  task: Task | null;
  browserOpen: boolean;
  onToggleBrowser: () => void;
  onTakeover: () => void;
  onTakeoverDone: () => void;
}) {
  const canBrowse = Boolean(task?.live_session);
  const canTakeover = Boolean(task?.live_session && task.status === 'running' && !task.takeover);
  return (
    <header className="topbar">
      <div className="topbar-copy">
        <h1>{task ? task.business_name || '任务' : '新任务'}</h1>
        <p className="topbar-sub" title={task?.inputs.goal ?? ''}>
          {task ? task.inputs.goal ?? task.id : '告诉我你要在学校系统里办什么'}
        </p>
      </div>
      <div className="topbar-actions">
        {task && <span className={`status-chip ${task.status}`} role="status">{STATUS_LABEL[task.status] ?? task.status}</span>}
        {task?.takeover ? (
          <button type="button" className="primary-button small" onClick={onTakeoverDone} data-testid="takeover-done">
            <Play size={16} />接管完成，继续
          </button>
        ) : (
          <button type="button" className="secondary-button small" disabled={!canTakeover} onClick={onTakeover} data-testid="takeover">
            <Hand size={16} />我来接管
          </button>
        )}
        <button
          type="button"
          className={`secondary-button small${browserOpen ? ' active' : ''}`}
          disabled={!canBrowse && !browserOpen}
          onClick={onToggleBrowser}
          aria-pressed={browserOpen}
          data-testid="toggle-browser"
        >
          <Globe size={16} />{browserOpen ? '收起浏览器' : '浏览器'}
        </button>
      </div>
    </header>
  );
}