<template>
  <div class="flex flex-col h-full bg-black text-[#99e550] relative">
    <!-- Header -->
    <div class="flex items-center gap-2 text-xl font-bold p-2 border-b-2 border-[#99e550]">
        <Map class="text-[#e0d8f0]" />
        <span class="tracking-widest">選擇冒險區域 (SELECT ZONE)</span>
        <button @click="$emit('close')" class="ml-auto text-white hover:text-red-500"><X /></button>
    </div>

    <!-- Content -->
    <div class="flex-grow overflow-y-auto p-4 custom-scrollbar flex flex-col gap-4">
        <div 
            v-for="loc in locations"
            :key="loc.id" 
            class="border-2 p-4 relative transition-all"
            :class="isLocked(loc) ? 'border-gray-600 opacity-70' : 'border-[#99e550] hover:bg-[#0f2a0f]'"
        >
             <!-- Title -->
             <div class="text-xl font-bold tracking-widest mb-2 text-[#99e550]">
                 {{ loc.name }}
             </div>

             <!-- Description -->
             <p class="text-xs text-white mb-4 text-center">
                 {{ loc.description }}
             </p>

             <!-- Costs & Reqs -->
             <div class="flex flex-wrap gap-4 mb-4 text-sm font-mono">
                 <div class="flex items-center gap-2">
                     <span class="text-[#99e550]">消耗:</span>
                     <div class="flex items-center gap-1" :class="canAffordHunger(loc) ? 'text-[#9fd75b]' : 'text-red-500'">
                         <Drumstick :size="14" /> {{ loc.costHunger }}
                     </div>
                     <div class="flex items-center gap-1" :class="canAffordGold(loc) ? 'text-[#f6b26b]' : 'text-red-500'">
                         <Coins :size="14" /> {{ loc.costGold }}
                     </div>
                 </div>

                 <div v-if="loc.reqStats" class="flex items-center gap-2">
                     <span class="text-[#99e550]">要求:</span>
                     <span v-if="loc.reqStats.str" :class="meetsStr(loc) ? 'text-[#9fd75b]' : 'text-red-500'">STR {{ loc.reqStats.str }}</span>
                     <span v-if="loc.reqStats.int" :class="meetsInt(loc) ? 'text-[#9fd75b]' : 'text-red-500'">INT {{ loc.reqStats.int }}</span>
                 </div>
             </div>

             <!-- Action Button -->
             <button
                @click="!isLocked(loc) && canAfford(loc) && $emit('selectLocation', loc)"
                :disabled="!canAfford(loc) || isLocked(loc)"
                class="w-full py-2 text-lg tracking-[0.2em] border"
                :class="(!canAfford(loc) || isLocked(loc)) 
                    ? 'border-gray-600 text-gray-500 cursor-not-allowed' 
                    : 'border-[#d95763] text-[#d95763] hover:bg-[#d95763] hover:text-black'"
             >
                 {{ isLocked(loc) ? "能力不足" : !canAfford(loc) ? "資源不足" : "出發 !" }}
             </button>
             
             <!-- Side Decoration Bar -->
             <div class="absolute top-2 bottom-2 right-2 w-2" :class="isLocked(loc) ? 'bg-gray-600' : 'bg-[#99e550]'"></div>
        </div>
    </div>

    <!-- Footer / Close Button -->
    <div class="p-4 border-t border-[#99e550]">
        <button 
            @click="$emit('close')"
            class="border border-[#99e550] text-[#99e550] px-4 py-2 hover:bg-[#99e550] hover:text-black"
        >
            關閉
        </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Map, Drumstick, Coins, X } from 'lucide-vue-next';
import type { AdventureLocation, EntityStats } from '~/types/pixel';

interface Props {
  locations: AdventureLocation[];
  playerStats: EntityStats;
}

const props = defineProps<Props>();
defineEmits(['selectLocation', 'close']);

const canAffordHunger = (loc: AdventureLocation) => (props.playerStats.hunger || 0) >= loc.costHunger;
const canAffordGold = (loc: AdventureLocation) => (props.playerStats.gold || 0) >= loc.costGold;
const meetsStr = (loc: AdventureLocation) => !loc.reqStats?.str || (props.playerStats.str || 0) >= loc.reqStats.str;
const meetsInt = (loc: AdventureLocation) => !loc.reqStats?.int || (props.playerStats.int || 0) >= loc.reqStats.int;

const isLocked = (loc: AdventureLocation) => !meetsStr(loc) || !meetsInt(loc);
const canAfford = (loc: AdventureLocation) => canAffordHunger(loc) && canAffordGold(loc);
</script>
