import { useEffect, useState } from 'react';
import { wizardService } from '../../services/wizardService';
import { useWizardStore } from '../../store/wizardStore';
import type { Operation } from '../../types';
import { StepWrapper } from '../../components/StepWrapper';

export default function OperationSelection() {
  const { selectedCategory, setOperation, setStep } = useWizardStore();
  const [operations, setOperations] = useState<Operation[]>([]);

  useEffect(() => {
    if (selectedCategory) {
      wizardService.getOperations(selectedCategory.id).then(setOperations);
    }
  }, [selectedCategory]);

  return (
    <StepWrapper>
      <button onClick={() => setStep(1)} className="mb-4 text-brand-600 font-medium text-sm">Cambiar Categoría</button>
      <h2 className="text-2xl font-bold mb-2 text-brand-900">Tipo de Operación</h2>
      <p className="text-slate-500 mb-6">Seleccionaste: <span className="font-semibold text-brand-700">{selectedCategory?.name}</span></p>

      <div className="grid grid-cols-2 gap-4">
        {operations.length === 0 ? (
          <div className="col-span-2 text-center py-8 bg-white rounded border border-yellow-200 bg-yellow-50 text-yellow-800">
            No hay operaciones disponibles para este rubro.
          </div>
        ) : (
          operations.map(op => (
            <button
              key={op.id}
              onClick={() => setOperation(op)}
              className="p-6 bg-white border border-slate-200 rounded-xl hover:border-brand-500 hover:bg-brand-50 hover:text-brand-700 transition font-semibold text-lg shadow-sm"
            >
              {op.name}
            </button>
          ))
        )}
      </div>
    </StepWrapper>
  );
}
