import { LocalTaskComment } from '../../../api';
import { MarkdownText } from '../../../lib/markdown-text';

// Comment kinds rendered here:
//   `request` / `comment` (user), `progress` / `result` / `ask` (agent),
//   `handoff` (system marker for /continue) → rendered as a horizontal
//   divider instead of a card.
export function TimelineTab({ comments }: { comments: LocalTaskComment[] }) {
  return (
    <div className="flex flex-col gap-2">
      {comments.map(c => {
        if (c.kind === 'handoff') {
          return (
            <div key={c.id} className="flex items-center gap-2 my-2">
              <div className="flex-1 border-t border-slate-300" />
              <div className="text-2xs text-slate-500 font-medium px-2 whitespace-nowrap">{c.body}</div>
              <div className="flex-1 border-t border-slate-300" />
            </div>
          );
        }
        return (
          <div key={c.id} className="bg-white border border-slate-200 rounded-xl p-3 shadow-sm">
            <div className="flex justify-between items-center mb-1.5">
              <div className="text-xs font-bold text-slate-700">{c.author}</div>
              <div className="text-2xs text-slate-400">{new Date(c.createdAt).toLocaleString()}</div>
            </div>
            <div className="text-2xs text-slate-400 mb-1.5">{c.kind}</div>
            <MarkdownText text={c.body} />
          </div>
        );
      })}
      {comments.length === 0 && <div className="text-[13px] text-slate-500">コメントなし</div>}
    </div>
  );
}
