// src/pages/agent-office/components/ActivityItem.jsx
import { AGENT_META } from '../constants.js';

const STATUS_STYLE = {
  succeeded: { bg: '#065f46', fg: '#34d399', label: '✓ 완료' },
  failed:    { bg: '#7f1d1d', fg: '#fca5a5', label: '✗ 실패' },
  working:   { bg: '#1e3a5f', fg: '#60a5fa', label: '⏳ 진행' },
  pending:   { bg: '#92400e', fg: '#fbbf24', label: '⏳ 대기' },
};

const LEVEL_STYLE = {
  error:   { icon: '❌', cls: 'level-error' },
  warning: { icon: '⚠️', cls: 'level-warning' },
  info:    { icon: '·',  cls: 'level-info' },
};

function formatTime(ts) {
  if (!ts) return '';
  const d = new Date(ts);
  const now = new Date();
  const isToday = d.toDateString() === now.toDateString();
  const time = d.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' });
  return isToday ? time : `${d.getMonth() + 1}/${d.getDate()} ${time}`;
}

export default function ActivityItem({ item, onSelectAgent }) {
  const meta = AGENT_META[item.agent_id];
  const color = meta?.color || '#6b7280';
  const name = meta?.displayName || item.agent_id;
  const isTask = item.type === 'task';
  const status = STATUS_STYLE[item.status] || STATUS_STYLE.pending;
  const level = LEVEL_STYLE[item.level] || LEVEL_STYLE.info;
  const highlight = isTask && (item.status === 'pending' || item.status === 'working');

  return (
    <div
      className={`ao-activity-item ${isTask ? 'is-task' : 'is-log'} ${highlight ? 'is-highlight' : ''}`}
      onClick={() => onSelectAgent(item.agent_id)}
      role="button"
      tabIndex={0}
    >
      <span className="ao-activity-dot" style={{ background: color }} aria-hidden="true" />
      <div className="ao-activity-body">
        <div className="ao-activity-line">
          <span className="ao-activity-agent" style={{ color }}>{name}</span>
          {isTask
            ? <span className="ao-activity-badge" style={{ background: status.bg, color: status.fg }}>{status.label}</span>
            : <span className={`ao-activity-level ${level.cls}`}>{level.icon}</span>}
        </div>
        <div className="ao-activity-msg">{item.message}</div>
      </div>
      <div className="ao-activity-meta">
        <span className="ao-activity-time">{formatTime(item.created_at)}</span>
        {isTask && item.duration_seconds != null && (
          <span className="ao-activity-dur">{item.duration_seconds}s</span>
        )}
      </div>
    </div>
  );
}