import React, { useState } from 'react';
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
import { ChefHat, Package, ClipboardCheck, CheckCircle2 } from 'lucide-react';

interface WizardDataProps extends WizardStepProps {
  data: Record<string, any>;
  onDataChange: (data: Record<string, any>) => void;
}

const RecipeDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext }) => {
  const [recipeData, setRecipeData] = useState({
    name: data.name || '',
    category: data.category || 'bread',
    yield: data.yield || '',
    instructions: data.instructions || '',
  });

  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <ChefHat className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Detalles de la Receta</h3>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="md:col-span-2">
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Nombre *</label>
          <input type="text" value={recipeData.name} onChange={(e) => setRecipeData({ ...recipeData, name: e.target.value })} placeholder="Ej: Baguette Tradicional" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" />
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Categoría *</label>
          <select value={recipeData.category} onChange={(e) => setRecipeData({ ...recipeData, category: e.target.value })} className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]">
            <option value="bread">Pan</option>
            <option value="pastry">Pastelería</option>
            <option value="cake">Repostería</option>
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Rendimiento *</label>
          <input type="number" value={recipeData.yield} onChange={(e) => setRecipeData({ ...recipeData, yield: e.target.value })} placeholder="12 unidades" className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]" min="1" />
        </div>
      </div>
      <div className="flex justify-end pt-4 border-t border-[var(--border-primary)]">
        <button onClick={() => { onDataChange({ ...data, ...recipeData }); onNext(); }} disabled={!recipeData.name || !recipeData.yield} className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 disabled:opacity-50 disabled:cursor-not-allowed">Continuar</button>
      </div>
    </div>
  );
};

const IngredientsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
  return (
    <div className="space-y-6">
      <div className="text-center pb-4 border-b border-[var(--border-primary)]">
        <Package className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Ingredientes</h3>
        <p className="text-sm text-[var(--text-secondary)]">{data.name}</p>
      </div>
      <div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
        <p className="text-[var(--text-secondary)] mb-4">La selección de ingredientes será agregada en una mejora futura</p>
        <p className="text-sm text-[var(--text-tertiary)]">Por ahora, puedes crear la receta y agregar ingredientes después</p>
      </div>
      <div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-primary)]">
        <button onClick={() => { console.log('Saving recipe:', data); onComplete(); }} className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 font-semibold inline-flex items-center gap-2"><CheckCircle2 className="w-5 h-5" />Crear Receta</button>
      </div>
    </div>
  );
};

export const RecipeWizardSteps = (data: Record<string, any>, setData: (data: Record<string, any>) => void): WizardStep[] => [
  { id: 'recipe-details', title: 'Detalles de la Receta', description: 'Nombre, categoría, rendimiento', component: (props) => <RecipeDetailsStep {...props} data={data} onDataChange={setData} /> },
  { id: 'recipe-ingredients', title: 'Ingredientes', description: 'Configuración futura', component: (props) => <IngredientsStep {...props} data={data} onDataChange={setData} />, isOptional: true },
];