import { PretrainedIdentity, PretrainedSourceSelect } from './PretrainedSourceSelect';
import { pretrainedSelectionError } from './pretrainedSelection';
import { TrainingMetricsPanel } from './TrainingMetricsPanel';
import { trainingLosses } from './trainingLosses';
import type { PolicyDeployment, TrainingTerrain } from '../rl/deployment';
import {
  OBSTACLE_TASK_ID,
  validatePolicyDeployment,
  validateCustomTerrain,
  readPolicyDeployment,
} from '../rl/deployment';
import type { TrainingSceneCompiler } from '../map/trainingMap';
import type { PlacedMapAsset } from '../map/types';
import { useEffect, useRef, useState, type ReactNode } from 'react';
import { Download, ExternalLink, Link, Play, Server, Square } from 'lucide-react';
import { Badge, Button, ProgressBar, PropertyRow, Select } from '../components/ui';
import { LocalTrainingClient } from './LocalTrainingClient';
import type {
  RewardPreset,
  TrainingDevice,
  TrainingJob,
  TrainingServerInfo,
  WandbMode,
} from './types';
import {
  DEFAULT_TRAINING_ENDPOINT,
  localStored,
  rememberTrainingConnection,
  sessionStored,
  TRAINING_ENDPOINT_KEY,
  TRAINING_JOB_KEY,
  TRAINING_TOKEN_KEY,
} from './storage';

const ACTIVE_STATES = new Set(['queued', 'running']);
function errorText(error: unknown): string {
  return error instanceof Error ? error.message : String(error);
}
function stateLabel(state: TrainingJob['state']): string {
  return {
    queued: '排队中',
    running: '训练中',
    succeeded: '已完成',
    failed: '失败',
    cancelled: '已取消',
  }[state];
}

export function LocalTrainingPanel({
  onPolicyReady,
  compileScene,
  sceneMaps = [],
  sceneDirty = false,
}: {
  onPolicyReady(file: File, deployment?: PolicyDeployment): void | Promise<void>;
  compileScene?: TrainingSceneCompiler;
  sceneMaps?: readonly PlacedMapAsset[];
  sceneDirty?: boolean;
}) {
  const [endpoint, setEndpoint] = useState(() =>
    localStored(TRAINING_ENDPOINT_KEY, DEFAULT_TRAINING_ENDPOINT),
  );
  const [token, setToken] = useState(() => sessionStored(TRAINING_TOKEN_KEY));
  const [server, setServer] = useState<TrainingServerInfo>();
  const [job, setJob] = useState<TrainingJob>();
  const [presets, setPresets] = useState<RewardPreset[]>([]);
  const [rewardPresetId, setRewardPresetId] = useState('');
  const [pretrainedSourceId, setPretrainedSourceId] = useState('');
  const [uploading, setUploading] = useState(false);
  const [connectionRevision, setConnectionRevision] = useState(0);
  const [busy, setBusy] = useState(false),
    [error, setError] = useState<string>();
  const [taskId, setTaskId] = useState('Unitree-Go2-Flat'),
    [numEnvs, setNumEnvs] = useState(4096),
    [maxIterations, setMaxIterations] = useState(2000),
    [seed, setSeed] = useState(42),
    [runName, setRunName] = useState('web'),
    [device, setDevice] = useState<TrainingDevice>('gpu'),
    [gpuIds, setGpuIds] = useState('0'),
    [wandbMode, setWandbMode] = useState<WandbMode>('offline');

  const [terrainPreset, setTerrainPreset] = useState('');
  const [customTerrainBoxes, setCustomTerrainBoxes] = useState<TrainingTerrain>();
  const [terrainParams, setTerrainParams] = useState<Record<string, number>>({});
  const [sensorMode, setSensorMode] = useState<'single_ring_raycast' | 'multi_ring_raycast'>(
    'single_ring_raycast',
  );
  const [sensorCfg, setSensorCfg] = useState<Record<string, number>>({});
  const metadata = server?.taskMetadata?.find((item) => item.id === taskId);
  const sourceSelectionError = pretrainedSelectionError(
    server?.pretrainedSources,
    taskId,
    pretrainedSourceId,
  );
  const selectTask = (id: string) => {
    setTaskId(id);
    setCustomTerrainBoxes(undefined);
    setRewardPresetId('');
    setTerrainParams({});
    setSensorCfg({});
    setSensorMode('single_ring_raycast');
    setTerrainPreset(id === OBSTACLE_TASK_ID ? 'discrete_obstacles' : '');
  };
  const syncMap = () => {
    try {
      if (sceneDirty) throw new Error('请先应用地图草稿，再同步训练地图');
      if (!compileScene || !sceneMaps.length) throw new Error('没有已应用的碰撞地图');
      if (!metadata?.terrainPresets.includes('custom_boxes'))
        throw new Error('当前服务/任务不支持custom_boxes，请升级训练服务');
      const layout = validateCustomTerrain(compileScene());
      setCustomTerrainBoxes(layout);
      setTerrainPreset('custom_boxes');
      setTerrainParams({ size: layout.size, friction: layout.friction });
      setError(undefined);
    } catch (value) {
      setError(errorText(value));
    }
  };
  const connectionEpoch = useRef(0);
  const connected = () => {
    connectionEpoch.current += 1;
    setConnectionRevision(connectionEpoch.current);
    setServer(undefined);
    setJob(undefined);
    setPresets([]);
    setRewardPresetId('');
    setError(undefined);
  };
  useEffect(
    () => () => {
      connectionEpoch.current += 1;
    },
    [],
  );
  const connect = async () => {
    setBusy(true);
    setError(undefined);
    const epoch = ++connectionEpoch.current;
    setConnectionRevision(epoch);
    try {
      const client = new LocalTrainingClient(endpoint, token),
        info = await client.health();
      if (epoch !== connectionEpoch.current) return;
      setServer(info);
      try {
        const nextPresets = await client.presets();
        if (epoch !== connectionEpoch.current) return;
        setPresets(nextPresets);
      } catch {
        setPresets([]);
      }
      try {
        rememberTrainingConnection(client.endpoint, client.token);
      } catch {
        /* 当前会话仍可连接 */
      }
      if (info.tasks.length && !info.tasks.includes(taskId)) selectTask(info.tasks[0]);
      const remembered = info.activeJobId ?? localStored(TRAINING_JOB_KEY);
      if (remembered) {
        try {
          const recovered = await client.job(remembered);
          if (epoch !== connectionEpoch.current) return;
          setJob(recovered);
          try {
            localStorage.setItem(TRAINING_JOB_KEY, recovered.id);
          } catch {
            /* ignore */
          }
        } catch {
          setJob(undefined);
          try {
            localStorage.removeItem(TRAINING_JOB_KEY);
          } catch {
            /* ignore */
          }
        }
      } else {
        setJob(undefined);
      }
      if (!info.ready) setError(info.error ?? '训练服务尚未就绪');
    } catch (value) {
      setServer(undefined);
      setError(errorText(value));
    } finally {
      setBusy(false);
    }
  };

  const jobId = job?.id,
    jobState = job?.state;
  useEffect(() => {
    if (!jobId || !jobState || !ACTIVE_STATES.has(jobState)) return;
    let disposed = false;
    const refresh = async () => {
      try {
        const next = await new LocalTrainingClient(endpoint, token).job(jobId);
        if (!disposed) setJob(next);
      } catch (value) {
        if (!disposed) setError(errorText(value));
      }
    };
    const timer = window.setInterval(() => void refresh(), 1500);
    return () => {
      disposed = true;
      window.clearInterval(timer);
    };
  }, [endpoint, jobId, jobState, token]);

  useEffect(() => {
    const receive = (event: MessageEvent) => {
      if (
        event.origin !== window.location.origin ||
        !event.source ||
        typeof event.data !== 'object'
      )
        return;
      const data = event.data as {
        type?: string;
        sessionId?: string;
        policy?: unknown;
        taskId?: string;
      };
      const source = event.source as Window;
      if (data.type === 'mujoco-tuning-ready') {
        try {
          let resolvedCustomTerrain = customTerrainBoxes;
          let resolvedTerrainParams = terrainParams;
          if (taskId === OBSTACLE_TASK_ID && terrainPreset === 'custom_boxes') {
            if (sceneDirty) throw new Error('请先应用地图草稿，再打开调参');
            if (!compileScene || !sceneMaps.length) throw new Error('没有已应用的碰撞地图');
            resolvedCustomTerrain = validateCustomTerrain(compileScene());
            resolvedTerrainParams = {
              size: resolvedCustomTerrain.size,
              friction: resolvedCustomTerrain.friction,
            };
            setCustomTerrainBoxes(resolvedCustomTerrain);
            setTerrainParams(resolvedTerrainParams);
          }
          source.postMessage(
            {
              type: 'mujoco-tuning-credentials',
              endpoint,
              token,
              trainingContext: {
                taskId: taskId === OBSTACLE_TASK_ID ? taskId : 'Unitree-Go2-Flat',
                seed,
                ...(pretrainedSourceId ? { pretrainedSourceId } : {}),
                ...(taskId === OBSTACLE_TASK_ID
                  ? {
                      taskConfig: {
                        terrainPreset,
                        terrainParams: resolvedTerrainParams,
                        sensorType: 'raycast',
                        sensorCfg: { ...sensorCfg, sensorMode },
                        ...(terrainPreset === 'custom_boxes'
                          ? { customTerrainBoxes: resolvedCustomTerrain }
                          : {}),
                      },
                    }
                  : {}),
              },
            },
            event.origin,
          );
        } catch (value) {
          setError(errorText(value));
        }
      }
      if (data.type === 'mujoco-tuning-import-policy' && data.sessionId) {
        const reply = (ok: boolean, message?: string) => {
          try {
            source.postMessage(
              {
                type: 'mujoco-tuning-import-policy-result',
                sessionId: data.sessionId,
                ok,
                error: message,
              },
              event.origin,
            );
          } catch {
            /* 调参窗口可能已关闭；不影响主工作台继续导入 */
          }
        };
        void (async () => {
          try {
            const policy =
              data.policy === undefined
                ? await new LocalTrainingClient(endpoint, token).downloadBestPolicy(data.sessionId!)
                : data.policy;
            if (!(policy instanceof File) || !/\.onnx$/i.test(policy.name))
              throw new Error('调参工作台返回的 ONNX 策略无效');
            if (policy.size > 64 * 1024 * 1024) throw new Error('ONNX 策略不能超过 64 MiB');
            if (data.taskId === OBSTACLE_TASK_ID) {
              const deployment = readPolicyDeployment(new Uint8Array(await policy.arrayBuffer()));
              if (deployment?.taskId !== OBSTACLE_TASK_ID)
                throw new Error('避障最佳策略缺少匹配部署契约');
              await onPolicyReady(policy, deployment);
            } else await onPolicyReady(policy);
            reply(true);
          } catch (value) {
            const message = errorText(value);
            setError(message);
            reply(false, message);
          }
        })();
      }
    };
    window.addEventListener('message', receive);
    return () => window.removeEventListener('message', receive);
  }, [
    endpoint,
    pretrainedSourceId,
    onPolicyReady,
    token,
    taskId,
    seed,
    terrainPreset,
    terrainParams,
    sensorCfg,
    sensorMode,
    customTerrainBoxes,
    sceneMaps,
    sceneDirty,
    compileScene,
  ]);

  const openTuningDashboard = () => {
    rememberTrainingConnection(endpoint, token);
    window.open(new URL('tuning.html', document.baseURI), '_blank');
  };

  const start = async () => {
    if (uploading) return;
    if (sourceSelectionError) {
      setError(sourceSelectionError);
      return;
    }
    setBusy(true);
    setError(undefined);
    try {
      if (
        taskId === OBSTACLE_TASK_ID &&
        sensorMode === 'multi_ring_raycast' &&
        !metadata?.sensorModes?.includes(sensorMode)
      )
        throw new Error('训练服务不支持multi_ring_raycast，请升级服务');
      const ids =
        device === 'gpu'
          ? gpuIds
              .split(/[\s,]+/)
              .filter(Boolean)
              .map(Number)
          : [];
      if (ids.some((id) => !Number.isInteger(id) || id < 0))
        throw new Error('GPU 编号必须是非负整数');
      for (const [values, schema] of [
        [terrainParams, metadata?.terrainParameters],
        [sensorCfg, metadata?.sensorParameters],
      ] as const) {
        for (const [key, value] of Object.entries(values)) {
          const bounds = schema?.[key];
          if (
            !bounds ||
            !Number.isFinite(value) ||
            value < bounds.min ||
            value > bounds.max ||
            (bounds.integer && !Number.isInteger(value))
          )
            throw new Error(`参数 ${key} 超出允许范围`);
        }
      }
      if ((terrainParams.obstacle_height_min ?? 0.2) > (terrainParams.obstacle_height_max ?? 0.6))
        throw new Error('障碍物最小高度不能超过最大高度');
      if ((sensorCfg.safetyDistance ?? 0.5) >= (sensorCfg.maxDistance ?? 4))
        throw new Error('安全距离必须小于探测距离');
      let resolvedCustomTerrain = customTerrainBoxes;
      let resolvedTerrainParams = terrainParams;
      if (terrainPreset === 'custom_boxes') {
        if (sceneDirty) throw new Error('请先应用地图草稿，再训练');
        if (!compileScene || !sceneMaps.length) throw new Error('没有已应用的碰撞地图');
        resolvedCustomTerrain = validateCustomTerrain(compileScene());
        resolvedTerrainParams = {
          size: resolvedCustomTerrain.size,
          friction: resolvedCustomTerrain.friction,
        };
        setCustomTerrainBoxes(resolvedCustomTerrain);
        setTerrainParams(resolvedTerrainParams);
      }
      const next = await new LocalTrainingClient(endpoint, token).start({
        taskId,
        numEnvs,
        maxIterations,
        seed,
        runName,
        device,
        gpuIds: ids,
        wandbMode,
        rewardPresetId: taskId === 'Unitree-Go2-Flat' ? rewardPresetId || undefined : undefined,
        ...(pretrainedSourceId ? { pretrainedSourceId } : {}),
        ...(terrainPreset ? { terrainPreset, terrainParams: resolvedTerrainParams } : {}),
        ...(terrainPreset === 'custom_boxes' ? { customTerrainBoxes: resolvedCustomTerrain } : {}),
        ...(taskId === OBSTACLE_TASK_ID
          ? { sensorType: 'raycast' as const, sensorCfg: { ...sensorCfg, sensorMode } }
          : {}),
      });
      setJob(next);
      try {
        localStorage.setItem(TRAINING_JOB_KEY, next.id);
      } catch {
        /* ignore */
      }
    } catch (value) {
      setError(errorText(value));
    } finally {
      setBusy(false);
    }
  };
  const cancel = async () => {
    if (!job) return;
    setBusy(true);
    setError(undefined);
    try {
      setJob(await new LocalTrainingClient(endpoint, token).cancel(job.id));
    } catch (value) {
      setError(errorText(value));
    } finally {
      setBusy(false);
    }
  };
  const importResult = async () => {
    if (!job) return;
    setBusy(true);
    setError(undefined);
    try {
      if (job.taskId !== 'Unitree-Go2-Flat' && !job.deployment)
        throw new Error('该任务缺少浏览器部署契约');
      const deployment = job.deployment ? validatePolicyDeployment(job.deployment) : undefined;
      const file = await new LocalTrainingClient(endpoint, token).downloadPolicy(job.id);
      await onPolicyReady(file, deployment);
    } catch (value) {
      setError(errorText(value));
    } finally {
      setBusy(false);
    }
  };
  const active = Boolean(job && ACTIVE_STATES.has(job.state));

  return (
    <div>
      <label className="block text-xs text-text-secondary">
        <span className="mb-1 block">本地训练服务</span>
        <div className="flex gap-2">
          <input
            aria-label="本地训练服务地址"
            className="field h-7 min-w-0 flex-1 px-2 text-xs text-text-primary"
            value={endpoint}
            disabled={busy}
            onChange={(event) => {
              if (busy) return;
              connected();
              setEndpoint(event.target.value);
            }}
          />
          <Button
            icon={<Link className="h-3.5 w-3.5" />}
            disabled={busy || !token.trim()}
            onClick={() => void connect()}
          >
            连接
          </Button>
        </div>
      </label>
      <label className="mt-2 block text-[10px] text-text-tertiary">
        <span className="mb-1 block">访问令牌（服务启动时显示）</span>
        <input
          aria-label="训练服务访问令牌"
          type="password"
          autoComplete="off"
          className="field h-7 w-full px-2 text-xs text-text-primary"
          value={token}
          disabled={busy}
          onChange={(event) => {
            if (busy) return;
            connected();
            setToken(event.target.value);
          }}
        />
      </label>
      <div className="mt-2 flex items-center justify-between rounded-md border border-border bg-surface px-2 py-1.5 text-[10px] text-text-tertiary">
        <span className="flex min-w-0 items-center gap-1.5 truncate">
          <Server className="h-3.5 w-3.5" />
          {server?.trainerRoot ?? '请先启动本地训练服务'}
        </span>
        <Badge tone={server?.ready ? 'success' : 'warning'}>
          {server?.ready ? '可用' : '离线'}
        </Badge>
      </div>
      <Button
        className="mt-2 w-full"
        icon={<ExternalLink className="h-3.5 w-3.5" />}
        onClick={openTuningDashboard}
      >
        打开自调参 Agent 工作台
      </Button>
      {server?.ready && !job && (
        <fieldset disabled={busy} className="mt-3 space-y-2">
          <Field label="训练任务">
            <Select
              aria-label="训练任务"
              className="w-full"
              value={taskId}
              onChange={(event) => selectTask(event.target.value)}
            >
              {server.tasks.map((task) => (
                <option key={task} value={task}>
                  {server.taskMetadata?.find((item) => item.id === task)?.name ?? task}
                </option>
              ))}
            </Select>
          </Field>
          <PretrainedSourceSelect
            sources={server.pretrainedSources}
            taskId={taskId}
            value={pretrainedSourceId}
            onChange={setPretrainedSourceId}
            disabled={busy || uploading}
            upload={{
              endpoint,
              token,
              revision: connectionRevision,
              enabled: Boolean(server.pretrainedUpload?.enabled),
              onBusyChange: setUploading,
              onUploaded: (source) => {
                setServer(
                  (current) =>
                    current && {
                      ...current,
                      pretrainedSources: [
                        ...(current.pretrainedSources ?? []).filter((s) => s.id !== source.id),
                        source,
                      ],
                    },
                );
                setPretrainedSourceId(source.id);
              },
            }}
          />
          {metadata && (
            <>
              <Field label="训练地形">
                <Select
                  aria-label="训练地形"
                  value={terrainPreset}
                  onChange={(e) => {
                    setTerrainPreset(e.target.value);
                    setCustomTerrainBoxes(undefined);
                    setTerrainParams({});
                  }}
                >
                  {taskId !== OBSTACLE_TASK_ID && <option value="">原任务默认地形</option>}
                  {metadata.terrainPresets.map((preset) => (
                    <option key={preset} value={preset}>
                      {TERRAIN_LABELS[preset] ?? preset}
                    </option>
                  ))}
                </Select>
              </Field>
              <Button disabled={busy} onClick={syncMap}>
                检查当前场景地图（可选）
              </Button>
              <p className="text-[10px] text-text-tertiary">
                启动训练时会自动从全部已应用实例重新编译并校验世界AABB，无需预先同步。旋转障碍会膨胀，底板标准化为z=[-0.2,0]；仅保证训练与浏览器使用相同boxes，不等于原OBB。mesh/hfield、地下结构、混合摩擦明确拒绝。
              </p>
              {terrainPreset === 'custom_boxes' && customTerrainBoxes && !sceneDirty && (
                <p role="status">
                  已读取视口中 {customTerrainBoxes.actualObstacleCount}{' '}
                  个自定义障碍物；启动训练时会自动重新编译并校验地图
                </p>
              )}
              {terrainPreset && terrainPreset !== 'custom_boxes' && (
                <div className="grid grid-cols-2 gap-2">
                  {Object.entries(metadata.terrainParameters).map(([key, bounds]) => (
                    <NumberField
                      key={key}
                      label={PARAMETER_LABELS[key] ?? key}
                      value={terrainParams[key] ?? bounds.default}
                      min={bounds.min}
                      max={bounds.max}
                      step={bounds.integer ? 1 : 0.01}
                      onChange={(value) => setTerrainParams((old) => ({ ...old, [key]: value }))}
                    />
                  ))}
                </div>
              )}
              {['rough', 'wave', 'pyramid_stairs'].includes(terrainPreset) && (
                <p>训练专用 box 离散近似布局，不等于编辑器高度场。</p>
              )}
              {taskId === OBSTACLE_TASK_ID && (
                <details open>
                  <summary>避障传感器高级设置</summary>
                  <Field label="传感器模式">
                    <Select
                      aria-label="传感器模式"
                      value={sensorMode}
                      onChange={(event) => setSensorMode(event.target.value as typeof sensorMode)}
                    >
                      <option value="single_ring_raycast">水平32射线 / 81维（默认）</option>
                      <option
                        value="multi_ring_raycast"
                        disabled={!metadata?.sensorModes?.includes('multi_ring_raycast')}
                      >
                        三层48射线 / 97维（非高程图）
                      </option>
                    </Select>
                  </Field>
                  {Object.entries(metadata.sensorParameters).map(([key, bounds]) => (
                    <NumberField
                      key={key}
                      label={PARAMETER_LABELS[key] ?? key}
                      value={sensorCfg[key] ?? bounds.default}
                      min={bounds.min}
                      max={bounds.max}
                      step={0.01}
                      onChange={(value) => setSensorCfg((old) => ({ ...old, [key]: value }))}
                    />
                  ))}
                </details>
              )}
              {!metadata.browserCompatible && (
                <p>此任务可训练，但浏览器不支持其观测契约，不能一键部署。</p>
              )}
            </>
          )}
          <div className="grid grid-cols-2 gap-2">
            <NumberField
              label="并行环境"
              value={numEnvs}
              min={1}
              max={16384}
              onChange={setNumEnvs}
            />
            <NumberField
              label="训练迭代"
              value={maxIterations}
              min={1}
              max={1000000}
              onChange={setMaxIterations}
            />
            <NumberField
              label="随机种子"
              value={seed}
              min={0}
              max={2147483647}
              onChange={setSeed}
            />
            <Field label="运行名称">
              <input
                aria-label="运行名称"
                className="field h-7 w-full px-2 text-xs text-text-primary"
                value={runName}
                onChange={(event) => setRunName(event.target.value)}
              />
            </Field>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <Field label="计算设备">
              <Select
                aria-label="计算设备"
                className="w-full"
                value={device}
                onChange={(event) => setDevice(event.target.value as TrainingDevice)}
              >
                <option value="gpu">GPU</option>
                <option value="cpu">CPU</option>
              </Select>
            </Field>
            <Field label="GPU 编号">
              <input
                aria-label="GPU 编号"
                className="field h-7 w-full px-2 text-xs text-text-primary disabled:opacity-40"
                value={gpuIds}
                disabled={device === 'cpu'}
                onChange={(event) => setGpuIds(event.target.value)}
              />
            </Field>
          </div>
          <Field label="奖励配置">
            <Select
              disabled={taskId !== 'Unitree-Go2-Flat'}
              aria-label="奖励配置 preset"
              className="w-full"
              value={rewardPresetId}
              onChange={(event) => setRewardPresetId(event.target.value)}
            >
              <option value="">仓库默认奖励</option>
              {presets
                .filter((preset) => preset.taskId === 'Unitree-Go2-Flat')
                .map((preset) => (
                  <option key={preset.id} value={preset.id}>
                    {preset.name}
                  </option>
                ))}
            </Select>
          </Field>
          <Field label="实验记录">
            <Select
              aria-label="W&B 模式"
              className="w-full"
              value={wandbMode}
              onChange={(event) => setWandbMode(event.target.value as WandbMode)}
            >
              <option value="offline">本地离线（默认，无需登录）</option>
              <option value="disabled">完全禁用 W&amp;B</option>
              <option value="online">在线 W&amp;B（需要 API Key）</option>
            </Select>
          </Field>
          <Button
            variant="primary"
            className="w-full"
            icon={<Play className="h-3.5 w-3.5" />}
            disabled={busy || uploading || Boolean(sourceSelectionError)}
            onClick={() => void start()}
          >
            发起本地训练
          </Button>
          <p className="text-[10px] leading-4 text-text-tertiary">
            训练使用本地 mjlab
            任务资产，不会把浏览器中的模型上传到网络。服务一次只运行一个训练任务。
          </p>
        </fieldset>
      )}
      {job && (
        <div className="mt-3 rounded-lg border border-border bg-surface p-2.5">
          <div className="mb-2 flex items-center justify-between gap-2">
            <span className="truncate text-xs font-medium text-text-primary" title={job.id}>
              {job.taskId}
            </span>
            <Badge
              tone={
                job.state === 'succeeded'
                  ? 'success'
                  : job.state === 'failed' || job.state === 'cancelled'
                    ? 'warning'
                    : 'accent'
              }
            >
              {stateLabel(job.state)}
            </Badge>
          </div>
          <PretrainedIdentity source={job.pretrained} />
          {job.taskId === 'Unitree-Go2-Rough' && (
            <p>234维 Rough 策略仅支持后端评测，浏览器不可加载。</p>
          )}
          {job.deployment?.terrain && (
            <p className="text-[10px] text-text-tertiary">
              导入将替换当前物理地图并启动配套策略；
              {job.deployment.terrain.approximation ? '训练专用近似布局' : '配套碰撞布局'}
              。请先保存场景。
            </p>
          )}
          <ProgressBar value={job.progress} label="训练进度" />
          <div className="mt-2">
            <PropertyRow label="迭代" value={`${job.iteration} / ${job.maxIterations}`} />
            <PropertyRow label="状态" value={job.message} />
            {trainingLosses(job.logs).map(({ label, value }) => (
              <PropertyRow key={label} label={label} value={value} />
            ))}
          </div>
          <TrainingMetricsPanel key={job.id} jobId={job.id} logs={job.logs} />
          {job.logs.length > 0 && (
            <details className="mt-2">
              <summary className="cursor-pointer text-[10px] text-text-secondary">最近日志</summary>
              <pre className="mt-1 max-h-36 overflow-auto whitespace-pre-wrap break-all rounded bg-app p-2 text-[9px] leading-4 text-text-tertiary">
                {job.logs.slice(-40).join('\n')}
              </pre>
            </details>
          )}
          <div className="mt-3 grid grid-cols-2 gap-2">
            {active ? (
              <Button
                variant="danger"
                className="col-span-2"
                icon={<Square className="h-3.5 w-3.5" />}
                disabled={busy}
                onClick={() => void cancel()}
              >
                停止训练
              </Button>
            ) : (
              <>
                <Button
                  disabled={
                    busy ||
                    !job.artifactReady ||
                    job.taskId === 'Unitree-Go2-Rough' ||
                    (job.deployment && !job.deployment.browserCompatible)
                  }
                  icon={<Download className="h-3.5 w-3.5" />}
                  onClick={() => void importResult()}
                >
                  导入策略
                </Button>
                <Button
                  onClick={() => {
                    setJob(undefined);
                    try {
                      localStorage.removeItem(TRAINING_JOB_KEY);
                    } catch {
                      /* ignore */
                    }
                  }}
                >
                  新建任务
                </Button>
              </>
            )}
          </div>
        </div>
      )}
      {error && (
        <p
          role="alert"
          className="mt-2 break-words rounded bg-danger/10 p-2 text-[10px] leading-4 text-danger"
        >
          {error}
        </p>
      )}
    </div>
  );
}

function Field({ label, children }: { label: string; children: ReactNode }) {
  return (
    <label className="block text-[10px] text-text-tertiary">
      <span className="mb-1 block">{label}</span>
      {children}
    </label>
  );
}
function NumberField({
  label,
  value,
  min,
  max,
  onChange,
  step = 1,
}: {
  label: string;
  value: number;
  min: number;
  max: number;
  step?: number;
  onChange(value: number): void;
}) {
  return (
    <Field label={label}>
      <input
        aria-label={label}
        type="number"
        step={step}
        className="field h-7 w-full px-2 text-xs text-text-primary"
        value={value}
        min={min}
        max={max}
        onChange={(event) => onChange(Number(event.target.value))}
      />
    </Field>
  );
}

const TERRAIN_LABELS: Record<string, string> = {
  custom_boxes: '自定义场景碰撞布局（AABB近似）',
  plane: '平地',
  discrete_obstacles: '离散障碍物',
  rough: '崎岖地面',
  pyramid_stairs: '金字塔台阶',
  wave: '波浪地形',
};
const PARAMETER_LABELS: Record<string, string> = {
  size: '地图尺寸 m',
  obstacle_count: '障碍物数量',
  obstacle_height_min: '最小障碍高度 m',
  obstacle_height_max: '最大障碍高度 m',
  spacing: '障碍物间距 m',
  friction: '地面摩擦',
  roughness: '崎岖高度 m',
  step_height: '台阶高度 m',
  wave_amplitude: '波浪幅度 m',
  fov: '感知角 FOV',
  maxDistance: '探测距离 m',
  safetyDistance: '安全距离 m',
  avoidanceWeight: '避障权重',
};