"use client";

import type { Transcript } from "@/lib/annotations";
import { formatTime } from "@/lib/annotations";

export default function TranscriptEditor({ draft, readOnly, onChange, onSave, onClose, onDelete }: {
  draft: { index: number; row: Transcript };
  readOnly: boolean;
  onChange: (row: Transcript) => void;
  onSave: () => void;
  onClose: () => void;
  onDelete: () => void;
}) {
  const row = draft.row;
  return <aside className="annotation-sidebar" aria-label="对话转写编辑栏">
    <div className="editor-heading"><div><span className="eyebrow">{draft.index === -1 ? "新增对话转写" : readOnly ? "转写详情" : "编辑对话转写"}</span><h2>{row.role === "agent" ? "机器人" : "用户"}发言</h2></div><button className="icon-button" aria-label="关闭转写编辑" onClick={onClose}>×</button></div>
    <div className="editor-body">
      <div className="decision-card"><span>片段时间</span><strong>{formatTime(row.start_ms)} — {formatTime(row.end_ms)}</strong><small>也可拖动时间轴上片段的左右边界。</small></div>
      <label className="form-field"><span>说话人</span><select aria-label="转写说话人" disabled={readOnly} value={row.role} onChange={event => onChange({ ...row, role: event.target.value as Transcript["role"] })}><option value="agent">机器人</option><option value="user">用户</option></select></label>
      <div className="form-two"><label className="form-field"><span>开始时间（毫秒）</span><input aria-label="转写开始时间" type="number" min="0" readOnly={readOnly} value={row.start_ms} onChange={event => onChange({ ...row, start_ms: Number(event.target.value) })} /></label><label className="form-field"><span>结束时间（毫秒）</span><input aria-label="转写结束时间" type="number" min="1" readOnly={readOnly} value={row.end_ms} onChange={event => onChange({ ...row, end_ms: Number(event.target.value) })} /></label></div>
      <label className="form-field"><span>转写文本</span><textarea aria-label="转写文本" rows={7} readOnly={readOnly} placeholder="填写这段发言的内容" value={row.transcript} onChange={event => onChange({ ...row, transcript: event.target.value })} /></label>
      {!readOnly && <div className="transcript-editor-actions"><button className="button primary" onClick={onSave}>{draft.index === -1 ? "添加片段" : "应用修改"}</button><button className="button ghost" onClick={onClose}>关闭</button></div>}
      {!readOnly && draft.index >= 0 && <div className="editor-bottom"><span>修改后保存到项目</span><button className="delete-button" onClick={onDelete}>删除片段</button></div>}
    </div>
  </aside>;
}