import { memo } from 'react';
import { ActivityEvent, activityKindLabel, activityEventTitle, formatActivityMeta, formatActivityTimestamp } from '../../lib/utils';
import { MarkdownText } from '../../lib/markdown-text';

// Kinds whose `note` field carries free-form text that may use Markdown
// (LLM reasoning / preview, final result body, ASK question body, untagged
// other-log lines). Structured log kinds (tool calls, preflight numbers,
// movement-state lines like `complete -> next_step`) stay as plain text —
// Markdown interpretation would corrupt their underscores/asterisks.
const MD_KINDS = new Set<string>(['preview', 'final', 'ask', 'other']);

const KIND_COLORS: Record<string, { dot: string; badge: string; badgeText: string; border: string }> = {
  movement_start:   { dot: 'bg-blue-600',   badge: 'bg-blue-100',   badgeText: 'text-blue-700',   border: 'border-slate-200' },
  movement_complete:{ dot: 'bg-blue-600',   badge: 'bg-blue-100',   badgeText: 'text-blue-700',   border: 'border-slate-200' },
  tool:             { dot: 'bg-teal-600',   badge: 'bg-teal-100',   badgeText: 'text-teal-700',   border: 'border-teal-200' },
  preview:          { dot: 'bg-blue-600',   badge: 'bg-blue-100',   badgeText: 'text-blue-700',   border: 'border-blue-200' },
  final:            { dot: 'bg-green-600',  badge: 'bg-green-100',  badgeText: 'text-green-700',  border: 'border-green-200' },
  ask:              { dot: 'bg-amber-500',  badge: 'bg-amber-100',  badgeText: 'text-amber-700',  border: 'border-amber-200' },
  preflight:        { dot: 'bg-purple-400', badge: 'bg-purple-50',  badgeText: 'text-purple-600', border: 'border-purple-100' },
  other:            { dot: 'bg-slate-400',  badge: 'bg-slate-100',  badgeText: 'text-slate-600',  border: 'border-slate-200' },
};

export const ActivityEventCard = memo(function ActivityEventCard({ event, isLast }: { event: ActivityEvent; isLast?: boolean }) {
  const colors = KIND_COLORS[event.kind] ?? KIND_COLORS.other!;
  const meta = formatActivityMeta(event.workerId, event.mode);

  return (
    <div className="grid gap-3" style={{ gridTemplateColumns: '16px minmax(0,1fr)' }}>
      <div className="flex flex-col items-center pt-2 relative">
        <div className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${colors.dot}`} />
        {!isLast && <div className="flex-1 w-px bg-slate-200 mt-1" />}
      </div>
      <div className={`border rounded-xl p-2.5 mb-2.5 ${colors.border} bg-white`}>
        <div className="flex items-center gap-2 flex-wrap">
          <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold font-mono tracking-wide ${colors.badge} ${colors.badgeText}`}>
            {activityKindLabel(event.kind)}
          </span>
          <span className="text-[13px] font-bold text-slate-900 min-w-0 truncate flex-1">
            {activityEventTitle(event)}
          </span>
          {event.timestamp && (
            <span className="text-2xs text-slate-500 flex-shrink-0">
              {formatActivityTimestamp(event.timestamp)}
            </span>
          )}
        </div>
        {event.note && (
          MD_KINDS.has(event.kind) ? (
            <div className="mt-1.5">
              <MarkdownText text={event.note} />
            </div>
          ) : (
            <div className="mt-1.5 text-xs text-slate-600 whitespace-pre-wrap break-words leading-relaxed">
              {event.note}
            </div>
          )
        )}
        {meta && (
          <div className="mt-1 text-2xs text-slate-400">{meta}</div>
        )}
      </div>
    </div>
  );
});
