import { useStore } from '../store/context'

/** Agent 任务清单卡片：8 步/多步执行状态实时更新 */
export default function TaskCardView({ task }) {
  const { setAutoConfirm, autoConfirmMode } = useStore()
  return (
    <div className="agent-card">
      <div className="ag-head">{task.title}</div>
      <div className="ag-ctx">{task.ctxLine}</div>
      <div className="ag-mode-row">
        <span className="ag-mode-label">确认模式</span>
        <button
          className={'ag-mt-btn' + (autoConfirmMode ? ' active' : '')}
          onClick={() => setAutoConfirm(true)}
        >⚡ 自动确认</button>
        <button
          className={'ag-mt-btn' + (!autoConfirmMode ? ' active' : '')}
          onClick={() => setAutoConfirm(false)}
        >✋ 手动确认</button>
      </div>
      <div className="ag-steps">
        {task.steps.map((s, i) => (
          <div key={i} className={'ag-step ' + s.status}>
            <span className="ag-ico">{s.status === 'done' ? '✓' : s.status === 'doing' ? '↻' : '·'}</span>
            <span className="ag-lbl">{s.label}</span>
            <span className="ag-note">{s.note}</span>
          </div>
        ))}
      </div>
      <div className="ag-foot">💡 每个工具生成后展示卡片，自动模式 5s 后自动确认填入，手动模式需您点击确认。可随时切换模式。</div>
    </div>
  )
}