import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  Package,
  Building2,
  ChefHat,
  Wrench,
  ClipboardCheck,
  ShoppingCart,
  Users,
  UserPlus,
  Euro,
  Sparkles,
} from 'lucide-react';

export type ItemType =
  | 'inventory'
  | 'supplier'
  | 'recipe'
  | 'equipment'
  | 'quality-template'
  | 'customer-order'
  | 'customer'
  | 'team-member'
  | 'sales-entry';

export interface ItemTypeConfig {
  id: ItemType;
  title: string;
  subtitle: string;
  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
  badge?: string;
  badgeColor?: string;
  isHighlighted?: boolean;
}

export const ITEM_TYPES: ItemTypeConfig[] = [
  {
    id: 'sales-entry',
    title: 'Registro de Ventas',
    subtitle: 'Manual o carga masiva',
    icon: Euro,
    badge: '⭐ Más Común',
    badgeColor: 'bg-gradient-to-r from-amber-100 to-orange-100 text-orange-800 font-semibold',
    isHighlighted: true,
  },
  {
    id: 'inventory',
    title: 'Inventario',
    subtitle: 'Ingrediente o Producto',
    icon: Package,
    badge: 'Configuración',
    badgeColor: 'bg-blue-100 text-blue-700',
  },
  {
    id: 'supplier',
    title: 'Proveedor',
    subtitle: 'Relación comercial',
    icon: Building2,
    badge: 'Configuración',
    badgeColor: 'bg-blue-100 text-blue-700',
  },
  {
    id: 'recipe',
    title: 'Receta',
    subtitle: 'Fórmula de producción',
    icon: ChefHat,
    badge: 'Común',
    badgeColor: 'bg-green-100 text-green-700',
  },
  {
    id: 'equipment',
    title: 'Equipo',
    subtitle: 'Activo de panadería',
    icon: Wrench,
    badge: 'Configuración',
    badgeColor: 'bg-blue-100 text-blue-700',
  },
  {
    id: 'quality-template',
    title: 'Plantilla de Calidad',
    subtitle: 'Estándares y controles',
    icon: ClipboardCheck,
    badge: 'Configuración',
    badgeColor: 'bg-blue-100 text-blue-700',
  },
  {
    id: 'customer-order',
    title: 'Pedido de Cliente',
    subtitle: 'Nueva orden',
    icon: ShoppingCart,
    badge: 'Diario',
    badgeColor: 'bg-amber-100 text-amber-700',
  },
  {
    id: 'customer',
    title: 'Cliente',
    subtitle: 'Perfil de cliente',
    icon: Users,
    badge: 'Común',
    badgeColor: 'bg-green-100 text-green-700',
  },
  {
    id: 'team-member',
    title: 'Miembro del Equipo',
    subtitle: 'Empleado o colaborador',
    icon: UserPlus,
    badge: 'Configuración',
    badgeColor: 'bg-blue-100 text-blue-700',
  },
];

interface ItemTypeSelectorProps {
  onSelect: (itemType: ItemType) => void;
}

export const ItemTypeSelector: React.FC<ItemTypeSelectorProps> = ({ onSelect }) => {
  const { t } = useTranslation('wizards');

  // Generate item types from translations
  const itemTypes: ItemTypeConfig[] = [
    {
      id: 'sales-entry',
      title: t('itemTypeSelector.types.sales-entry.title'),
      subtitle: t('itemTypeSelector.types.sales-entry.description'),
      icon: Euro,
      badge: '⭐ ' + t('itemTypeSelector.mostCommon', { defaultValue: 'Most Common' }),
      badgeColor: 'bg-gradient-to-r from-amber-100 to-orange-100 text-orange-800 font-semibold',
      isHighlighted: true,
    },
    {
      id: 'inventory',
      title: t('itemTypeSelector.types.inventory.title'),
      subtitle: t('itemTypeSelector.types.inventory.description'),
      icon: Package,
      badge: t('itemTypeSelector.configuration', { defaultValue: 'Configuration' }),
      badgeColor: 'bg-blue-100 text-blue-700',
    },
    {
      id: 'supplier',
      title: t('itemTypeSelector.types.supplier.title'),
      subtitle: t('itemTypeSelector.types.supplier.description'),
      icon: Building2,
      badge: t('itemTypeSelector.configuration', { defaultValue: 'Configuration' }),
      badgeColor: 'bg-blue-100 text-blue-700',
    },
    {
      id: 'recipe',
      title: t('itemTypeSelector.types.recipe.title'),
      subtitle: t('itemTypeSelector.types.recipe.description'),
      icon: ChefHat,
      badge: t('itemTypeSelector.common', { defaultValue: 'Common' }),
      badgeColor: 'bg-green-100 text-green-700',
    },
    {
      id: 'equipment',
      title: t('itemTypeSelector.types.equipment.title'),
      subtitle: t('itemTypeSelector.types.equipment.description'),
      icon: Wrench,
      badge: t('itemTypeSelector.configuration', { defaultValue: 'Configuration' }),
      badgeColor: 'bg-blue-100 text-blue-700',
    },
    {
      id: 'quality-template',
      title: t('itemTypeSelector.types.quality-template.title'),
      subtitle: t('itemTypeSelector.types.quality-template.description'),
      icon: ClipboardCheck,
      badge: t('itemTypeSelector.configuration', { defaultValue: 'Configuration' }),
      badgeColor: 'bg-blue-100 text-blue-700',
    },
    {
      id: 'customer-order',
      title: t('itemTypeSelector.types.customer-order.title'),
      subtitle: t('itemTypeSelector.types.customer-order.description'),
      icon: ShoppingCart,
      badge: t('itemTypeSelector.daily', { defaultValue: 'Daily' }),
      badgeColor: 'bg-amber-100 text-amber-700',
    },
    {
      id: 'customer',
      title: t('itemTypeSelector.types.customer.title'),
      subtitle: t('itemTypeSelector.types.customer.description'),
      icon: Users,
      badge: t('itemTypeSelector.common', { defaultValue: 'Common' }),
      badgeColor: 'bg-green-100 text-green-700',
    },
    {
      id: 'team-member',
      title: t('itemTypeSelector.types.team-member.title'),
      subtitle: t('itemTypeSelector.types.team-member.description'),
      icon: UserPlus,
      badge: t('itemTypeSelector.configuration', { defaultValue: 'Configuration' }),
      badgeColor: 'bg-blue-100 text-blue-700',
    },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <div className="flex items-center justify-center mb-3">
          <div className="p-3 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 rounded-full">
            <Sparkles className="w-8 h-8 text-[var(--color-primary)]" />
          </div>
        </div>
        <h2 className="text-2xl font-bold text-[var(--text-primary)] mb-2">
          {t('itemTypeSelector.title')}
        </h2>
        <p className="text-[var(--text-secondary)] max-w-md mx-auto">
          {t('itemTypeSelector.description')}
        </p>
      </div>

      {/* Item Type Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
        {itemTypes.map((itemType) => {
          const Icon = itemType.icon;
          const isHighlighted = itemType.isHighlighted;

          return (
            <button
              key={itemType.id}
              onClick={() => onSelect(itemType.id)}
              className={`
                group relative p-4 md:p-5 rounded-xl border-2 transition-all duration-200
                hover:shadow-lg hover:-translate-y-1 active:translate-y-0
                focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-offset-2
                ${
                  isHighlighted
                    ? 'border-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 shadow-md'
                    : 'border-[var(--border-secondary)] bg-[var(--bg-primary)] hover:border-[var(--color-primary)]/50'
                }
              `}
            >
              {/* Badge */}
              {itemType.badge && (
                <div className="absolute top-3 right-3">
                  <span className={`px-2 py-1 text-xs rounded-full ${itemType.badgeColor}`}>
                    {itemType.badge}
                  </span>
                </div>
              )}

              {/* Content */}
              <div className="flex items-center gap-4">
                {/* Icon */}
                <div
                  className={`
                    flex-shrink-0 p-3 rounded-lg transition-colors
                    ${
                      isHighlighted
                        ? 'bg-[var(--color-primary)] text-white group-hover:bg-[var(--color-primary)]/90'
                        : 'bg-[var(--bg-secondary)] text-[var(--color-primary)] group-hover:bg-[var(--color-primary)]/10'
                    }
                  `}
                >
                  <Icon className="w-6 h-6" />
                </div>

                {/* Text */}
                <div className="flex-1 text-left">
                  <h3 className="text-base md:text-lg font-semibold text-[var(--text-primary)] mb-0.5 group-hover:text-[var(--color-primary)] transition-colors">
                    {itemType.title}
                  </h3>
                  <p className="text-sm text-[var(--text-secondary)] leading-snug mt-1">
                    {itemType.subtitle}
                  </p>
                </div>
              </div>

              {/* Hover Indicator */}
              <div className="absolute inset-0 rounded-xl ring-2 ring-[var(--color-primary)] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
            </button>
          );
        })}
      </div>

      {/* Help Text */}
      <div className="text-center pt-4 border-t border-[var(--border-primary)]">
        <p className="text-sm text-[var(--text-tertiary)]">
          {t('itemTypeSelector.helpText', { defaultValue: 'Select an option to start the guided step-by-step process' })}
        </p>
      </div>
    </div>
  );
};
