cim_summary/frontend/src/components/QueueStatus.tsx

import React, { useState, useEffect } from 'react';
import { Clock, CheckCircle, AlertCircle, PlayCircle } from 'lucide-react';

interface QueueStatusProps {
  refreshTrigger?: number;
}

interface QueueStats {
  queueLength: number;
  processingCount: number;
  totalJobs: number;
  completedJobs: number;
  failedJobs: number;
}

interface ProcessingJob {
  id: string;
  type: string;
  status: 'pending' | 'processing' | 'completed' | 'failed';
  createdAt: string;
  startedAt?: string;
  completedAt?: string;
  data: {
    documentId: string;
    userId: string;
  };
}

const QueueStatus: React.FC<QueueStatusProps> = ({ refreshTrigger }) => {
  const [stats, setStats] = useState<QueueStats | null>(null);
  const [activeJobs, setActiveJobs] = useState<ProcessingJob[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchQueueStatus = async () => {
    try {
      const response = await fetch('/api/documents/queue/status', {
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
          'Content-Type': 'application/json',
        },
      });

      if (response.ok) {
        const result = await response.json();
        if (result.success) {
          setStats(result.data.stats);
          setActiveJobs(result.data.activeJobs || []);
        }
      }
    } catch (error) {
      console.error('Failed to fetch queue status:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchQueueStatus();
    
    // Poll every 5 seconds
    const interval = setInterval(fetchQueueStatus, 5000);
    return () => clearInterval(interval);
  }, [refreshTrigger]);

  if (loading) {
    return (
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div className="animate-pulse">
          <div className="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
          <div className="space-y-2">
            <div className="h-3 bg-gray-200 rounded"></div>
            <div className="h-3 bg-gray-200 rounded w-5/6"></div>
          </div>
        </div>
      </div>
    );
  }

  if (!stats) {
    return (
      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <p className="text-gray-500">Unable to load queue status</p>
      </div>
    );
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'completed':
        return <CheckCircle className="h-4 w-4 text-green-600" />;
      case 'failed':
        return <AlertCircle className="h-4 w-4 text-red-600" />;
      case 'processing':
        return <PlayCircle className="h-4 w-4 text-blue-600" />;
      default:
        return <Clock className="h-4 w-4 text-yellow-600" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed':
        return 'text-green-600 bg-green-50';
      case 'failed':
        return 'text-red-600 bg-red-50';
      case 'processing':
        return 'text-blue-600 bg-blue-50';
      default:
        return 'text-yellow-600 bg-yellow-50';
    }
  };

  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-medium text-gray-900">Processing Queue</h3>
        <button
          onClick={fetchQueueStatus}
          className="text-sm text-blue-600 hover:text-blue-800"
        >
          Refresh
        </button>
      </div>

      {/* Queue Statistics */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div className="text-center">
          <div className="text-2xl font-bold text-blue-600">{stats.queueLength}</div>
          <div className="text-sm text-gray-600">Queued</div>
        </div>
        <div className="text-center">
          <div className="text-2xl font-bold text-orange-600">{stats.processingCount}</div>
          <div className="text-sm text-gray-600">Processing</div>
        </div>
        <div className="text-center">
          <div className="text-2xl font-bold text-green-600">{stats.completedJobs}</div>
          <div className="text-sm text-gray-600">Completed</div>
        </div>
        <div className="text-center">
          <div className="text-2xl font-bold text-red-600">{stats.failedJobs}</div>
          <div className="text-sm text-gray-600">Failed</div>
        </div>
      </div>

      {/* Active Jobs */}
      {activeJobs.length > 0 && (
        <div>
          <h4 className="text-sm font-medium text-gray-900 mb-3">Active Jobs</h4>
          <div className="space-y-2">
            {activeJobs.map((job) => (
              <div key={job.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  {getStatusIcon(job.status)}
                  <div>
                    <div className="text-sm font-medium text-gray-900">
                      {job.type === 'document_processing' ? 'Document Processing' : job.type}
                    </div>
                    <div className="text-xs text-gray-500">
                      ID: {job.data.documentId.slice(0, 8)}...
                    </div>
                  </div>
                </div>
                <div className="flex items-center space-x-2">
                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(job.status)}`}>
                    {job.status}
                  </span>
                  {job.startedAt && (
                    <span className="text-xs text-gray-500">
                      {new Date(job.startedAt).toLocaleTimeString()}
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Queue Health Indicator */}
      <div className="mt-4 pt-4 border-t border-gray-200">
        <div className="flex items-center justify-between">
          <span className="text-sm text-gray-600">Queue Health</span>
          <div className="flex items-center space-x-2">
            {stats.queueLength === 0 && stats.processingCount === 0 ? (
              <div className="flex items-center space-x-1">
                <CheckCircle className="h-4 w-4 text-green-600" />
                <span className="text-sm text-green-600">Idle</span>
              </div>
            ) : stats.processingCount > 0 ? (
              <div className="flex items-center space-x-1">
                <PlayCircle className="h-4 w-4 text-blue-600" />
                <span className="text-sm text-blue-600">Active</span>
              </div>
            ) : (
              <div className="flex items-center space-x-1">
                <Clock className="h-4 w-4 text-yellow-600" />
                <span className="text-sm text-yellow-600">Pending</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default QueueStatus;