src/lib/components/PicletGenerator/PicletGenerator.svelte

<script lang="ts">
  import type { PicletGeneratorProps, PicletWorkflowState, CaptionType, CaptionLength, PicletStats } from '$lib/types';
  import { Nature } from '$lib/types';
  import type { PicletInstance } from '$lib/db/schema';
  import UploadStep from './UploadStep.svelte';
  import WorkflowProgress from './WorkflowProgress.svelte';
  import PicletResult from './PicletResult.svelte';
  import { removeBackground } from '$lib/utils/professionalImageProcessing';
  import { extractPicletMetadata } from '$lib/services/picletMetadata';
  import { savePicletInstance, generatedDataToPicletInstance } from '$lib/db/piclets';
  import { PicletType, TYPE_DATA } from '$lib/types/picletTypes';
  import { EncounterService } from '$lib/db/encounterService';
  
  interface Props extends PicletGeneratorProps {}
  
  let { joyCaptionClient, zephyrClient, fluxClient, qwenClient }: Props = $props();
  
  let state: PicletWorkflowState = $state({
    currentStep: 'upload',
    userImage: null,
    imageCaption: null,
    picletConcept: null,
    picletStats: null,
    imagePrompt: null,
    picletImage: null,
    error: null,
    isProcessing: false
  });
  
  const IMAGE_GENERATION_PROMPT = (concept: string) => `Extract ONLY the visual appearance from this monster concept and describe it in one concise sentence:
"${concept}"

Focus on: colors, body shape, eyes, limbs, mouth, and key visual features. Omit backstory, abilities, and non-visual details.`;
  

  async function importPiclet(picletData: PicletInstance) {
    state.isProcessing = true;
    state.currentStep = 'complete';
    
    try {
      // Save the imported piclet
      const savedId = await savePicletInstance(picletData);
      
      // Create a success state similar to generation
      state.picletImage = {
        imageUrl: picletData.imageUrl,
        imageData: picletData.imageData,
        seed: 0,
        prompt: 'Imported piclet'
      };
      
      // Show import success
      state.isProcessing = false;
      alert(`Successfully imported ${picletData.nickname || picletData.typeId}!`);
      
      // Reset to allow another import/generation
      setTimeout(() => reset(), 2000);
    } catch (error) {
      state.error = `Failed to import piclet: ${error}`;
      state.isProcessing = false;
    }
  }

  async function handleImageSelected(file: File) {
    if (!joyCaptionClient || !fluxClient) {
      state.error = "Services not connected. Please wait...";
      return;
    }
    
    state.userImage = file;
    state.error = null;
    
    // Check if this is a piclet card with metadata
    const picletData = await extractPicletMetadata(file);
    if (picletData) {
      // Import existing piclet
      await importPiclet(picletData);
    } else {
      // Generate new piclet
      startWorkflow();
    }
  }
  
  async function startWorkflow() {
    state.isProcessing = true;
    
    try {
      // Step 1: Generate detailed object description with joy-caption
      await captionImage();
      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
      
      // Step 2: Generate free-form monster concept with qwen3
      await generateConcept();
      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
      
      // Step 3: Generate structured monster stats based on both caption and concept
      await generateStats();
      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
      
      // Step 4: Generate image prompt with qwen3
      await generateImagePrompt();
      await new Promise(resolve => setTimeout(resolve, 100)); // Small delay for state update
      
      // Step 5: Generate monster image
      await generateMonsterImage();
      
      // Step 6: Auto-save the piclet as uncaught
      await autoSavePiclet();
      
      state.currentStep = 'complete';
    } catch (err) {
      console.error('Workflow error:', err);
      
      // Check for GPU quota error
      if (err && typeof err === 'object' && 'message' in err) {
        const errorMessage = String(err.message);
        if (errorMessage.includes('exceeded your GPU quota') || errorMessage.includes('GPU quota')) {
          state.error = 'GPU quota exceeded! You need to sign in with Hugging Face for free GPU time, or upgrade to Hugging Face Pro for more quota.';
        } else {
          state.error = errorMessage;
        }
      } else if (err instanceof Error) {
        state.error = err.message;
      } else {
        state.error = 'An unknown error occurred';
      }
    } finally {
      state.isProcessing = false;
    }
  }
  
  function handleAPIError(error: any): never {
    console.error('API Error:', error);
    
    // Check if it's a GPU quota error
    if (error && typeof error === 'object' && 'message' in error) {
      const errorMessage = String(error.message);
      if (errorMessage.includes('exceeded your GPU quota') || errorMessage.includes('GPU quota')) {
        throw new Error('GPU quota exceeded! You need to sign in with Hugging Face for free GPU time, or upgrade to Hugging Face Pro for more quota.');
      }
      throw new Error(errorMessage);
    }
    
    // Check if error has a different structure (like the status object from the logs)
    if (error && typeof error === 'object' && 'type' in error && error.type === 'status') {
      const statusError = error as any;
      if (statusError.message && statusError.message.includes('GPU quota')) {
        throw new Error('GPU quota exceeded! You need to sign in with Hugging Face for free GPU time, or upgrade to Hugging Face Pro for more quota.');
      }
      throw new Error(statusError.message || 'API request failed');
    }
    
    throw error;
  }
  
  async function captionImage() {
    state.currentStep = 'captioning';
    
    if (!joyCaptionClient || !state.userImage) {
      throw new Error('Caption service not available or no image provided');
    }
    
    try {
      const output = await joyCaptionClient.predict("/stream_chat", [
        state.userImage,  // input_image
        "Descriptive",  // caption_type
        "long",  // caption_length
        [],  // extra_options
        "",  // name_input
        ""  // custom_prompt (empty for default descriptive captioning)
      ]);
      
      const [, caption] = output.data;
      // Store the detailed object description
      state.imageCaption = caption;
      console.log('Detailed object description generated:', caption);
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function generateConcept() {
    state.currentStep = 'conceptualizing';
    
    if (!qwenClient || !state.imageCaption) {
      throw new Error('Qwen service not available or no image caption provided');
    }
    
    const conceptPrompt = `Based on this detailed object description, create a Pokémon-style monster that transforms the object into an imaginative creature. The monster should clearly be inspired by the object's appearance but reimagined as a living monster.

Object description: "${state.imageCaption}"

Guidelines:
- Take the object's key visual elements (colors, shapes, materials) incorporating all of them into a single creature design
- Add eyes (can be glowing, mechanical, multiple, etc.) positioned where they make sense
- Include limbs (legs, arms, wings, tentacles) that grow from or replace parts of the object
- Add a mouth, beak, or feeding apparatus if appropriate
- Add creature elements like tail, fins, claws, horns, etc where fitting

Format your response exactly as follows:

# Object Rarity
{Assess how rare the object is based on real-world availability and value. Rare objects give strong monsters while common objects give weak ones. Use: common, uncommon, rare, or legendary}

# Monster Name
{Creative name that hints at the original object}

## Monster Visual Description
{Detailed physical description showing how the object becomes a creature. Ensure the creature uses all the unique attributes of the object. Include colors, shapes, materials, eyes, limbs, mouth, and distinctive features. This section should be comprehensive as it will be used for both stats generation and image creation.}`;
    
    try {
      // Create the required state structure based on qwen.html
      const defaultState = {
        "conversation_contexts": {},
        "conversations": [],
        "conversation_id": "",
      };
      
      // Create default settings based on qwen.html with minimal thinking tokens
      const defaultSettings = {
        "model": "qwen3-235b-a22b",
        "sys_prompt": "You are a creative monster designer specializing in transforming everyday objects into imaginative Pokémon-style creatures. Follow the exact format provided and create detailed, engaging descriptions that bring these monsters to life.",
        "thinking_budget": 3
      };
      
      // Create thinking button state
      const thinkingBtnState = {
        "enable_thinking": true
      };
      
      console.log('Generating monster concept with qwen3...');
      
      // Call the add_message function (fn_index 13)
      const output = await qwenClient.predict(13, [
        conceptPrompt,          // input_value
        defaultSettings,        // settings_form_value  
        thinkingBtnState,       // thinking_btn_state_value
        defaultState            // state_value
      ]);
      
      console.log('Qwen3 concept response:', output);
      
      // Extract the response text from the output
      let responseText = "";
      if (output && output.data && Array.isArray(output.data)) {
        // The chatbot response is at index 5 in the outputs array
        const chatbotUpdate = output.data[5];
        
        if (chatbotUpdate && chatbotUpdate.value && Array.isArray(chatbotUpdate.value)) {
          const chatHistory = chatbotUpdate.value;
          
          if (chatHistory.length > 0) {
            // Get the last message (assistant's response)
            const lastMessage = chatHistory[chatHistory.length - 1];
            
            if (lastMessage && lastMessage.content && Array.isArray(lastMessage.content)) {
              // Extract text content from the message
              const textContents = lastMessage.content
                .filter((item: any) => item.type === "text")
                .map((item: any) => item.content)
                .join("\n");
              responseText = textContents || "Response received but no text content found";
            } else if (lastMessage && lastMessage.role === "assistant") {
              // Fallback - if content structure is different
              responseText = JSON.stringify(lastMessage, null, 2);
            }
          }
        }
      }
      
      if (!responseText || responseText.trim() === '') {
        throw new Error('Failed to generate monster concept');
      }
      
      state.picletConcept = responseText;
      console.log('Monster concept generated:', responseText);
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function generateImagePrompt() {
    state.currentStep = 'promptCrafting';
    
    if (!qwenClient || !state.picletConcept || !state.imageCaption) {
      throw new Error('Qwen service not available or no concept/caption available for prompt generation');
    }
    
    // Extract the Monster Visual Description from the structured concept
    const visualDescMatch = state.picletConcept.match(/## Monster Visual Description\s*\n([\s\S]*?)(?=##|$)/);
    
    if (visualDescMatch && visualDescMatch[1]) {
      state.imagePrompt = visualDescMatch[1].trim();
      console.log('Extracted visual description for image generation:', state.imagePrompt);
      return; // Skip qwen3 call since we have the description
    }
    
    // Fallback: if format parsing fails, use qwen3 to extract visual description
    const imagePromptPrompt = `Based on this monster concept, extract ONLY the visual description for image generation:

MONSTER CONCEPT:
"""
${state.picletConcept}
"""

Create a concise visual description (1-3 sentences, max 100 words). Focus only on colors, shapes, materials, eyes, limbs, mouth, and distinctive features. Omit all non-visual information like abilities and backstory.`;
    
    try {
      // Create the required state structure based on qwen.html
      const defaultState = {
        "conversation_contexts": {},
        "conversations": [],
        "conversation_id": "",
      };
      
      // Create default settings based on qwen.html with minimal thinking tokens
      const defaultSettings = {
        "model": "qwen3-235b-a22b",
        "sys_prompt": "You are an expert at creating concise visual descriptions for image generation. Extract ONLY visual appearance details and describe them in 1-2 sentences (max 50 words). Focus on colors, shape, eyes, limbs, and distinctive features. Omit all non-visual information like abilities, personality, or backstory.",
        "thinking_budget": 3
      };
      
      // Create thinking button state
      const thinkingBtnState = {
        "enable_thinking": true
      };
      
      console.log('Generating image prompt with qwen3...');
      
      // Call the add_message function (fn_index 13)
      const output = await qwenClient.predict(13, [
        imagePromptPrompt,      // input_value
        defaultSettings,        // settings_form_value  
        thinkingBtnState,       // thinking_btn_state_value
        defaultState            // state_value
      ]);
      
      console.log('Qwen3 image prompt response:', output);
      
      // Extract the response text from the output using the same pattern as generateConcept
      let responseText = "";
      if (output && output.data && Array.isArray(output.data)) {
        // The chatbot response is at index 5 in the outputs array
        const chatbotUpdate = output.data[5];
        
        if (chatbotUpdate && chatbotUpdate.value && Array.isArray(chatbotUpdate.value)) {
          const chatHistory = chatbotUpdate.value;
          
          if (chatHistory.length > 0) {
            // Get the last message (assistant's response)
            const lastMessage = chatHistory[chatHistory.length - 1];
            
            if (lastMessage && lastMessage.content && Array.isArray(lastMessage.content)) {
              // Extract text content from the message
              const textContents = lastMessage.content
                .filter((item: any) => item.type === "text")
                .map((item: any) => item.content)
                .join("\n");
              responseText = textContents || "Response received but no text content found";
            } else if (lastMessage && lastMessage.role === "assistant") {
              // Fallback - if content structure is different
              responseText = JSON.stringify(lastMessage, null, 2);
            }
          }
        }
      }
      
      if (!responseText || responseText.trim() === '') {
        throw new Error('Failed to generate image prompt');
      }
      
      state.imagePrompt = responseText.trim();
      console.log('Image prompt generated:', state.imagePrompt);
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function generateMonsterImage() {
    state.currentStep = 'generating';
    
    if (!fluxClient || !state.imagePrompt || !state.picletStats) {
      throw new Error('Image generation service not available or no prompt/stats');
    }
    
    // The image prompt should already be generated by generateImagePrompt() in the workflow
    
    // Get tier for image quality enhancement
    const tier = state.picletStats.tier || 'medium';
    const tierDescriptions = {
      low: 'simple and basic design',
      medium: 'detailed and well-crafted design', 
      high: 'highly detailed and impressive design with special effects',
      legendary: 'extremely detailed and majestic design with dramatic lighting and aura effects'
    };
    
    try {
      const output = await fluxClient.predict("/infer", [
        `${state.imagePrompt}\nNow generate a Pokémon-Anime-style image of the monster in an idle pose with a white background. This is a ${tier} tier monster with ${tierDescriptions[tier as keyof typeof tierDescriptions]}. The monster should not be attacking or in motion. The full monster must be visible within the frame.`,
        0,      // seed
        true,   // randomizeSeed
        1024,   // width
        1024,   // height
        4       // steps
      ]);
      
      const [image, usedSeed] = output.data;
      let url: string | undefined;
      
      if (typeof image === "string") url = image;
      else if (image && image.url) url = image.url;
      else if (image && image.path) url = image.path;
      
      if (url) {
        // Process the image to remove background using professional AI method
        console.log('Processing image for background removal...');
        try {
          const transparentBase64 = await removeBackground(url);
          state.picletImage = {
            imageUrl: url,
            imageData: transparentBase64,
            seed: usedSeed,
            prompt: state.imagePrompt
          };
          console.log('Background removal completed successfully');
        } catch (processError) {
          console.error('Failed to process image for background removal:', processError);
          // Fallback to original image
          state.picletImage = {
            imageUrl: url,
            seed: usedSeed,
            prompt: state.imagePrompt
          };
        }
      } else {
        throw new Error('Failed to generate monster image');
      }
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function generateStats() {
    state.currentStep = 'statsGenerating';
    
    if (!qwenClient || !state.picletConcept || !state.imageCaption) {
      throw new Error('Qwen service not available or no concept/caption available for stats generation');
    }
    
    // Default tier (will be set from the generated stats)
    let tier: 'low' | 'medium' | 'high' | 'legendary' = 'medium';
    
    // Extract monster name and rarity from the structured concept
    const monsterNameMatch = state.picletConcept.match(/# Monster Name\s*\n([\s\S]*?)(?=^##|$)/m);
    const monsterName = monsterNameMatch ? monsterNameMatch[1].trim() : 'Unknown Monster';
    
    const rarityMatch = state.picletConcept.match(/# Object Rarity\s*\n([\s\S]*?)(?=^#)/m);
    const objectRarity = rarityMatch ? rarityMatch[1].trim().toLowerCase() : 'common';
    
    // Create comprehensive battle-ready monster prompt
    const statsPrompt = `Based on this detailed object description and monster concept, create a complete battle-ready monster for the Pictuary Battle System:

ORIGINAL OBJECT DESCRIPTION:
"${state.imageCaption}"

MONSTER CONCEPT:
"${state.picletConcept}"

The object rarity has been assessed as: ${objectRarity}

## BATTLE SYSTEM OVERVIEW
This monster will be used in a turn-based battle system with composable effects. You must create:
1. **Base Stats**: Core combat statistics  
2. **Special Ability**: Passive trait with triggers and effects
3. **Movepool**: 4 battle moves with complex effect combinations

## TYPE SYSTEM
Choose the primary type (and optional secondary type) based on the object:
• **beast**: Vertebrate wildlife — mammals, birds, reptiles. Raw physicality, instincts
• **bug**: Arthropods — butterflies, beetles, mantises. Agile swarms, precision strikes  
• **aquatic**: Life that swims, dives, sloshes — fish, octopus, sentient puddles. Tides, pressure
• **flora**: Plants and fungi — blooming or decaying. Growth, spores, vines, seasonal shifts
• **mineral**: Stones, crystals, metals — earth's depths. Durability, reflective armor, seismic shocks
• **space**: Stars, moon, cosmic objects — not of this world. Celestial energy, gravitational effects
• **machina**: Engineered devices — gadgets to machinery. Gears, circuits, drones, power surges
• **structure**: Buildings, bridges, monuments — architectural titans. Fortification, terrain shaping
• **culture**: Art, fashion, toys, symbols — creative expressions. Buffs, debuffs, illusion, stories
• **cuisine**: Dishes, drinks, culinary art — flavors and aromas. Temperature, restorative effects

## EFFECT SYSTEM
All abilities and moves use these **atomic building blocks**:

### **Effect Types:**
1. **damage**: Deal damage (weak/normal/strong/extreme) with formulas (standard/recoil/drain/fixed/percentage)
2. **modifyStats**: Change stats (increase/decrease/greatly_increase/greatly_decrease) for hp/attack/defense/speed/accuracy  
3. **applyStatus**: Apply status effects (burn/freeze/paralyze/poison/sleep/confuse) with chance percentage
4. **heal**: Restore HP (small/medium/large/full) or by percentage/fixed amounts
5. **manipulatePP**: Drain, restore, or disable PP from moves
6. **fieldEffect**: Persistent battlefield modifications (reflect/lightScreen for defense, spikes for entry damage, mist for stat protection, healingField for regeneration, etc.)
7. **counter**: Reflect damage
8. **priority**: Modify move priority (-5 to +5)
9. **removeStatus**: Cure specific status conditions
10. **mechanicOverride**: Modify core game mechanics (immunity, type changes, etc.)

### **Targets:**
- **self**: The move user
- **opponent**: The target opponent  
- **all**: All combatants
- **allies**: Allied creatures (team battles)
- **field**: Entire battlefield

### **Conditions:**
- **always**: Effect always applies
- **onHit**: Only if move hits successfully  
- **afterUse**: After move execution regardless of hit/miss
- **onCritical**: Only on critical hits
- **ifLowHp**: If user's HP < 25%
- **ifHighHp**: If user's HP > 75%

### **Move Flags:**
Moves can have flags affecting interactions:
- **contact**: Makes physical contact (triggers contact abilities)
- **explosive**: Explosive move (affected by explosion-related abilities)
- **draining**: Drains HP from target
- **priority**: Natural priority move (+1 to +5)
- **sacrifice**: Involves self-sacrifice or major cost
- **reckless**: High power with drawbacks

## SPECIAL ABILITY TRIGGERS
Special abilities activate on specific events:
- **onSwitchIn**: When entering battle
- **onDamageTaken**: When this monster takes damage
- **onContactDamage**: When hit by a contact move
- **endOfTurn**: At the end of each turn
- **onLowHP**: When HP drops below 25%
- **onStatusInflicted**: When a status is applied

## BALANCING GUIDELINES
**Stat Ranges by Rarity:**
- **common**: 45-80 total stats, individual stats 10-25
- **uncommon**: 80-120 total stats, individual stats 15-35  
- **rare**: 120-160 total stats, individual stats 25-45
- **legendary**: 160-200+ total stats, individual stats 35-50

**Design Philosophy:**
- **Risk-Reward**: Powerful moves must have meaningful drawbacks
- **Type Synergy**: Moves should match the monster's type and concept
- **Strategic Depth**: Abilities should create interesting decision points
- **No Strictly Better**: Every powerful effect has a cost or condition

The output should be formatted as a JSON instance that conforms to the schema below.

\`\`\`json
{
  "type": "object",
  "properties": {
    "name": {"type": "string", "description": "Creative name for the monster that hints at the original object"},
    "description": {"type": "string", "description": "Flavor text describing the monster (2-3 sentences)"},
    "tier": {"type": "string", "enum": ["low", "medium", "high", "legendary"], "description": "Power tier based on rarity: common=low, uncommon=medium, rare=high, legendary=legendary"},
    "primaryType": {"type": "string", "enum": ["beast", "bug", "aquatic", "flora", "mineral", "space", "machina", "structure", "culture", "cuisine"], "description": "Primary type based on object characteristics"},
    "secondaryType": {"type": ["string", "null"], "enum": ["beast", "bug", "aquatic", "flora", "mineral", "space", "machina", "structure", "culture", "cuisine", null], "description": "Optional secondary type for dual-type monsters"},
    "baseStats": {
      "type": "object",
      "properties": {
        "hp": {"type": "integer", "minimum": 10, "maximum": 50, "description": "Hit points"},
        "attack": {"type": "integer", "minimum": 10, "maximum": 50, "description": "Attack power"},
        "defense": {"type": "integer", "minimum": 10, "maximum": 50, "description": "Defensive capability"},
        "speed": {"type": "integer", "minimum": 10, "maximum": 50, "description": "Speed and agility"}
      },
      "required": ["hp", "attack", "defense", "speed"],
      "additionalProperties": false
    },
    "nature": {
      "type": "string", 
      "enum": ["hardy", "docile", "serious", "bashful", "quirky", "lonely", "brave", "adamant", "naughty", "bold", "relaxed", "impish", "lax", "timid", "hasty", "jolly", "naive", "modest", "mild", "quiet", "gentle", "sassy", "careful", "calm", "reckless"],
      "description": "Personality trait affecting behavior and battle style"
    },
    "specialAbility": {
      "type": "object",
      "properties": {
        "name": {"type": "string", "description": "Name of the special ability"},
        "description": {"type": "string", "description": "Description of what the ability does"},
        "triggers": {
          "type": "array",
          "items": {"$ref": "#/definitions/Trigger"},
          "minItems": 1,
          "maxItems": 1,
          "description": "Single trigger effect for the special ability"
        }
      },
      "required": ["name", "description"],
      "additionalProperties": false
    },
    "movepool": {
      "type": "array",
      "items": {"$ref": "#/definitions/Move"},
      "minItems": 4,
      "maxItems": 4,
      "description": "Exactly 4 battle moves"
    }
  },
  "required": ["name", "description", "tier", "primaryType", "baseStats", "nature", "specialAbility", "movepool"],
  "additionalProperties": false,
  "definitions": {
    "Effect": {
      "type": "object",
      "properties": {
        "type": {"type": "string", "enum": ["damage", "modifyStats", "applyStatus", "heal", "manipulatePP", "fieldEffect", "counter", "priority", "removeStatus", "mechanicOverride"]},
        "target": {"type": "string", "enum": ["self", "opponent", "allies", "all", "attacker", "field", "playerSide", "opponentSide"]},
        "condition": {"type": "string", "enum": ["always", "onHit", "afterUse", "onCritical", "ifLowHp", "ifHighHp", "thisTurn", "nextTurn", "restOfBattle"]}
      },
      "required": ["type"],
      "allOf": [
        {"if": {"properties": {"type": {"const": "damage"}}}, "then": {"properties": {"amount": {"enum": ["weak", "normal", "strong", "extreme"]}, "formula": {"enum": ["standard", "recoil", "drain", "fixed", "percentage"]}, "value": {"type": "number"}}}},
        {"if": {"properties": {"type": {"const": "modifyStats"}}}, "then": {"properties": {"stats": {"type": "object", "properties": {"hp": {"enum": ["increase", "decrease", "greatly_increase", "greatly_decrease"]}, "attack": {"enum": ["increase", "decrease", "greatly_increase", "greatly_decrease"]}, "defense": {"enum": ["increase", "decrease", "greatly_increase", "greatly_decrease"]}, "speed": {"enum": ["increase", "decrease", "greatly_increase", "greatly_decrease"]}, "accuracy": {"enum": ["increase", "decrease", "greatly_increase", "greatly_decrease"]}}}}}},
        {"if": {"properties": {"type": {"const": "applyStatus"}}}, "then": {"properties": {"status": {"enum": ["burn", "freeze", "paralyze", "poison", "sleep", "confuse"]}, "chance": {"type": "number", "minimum": 1, "maximum": 100}}}},
        {"if": {"properties": {"type": {"const": "heal"}}}, "then": {"properties": {"amount": {"enum": ["small", "medium", "large", "full"]}, "formula": {"enum": ["percentage", "fixed"]}, "value": {"type": "number"}}}},
        {"if": {"properties": {"type": {"const": "fieldEffect"}}}, "then": {"properties": {"effect": {"enum": ["reflect", "lightScreen", "spikes", "healingMist", "toxicSpikes"]}, "stackable": {"type": "boolean"}}}},
        {"if": {"properties": {"type": {"const": "manipulatePP"}}}, "then": {"properties": {"action": {"enum": ["drain", "restore", "disable"]}, "amount": {"enum": ["small", "medium", "large"]}}}},
        {"if": {"properties": {"type": {"const": "counter"}}}, "then": {"properties": {"strength": {"enum": ["weak", "normal", "strong"]}}}},
        {"if": {"properties": {"type": {"const": "priority"}}}, "then": {"properties": {"value": {"type": "integer", "minimum": -5, "maximum": 5}}}},
        {"if": {"properties": {"type": {"const": "removeStatus"}}}, "then": {"properties": {"status": {"enum": ["burn", "freeze", "paralyze", "poison", "sleep", "confuse"]}}}},
        {"if": {"properties": {"type": {"const": "mechanicOverride"}}}, "then": {"properties": {"mechanic": {"enum": ["criticalHits", "statusImmunity", "damageReflection", "damageAbsorption", "damageCalculation", "damageMultiplier", "healingInversion", "healingBlocked", "priorityOverride", "accuracyBypass", "typeImmunity", "typeChange", "contactDamage", "drainInversion", "weatherImmunity", "flagImmunity", "flagWeakness", "flagResistance", "statModification", "targetRedirection", "extraTurn"]}, "value": {}}}}
      ]
    },
    "Trigger": {
      "type": "object",
      "properties": {
        "event": {"type": "string", "enum": ["onSwitchIn", "onDamageTaken", "onContactDamage", "endOfTurn", "onLowHP", "onStatusInflicted", "beforeMoveUse", "afterMoveUse"]},
        "condition": {"type": "string", "enum": ["always", "ifLowHp", "ifHighHp", "ifStatus:burn", "ifStatus:freeze", "ifStatus:paralyze", "ifStatus:poison", "ifStatus:sleep", "ifStatus:confuse"]},
        "effects": {"type": "array", "items": {"$ref": "#/definitions/Effect"}, "minItems": 1}
      },
      "required": ["event", "effects"]
    },
    "Move": {
      "type": "object",
      "properties": {
        "name": {"type": "string", "description": "Name of the move"},
        "description": {"type": "string", "description": "Description of what the move does"},
        "type": {"type": "string", "enum": ["beast", "bug", "aquatic", "flora", "mineral", "space", "machina", "structure", "culture", "cuisine", "normal"], "description": "Move type for STAB and effectiveness"},
        "power": {"type": "integer", "minimum": 0, "maximum": 250, "description": "Base power (0 for status moves)"},
        "accuracy": {"type": "integer", "minimum": 30, "maximum": 100, "description": "Hit chance percentage"},
        "pp": {"type": "integer", "minimum": 1, "maximum": 40, "description": "Power points (uses per battle)"},
        "priority": {"type": "integer", "minimum": -5, "maximum": 5, "description": "Priority bracket"},
        "flags": {"type": "array", "items": {"enum": ["contact", "explosive", "draining", "priority", "sacrifice", "reckless", "bite", "punch", "sound", "ground"]}, "description": "Move characteristics"},
        "effects": {"type": "array", "items": {"$ref": "#/definitions/Effect"}, "minItems": 1, "description": "What the move does"}
      },
      "required": ["name", "type", "power", "accuracy", "pp", "priority", "flags", "effects"],
      "additionalProperties": false
    }
  }
}
\`\`\`

**STAT GUIDELINES:**
Base the tier and stats on the object rarity:
- **common → low tier**: hp/attack/defense/speed should be 10-25 (total ~40-80)
- **uncommon → medium tier**: hp/attack/defense/speed should be 15-35 (total ~80-120)
- **rare → high tier**: hp/attack/defense/speed should be 25-45 (total ~120-160)
- **legendary → legendary tier**: hp/attack/defense/speed should be 35-50 (total ~160-200)

**MOVE DESIGN EXAMPLES:**
- **Basic Attack**: {"type": "damage", "target": "opponent", "amount": "normal"}
- **Status Move**: {"type": "applyStatus", "target": "opponent", "status": "burn", "chance": 30}
- **Self-Buff**: {"type": "modifyStats", "target": "self", "stats": {"attack": "increase"}}
- **Risk-Reward**: High power + {"type": "damage", "target": "self", "formula": "recoil", "value": 0.25}

Write your response within \`\`\`json\`\`\``;
    
    console.log('Generating monster stats with qwen3');
    
    try {
      // Create the required state structure based on qwen.html
      const defaultState = {
        "conversation_contexts": {},
        "conversations": [],
        "conversation_id": "",
      };
      
      // Create default settings based on qwen.html with minimal thinking tokens
      const defaultSettings = {
        "model": "qwen3-235b-a22b",
        "sys_prompt": "You are a game designer specializing in monster stats and abilities. You must ONLY output valid JSON that matches the provided schema exactly. Do not include any text before or after the JSON. Do not include null values in your JSON response. Your entire response should be wrapped in a ```json``` code block.",
        "thinking_budget": 3
      };
      
      // Create thinking button state
      const thinkingBtnState = {
        "enable_thinking": true
      };
      
      // Call the add_message function (fn_index 13)
      const output = await qwenClient.predict(13, [
        statsPrompt,            // input_value
        defaultSettings,        // settings_form_value  
        thinkingBtnState,       // thinking_btn_state_value
        defaultState            // state_value
      ]);
      
      console.log('Qwen3 stats response:', output);
      
      // Extract the response text from the output using the same pattern as generateConcept
      let responseText = "";
      if (output && output.data && Array.isArray(output.data)) {
        // The chatbot response is at index 5 in the outputs array
        const chatbotUpdate = output.data[5];
        
        if (chatbotUpdate && chatbotUpdate.value && Array.isArray(chatbotUpdate.value)) {
          const chatHistory = chatbotUpdate.value;
          
          if (chatHistory.length > 0) {
            // Get the last message (assistant's response)
            const lastMessage = chatHistory[chatHistory.length - 1];
            
            console.log('Full message structure:', JSON.stringify(lastMessage, null, 2));
            
            if (lastMessage && lastMessage.content && Array.isArray(lastMessage.content)) {
              // Extract ALL text content from the message more robustly
              const textContents = lastMessage.content
                .filter((item: any) => item.type === "text")
                .map((item: any) => {
                  console.log('Content item:', item);
                  return item.content || '';
                })
                .join("");  // Join without separator to avoid breaking JSON
              responseText = textContents || "Response received but no text content found";
              console.log('Extracted text length:', responseText.length);
              console.log('Extracted text preview:', responseText.substring(0, 200) + '...');
            } else if (lastMessage && typeof lastMessage === 'string') {
              // Handle case where the message is a plain string
              responseText = lastMessage;
            } else if (lastMessage && lastMessage.role === "assistant") {
              // Fallback - if content structure is different
              responseText = JSON.stringify(lastMessage, null, 2);
            }
          }
        }
      }
      
      if (!responseText || responseText.trim() === '') {
        throw new Error('Failed to generate monster stats');
      }
      
      console.log('Stats output:', responseText);
      let jsonString = responseText;
      
      // Extract JSON from the response (remove markdown if present)
      let cleanJson = jsonString;
      if (jsonString.includes('```')) {
        const matches = jsonString.match(/```(?:json)?\s*([\s\S]*?)```/);
        if (matches) {
          cleanJson = matches[1];
        } else {
          // If no closing ```, just remove the opening ```json
          cleanJson = jsonString.replace(/^```(?:json)?\s*/, '').replace(/```\s*$/, '');
        }
      }
      
      try {
        // Extract JSON by properly balancing braces instead of using regex
        const startIndex = cleanJson.indexOf('{');
        if (startIndex !== -1) {
          let braceCount = 0;
          let endIndex = -1;
          
          // Find the matching closing brace by counting
          for (let i = startIndex; i < cleanJson.length; i++) {
            if (cleanJson[i] === '{') braceCount++;
            if (cleanJson[i] === '}') {
              braceCount--;
              if (braceCount === 0) {
                endIndex = i;
                break;
              }
            }
          }
          
          if (endIndex !== -1) {
            cleanJson = cleanJson.substring(startIndex, endIndex + 1);
            console.log('Balanced JSON extracted, length:', cleanJson.length);
          } else {
            throw new Error('JSON appears to be truncated - unable to balance braces');
          }
        } else {
          throw new Error('No JSON object found in response');
        }
        
        console.log('Final JSON to parse (length: ' + cleanJson.length + '):', cleanJson.substring(0, 500) + '...');
        
        const parsedStats = JSON.parse(cleanJson.trim());
        
        // Validate the battle-ready monster structure
        console.log('Parsed battle monster:', parsedStats);
        
        // Ensure required fields exist
        if (!parsedStats.name || !parsedStats.baseStats || !parsedStats.specialAbility || !parsedStats.movepool) {
          throw new Error('Generated monster is missing required battle system fields');
        }
        
        // Validate movepool has exactly 4 moves
        if (!Array.isArray(parsedStats.movepool) || parsedStats.movepool.length !== 4) {
          throw new Error('Monster movepool must contain exactly 4 moves');
        }
        
        // Ensure all moves have required effect arrays
        for (const move of parsedStats.movepool) {
          if (!move.effects || !Array.isArray(move.effects) || move.effects.length === 0) {
            throw new Error(`Move "${move.name}" is missing effects array`);
          }
        }
        
        // Use tier from the JSON response
        tier = parsedStats.tier || 'medium';
        
        // Clean asterisks from JSON-parsed name (qwen3 often adds them for markdown bold)
        if (parsedStats.name) {
          parsedStats.name = parsedStats.name.replace(/\*/g, '');
        }
        
        // Clean asterisks from special ability name
        if (parsedStats.specialAbility?.name) {
          parsedStats.specialAbility.name = parsedStats.specialAbility.name.replace(/\*/g, '');
        }
        
        // Clean asterisks from move names
        if (parsedStats.movepool) {
          for (const move of parsedStats.movepool) {
            if (move.name) {
              move.name = move.name.replace(/\*/g, '');
            }
          }
        }
        
        // Ensure the name from structured concept is used if available
        if (monsterName && monsterName !== 'Unknown Monster') {
          // Remove asterisk characters used for markdown bold formatting
          parsedStats.name = monsterName.replace(/\*/g, '');
        }
        
        // Ensure baseStats are numbers within reasonable ranges
        if (parsedStats.baseStats) {
          const statFields = ['hp', 'attack', 'defense', 'speed'];
          for (const field of statFields) {
            if (parsedStats.baseStats[field] !== undefined) {
              parsedStats.baseStats[field] = Math.max(10, Math.min(50, parseInt(parsedStats.baseStats[field])));
            }
          }
        }
        
        const stats: PicletStats = parsedStats;
        state.picletStats = stats;
        console.log('Monster stats generated:', stats);
        console.log('Monster stats JSON:', JSON.stringify(stats, null, 2));
      } catch (parseError) {
        console.error('Failed to parse JSON:', parseError, 'Raw output:', cleanJson);
        throw new Error('Failed to parse monster stats JSON');
      }
    } catch (error) {
      handleAPIError(error);
    }
  }
  
  async function autoSavePiclet() {
    if (!state.picletImage || !state.imageCaption || !state.picletConcept || !state.imagePrompt || !state.picletStats) {
      console.error('Cannot auto-save: missing required data');
      return;
    }
    
    try {
      // Create a clean copy of stats to ensure it's serializable
      const cleanStats = JSON.parse(JSON.stringify(state.picletStats));
      
      const picletData = {
        name: state.picletStats.name,
        imageUrl: state.picletImage.imageUrl,
        imageData: state.picletImage.imageData,
        imageCaption: state.imageCaption,
        concept: state.picletConcept,
        imagePrompt: state.imagePrompt,
        stats: cleanStats,
        createdAt: new Date()
      };
      
      // Check for any non-serializable data
      console.log('Checking piclet data for serializability:');
      console.log('- name type:', typeof picletData.name);
      console.log('- imageUrl type:', typeof picletData.imageUrl);
      console.log('- imageData type:', typeof picletData.imageData, picletData.imageData ? `length: ${picletData.imageData.length}` : 'null/undefined');
      console.log('- imageCaption type:', typeof picletData.imageCaption);
      console.log('- concept type:', typeof picletData.concept);
      console.log('- imagePrompt type:', typeof picletData.imagePrompt);
      console.log('- stats:', cleanStats);
      
      // Convert to PicletInstance format and save
      const picletInstance = await generatedDataToPicletInstance(picletData);
      const picletId = await savePicletInstance(picletInstance);
      console.log('Piclet auto-saved as uncaught with ID:', picletId);
    } catch (err) {
      console.error('Failed to auto-save piclet:', err);
      console.error('Piclet data that failed to save:', {
        name: state.picletStats?.name,
        hasImageUrl: !!state.picletImage?.imageUrl,
        hasImageData: !!state.picletImage?.imageData,
        hasStats: !!state.picletStats
      });
      // Don't throw - we don't want to interrupt the workflow
    }
  }
  
  function reset() {
    state = {
      currentStep: 'upload',
      userImage: null,
      imageCaption: null,
      picletConcept: null,
      picletStats: null,
      imagePrompt: null,
      picletImage: null,
      error: null,
      isProcessing: false
    };
  }
</script>

<div class="piclet-generator">
  
  {#if state.currentStep !== 'upload'}
    <WorkflowProgress currentStep={state.currentStep} error={state.error} />
  {/if}
  
  {#if state.currentStep === 'upload'}
    <UploadStep 
      onImageSelected={handleImageSelected}
      isProcessing={state.isProcessing}
    />
  {:else if state.currentStep === 'complete'}
    <PicletResult workflowState={state} onReset={reset} />
  {:else}
    <div class="processing-container">
      <div class="spinner"></div>
      <p class="processing-text">
        {#if state.currentStep === 'captioning'}
          Analyzing your image...
        {:else if state.currentStep === 'conceptualizing'}
          Creating Piclet concept...
        {:else if state.currentStep === 'statsGenerating'}
          Generating battle stats...
        {:else if state.currentStep === 'promptCrafting'}
          Creating image prompt...
        {:else if state.currentStep === 'generating'}
          Generating your Piclet...
        {/if}
      </p>
    </div>
  {/if}
</div>

<style>
  .piclet-generator {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  
  .processing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
  }
  
  .spinner {
    width: 60px;
    height: 60px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 2rem;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .processing-text {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 2rem;
  }
  
</style>