/**
 * Queue Statistics Table Component
 */

import type { QueueStats } from '../types';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { formatNumber } from '../utils/formatters';
import { cn } from '@/lib/utils';

interface QueueStatsTableProps {
  queues: QueueStats[];
}

export function QueueStatsTable({ queues }: QueueStatsTableProps) {
  const totalJobs = (queue: QueueStats) => {
    const { jobs } = queue;
    return jobs.waiting + jobs.active + jobs.completed + jobs.failed + jobs.delayed + jobs.paused + 
           (jobs.prioritized || 0) + (jobs['waiting-children'] || 0);
  };

  return (
    <Card className="p-4">
      <CardHeader className="p-0 pb-3">
        <h3 className="text-base font-semibold text-text-primary">Queue Statistics</h3>
      </CardHeader>
      
      <CardContent className="p-0">
        {queues.length > 0 ? (
          <div className="overflow-x-auto">
            <table className="w-full text-xs">
              <thead>
                <tr className="border-b border-border">
                  <th className="text-left py-2 px-3 text-text-secondary font-medium">Service</th>
                  <th className="text-left py-2 px-3 text-text-secondary font-medium">Queue</th>
                  <th className="text-center py-2 px-3 text-text-secondary font-medium">Status</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Waiting</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Active</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Completed</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Failed</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Delayed</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Prioritized</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Children</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Workers</th>
                  <th className="text-right py-2 px-3 text-text-secondary font-medium">Total</th>
                </tr>
              </thead>
              <tbody>
                {queues.map((queue) => (
                  <tr key={queue.name} className="border-b border-border hover:bg-surface-tertiary/50 transition-colors">
                    <td className="py-2 px-3 font-medium text-text-primary">{queue.service}</td>
                    <td className="py-2 px-3 font-medium text-text-primary">{queue.queue}</td>
                    <td className="py-2 px-3 text-center">
                      <span className={cn(
                        'inline-block w-2 h-2 rounded-full',
                        queue.connected ? 'bg-success' : 'bg-danger'
                      )} />
                    </td>
                    <td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.waiting)}</td>
                    <td className="py-2 px-3 text-right">
                      {queue.jobs.active > 0 ? (
                        <span className="text-primary-400 font-medium">{formatNumber(queue.jobs.active)}</span>
                      ) : (
                        <span className="text-text-primary">{queue.jobs.active}</span>
                      )}
                    </td>
                    <td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.completed)}</td>
                    <td className="py-2 px-3 text-right">
                      {queue.jobs.failed > 0 ? (
                        <span className="text-danger font-medium">{formatNumber(queue.jobs.failed)}</span>
                      ) : (
                        <span className="text-text-primary">{queue.jobs.failed}</span>
                      )}
                    </td>
                    <td className="py-2 px-3 text-right text-text-primary">{formatNumber(queue.jobs.delayed)}</td>
                    <td className="py-2 px-3 text-right">
                      {queue.jobs.prioritized && queue.jobs.prioritized > 0 ? (
                        <span className="text-primary-300 font-medium">{formatNumber(queue.jobs.prioritized)}</span>
                      ) : (
                        <span className="text-text-primary">0</span>
                      )}
                    </td>
                    <td className="py-2 px-3 text-right">
                      {queue.jobs['waiting-children'] && queue.jobs['waiting-children'] > 0 ? (
                        <span className="text-warning font-medium">{formatNumber(queue.jobs['waiting-children'])}</span>
                      ) : (
                        <span className="text-text-primary">0</span>
                      )}
                    </td>
                    <td className="py-2 px-3 text-right text-text-primary">
                      {queue.workers ? `${queue.workers.count}/${queue.workers.concurrency}` : '-'}
                    </td>
                    <td className="py-2 px-3 text-right font-medium text-text-primary">{formatNumber(totalJobs(queue))}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="text-center py-6 text-text-secondary text-sm">
            No queue data available
          </div>
        )}
      </CardContent>
    </Card>
  );
}