import React from 'react';
import { ChefHat } from 'lucide-react';
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import type { RecipeCreate } from '../../../../api/types/recipes';

interface RecipeProductStepProps extends WizardStepProps {
  recipeData: Partial<RecipeCreate>;
  onUpdate: (data: Partial<RecipeCreate>) => void;
  finishedProducts: Array<{ value: string; label: string }>;
  categoryOptions: Array<{ value: string; label: string }>;
  cuisineTypeOptions: Array<{ value: string; label: string }>;
}

export const RecipeProductStep: React.FC<RecipeProductStepProps> = ({
  recipeData,
  onUpdate,
  onNext,
  finishedProducts,
  categoryOptions,
  cuisineTypeOptions
}) => {
  const handleFieldChange = (field: keyof RecipeCreate, value: any) => {
    onUpdate({ ...recipeData, [field]: value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onNext();
  };

  const isValid =
    recipeData.name &&
    recipeData.name.trim().length >= 2 &&
    recipeData.finished_product_id &&
    recipeData.category;

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Header */}
      <div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
        <div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
          <ChefHat className="w-6 h-6 text-[var(--color-primary)]" />
        </div>
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
            Información del Producto
          </h3>
          <p className="text-sm text-[var(--text-secondary)]">
            Configura la información básica de tu receta
          </p>
        </div>
      </div>

      {/* Form Fields */}
      <div className="space-y-5">
        {/* Recipe Name */}
        <div>
          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
            Nombre de la Receta <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            value={recipeData.name || ''}
            onChange={(e) => handleFieldChange('name', e.target.value)}
            placeholder="Ej: Pan de molde integral"
            className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            required
          />
          {recipeData.name && recipeData.name.trim().length < 2 && (
            <p className="mt-1 text-xs text-red-500">
              El nombre debe tener al menos 2 caracteres
            </p>
          )}
        </div>

        {/* Finished Product */}
        <div>
          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
            Producto Terminado <span className="text-red-500">*</span>
          </label>
          <select
            value={recipeData.finished_product_id || ''}
            onChange={(e) => handleFieldChange('finished_product_id', e.target.value)}
            className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            required
          >
            <option value="">Seleccionar producto...</option>
            {finishedProducts.map((product) => (
              <option key={product.value} value={product.value}>
                {product.label}
              </option>
            ))}
          </select>
          <p className="mt-1 text-xs text-[var(--text-tertiary)]">
            El producto final que se obtiene con esta receta
          </p>
        </div>

        {/* Category */}
        <div>
          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
            Categoría <span className="text-red-500">*</span>
          </label>
          <select
            value={recipeData.category || ''}
            onChange={(e) => handleFieldChange('category', e.target.value)}
            className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            required
          >
            <option value="">Seleccionar categoría...</option>
            {categoryOptions.map((category) => (
              <option key={category.value} value={category.value}>
                {category.label}
              </option>
            ))}
          </select>
        </div>

        <div className="grid grid-cols-2 gap-4">
          {/* Cuisine Type */}
          <div>
            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
              Tipo de Cocina
            </label>
            <select
              value={recipeData.cuisine_type || ''}
              onChange={(e) => handleFieldChange('cuisine_type', e.target.value)}
              className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
            >
              <option value="">Seleccionar tipo...</option>
              {cuisineTypeOptions.map((type) => (
                <option key={type.value} value={type.value}>
                  {type.label}
                </option>
              ))}
            </select>
          </div>

          {/* Difficulty Level */}
          <div>
            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
              Nivel de Dificultad <span className="text-red-500">*</span>
            </label>
            <select
              value={recipeData.difficulty_level || 1}
              onChange={(e) => handleFieldChange('difficulty_level', Number(e.target.value))}
              className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
              required
            >
              <option value={1}>1 - Fácil</option>
              <option value={2}>2 - Medio</option>
              <option value={3}>3 - Difícil</option>
              <option value={4}>4 - Muy Difícil</option>
              <option value={5}>5 - Extremo</option>
            </select>
          </div>
        </div>

        {/* Description */}
        <div>
          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
            Descripción (Opcional)
          </label>
          <textarea
            value={recipeData.description || ''}
            onChange={(e) => handleFieldChange('description', e.target.value)}
            placeholder="Descripción breve de la receta..."
            rows={3}
            className="w-full px-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)] resize-none"
          />
        </div>
      </div>

      {/* Validation Message */}
      {!isValid && (
        <div className="p-3 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
          <p className="text-sm text-[var(--text-primary)]">
            <span className="font-medium">⚠️ Campos requeridos:</span> Asegúrate de completar el nombre, producto terminado y categoría.
          </p>
        </div>
      )}

      {/* Hidden submit button for form handling */}
      <button type="submit" className="hidden" disabled={!isValid} />
    </form>
  );
};
