import { useSLATracking } from '@/hooks/useSLATracking';
import { Progress } from '@/components/ui/progress';
import { Badge } from '@/components/ui/badge';
import { Clock, Pause, Play, AlertTriangle } from 'lucide-react';
import { formatWorkingHours, getTimeUntilNextWorking } from '@/utils/slaTracker';

interface SLATrackerProps {
  startDate: string | Date;
  deadline: string | Date;
  className?: string;
  showDetails?: boolean;
}

export function SLATracker({ startDate, deadline, className = '', showDetails = true }: SLATrackerProps) {
  const slaStatus = useSLATracking(startDate, deadline);

  if (!slaStatus) {
    return null;
  }

  const getProgressColor = () => {
    if (slaStatus.progress >= 100) return 'bg-red-500';
    if (slaStatus.progress >= 75) return 'bg-orange-500';
    if (slaStatus.progress >= 50) return 'bg-yellow-500';
    return 'bg-green-500';
  };

  const getStatusBadgeColor = () => {
    if (slaStatus.progress >= 100) return 'bg-red-100 text-red-800 border-red-200';
    if (slaStatus.progress >= 75) return 'bg-orange-100 text-orange-800 border-orange-200';
    if (slaStatus.progress >= 50) return 'bg-yellow-100 text-yellow-800 border-yellow-200';
    return 'bg-green-100 text-green-800 border-green-200';
  };

  return (
    <div className={`space-y-2 ${className}`}>
      {/* Status Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Clock className="w-4 h-4 text-gray-600" />
          <span className="text-sm font-medium text-gray-700">SLA Progress</span>
          
          {/* Pause/Play indicator */}
          {slaStatus.isPaused ? (
            <Badge variant="outline" className="bg-gray-100 text-gray-600 border-gray-300 text-xs">
              <Pause className="w-3 h-3 mr-1" />
              Paused
            </Badge>
          ) : (
            <Badge variant="outline" className="bg-blue-100 text-blue-600 border-blue-300 text-xs">
              <Play className="w-3 h-3 mr-1" />
              Active
            </Badge>
          )}
        </div>
        
        <Badge variant="outline" className={`${getStatusBadgeColor()} text-xs font-semibold`}>
          {slaStatus.statusText}
        </Badge>
      </div>

      {/* Progress Bar */}
      <div className="relative">
        <Progress 
          value={slaStatus.progress} 
          className="h-2"
          indicatorClassName={getProgressColor()}
        />
        {slaStatus.isPaused && (
          <div className="absolute inset-0 bg-gray-200 bg-opacity-50 rounded-full flex items-center justify-center">
            <Pause className="w-3 h-3 text-gray-500" />
          </div>
        )}
      </div>

      {/* Details */}
      {showDetails && (
        <div className="flex items-center justify-between text-xs text-gray-600">
          <div className="flex items-center gap-3">
            <span>
              <span className="font-medium">Elapsed:</span> {formatWorkingHours(slaStatus.elapsedHours)}
            </span>
            <span>
              <span className="font-medium">Remaining:</span> {formatWorkingHours(slaStatus.remainingHours)}
            </span>
          </div>
          <span className="font-medium">{slaStatus.progress.toFixed(1)}%</span>
        </div>
      )}

      {/* Paused Message */}
      {slaStatus.isPaused && (
        <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-md border border-gray-200">
          <AlertTriangle className="w-4 h-4 text-amber-500 flex-shrink-0" />
          <span className="text-xs text-gray-700">
            {getTimeUntilNextWorking()}
          </span>
        </div>
      )}
    </div>
  );
}