add Pokémon API integration and team generation features

src/components/NPCPartyBuilder.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
-import { Plus, Trash2 } from 'lucide-react';
+import { Plus, Trash2, Shuffle, Zap, Search } from 'lucide-react';
 import type { NPCConfiguration, NPCPartyProvider, SimplePartyProvider, PoolPartyProvider, PoolEntry } from '../types/npc';
+import { pokemonApi } from '../services/pokemonApi';
+import { PokemonFormSelector } from './PokemonFormSelector';
 
 interface NPCPartyBuilderProps {
   config: NPCConfiguration;
@@ -9,6 +11,9 @@ interface NPCPartyBuilderProps {
 
 export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
   const [partyType, setPartyType] = useState<'simple' | 'pool' | 'script'>(config.party?.type || 'simple');
+  const [showPokemonFormSelector, setShowPokemonFormSelector] = useState(false);
+  const [selectedPokemonIndex, setSelectedPokemonIndex] = useState<number>(-1);
+  const [isGenerating, setIsGenerating] = useState(false);
 
   const handlePartyChange = (party: NPCPartyProvider) => {
     onChange({ ...config, party });
@@ -30,6 +35,66 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
     }
   };
 
+  const generateRandomTeam = async (teamSize: number = 6) => {
+    setIsGenerating(true);
+    try {
+      const team = await pokemonApi.generateRandomTeam(teamSize);
+      const pokemonStrings = team.map(pokemon => pokemonApi.formatToCobblemonString(pokemon));
+      
+      if (partyType === 'simple') {
+        handlePartyChange({
+          type: 'simple',
+          pokemon: pokemonStrings,
+          isStatic: (config.party as SimplePartyProvider)?.isStatic
+        });
+      }
+    } catch (error) {
+      console.error('Failed to generate random team:', error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const generateTeamByType = async (type: string, teamSize: number = 6) => {
+    setIsGenerating(true);
+    try {
+      const team = await pokemonApi.generateTeamByType(type, teamSize);
+      const pokemonStrings = team.map(pokemon => pokemonApi.formatToCobblemonString(pokemon));
+      
+      if (partyType === 'simple') {
+        handlePartyChange({
+          type: 'simple',
+          pokemon: pokemonStrings,
+          isStatic: (config.party as SimplePartyProvider)?.isStatic
+        });
+      }
+    } catch (error) {
+      console.error(`Failed to generate ${type} team:`, error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const openPokemonFormSelector = (index: number) => {
+    setSelectedPokemonIndex(index);
+    setShowPokemonFormSelector(true);
+  };
+
+  const handlePokemonFormSelect = (pokemonString: string) => {
+    if (partyType === 'simple') {
+      const party = config.party as SimplePartyProvider;
+      const newPokemon = [...party.pokemon];
+      newPokemon[selectedPokemonIndex] = pokemonString;
+      
+      handlePartyChange({
+        ...party,
+        pokemon: newPokemon
+      });
+    }
+    setShowPokemonFormSelector(false);
+    setSelectedPokemonIndex(-1);
+  };
+
   const renderSimpleParty = () => {
     const party = config.party as SimplePartyProvider;
     
@@ -61,17 +126,85 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
     };
 
     return (
-      <div className="space-y-3">
+      <div className="space-y-4">
         <div className="flex items-center justify-between">
           <h4 className="font-medium">Pokemon List</h4>
-          <button
-            type="button"
-            onClick={addPokemon}
-            className="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
-          >
-            <Plus className="h-3 w-3 mr-1" />
-            Add Pokemon
-          </button>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={addPokemon}
+              className="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              Add Empty Slot
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                addPokemon();
+                const newIndex = (config.party as SimplePartyProvider)?.pokemon?.length || 0;
+                openPokemonFormSelector(newIndex);
+              }}
+              className="inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700"
+            >
+              <Search className="h-3 w-3 mr-1" />
+              Add Pokémon
+            </button>
+          </div>
+        </div>
+
+        {/* Team Generation Tools */}
+        <div className="bg-gray-50 p-3 rounded-lg space-y-3">
+          <h5 className="text-sm font-medium text-gray-700">Team Generation</h5>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => generateRandomTeam(6)}
+              disabled={isGenerating}
+              className="inline-flex items-center px-3 py-1 text-xs font-medium rounded-md text-white bg-green-600 hover:bg-green-700 disabled:opacity-50"
+            >
+              <Shuffle className="h-3 w-3 mr-1" />
+              {isGenerating ? 'Generating...' : 'Random Team'}
+            </button>
+            
+            <select
+              onChange={(e) => {
+                if (e.target.value) {
+                  generateTeamByType(e.target.value, 6);
+                  e.target.value = '';
+                }
+              }}
+              disabled={isGenerating}
+              className="text-xs border border-gray-300 rounded px-2 py-1 disabled:opacity-50"
+            >
+              <option value="">Generate by Type</option>
+              <option value="fire">Fire Team</option>
+              <option value="water">Water Team</option>
+              <option value="grass">Grass Team</option>
+              <option value="electric">Electric Team</option>
+              <option value="psychic">Psychic Team</option>
+              <option value="fighting">Fighting Team</option>
+              <option value="poison">Poison Team</option>
+              <option value="ground">Ground Team</option>
+              <option value="rock">Rock Team</option>
+              <option value="bug">Bug Team</option>
+              <option value="ghost">Ghost Team</option>
+              <option value="steel">Steel Team</option>
+              <option value="dragon">Dragon Team</option>
+              <option value="dark">Dark Team</option>
+              <option value="fairy">Fairy Team</option>
+            </select>
+
+            <button
+              type="button"
+              onClick={() => generateRandomTeam(3)}
+              disabled={isGenerating}
+              className="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-purple-700 bg-purple-100 hover:bg-purple-200 disabled:opacity-50"
+            >
+              <Zap className="h-3 w-3 mr-1" />
+              Quick 3
+            </button>
+          </div>
         </div>
 
         {party.pokemon.map((pokemon, index) => (
@@ -83,6 +216,14 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
               className="flex-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
               placeholder="pikachu level=50 moves=thunderbolt,quick-attack"
             />
+            <button
+              type="button"
+              onClick={() => openPokemonFormSelector(index)}
+              className="p-1 text-indigo-600 hover:text-indigo-800"
+              title="Add Pokémon"
+            >
+              <Search className="h-4 w-4" />
+            </button>
             <button
               type="button"
               onClick={() => removePokemon(index)}
@@ -297,30 +438,38 @@ export function NPCPartyBuilder({ config, onChange }: NPCPartyBuilderProps) {
   }
 
   return (
-    <div className="space-y-6">
-      <h2 className="text-xl font-semibold text-gray-900">Pokemon Party</h2>
+    <>
+      <div className="space-y-6">
+        <h2 className="text-xl font-semibold text-gray-900">Pokemon Party</h2>
 
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">Party Type</label>
-        <div className="flex space-x-4">
-          {(['simple', 'pool', 'script'] as const).map((type) => (
-            <label key={type} className="inline-flex items-center">
-              <input
-                type="radio"
-                value={type}
-                checked={partyType === type}
-                onChange={(e) => handlePartyTypeChange(e.target.value as 'simple' | 'pool' | 'script')}
-                className="form-radio"
-              />
-              <span className="ml-2 capitalize">{type}</span>
-            </label>
-          ))}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">Party Type</label>
+          <div className="flex space-x-4">
+            {(['simple', 'pool', 'script'] as const).map((type) => (
+              <label key={type} className="inline-flex items-center">
+                <input
+                  type="radio"
+                  value={type}
+                  checked={partyType === type}
+                  onChange={(e) => handlePartyTypeChange(e.target.value as 'simple' | 'pool' | 'script')}
+                  className="form-radio"
+                />
+                <span className="ml-2 capitalize">{type}</span>
+              </label>
+            ))}
+          </div>
         </div>
+
+        {partyType === 'simple' && renderSimpleParty()}
+        {partyType === 'pool' && renderPoolParty()}
+        {partyType === 'script' && renderScriptParty()}
       </div>
 
-      {partyType === 'simple' && renderSimpleParty()}
-      {partyType === 'pool' && renderPoolParty()}
-      {partyType === 'script' && renderScriptParty()}
-    </div>
+      <PokemonFormSelector
+        isOpen={showPokemonFormSelector}
+        onSelect={handlePokemonFormSelect}
+        onClose={() => setShowPokemonFormSelector(false)}
+      />
+    </>
   );
 }

src/components/PokemonFormSelector.tsx

@@ -0,0 +1,304 @@
+import { useState, useEffect } from 'react';
+import { X, Loader } from 'lucide-react';
+import { pokemonApi, type PokemonListItem, type Pokemon } from '../services/pokemonApi';
+
+interface PokemonFormData {
+  pokemon: string;
+  level: number;
+  moves: string[];
+}
+
+interface PokemonFormSelectorProps {
+  onSelect: (pokemonString: string) => void;
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export function PokemonFormSelector({ onSelect, onClose, isOpen }: PokemonFormSelectorProps) {
+  const [allPokemon, setAllPokemon] = useState<PokemonListItem[]>([]);
+  const [selectedPokemon, setSelectedPokemon] = useState<Pokemon | null>(null);
+  const [isLoadingMoves, setIsLoadingMoves] = useState(false);
+  const [availableMoves, setAvailableMoves] = useState<string[]>([]);
+  
+  const [formData, setFormData] = useState<PokemonFormData>({
+    pokemon: '',
+    level: 50,
+    moves: ['', '', '', '']
+  });
+
+  // Load all Pokemon on component mount
+  useEffect(() => {
+    const loadAllPokemon = async () => {
+      try {
+        const response = await pokemonApi.getAllPokemon(1010); // Gen 1-9
+        setAllPokemon(response.results);
+      } catch (error) {
+        console.error('Failed to load Pokemon list:', error);
+      }
+    };
+
+    if (isOpen && allPokemon.length === 0) {
+      loadAllPokemon();
+    }
+  }, [isOpen, allPokemon.length]);
+
+  // Load Pokemon details when Pokemon is selected
+  useEffect(() => {
+    const loadPokemonDetails = async () => {
+      if (!formData.pokemon) {
+        setSelectedPokemon(null);
+        setAvailableMoves([]);
+        return;
+      }
+
+      setIsLoadingMoves(true);
+      try {
+        const pokemon = await pokemonApi.getPokemon(formData.pokemon);
+        setSelectedPokemon(pokemon);
+        
+        // Get all moves the Pokemon can learn
+        const moves = pokemon.moves
+          .filter(moveData => 
+            moveData.version_group_details.some(detail => 
+              detail.move_learn_method.name === 'level-up' ||
+              detail.move_learn_method.name === 'machine' ||
+              detail.move_learn_method.name === 'tutor'
+            )
+          )
+          .map(moveData => moveData.move.name)
+          .sort();
+        
+        setAvailableMoves(moves);
+      } catch (error) {
+        console.error('Failed to load Pokemon details:', error);
+        setSelectedPokemon(null);
+        setAvailableMoves([]);
+      } finally {
+        setIsLoadingMoves(false);
+      }
+    };
+
+    loadPokemonDetails();
+  }, [formData.pokemon]);
+
+  const handlePokemonChange = (pokemonName: string) => {
+    setFormData(prev => ({
+      ...prev,
+      pokemon: pokemonName,
+      moves: ['', '', '', ''] // Reset moves when Pokemon changes
+    }));
+  };
+
+  const handleLevelChange = (level: number) => {
+    setFormData(prev => ({ ...prev, level }));
+  };
+
+  const handleMoveChange = (index: number, move: string) => {
+    setFormData(prev => {
+      const newMoves = [...prev.moves];
+      newMoves[index] = move;
+      return { ...prev, moves: newMoves };
+    });
+  };
+
+  const handleSubmit = () => {
+    if (!formData.pokemon) return;
+
+    // Filter out empty moves
+    const selectedMoves = formData.moves.filter(move => move !== '');
+    const movesString = selectedMoves.length > 0 ? ` moves=${selectedMoves.join(',')}` : '';
+    const pokemonString = `${formData.pokemon} level=${formData.level}${movesString}`;
+    
+    onSelect(pokemonString);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setFormData({
+      pokemon: '',
+      level: 50,
+      moves: ['', '', '', '']
+    });
+    setSelectedPokemon(null);
+    setAvailableMoves([]);
+    onClose();
+  };
+
+  const isFormValid = formData.pokemon !== '';
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b">
+          <h2 className="text-lg font-semibold">Add Pokémon to Team</h2>
+          <button
+            onClick={handleClose}
+            className="p-1 hover:bg-gray-100 rounded"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-4 space-y-6">
+          {/* Pokemon Selection */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Select Pokémon *
+            </label>
+            <select
+              value={formData.pokemon}
+              onChange={(e) => handlePokemonChange(e.target.value)}
+              className="w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+            >
+              <option value="">Choose a Pokémon...</option>
+              {allPokemon.map((pokemon) => (
+                <option key={pokemon.name} value={pokemon.name}>
+                  {pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Pokemon Info */}
+          {selectedPokemon && (
+            <div className="bg-gray-50 p-4 rounded-lg">
+              <div className="flex items-center mb-3">
+                {selectedPokemon.sprites.other?.['official-artwork']?.front_default && (
+                  <img
+                    src={selectedPokemon.sprites.other['official-artwork'].front_default}
+                    alt={selectedPokemon.name}
+                    className="w-16 h-16 mr-4"
+                  />
+                )}
+                <div>
+                  <h3 className="text-lg font-bold capitalize">{selectedPokemon.name}</h3>
+                  <div className="flex gap-2 mt-1">
+                    {selectedPokemon.types.map((type) => (
+                      <span
+                        key={type.slot}
+                        className="px-2 py-1 bg-white border text-xs rounded capitalize"
+                      >
+                        {type.type.name}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              
+              {/* Stats */}
+              <div className="grid grid-cols-2 gap-2 text-xs">
+                <div>Height: {selectedPokemon.height / 10}m</div>
+                <div>Weight: {selectedPokemon.weight / 10}kg</div>
+                <div>Base Experience: {selectedPokemon.base_experience}</div>
+                <div>Available Moves: {availableMoves.length}</div>
+              </div>
+            </div>
+          )}
+
+          {/* Level Selection */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Level: {formData.level}
+            </label>
+            <div className="flex items-center gap-4">
+              <input
+                type="range"
+                min="1"
+                max="100"
+                value={formData.level}
+                onChange={(e) => handleLevelChange(parseInt(e.target.value))}
+                className="flex-1"
+              />
+              <input
+                type="number"
+                min="1"
+                max="100"
+                value={formData.level}
+                onChange={(e) => handleLevelChange(parseInt(e.target.value) || 1)}
+                className="w-16 border border-gray-300 rounded px-2 py-1 text-sm"
+              />
+            </div>
+          </div>
+
+          {/* Move Selection */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Moves (Optional - up to 4)
+            </label>
+            
+            {isLoadingMoves ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader className="h-5 w-5 animate-spin text-indigo-600" />
+                <span className="ml-2 text-sm text-gray-600">Loading available moves...</span>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {formData.moves.map((selectedMove, index) => (
+                  <div key={index}>
+                    <label className="block text-xs font-medium text-gray-600 mb-1">
+                      Move {index + 1}
+                    </label>
+                    <select
+                      value={selectedMove}
+                      onChange={(e) => handleMoveChange(index, e.target.value)}
+                      disabled={availableMoves.length === 0}
+                      className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent disabled:bg-gray-100"
+                    >
+                      <option value="">No move</option>
+                      {availableMoves.map((move) => (
+                        <option key={move} value={move}>
+                          {move.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                ))}
+                
+                {availableMoves.length === 0 && selectedPokemon && (
+                  <p className="text-sm text-gray-500 italic">
+                    No moves available for this Pokémon
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Preview */}
+          {isFormValid && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Preview
+              </label>
+              <div className="bg-gray-100 p-3 rounded border font-mono text-sm">
+                {formData.pokemon} level={formData.level}
+                {formData.moves.filter(m => m !== '').length > 0 && (
+                  <span> moves={formData.moves.filter(m => m !== '').join(',')}</span>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-end gap-2 p-4 border-t bg-gray-50">
+          <button
+            onClick={handleClose}
+            className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={!isFormValid || isLoadingMoves}
+            className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Add to Team
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/PokemonSelector.tsx

@@ -0,0 +1,265 @@
+import { useState, useEffect, useRef } from 'react';
+import { Search, Loader, X } from 'lucide-react';
+import { pokemonApi, type PokemonListItem, type Pokemon } from '../services/pokemonApi';
+
+interface PokemonSelectorProps {
+  onSelect: (pokemonString: string) => void;
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export function PokemonSelector({ onSelect, onClose, isOpen }: PokemonSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<PokemonListItem[]>([]);
+  const [selectedPokemon, setSelectedPokemon] = useState<Pokemon | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [level, setLevel] = useState(50);
+  const [selectedMoves, setSelectedMoves] = useState<string[]>([]);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const searchPokemon = async () => {
+      if (searchQuery.length < 2) {
+        setSearchResults([]);
+        return;
+      }
+
+      setIsSearching(true);
+      try {
+        const results = await pokemonApi.searchPokemon(searchQuery, 10);
+        setSearchResults(results);
+      } catch (error) {
+        console.error('Search failed:', error);
+        setSearchResults([]);
+      } finally {
+        setIsSearching(false);
+      }
+    };
+
+    const timeoutId = setTimeout(searchPokemon, 300);
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery]);
+
+  const handlePokemonSelect = async (pokemonItem: PokemonListItem) => {
+    setIsLoading(true);
+    try {
+      const pokemon = await pokemonApi.getPokemon(pokemonItem.name);
+      setSelectedPokemon(pokemon);
+      setSearchResults([]);
+      setSearchQuery('');
+      
+      // Auto-select some random moves
+      const levelMoves = pokemon.moves
+        .filter(moveData => 
+          moveData.version_group_details.some(detail => 
+            detail.move_learn_method.name === 'level-up'
+          )
+        )
+        .map(moveData => moveData.move.name);
+      
+      const randomMoves = levelMoves
+        .sort(() => Math.random() - 0.5)
+        .slice(0, 4);
+      
+      setSelectedMoves(randomMoves);
+    } catch (error) {
+      console.error('Failed to load pokemon:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleConfirm = () => {
+    if (selectedPokemon) {
+      const moves = selectedMoves.length > 0 ? ` moves=${selectedMoves.join(',')}` : '';
+      const pokemonString = `${selectedPokemon.name} level=${level}${moves}`;
+      onSelect(pokemonString);
+      handleClose();
+    }
+  };
+
+  const handleClose = () => {
+    setSearchQuery('');
+    setSearchResults([]);
+    setSelectedPokemon(null);
+    setSelectedMoves([]);
+    setLevel(50);
+    onClose();
+  };
+
+  const toggleMove = (move: string) => {
+    if (selectedMoves.includes(move)) {
+      setSelectedMoves(selectedMoves.filter(m => m !== move));
+    } else if (selectedMoves.length < 4) {
+      setSelectedMoves([...selectedMoves, move]);
+    }
+  };
+
+  const availableMoves = selectedPokemon?.moves
+    .filter(moveData => 
+      moveData.version_group_details.some(detail => 
+        detail.move_learn_method.name === 'level-up'
+      )
+    )
+    .map(moveData => moveData.move.name)
+    .sort() || [];
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b">
+          <h2 className="text-lg font-semibold">Select a Pokémon</h2>
+          <button
+            onClick={handleClose}
+            className="p-1 hover:bg-gray-100 rounded"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-hidden flex flex-col">
+          {!selectedPokemon ? (
+            // Search Phase
+            <div className="p-4 flex-1 flex flex-col">
+              <div className="relative mb-4">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search for a Pokémon..."
+                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                />
+                {isSearching && (
+                  <Loader className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-gray-400" />
+                )}
+              </div>
+
+              {searchResults.length > 0 && (
+                <div className="border rounded-md max-h-64 overflow-y-auto">
+                  {searchResults.map((pokemon) => (
+                    <button
+                      key={pokemon.name}
+                      onClick={() => handlePokemonSelect(pokemon)}
+                      className="w-full text-left px-4 py-2 hover:bg-gray-50 border-b last:border-b-0 flex items-center justify-between"
+                    >
+                      <span className="capitalize font-medium">{pokemon.name}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {searchQuery.length >= 2 && searchResults.length === 0 && !isSearching && (
+                <p className="text-gray-500 text-center py-4">No Pokémon found</p>
+              )}
+
+              {isLoading && (
+                <div className="flex items-center justify-center py-8">
+                  <Loader className="h-6 w-6 animate-spin text-indigo-600" />
+                  <span className="ml-2">Loading Pokémon details...</span>
+                </div>
+              )}
+            </div>
+          ) : (
+            // Configuration Phase
+            <div className="p-4 flex-1 flex flex-col overflow-hidden">
+              <div className="flex items-center mb-4">
+                {selectedPokemon.sprites.other?.['official-artwork']?.front_default && (
+                  <img
+                    src={selectedPokemon.sprites.other['official-artwork'].front_default}
+                    alt={selectedPokemon.name}
+                    className="w-16 h-16 mr-4"
+                  />
+                )}
+                <div>
+                  <h3 className="text-xl font-bold capitalize">{selectedPokemon.name}</h3>
+                  <div className="flex gap-2 mt-1">
+                    {selectedPokemon.types.map((type) => (
+                      <span
+                        key={type.slot}
+                        className="px-2 py-1 bg-gray-100 text-xs rounded capitalize"
+                      >
+                        {type.type.name}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* Level */}
+              <div className="mb-4">
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Level: {level}
+                </label>
+                <input
+                  type="range"
+                  min="1"
+                  max="100"
+                  value={level}
+                  onChange={(e) => setLevel(parseInt(e.target.value))}
+                  className="w-full"
+                />
+              </div>
+
+              {/* Moves */}
+              <div className="flex-1 overflow-hidden">
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Moves ({selectedMoves.length}/4)
+                </label>
+                <div className="border rounded-md p-2 max-h-40 overflow-y-auto">
+                  <div className="grid grid-cols-2 gap-1">
+                    {availableMoves.map((move) => (
+                      <button
+                        key={move}
+                        onClick={() => toggleMove(move)}
+                        disabled={selectedMoves.length >= 4 && !selectedMoves.includes(move)}
+                        className={`text-left px-2 py-1 text-xs rounded transition-colors ${
+                          selectedMoves.includes(move)
+                            ? 'bg-indigo-100 text-indigo-800'
+                            : selectedMoves.length >= 4
+                            ? 'text-gray-400 cursor-not-allowed'
+                            : 'hover:bg-gray-50'
+                        }`}
+                      >
+                        {move.replace('-', ' ')}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        {selectedPokemon && (
+          <div className="flex justify-end gap-2 p-4 border-t">
+            <button
+              onClick={() => setSelectedPokemon(null)}
+              className="px-4 py-2 text-gray-600 hover:bg-gray-50 rounded"
+            >
+              Back
+            </button>
+            <button
+              onClick={handleConfirm}
+              className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700"
+            >
+              Add to Team
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}