import React, { useState } from 'react';
import { useTraining } from '../context/TrainingContext';

export default function PrototypeDebugPanel() {
  const [open, setOpen] = useState(false);
  const { state, applyDebugSettings, resetAll } = useTraining();
  const { debug } = state;

  return (
    <div className="dt-debug-panel">
      {open && (
        <div className="dt-debug-body">
          <div className="dt-debug-section">
            <label>车辆吨位</label>
            <select
              value={debug.vehicleTonnage}
              onChange={(e) => applyDebugSettings({ vehicleTonnage: Number(e.target.value) })}
            >
              <option value={4.5}>4.5 吨</option>
              <option value={18}>18 吨</option>
              <option value={49}>49 吨</option>
            </select>
          </div>
          <div className="dt-debug-section">
            <label>OCR 结果</label>
            <select
              value={debug.ocrMode}
              onChange={(e) => applyDebugSettings({ ocrMode: e.target.value })}
            >
              <option value="success">识别成功</option>
              <option value="fail">识别失败</option>
              <option value="mismatch">字段不一致</option>
            </select>
          </div>
          <div className="dt-debug-section">
            <label>摄像头权限</label>
            <select
              value={debug.cameraPermission}
              onChange={(e) => applyDebugSettings({ cameraPermission: e.target.value })}
            >
              <option value="allow">允许</option>
              <option value="deny">拒绝</option>
            </select>
          </div>
          <div className="dt-debug-section">
            <label>视频状态</label>
            <select
              value={debug.videoStatus}
              onChange={(e) => applyDebugSettings({ videoStatus: e.target.value })}
            >
              <option value="incomplete">未完成</option>
              <option value="completed">已完成</option>
            </select>
          </div>
          <div className="dt-debug-section">
            <label>提车状态</label>
            <select
              value={debug.pickupStatus}
              onChange={(e) => applyDebugSettings({ pickupStatus: e.target.value })}
            >
              <option value="pending">待核验</option>
              <option value="locked">已锁定</option>
              <option value="single_sign">单方签字</option>
              <option value="both_signed">双方签字完成</option>
              <option value="revoked">任务撤销</option>
            </select>
          </div>
          <button type="button" className="dt-debug-reset" onClick={resetAll}>
            重置全部培训数据
          </button>
        </div>
      )}
      <button type="button" className="dt-debug-toggle" onClick={() => setOpen(!open)} title="原型控制台">
        {open ? '×' : '调试'}
      </button>
    </div>
  );
}
