/**
 * Loading Progress Bar Component
 * 
 * Displays a progress bar during canvas loading with stage indicators.
 * Shows the current loading stage and progress percentage.
 */

import React from 'react';
import { LoadingStage } from '../managers/useProgressiveLoading';
import { Loader2 } from 'lucide-react';

export interface LoadingProgressBarProps {
  /** Current loading stage */
  stage: LoadingStage;
  /** Loading progress (0-100) */
  progress: number;
  /** Whether loading is in progress */
  isLoading: boolean;
  /** Error message if loading failed */
  error?: string;
  /** Optional className for styling */
  className?: string;
}

/**
 * Get user-friendly message for each loading stage
 */
function getStageMessage(stage: LoadingStage): string {
  switch (stage) {
    case 'idle':
      return '初始化中...';
    case 'structure':
      return '加载画布结构...';
    case 'content':
      return '加载图片和视频...';
    case 'complete':
      return '加载完成！';
    case 'error':
      return '加载失败';
    default:
      return '加载中...';
  }
}

/**
 * Get stage index for progress indicator
 */
function getStageIndex(stage: LoadingStage): number {
  switch (stage) {
    case 'idle':
      return 0;
    case 'structure':
      return 1;
    case 'content':
      return 2;
    case 'complete':
      return 3;
    default:
      return 0;
  }
}

/**
 * Loading Progress Bar Component
 */
export function LoadingProgressBar({
  stage,
  progress,
  isLoading,
  error,
  className = '',
}: LoadingProgressBarProps) {
  // Don't show if not loading and no error
  if (!isLoading && !error && stage === 'complete') {
    return null;
  }

  const currentStageIndex = getStageIndex(stage);
  const stageMessage = getStageMessage(stage);

  return (
    <div
      className={`fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm ${className}`}
    >
      <div className="w-full max-w-md mx-4 p-6 bg-card/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl">
        {/* Error State */}
        {error && (
          <div className="text-center">
            <div className="mb-4 text-red-500">
              <svg
                className="w-16 h-16 mx-auto"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
            <h3 className="text-lg font-semibold text-white mb-2">
              加载失败
            </h3>
            <p className="text-sm text-muted-foreground">{error}</p>
          </div>
        )}

        {/* Loading State */}
        {!error && (
          <>
            {/* Stage Indicators */}
            <div className="flex items-center justify-between mb-6">
              {/* Stage 1: Structure */}
              <div className="flex flex-col items-center flex-1">
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 transition-all duration-300 ${
                    currentStageIndex >= 1
                      ? 'bg-cyan-500 text-white shadow-lg shadow-cyan-500/50'
                      : 'bg-white/10 text-muted-foreground'
                  }`}
                >
                  {currentStageIndex > 1 ? (
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={3}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  ) : (
                    <span className="text-sm font-bold">1</span>
                  )}
                </div>
                <span
                  className={`text-xs font-medium transition-colors ${
                    currentStageIndex >= 1
                      ? 'text-white'
                      : 'text-muted-foreground'
                  }`}
                >
                  结构
                </span>
              </div>

              {/* Divider */}
              <div
                className={`flex-1 h-0.5 mx-2 transition-all duration-300 ${
                  currentStageIndex >= 2
                    ? 'bg-cyan-500'
                    : 'bg-white/10'
                }`}
              />

              {/* Stage 2: Content */}
              <div className="flex flex-col items-center flex-1">
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 transition-all duration-300 ${
                    currentStageIndex >= 2
                      ? 'bg-cyan-500 text-white shadow-lg shadow-cyan-500/50'
                      : 'bg-white/10 text-muted-foreground'
                  }`}
                >
                  {currentStageIndex > 2 ? (
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={3}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  ) : (
                    <span className="text-sm font-bold">2</span>
                  )}
                </div>
                <span
                  className={`text-xs font-medium transition-colors ${
                    currentStageIndex >= 2
                      ? 'text-white'
                      : 'text-muted-foreground'
                  }`}
                >
                  内容
                </span>
              </div>

              {/* Divider */}
              <div
                className={`flex-1 h-0.5 mx-2 transition-all duration-300 ${
                  currentStageIndex >= 3
                    ? 'bg-cyan-500'
                    : 'bg-white/10'
                }`}
              />

              {/* Stage 3: Complete */}
              <div className="flex flex-col items-center flex-1">
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 transition-all duration-300 ${
                    currentStageIndex >= 3
                      ? 'bg-cyan-500 text-white shadow-lg shadow-cyan-500/50'
                      : 'bg-white/10 text-muted-foreground'
                  }`}
                >
                  {currentStageIndex >= 3 ? (
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={3}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  ) : (
                    <span className="text-sm font-bold">3</span>
                  )}
                </div>
                <span
                  className={`text-xs font-medium transition-colors ${
                    currentStageIndex >= 3
                      ? 'text-white'
                      : 'text-muted-foreground'
                  }`}
                >
                  完成
                </span>
              </div>
            </div>

            {/* Progress Bar */}
            <div className="mb-4">
              <div className="h-2 bg-white/10 rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 transition-all duration-300 ease-out"
                  style={{ width: `${progress}%` }}
                />
              </div>
            </div>

            {/* Status Message */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                {isLoading && (
                  <Loader2 className="w-4 h-4 text-cyan-500 animate-spin" />
                )}
                <span className="text-sm text-muted-foreground">
                  {stageMessage}
                </span>
              </div>
              <span className="text-sm font-bold text-white tabular-nums">
                {Math.round(progress)}%
              </span>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

/**
 * Compact Loading Progress Bar (for in-canvas display)
 */
export function CompactLoadingProgressBar({
  stage,
  progress,
  isLoading,
  className = '',
}: Omit<LoadingProgressBarProps, 'error'>) {
  // Don't show if not loading
  if (!isLoading || stage === 'complete') {
    return null;
  }

  const stageMessage = getStageMessage(stage);

  return (
    <div
      className={`fixed top-4 left-1/2 -translate-x-1/2 z-50 ${className}`}
    >
      <div className="px-4 py-2 bg-card/95 backdrop-blur-xl border border-white/10 rounded-full shadow-lg">
        <div className="flex items-center gap-3">
          <Loader2 className="w-4 h-4 text-cyan-500 animate-spin" />
          <div className="flex items-center gap-2">
            <span className="text-xs text-muted-foreground">
              {stageMessage}
            </span>
            <span className="text-xs font-bold text-white tabular-nums">
              {Math.round(progress)}%
            </span>
          </div>
          <div className="w-24 h-1 bg-white/10 rounded-full overflow-hidden">
            <div
              className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 transition-all duration-300"
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
