frontend/src/components/StatusCard.tsx

import { RepoStatus } from '../types';

interface StatusCardProps {
  status: RepoStatus | null;
  namespace: string;
  repo: string;
  loading?: boolean;
}

export function StatusCard({ status, namespace, repo, loading }: StatusCardProps) {
  const getStateColor = (state: string) => {
    switch (state) {
      case 'CONNECTED': return 'bg-green-500';
      case 'DISCONNECTED': return 'bg-gray-500';
      case 'ERROR': return 'bg-red-500';
      default: return 'bg-gray-500';
    }
  };

  const getHealthColor = (stage: string) => {
    switch (stage) {
      case 'Running': return 'text-green-400';
      case 'Sleeping': return 'text-yellow-400';
      case 'Building': return 'text-blue-400';
      default: return 'text-gray-400';
    }
  };

  const getHealthBg = (stage: string) => {
    switch (stage) {
      case 'Running': return 'bg-green-500/20';
      case 'Sleeping': return 'bg-yellow-500/20';
      case 'Building': return 'bg-blue-500/20';
      default: return 'bg-gray-500/20';
    }
  };

  if (loading) {
    return (
      <div className="bg-gray-800 rounded-lg p-4 animate-pulse">
        <div className="h-4 bg-gray-700 rounded w-1/3 mb-2"></div>
        <div className="h-6 bg-gray-700 rounded w-1/2"></div>
      </div>
    );
  }

  return (
    <div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
      <div className="flex items-center justify-between mb-2">
        <span className="text-gray-400 text-sm font-medium">{namespace}/{repo}</span>
        <div className={`w-2 h-2 rounded-full ${getStateColor(status?.state || 'DISCONNECTED')}`}></div>
      </div>
      <div className="flex items-center gap-2">
        <span className={`text-2xl font-bold ${getHealthColor(status?.stage || 'Unknown')}`}>
          {status?.stage || 'Unknown'}
        </span>
        <span className={`px-2 py-0.5 rounded text-xs ${getHealthBg(status?.stage || 'Unknown')}`}>
          {status?.state || 'DISCONNECTED'}
        </span>
      </div>
      <div className="text-gray-500 text-xs mt-2">
        Last updated: {status?.last_updated ? new Date(status.last_updated).toLocaleTimeString() : 'Never'}
      </div>
    </div>
  );
}