import type { Environment } from '../types';
import { StatusBadge } from './Navbar';
import { esc, formatTime } from '../lib/utils';

interface EnvironmentListProps {
  environments: Environment[];
  onSelectEnvironment?: (env: Environment) => void;
}

export function EnvironmentList({ environments, onSelectEnvironment }: EnvironmentListProps) {
  if (!environments || environments.length === 0) {
    return (
      <div className="rounded-xl border border-border bg-surface-1 p-8 text-center text-text-muted">
        No active environments
      </div>
    );
  }

  return (
    <div className="space-y-2">
      {environments.map(env => {
        const isAcp = env.worker_type === 'acp';
        const typeLabel = isAcp ? 'ACP Agent' : 'Claude Code';
        const typeColor = isAcp ? 'bg-brand/15 text-brand' : 'bg-status-running/15 text-status-running';

        return (
          <button
            key={env.id}
            type="button"
            onClick={() => onSelectEnvironment?.(env)}
            disabled={isAcp}
            className={`flex w-full items-center justify-between rounded-xl border border-border bg-surface-1 px-4 py-3 text-left transition-colors ${isAcp ? 'cursor-default opacity-80' : 'hover:border-border-light cursor-pointer'}`}
          >
            <div className="flex items-center gap-3">
              <div>
                <div className="flex items-center gap-2">
                  <span className="font-medium text-text-primary">{env.machine_name || env.id}</span>
                  <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${typeColor}`}>{typeLabel}</span>
                </div>
                <div className="text-sm text-text-muted">{env.directory || ''}</div>
              </div>
            </div>
            <div className="text-right">
              <StatusBadge status={env.status} />
              <div className="mt-1 text-xs text-text-muted">{env.branch || ''}</div>
            </div>
          </button>
        );
      })}
    </div>
  );
}