<script lang="ts">
  import { onMount } from 'svelte';
  import { fade } from 'svelte/transition';
  import type { PicletInstance } from '$lib/db/schema';
  import BattleField from '../Battle/BattleField.svelte';
  import BattleControls from '../Battle/BattleControls.svelte';
  
  export let playerPiclet: PicletInstance;
  export let enemyPiclet: PicletInstance;
  export let isWildBattle: boolean = true;
  export let onBattleEnd: (result: any) => void = () => {};
  
  // Battle state
  let currentMessage = isWildBattle 
    ? `A wild ${enemyPiclet.nickname} appeared!` 
    : `Trainer wants to battle!`;
  let battlePhase: 'intro' | 'main' | 'moveSelect' | 'picletSelect' | 'ended' = 'intro';
  let processingTurn = false;
  let battleEnded = false;
  
  // HP animation states
  let playerHpPercentage = playerPiclet.currentHp / playerPiclet.maxHp;
  let enemyHpPercentage = enemyPiclet.currentHp / enemyPiclet.maxHp;
  
  onMount(() => {
    // Start intro sequence
    setTimeout(() => {
      currentMessage = `Go, ${playerPiclet.nickname}!`;
      setTimeout(() => {
        currentMessage = `What will ${playerPiclet.nickname} do?`;
        battlePhase = 'main';
      }, 1500);
    }, 2000);
  });
  
  function handleAction(action: string) {
    if (processingTurn || battleEnded) return;
    
    switch (action) {
      case 'fight':
        battlePhase = 'moveSelect';
        break;
      case 'piclet':
        battlePhase = 'picletSelect';
        break;
      case 'catch':
        if (isWildBattle) {
          processingTurn = true;
          currentMessage = 'You threw a Piclet Ball!';
          setTimeout(() => {
            currentMessage = 'The wild piclet broke free!';
            processingTurn = false;
          }, 2000);
        }
        break;
      case 'run':
        if (isWildBattle) {
          currentMessage = 'Got away safely!';
          battleEnded = true;
          setTimeout(() => onBattleEnd(false), 1500);
        } else {
          currentMessage = "You can't run from a trainer battle!";
        }
        break;
    }
  }
  
  function handleMoveSelect(move: any) {
    battlePhase = 'main';
    processingTurn = true;
    currentMessage = `${playerPiclet.nickname} used ${move.name}!`;
    
    // Mock damage
    setTimeout(() => {
      enemyHpPercentage = Math.max(0, enemyHpPercentage - 0.2);
      
      if (enemyHpPercentage <= 0) {
        currentMessage = `${enemyPiclet.nickname} fainted!`;
        battleEnded = true;
        setTimeout(() => onBattleEnd(true), 2000);
      } else {
        // Enemy turn
        setTimeout(() => {
          const enemyMove = enemyPiclet.moves[0];
          currentMessage = `${enemyPiclet.nickname} used ${enemyMove.name}!`;
          
          setTimeout(() => {
            playerHpPercentage = Math.max(0, playerHpPercentage - 0.15);
            
            if (playerHpPercentage <= 0) {
              currentMessage = `${playerPiclet.nickname} fainted!`;
              battleEnded = true;
              setTimeout(() => onBattleEnd(false), 2000);
            } else {
              currentMessage = `What will ${playerPiclet.nickname} do?`;
              processingTurn = false;
            }
          }, 1500);
        }, 1500);
      }
    }, 1500);
  }
  
  function handlePicletSelect(piclet: PicletInstance) {
    battlePhase = 'main';
    currentMessage = `Come back, ${playerPiclet.nickname}!`;
    setTimeout(() => {
      playerPiclet = piclet;
      playerHpPercentage = piclet.currentHp / piclet.maxHp;
      currentMessage = `Go, ${piclet.nickname}!`;
      setTimeout(() => {
        currentMessage = `What will ${piclet.nickname} do?`;
      }, 1500);
    }, 1500);
  }
  
  function handleBack() {
    battlePhase = 'main';
  }
</script>

<div class="battle-page">
  <nav class="battle-nav">
    <button class="back-button" on:click={() => onBattleEnd('cancelled')}>
      ← Back
    </button>
    <h1>{isWildBattle ? 'Wild Battle' : 'Battle'}</h1>
    <div class="nav-spacer"></div>
  </nav>
  
  <div class="battle-content">
    <BattleField 
      {playerPiclet}
      {enemyPiclet}
      {playerHpPercentage}
      {enemyHpPercentage}
      showIntro={battlePhase === 'intro'}
    />
    
    <BattleControls
      {currentMessage}
      {battlePhase}
      {processingTurn}
      {battleEnded}
      {isWildBattle}
      {playerPiclet}
      {enemyPiclet}
      onAction={handleAction}
      onMoveSelect={handleMoveSelect}
      onPicletSelect={handlePicletSelect}
      onBack={handleBack}
    />
  </div>
</div>

<style>
  .battle-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    overflow: hidden;
  }
  
  .battle-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    z-index: 10;
  }
  
  .back-button {
    background: none;
    border: none;
    color: #007bff;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
  }
  
  .battle-nav h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .nav-spacer {
    width: 60px;
  }
  
  .battle-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
</style>