import { useState } from 'react';
import ClassSelection from './ClassSelection';
import NameModal from './modal/NameModal';
import ConfirmationModal from './modal/ConfirmationModal';
import { PetClassInfo } from '../types/Pet';
import { createPet } from '../services/api/api';

interface PetRegisterProps {
  onPetCreated: (newPet: any) => void;
}

export default function PetRegister({ onPetCreated }: PetRegisterProps) {
  const [showConfirmation, setShowConfirmation] = useState(false);
  const [showNameModal, setShowNameModal] = useState(false);
  const [petName, setPetName] = useState('');
  const [selectedClass, setSelectedClass] = useState<{ key: string; info: PetClassInfo } | null>(null);

  const handleClassSelect = (classKey: string, classInfo: PetClassInfo) => {
    setSelectedClass({ key: classKey, info: classInfo });
    setShowConfirmation(true);
  };

  const handleConfirm = () => {
    if (!selectedClass) return;
    setShowConfirmation(false);
    setShowNameModal(true);
    setPetName('');
  };

  const handleNameSubmit = async () => {
    if (!selectedClass || !petName.trim()) return;

    try {
      const newPet = await createPet({
        name: petName.trim(),
        class: selectedClass.key,
      });
      onPetCreated(newPet);
    } catch (error) {
      console.error('Error creating pet:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      {showNameModal && selectedClass ? (
        <NameModal
          selectedClass={selectedClass}
          petName={petName}
          setPetName={setPetName}
          handleNameSubmit={handleNameSubmit}
          setShowNameModal={setShowNameModal}
          setSelectedClass={setSelectedClass}
        />
      ) : showConfirmation && selectedClass ? (
        <ConfirmationModal
          selectedClass={selectedClass}
          handleConfirm={handleConfirm}
          setShowConfirmation={setShowConfirmation}
          setSelectedClass={setSelectedClass}
        />
      ) : (
        <ClassSelection onSelect={handleClassSelect} />
      )}
    </div>
  );
}