import React from 'react';
import { Badge, ProgressBar } from '../ui';
import { CheckCircle, XCircle, Loader2, Clock } from 'lucide-react';
import { ServiceProgress } from '@/api/services/demo';

interface Props {
  progress: Record<string, ServiceProgress>;
}

const SERVICE_LABELS: Record<string, string> = {
  tenant: 'Tenant Virtual',
  inventory: 'Inventario y Productos',
  recipes: 'Recetas',
  sales: 'Historial de Ventas',
  orders: 'Pedidos de Clientes',
  suppliers: 'Proveedores',
  production: 'Producción',
  forecasting: 'Pronósticos',
};

const SERVICE_DESCRIPTIONS: Record<string, string> = {
  tenant: 'Creando tu entorno demo aislado',
  inventory: 'Cargando ingredientes, recetas y datos de stock',
  recipes: 'Configurando recetas y fórmulas',
  sales: 'Importando registros de ventas históricas',
  orders: 'Configurando pedidos de clientes',
  suppliers: 'Importando datos de proveedores',
  production: 'Configurando lotes de producción',
  forecasting: 'Preparando datos de pronósticos',
};

export const DemoProgressIndicator: React.FC<Props> = ({ progress }) => {
  return (
    <div className="mt-4 space-y-3">
      {Object.entries(progress).map(([serviceName, serviceProgress]) => (
        <div
          key={serviceName}
          className={`
            p-4 rounded-lg border-2 transition-all
            ${
              serviceProgress.status === 'completed'
                ? 'bg-green-50 dark:bg-green-900/20 border-green-500'
                : serviceProgress.status === 'failed'
                ? 'bg-red-50 dark:bg-red-900/20 border-red-500'
                : serviceProgress.status === 'in_progress'
                ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-500'
                : 'bg-gray-50 dark:bg-gray-800/20 border-gray-300 dark:border-gray-700'
            }
          `}
        >
          <div className="flex items-center justify-between mb-2">
            <div className="flex items-center gap-3 flex-1">
              <div className="flex-shrink-0">
                {getStatusIcon(serviceProgress.status)}
              </div>
              <div className="flex-1 min-w-0">
                <h3 className="text-sm font-semibold text-[var(--text-primary)] truncate">
                  {SERVICE_LABELS[serviceName] || serviceName}
                </h3>
                <p className="text-xs text-[var(--text-secondary)] truncate">
                  {SERVICE_DESCRIPTIONS[serviceName] || 'Procesando...'}
                </p>
              </div>
            </div>
            <Badge variant={getStatusVariant(serviceProgress.status)}>
              {getStatusLabel(serviceProgress.status)}
            </Badge>
          </div>

          {serviceProgress.status === 'in_progress' && (
            <div className="my-2">
              <ProgressBar value={50} variant="primary" className="animate-pulse" />
            </div>
          )}

          {serviceProgress.records_cloned > 0 && (
            <p className="text-xs text-[var(--text-secondary)] mt-2">
              ✓ {serviceProgress.records_cloned} registros clonados
            </p>
          )}

          {serviceProgress.error && (
            <p className="text-xs text-[var(--color-error)] mt-2">
              Error: {serviceProgress.error}
            </p>
          )}
        </div>
      ))}
    </div>
  );
};

function getStatusIcon(status: ServiceProgress['status']): React.ReactNode {
  switch (status) {
    case 'completed':
      return <CheckCircle className="w-5 h-5 text-green-500" />;
    case 'failed':
      return <XCircle className="w-5 h-5 text-red-500" />;
    case 'in_progress':
      return <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />;
    default:
      return <Clock className="w-5 h-5 text-gray-400" />;
  }
}

function getStatusLabel(status: ServiceProgress['status']): string {
  switch (status) {
    case 'completed':
      return 'Completado';
    case 'failed':
      return 'Fallido';
    case 'in_progress':
      return 'En Progreso';
    default:
      return 'Pendiente';
  }
}

function getStatusVariant(
  status: ServiceProgress['status']
): 'success' | 'error' | 'info' | 'default' {
  switch (status) {
    case 'completed':
      return 'success';
    case 'failed':
      return 'error';
    case 'in_progress':
      return 'info';
    default:
      return 'default';
  }
}