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

interface RecipeProductionStepProps extends WizardStepProps {
  recipeData: Partial<RecipeCreate>;
  onUpdate: (data: Partial<RecipeCreate>) => void;
  unitOptions: Array<{ value: MeasurementUnit; label: string }>;
}

export const RecipeProductionStep: React.FC<RecipeProductionStepProps> = ({
  recipeData,
  onUpdate,
  onNext,
  onBack,
  unitOptions
}) => {
  const handleFieldChange = (field: keyof RecipeCreate, value: any) => {
    onUpdate({ ...recipeData, [field]: value });
  };

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

  const isValid =
    recipeData.yield_quantity &&
    Number(recipeData.yield_quantity) > 0 &&
    recipeData.yield_unit;

  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">
          <Clock 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">
            Detalles de Producción
          </h3>
          <p className="text-sm text-[var(--text-secondary)]">
            Define tiempos, rendimientos y parámetros de producción
          </p>
        </div>
      </div>

      <div className="space-y-6">
        {/* Yield & Servings Section */}
        <div className="space-y-4">
          <h4 className="text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2">
            <Clock className="w-4 h-4" />
            Rendimiento y Porciones
          </h4>

          <div className="grid grid-cols-3 gap-4">
            {/* Yield Quantity */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Cantidad <span className="text-red-500">*</span>
              </label>
              <input
                type="number"
                value={recipeData.yield_quantity || ''}
                onChange={(e) => handleFieldChange('yield_quantity', parseFloat(e.target.value) || 0)}
                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)]"
                min="0.1"
                step="0.1"
                required
              />
            </div>

            {/* Yield Unit */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Unidad <span className="text-red-500">*</span>
              </label>
              <select
                value={recipeData.yield_unit || 'units'}
                onChange={(e) => handleFieldChange('yield_unit', e.target.value as MeasurementUnit)}
                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
              >
                {unitOptions.map((unit) => (
                  <option key={unit.value} value={unit.value}>
                    {unit.label}
                  </option>
                ))}
              </select>
            </div>

            {/* Serves Count */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Porciones
              </label>
              <input
                type="number"
                value={recipeData.serves_count || 1}
                onChange={(e) => handleFieldChange('serves_count', parseInt(e.target.value) || 1)}
                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)]"
                min="1"
              />
            </div>
          </div>
        </div>

        {/* Time Section */}
        <div className="space-y-4">
          <h4 className="text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2">
            <Clock className="w-4 h-4" />
            Tiempos de Preparación
          </h4>

          <div className="grid grid-cols-3 gap-4">
            {/* Prep Time */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Preparación (min)
              </label>
              <input
                type="number"
                value={recipeData.prep_time_minutes || 0}
                onChange={(e) => handleFieldChange('prep_time_minutes', parseInt(e.target.value) || 0)}
                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)]"
                min="0"
              />
              <p className="mt-1 text-xs text-[var(--text-tertiary)]">Tiempo de prep. ingredientes</p>
            </div>

            {/* Cook Time */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Cocción (min)
              </label>
              <input
                type="number"
                value={recipeData.cook_time_minutes || 0}
                onChange={(e) => handleFieldChange('cook_time_minutes', parseInt(e.target.value) || 0)}
                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)]"
                min="0"
              />
              <p className="mt-1 text-xs text-[var(--text-tertiary)]">Tiempo de horneado</p>
            </div>

            {/* Rest Time */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Reposo (min)
              </label>
              <input
                type="number"
                value={recipeData.rest_time_minutes || 0}
                onChange={(e) => handleFieldChange('rest_time_minutes', parseInt(e.target.value) || 0)}
                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)]"
                min="0"
              />
              <p className="mt-1 text-xs text-[var(--text-tertiary)]">Tiempo de fermentación</p>
            </div>
          </div>

          {/* Total Time Display */}
          {((recipeData.prep_time_minutes || 0) + (recipeData.cook_time_minutes || 0) + (recipeData.rest_time_minutes || 0)) > 0 && (
            <div className="p-3 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
              <p className="text-sm text-[var(--text-primary)]">
                <span className="font-medium">Tiempo Total:</span>{' '}
                {(recipeData.prep_time_minutes || 0) + (recipeData.cook_time_minutes || 0) + (recipeData.rest_time_minutes || 0)} minutos
                ({Math.round(((recipeData.prep_time_minutes || 0) + (recipeData.cook_time_minutes || 0) + (recipeData.rest_time_minutes || 0)) / 60 * 10) / 10} horas)
              </p>
            </div>
          )}
        </div>

        {/* Production Parameters Section */}
        <div className="space-y-4">
          <h4 className="text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2">
            <Settings className="w-4 h-4" />
            Parámetros de Producción (Opcional)
          </h4>

          <div className="grid grid-cols-2 gap-4">
            {/* Batch Sizes */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Tamaño Mínimo de Lote
              </label>
              <input
                type="number"
                value={recipeData.minimum_batch_size || ''}
                onChange={(e) => handleFieldChange('minimum_batch_size', e.target.value ? parseInt(e.target.value) : undefined)}
                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)]"
                min="1"
                placeholder="Ej: 10"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Tamaño Máximo de Lote
              </label>
              <input
                type="number"
                value={recipeData.maximum_batch_size || ''}
                onChange={(e) => handleFieldChange('maximum_batch_size', e.target.value ? parseInt(e.target.value) : undefined)}
                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)]"
                min="1"
                placeholder="Ej: 100"
              />
            </div>

            {/* Temperature & Humidity */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Temperatura Óptima (°C)
              </label>
              <input
                type="number"
                value={recipeData.optimal_production_temperature || ''}
                onChange={(e) => handleFieldChange('optimal_production_temperature', e.target.value ? parseFloat(e.target.value) : undefined)}
                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)]"
                step="0.1"
                placeholder="Ej: 180"
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Humedad Óptima (%)
              </label>
              <input
                type="number"
                value={recipeData.optimal_humidity || ''}
                onChange={(e) => handleFieldChange('optimal_humidity', e.target.value ? parseFloat(e.target.value) : undefined)}
                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)]"
                min="0"
                max="100"
                step="1"
                placeholder="Ej: 65"
              />
            </div>
          </div>
        </div>

        {/* Special Configuration */}
        <div className="space-y-4">
          <h4 className="text-sm font-semibold text-[var(--text-primary)]">
            Configuración Especial
          </h4>

          <div className="grid grid-cols-2 gap-4">
            {/* Signature Item */}
            <label className="flex items-center gap-3 p-3 border border-[var(--border-secondary)] rounded-lg cursor-pointer hover:bg-[var(--bg-secondary)] transition-colors">
              <input
                type="checkbox"
                checked={recipeData.is_signature_item || false}
                onChange={(e) => handleFieldChange('is_signature_item', e.target.checked)}
                className="w-5 h-5 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-[var(--color-primary)]"
              />
              <div>
                <p className="text-sm font-medium text-[var(--text-primary)]">Receta Estrella</p>
                <p className="text-xs text-[var(--text-tertiary)]">Destacar como producto emblema</p>
              </div>
            </label>

            {/* Target Margin */}
            <div>
              <label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
                Margen Objetivo (%)
              </label>
              <input
                type="number"
                value={recipeData.target_margin_percentage || 30}
                onChange={(e) => handleFieldChange('target_margin_percentage', parseFloat(e.target.value) || 30)}
                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)]"
                min="0"
                max="100"
                step="1"
              />
            </div>
          </div>
        </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 la cantidad y unidad de rendimiento.
          </p>
        </div>
      )}

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