'use client';

import { useEffect, useState } from 'react';

export interface UploadProgressBarProps {
  progress: number; // 0-100
  status: 'uploading' | 'processing' | 'success' | 'error';
  error?: string;
}

export function UploadProgressBar({ progress, status, error }: UploadProgressBarProps) {
  const [elapsedSeconds, setElapsedSeconds] = useState(0);

  // Timer for upload duration
  useEffect(() => {
    if (status === 'uploading' || status === 'processing') {
      const interval = setInterval(() => {
        setElapsedSeconds((prev) => prev + 1);
      }, 1000);

      return () => clearInterval(interval);
    } else {
      // Reset timer on completion
      if (status === 'success' || status === 'error') {
        setTimeout(() => setElapsedSeconds(0), 3000);
      }
    }
  }, [status]);

  // Format elapsed time
  const formatTime = (seconds: number): string => {
    if (seconds < 60) return `${seconds}s`;
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}m ${secs}s`;
  };

  // Determine bar color based on status
  const getBarColor = () => {
    switch (status) {
      case 'uploading':
        return 'bg-gradient-to-r from-amber-600 to-orange-600';
      case 'processing':
        return 'bg-gradient-to-r from-purple-600 to-cyan-600';
      case 'success':
        return 'bg-gradient-to-r from-green-600 to-emerald-600';
      case 'error':
        return 'bg-gradient-to-r from-red-600 to-rose-600';
    }
  };

  // Determine status text
  const getStatusText = () => {
    switch (status) {
      case 'uploading':
        return 'Uploading...';
      case 'processing':
        return 'Processing...';
      case 'success':
        return 'Upload complete!';
      case 'error':
        return error || 'Upload failed';
    }
  };

  // Status icon
  const getStatusIcon = () => {
    switch (status) {
      case 'uploading':
        return (
          <svg
            className="w-5 h-5 animate-spin"
            fill="none"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <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 'processing':
        return (
          <svg
            className="w-5 h-5 animate-spin"
            fill="none"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <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 (
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M5 13l4 4L19 7"
            />
          </svg>
        );
      case 'error':
        return <span className="text-lg">⚠️</span>;
    }
  };

  return (
    <div
      className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-xl animate-fade-in"
      role="progressbar"
      aria-valuenow={progress}
      aria-valuemin={0}
      aria-valuemax={100}
      aria-label={getStatusText()}
    >
      {/* Header */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-2">
          <span
            className={`
              ${status === 'uploading' ? 'text-amber-400' : ''}
              ${status === 'processing' ? 'text-purple-400' : ''}
              ${status === 'success' ? 'text-green-400' : ''}
              ${status === 'error' ? 'text-red-400' : ''}
            `}
          >
            {getStatusIcon()}
          </span>
          <span
            className={`text-sm font-medium
              ${status === 'uploading' ? 'text-amber-400' : ''}
              ${status === 'processing' ? 'text-purple-400' : ''}
              ${status === 'success' ? 'text-green-400' : ''}
              ${status === 'error' ? 'text-red-400' : ''}
            `}
          >
            {getStatusText()}
          </span>
        </div>

        <div className="flex items-center gap-3">
          {/* Timer */}
          {(status === 'uploading' || status === 'processing') && (
            <span className="text-sm text-gray-400 tabular-nums">
              {formatTime(elapsedSeconds)}
            </span>
          )}

          {/* Percentage */}
          <span className="text-sm font-semibold text-white tabular-nums min-w-[3ch]">
            {Math.round(progress)}%
          </span>
        </div>
      </div>

      {/* Progress bar track */}
      <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
        {/* Progress bar fill */}
        <div
          className={`h-full transition-all duration-300 ease-out ${getBarColor()} ${
            status === 'uploading' || status === 'processing' ? 'animate-gradient' : ''
          }`}
          style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
        />
      </div>

      {/* Error message */}
      {status === 'error' && error && (
        <p className="mt-2 text-sm text-red-400" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}
