import { SubtaskActivity } from '../../../api';
import { useTranslation } from 'react-i18next';
import { statusTone, formatStatusLabel, parseActivityLog } from '../../../lib/utils';
import { ActivityTimeline } from '../../activity/ActivityTimeline';

interface SubtaskActivitySectionProps {
  subtaskActivities: SubtaskActivity[];
}

function SubtaskActivitySummary({ activity }: { activity: SubtaskActivity }) {
  const tone = statusTone(activity.status);
  const events = parseActivityLog(activity.activityLog);
  const isActive = ['running', 'waiting_human', 'waiting_subtasks'].includes(activity.status);
  const isDone = activity.status === 'succeeded' || activity.status === 'failed';

  return (
    <div className="border border-slate-100 rounded-lg p-2.5">
      <div className="flex items-center gap-2 mb-1">
        <span
          className="px-1.5 py-0.5 rounded-full text-[10px] font-bold"
          style={{ background: tone.bg, color: tone.fg }}
        >
          {formatStatusLabel(activity.status)}
        </span>
        <span className="text-xs font-medium text-slate-700">
          #{activity.issueNumber}
        </span>
        {activity.currentMovement && isActive && (
          <span className="text-2xs text-slate-400 font-mono">
            {activity.currentMovement}
            {activity.currentActivity && (
              <span className="ml-1 text-slate-300">/ {activity.currentActivity}</span>
            )}
          </span>
        )}
        {isDone && (
          <span className="text-2xs text-slate-400">
            {events.length} events
          </span>
        )}
      </div>

      {isActive && events.length > 0 && (
        <div className="ml-2 mt-1">
          <ActivityTimeline events={events} emptyLabel="" limit={3} />
        </div>
      )}
    </div>
  );
}

export function SubtaskActivitySection({ subtaskActivities }: SubtaskActivitySectionProps) {
  const { t } = useTranslation('detail');
  if (subtaskActivities.length === 0) return null;

  const completed = subtaskActivities.filter(
    s => s.status === 'succeeded' || s.status === 'failed' || s.status === 'cancelled',
  ).length;
  const total = subtaskActivities.length;
  const progressPct = total > 0 ? Math.round((completed / total) * 100) : 0;

  return (
    <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
      <div className="flex items-center justify-between mb-3">
        <div className="text-[13px] font-bold text-slate-800">{t('subtasks.activityTitle')}</div>
        <div className="text-xs text-slate-500">{completed}/{total} {t('subtasks.done')}</div>
      </div>
      <div className="w-full bg-slate-100 rounded-full h-1.5 mb-4">
        <div className="bg-accent h-1.5 rounded-full transition-all" style={{ width: `${progressPct}%` }} />
      </div>
      <div className="flex flex-col gap-2">
        {subtaskActivities.map(activity => (
          <SubtaskActivitySummary key={activity.jobId} activity={activity} />
        ))}
      </div>
    </div>
  );
}
