import { Link } from 'react-router-dom';

export type UploadStatus = 'pending' | 'uploading' | 'success' | 'error';

export interface UploadProgressItem {
  id: string;
  filename: string;
  autoTitle: string;
  status: UploadStatus;
  progress: number;
  error?: string;
  jobId?: string;
}

interface UploadProgressListProps {
  uploads: UploadProgressItem[];
  onRetry?: (id: string) => void;
}

export function UploadProgressList({ uploads, onRetry }: UploadProgressListProps) {
  const completedCount = uploads.filter(u => u.status === 'success').length;
  const totalCount = uploads.length;

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium text-gray-700">
        Uploading Videos ({completedCount} of {totalCount} complete)
      </div>

      <div className="border border-gray-200 rounded-lg divide-y divide-gray-200">
        {uploads.map((upload) => (
          <div key={upload.id} className="px-4 py-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3 min-w-0 flex-1">
                <StatusIcon status={upload.status} />
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-medium text-gray-900 truncate">
                    {upload.filename}
                  </p>
                  {upload.status === 'success' && upload.jobId && (
                    <p className="text-xs text-gray-500">
                      Job: "{upload.autoTitle}"
                    </p>
                  )}
                  {upload.status === 'error' && upload.error && (
                    <p className="text-xs text-red-600">{upload.error}</p>
                  )}
                </div>
              </div>

              <div className="flex items-center gap-2 ml-4">
                {upload.status === 'pending' && (
                  <span className="text-sm text-gray-500">Pending</span>
                )}
                {upload.status === 'uploading' && (
                  <span className="text-sm text-blue-600">{upload.progress}%</span>
                )}
                {upload.status === 'success' && upload.jobId && (
                  <Link
                    to={`/jobs/${upload.jobId}`}
                    className="text-sm text-blue-600 hover:text-blue-800"
                  >
                    View Job
                  </Link>
                )}
                {upload.status === 'error' && onRetry && (
                  <button
                    type="button"
                    onClick={() => onRetry(upload.id)}
                    className="text-sm text-blue-600 hover:text-blue-800"
                  >
                    Retry
                  </button>
                )}
              </div>
            </div>

            {upload.status === 'uploading' && (
              <div className="mt-2 w-full bg-gray-200 rounded-full h-1.5">
                <div
                  className="bg-blue-600 h-1.5 rounded-full transition-all duration-300"
                  style={{ width: `${upload.progress}%` }}
                />
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function StatusIcon({ status }: { status: UploadStatus }) {
  switch (status) {
    case 'pending':
      return (
        <div className="w-5 h-5 rounded-full border-2 border-gray-300" />
      );
    case 'uploading':
      return (
        <svg className="w-5 h-5 text-blue-600 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
        </svg>
      );
    case 'success':
      return (
        <div className="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center">
          <svg className="w-3 h-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
          </svg>
        </div>
      );
    case 'error':
      return (
        <div className="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center">
          <svg className="w-3 h-3 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>
      );
  }
}
