// SPDX-License-Identifier: GPL-3.0-or-later

import { Upload, Download, X, CheckCircle, AlertCircle, Clock } from 'lucide-react';
import ProgressBar from './ProgressBar';
import { formatRelativeTime } from '../lib/utils';
import type { Job } from '../lib/api';

interface JobProgressProps {
  job: Job;
  onCancel?: () => void;
  showDetails?: boolean;
}

export default function JobProgress({
  job,
  onCancel,
  showDetails = true,
}: JobProgressProps) {
  const isRunning = job.status === 'running' || job.status === 'pending';
  const isCompleted = job.status === 'completed';
  const isFailed = job.status === 'failed';

  const Icon = job.type === 'backup' ? Upload : Download;
  
  const statusColors = {
    pending: 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/30',
    running: 'text-primary-600 bg-primary-100 dark:bg-primary-900/30',
    completed: 'text-green-600 bg-green-100 dark:bg-green-900/30',
    failed: 'text-red-600 bg-red-100 dark:bg-red-900/30',
    cancelled: 'text-slate-600 bg-slate-100 dark:bg-slate-700',
  };

  const StatusIcon = isCompleted
    ? CheckCircle
    : isFailed
    ? AlertCircle
    : Clock;

  return (
    <div className="p-4 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
      <div className="flex items-start justify-between">
        <div className="flex items-center space-x-3">
          {/* Type Icon */}
          <div
            className={`p-2 rounded-lg ${
              job.type === 'backup'
                ? 'bg-primary-100 dark:bg-primary-900/30'
                : 'bg-green-100 dark:bg-green-900/30'
            }`}
          >
            <Icon
              className={`w-5 h-5 ${
                job.type === 'backup' ? 'text-primary-600' : 'text-green-600'
              }`}
            />
          </div>

          {/* Job Info */}
          <div>
            <div className="flex items-center space-x-2">
              <span className="font-medium text-slate-900 dark:text-white capitalize">
                {job.type}
              </span>
              <span
                className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
                  statusColors[job.status]
                }`}
              >
                <StatusIcon className="w-3 h-3 mr-1" />
                {job.status}
              </span>
            </div>
            <p className="text-sm text-slate-500 dark:text-slate-400">
              {isRunning
                ? `Started ${formatRelativeTime(job.started_at)}`
                : isCompleted || isFailed
                ? `Finished ${formatRelativeTime(job.completed_at || job.created_at)}`
                : `Created ${formatRelativeTime(job.created_at)}`}
            </p>
          </div>
        </div>

        {/* Cancel Button */}
        {isRunning && onCancel && (
          <button
            onClick={onCancel}
            className="p-2 text-slate-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors"
            title="Cancel"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>

      {/* Progress Bar */}
      {isRunning && (
        <div className="mt-4">
          <div className="flex justify-between text-sm text-slate-600 dark:text-slate-400 mb-1">
            <span>Progress</span>
            <span>{job.progress}%</span>
          </div>
          <ProgressBar
            value={job.progress}
            size="md"
            color={job.type === 'backup' ? 'primary' : 'success'}
          />
        </div>
      )}

      {/* Details */}
      {showDetails && (
        <>
          {/* Error Message */}
          {isFailed && job.error && (
            <div className="mt-3 p-2 bg-red-50 dark:bg-red-900/20 rounded text-sm text-red-700 dark:text-red-400">
              <AlertCircle className="w-4 h-4 inline mr-1" />
              {job.error}
            </div>
          )}

          {/* Paths */}
          {job.paths && job.paths.length > 0 && (
            <div className="mt-3 text-sm">
              <p className="text-slate-500 dark:text-slate-400 mb-1">Paths:</p>
              <ul className="space-y-1">
                {job.paths.slice(0, 3).map((path, i) => (
                  <li
                    key={i}
                    className="text-slate-700 dark:text-slate-300 truncate"
                  >
                    {path}
                  </li>
                ))}
                {job.paths.length > 3 && (
                  <li className="text-slate-400 text-xs">
                    +{job.paths.length - 3} more
                  </li>
                )}
              </ul>
            </div>
          )}
        </>
      )}
    </div>
  );
}
