'use client';

import { cn } from '@/lib/cn';
import type { Mission, MissionStatus } from '@/lib/types';

interface MissionTimelineProps {
  missions: Mission[];
}

const statusOrder: MissionStatus[] = ['planning', 'active', 'paused', 'completed', 'failed'];

const statusStyles: Record<MissionStatus, { dot: string; label: string; badge: string }> = {
  planning: {
    dot: 'bg-gray-400',
    label: 'text-gray-400',
    badge: 'bg-gray-600/20 text-gray-300',
  },
  active: {
    dot: 'bg-blue-400',
    label: 'text-blue-400',
    badge: 'bg-blue-600/20 text-blue-400',
  },
  paused: {
    dot: 'bg-warning',
    label: 'text-warning',
    badge: 'bg-warning/20 text-warning',
  },
  completed: {
    dot: 'bg-success',
    label: 'text-success',
    badge: 'bg-success/20 text-success',
  },
  failed: {
    dot: 'bg-error',
    label: 'text-error',
    badge: 'bg-error/20 text-error',
  },
};

function sortMissions(missions: Mission[]): Mission[] {
  return [...missions].sort((a, b) => {
    const aIdx = statusOrder.indexOf(a.status);
    const bIdx = statusOrder.indexOf(b.status);
    if (aIdx !== bIdx) return aIdx - bIdx;
    return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
  });
}

export function MissionTimeline({ missions }: MissionTimelineProps): React.ReactElement {
  if (missions.length === 0) {
    return (
      <div className="py-6 text-center">
        <p className="text-sm text-text-muted">No missions for this project</p>
      </div>
    );
  }

  const sorted = sortMissions(missions);

  return (
    <ol className="relative space-y-0">
      {sorted.map((mission, idx) => {
        const styles = statusStyles[mission.status] ?? statusStyles.planning;
        const isLast = idx === sorted.length - 1;
        return (
          <li key={mission.id} className="relative flex gap-4 pb-6 last:pb-0">
            {/* Vertical line */}
            {!isLast && <div className="absolute left-2.5 top-5 h-full w-px bg-surface-border" />}
            {/* Status dot */}
            <div
              className={cn('mt-1 h-5 w-5 shrink-0 rounded-full border-2 border-bg', styles.dot)}
            />
            <div className="flex-1 rounded-lg border border-surface-border bg-surface-card p-3">
              <div className="flex items-start justify-between gap-2">
                <span className="text-sm font-medium text-text-primary">{mission.name}</span>
                <span className={cn('shrink-0 rounded-full px-2 py-0.5 text-xs', styles.badge)}>
                  {mission.status}
                </span>
              </div>
              {mission.description && (
                <p className="mt-1 text-xs text-text-muted">{mission.description}</p>
              )}
              <p className="mt-2 text-xs text-text-muted">
                Created {new Date(mission.createdAt).toLocaleDateString()}
              </p>
            </div>
          </li>
        );
      })}
    </ol>
  );
}