<template>
  <div class="w-full h-full relative image-pixelated flex items-center justify-center" :class="{ 'grayscale': isDead }">
    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" shapeRendering="crispEdges" class="w-full h-full">
      <!-- EGG STAGE -->
      <g v-if="isEgg">
        <!-- Egg Base -->
        <path d="M12 4 H20 V6 H22 V10 H24 V22 H22 V26 H20 V28 H12 V26 H10 V22 H8 V10 H10 V6 H12 Z" :fill="eggBaseColor" />
        <!-- Egg Shading -->
        <path d="M12 26 H20 V28 H12 Z" fill="rgba(0,0,0,0.2)" />
        <path d="M22 10 H24 V22 H22 Z" fill="rgba(0,0,0,0.1)" />
        
        <!-- Patterns -->
        <!-- CAT Patterns -->
        <g v-if="species === 'cat'">
          <g v-if="eggPattern === 'spots'" fill="rgba(255,255,255,0.3)">
            <rect x="14" y="8" width="2" height="2" />
            <rect x="18" y="14" width="2" height="2" />
            <rect x="12" y="18" width="2" height="2" />
            <rect x="16" y="22" width="2" height="2" />
          </g>
          <g v-else-if="eggPattern === 'stripes'" fill="rgba(255,255,255,0.2)">
            <rect x="10" y="10" width="12" height="2" />
            <rect x="8" y="16" width="16" height="2" />
            <rect x="10" y="22" width="12" height="2" />
          </g>
          <g v-else-if="eggPattern === 'zigzag'" fill="rgba(255,255,255,0.2)">
             <path d="M10 14 H12 V12 H14 V14 H16 V12 H18 V14 H20 V12 H22 V14 H22 V16 H20 V18 H18 V16 H16 V18 H14 V16 H12 V18 H10 V16 Z" />
          </g>
        </g>

        <!-- DOG Patterns -->
        <g v-else>
          <!-- Bone Pattern -->
          <g v-if="eggPattern === 'bone'" fill="rgba(255,255,255,0.3)">
             <rect x="14" y="14" width="4" height="2" />
             <rect x="13" y="13" width="1" height="1" />
             <rect x="13" y="16" width="1" height="1" />
             <rect x="18" y="13" width="1" height="1" />
             <rect x="18" y="16" width="1" height="1" />
          </g>
          <!-- Paw Pattern -->
          <g v-else-if="eggPattern === 'paw'" fill="rgba(255,255,255,0.2)">
             <rect x="15" y="18" width="2" height="2" /> <!-- Pad -->
             <rect x="14" y="16" width="1" height="1" />
             <rect x="16" y="15" width="1" height="1" />
             <rect x="18" y="16" width="1" height="1" />
          </g>
          <!-- Patch Pattern -->
          <g v-else-if="eggPattern === 'patch'" fill="rgba(255,255,255,0.2)">
             <rect x="18" y="8" width="4" height="4" />
             <rect x="10" y="20" width="6" height="4" />
          </g>
        </g>
        
        <!-- Cracks (if close to hatching) -->
        <g v-if="isHatching" fill="#2b193f">
           <rect x="14" y="6" width="1" height="4" />
           <rect x="13" y="9" width="1" height="2" />
           <rect x="15" y="8" width="1" height="3" />
        </g>
      </g>

      <!-- DEITY STAGE -->
      <g v-else-if="deityId">
         <!-- Mazu (妈祖) -->
         <g v-if="deityId === 'mazu'">
            <rect x="10" y="4" width="12" height="12" fill="#ffe0bd" /> <!-- Face -->
            <rect x="8" y="4" width="2" height="12" fill="#1a1a1a" /> <!-- Hair L -->
            <rect x="22" y="4" width="2" height="12" fill="#1a1a1a" /> <!-- Hair R -->
            <rect x="8" y="2" width="16" height="4" fill="#d4af37" /> <!-- Crown Base -->
            <rect x="14" y="0" width="4" height="2" fill="#d4af37" /> <!-- Crown Top -->
            <rect x="12" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
            <rect x="18" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
            <path d="M8 16 H24 V28 H8 Z" fill="#ffa500" /> <!-- Robe -->
            <rect x="14" y="16" width="4" height="12" fill="#d4af37" opacity="0.5" /> <!-- Robe Detail -->
         </g>

         <!-- Earth God (土地公) -->
         <g v-else-if="deityId === 'earth_god'">
            <rect x="10" y="6" width="12" height="10" fill="#f0c0a8" /> <!-- Face -->
            <rect x="8" y="4" width="16" height="4" fill="#1a1a1a" /> <!-- Hat Base -->
            <rect x="10" y="2" width="12" height="2" fill="#1a1a1a" /> <!-- Hat Top -->
            <rect x="12" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
            <rect x="18" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
            <rect x="10" y="14" width="12" height="6" fill="#f0f0f0" /> <!-- Beard -->
            <path d="M8 16 H24 V28 H8 Z" fill="#d75b5b" /> <!-- Robe -->
            <rect x="14" y="20" width="4" height="2" fill="#8e5c2e" /> <!-- Belt -->
         </g>

         <!-- Matchmaker (月老) -->
         <g v-else-if="deityId === 'matchmaker'">
            <rect x="10" y="6" width="12" height="10" fill="#ffe0bd" /> <!-- Face -->
            <rect x="10" y="4" width="12" height="4" fill="#f0f0f0" /> <!-- Hair -->
            <rect x="12" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
            <rect x="18" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
            <rect x="10" y="14" width="12" height="4" fill="#f0f0f0" /> <!-- Beard -->
            <path d="M8 16 H24 V28 H8 Z" fill="#d95763" /> <!-- Robe -->
            <rect x="20" y="18" width="4" height="4" fill="#ff0000" /> <!-- Red Thread Ball -->
         </g>

         <!-- Wenchang (文昌) -->
         <g v-else>
            <rect x="10" y="6" width="12" height="10" fill="#ffe0bd" /> <!-- Face -->
            <rect x="8" y="2" width="16" height="6" fill="#1a1a1a" /> <!-- Hat -->
            <rect x="12" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
            <rect x="18" y="10" width="2" height="2" fill="#000" opacity="0.6" /> <!-- Eye -->
            <rect x="12" y="14" width="8" height="2" fill="#1a1a1a" /> <!-- Mustache -->
            <path d="M8 16 H24 V28 H8 Z" fill="#9fd75b" /> <!-- Robe -->
            <rect x="20" y="18" width="2" height="8" fill="#8d6e63" /> <!-- Brush -->
         </g>
      </g>

      <!-- PORTRAIT STAGE (Baby, Child, Adult) -->
      <g v-else>
        <!-- Background Glow (Optional) -->
        <circle cx="16" cy="16" r="14" :fill="auraColor" opacity="0.2" />

        <!-- CAT EARS -->
        <g v-if="species === 'cat'" :fill="furColor">
           <!-- Left Ear -->
           <path d="M6 4 H10 V8 H6 Z" /> 
           <path d="M7 5 H9 V7 H7 Z" fill="#ffb7b2" /> <!-- Inner Ear -->
           
           <!-- Right Ear -->
           <path d="M22 4 H26 V8 H22 Z" />
           <path d="M23 5 H25 V7 H23 Z" fill="#ffb7b2" /> <!-- Inner Ear -->
        </g>

        <!-- DOG EARS (Floppy) -->
        <g v-else :fill="furColor">
           <!-- Left Ear -->
           <path d="M4 8 H8 V14 H6 V16 H4 Z" /> 
           
           <!-- Right Ear -->
           <path d="M24 8 H28 V16 H26 V14 H24 Z" />
        </g>

        <!-- Head Base -->
        <rect x="8" y="8" width="16" height="14" :fill="furColor" />
        <rect x="6" y="10" width="2" height="10" :fill="furColor" /> <!-- Cheeks L -->
        <rect x="24" y="10" width="2" height="10" :fill="furColor" /> <!-- Cheeks R -->
        
        <!-- CAT STRIPES -->
        <g v-if="species === 'cat'">
            <!-- Tiger Stripes (Forehead) -->
            <g fill="#4a3b5e" opacity="0.6">
               <rect x="15" y="8" width="2" height="3" />
               <rect x="12" y="9" width="1" height="2" />
               <rect x="19" y="9" width="1" height="2" />
            </g>
            <!-- Cheeks Stripes -->
            <g fill="#4a3b5e" opacity="0.4">
               <rect x="6" y="14" width="2" height="1" />
               <rect x="6" y="16" width="2" height="1" />
               <rect x="24" y="14" width="2" height="1" />
               <rect x="24" y="16" width="2" height="1" />
            </g>
        </g>

        <!-- DOG PATCH (Eye Patch) -->
        <g v-else>
            <rect x="18" y="12" width="5" height="5" fill="#4a3b5e" opacity="0.3" />
        </g>

        <!-- Face Features -->
        <!-- Eyes -->
        <!-- Eyes -->
        <g :fill="eyeColor">
           <g v-if="mood === 'dead'">
             <!-- X Eyes -->
             <path d="M10 13 L13 16 M13 13 L10 16" stroke="#1b1026" stroke-width="1" />
             <path d="M19 13 L22 16 M22 13 L19 16" stroke="#1b1026" stroke-width="1" />
           </g>
           <g v-else>
             <rect x="10" y="13" width="3" height="3" />
             <rect x="19" y="13" width="3" height="3" />
             <!-- Highlights -->
             <rect x="12" y="13" width="1" height="1" fill="white" />
             <rect x="21" y="13" width="1" height="1" fill="white" />
           </g>
        </g>
        
        <!-- Glasses (High INT) -->
        <g v-if="stats.int > 20" stroke="#f6b26b" stroke-width="1" fill="none">
           <rect x="9.5" y="12.5" width="4" height="4" />
           <rect x="18.5" y="12.5" width="4" height="4" />
           <line x1="13.5" y1="14.5" x2="18.5" y2="14.5" />
        </g>

        <!-- Nose & Mouth -->
        <rect x="15" y="17" width="2" height="1" :fill="species === 'dog' ? '#1a1a1a' : '#ffb7b2'" /> <!-- Nose (Black for dog, Pink for cat) -->
        
        <!-- Mouth Expressions -->
        <g fill="#2b193f">
           <g v-if="mood === 'happy'">
              <rect x="14" y="19" width="1" height="1" />
              <rect x="15" y="20" width="2" height="1" />
              <rect x="17" y="19" width="1" height="1" />
           </g>
           <g v-else-if="mood === 'sad'">
              <rect x="14" y="20" width="1" height="1" />
              <rect x="15" y="19" width="2" height="1" />
              <rect x="17" y="20" width="1" height="1" />
           </g>
           <g v-else-if="mood === 'dead'">
              <!-- Dead Mouth (Flat line) -->
              <rect x="14" y="20" width="4" height="1" />
           </g>
           <g v-else>
              <rect x="14" y="19" width="4" height="1" />
           </g>
        </g>

        <!-- Body (Shoulders/Upper Chest) - Portrait Style -->
        <path d="M8 22 H24 V32 H8 Z" :fill="outfitColor" />
        <path d="M6 24 H8 V32 H6 Z" :fill="outfitColor" filter="brightness(0.9)" />
        <path d="M24 24 H26 V32 H24 Z" :fill="outfitColor" filter="brightness(0.9)" />
        
        <!-- Collar/Accessory -->
        <g v-if="stats.str > 20">
           <!-- Red Scarf/Bandana -->
           <path d="M10 22 H22 V24 H20 V25 H12 V24 H10 Z" fill="#d95763" />
        </g>
        <g v-else-if="stats.dex > 20">
           <!-- Green Bowtie -->
            <path d="M14 23 L12 22 V26 L14 25 Z" fill="#99e550" />
            <path d="M18 23 L20 22 V26 L18 25 Z" fill="#99e550" />
            <rect x="15" y="23" width="2" height="2" fill="#76c442" />
        </g>
        <g v-else>
           <!-- Simple Collar -->
           <rect x="11" y="22" width="10" height="2" fill="#e0d8f0" opacity="0.5" />
        </g>

      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  stage?: string;
  species?: string;
  stats?: {
    str: number;
    int: number;
    dex: number;
    happiness: number;
    generation?: number;
    age?: number;
  };
  skinColor?: string; // Fallback
  outfitColor?: string; // Fallback
  deityId?: string;
  isDead?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  stage: 'egg',
  species: 'cat',
  stats: () => ({ str: 0, int: 0, dex: 0, happiness: 50, generation: 1, age: 0 }),
  skinColor: '#ffdbac',
  outfitColor: '#78909c',
  isDead: false
});

const isEgg = computed(() => {
  if (props.deityId) return false;
  return !props.stage || props.stage.toLowerCase() === 'egg';
});

const isHatching = computed(() => {
  return isEgg.value && (props.stats.age || 0) > 60; 
});

// --- EGG LOGIC ---

const eggBaseColor = computed(() => {
  const { str, int, dex } = props.stats;
  if (str > int && str > dex) return '#ffcccb'; // Reddish
  if (int > str && int > dex) return '#cce5ff'; // Bluish
  if (dex > str && dex > int) return '#ccffcc'; // Greenish
  return '#f0f0f0'; // White/Grey
});

const eggPattern = computed(() => {
  const gen = props.stats.generation || 1;
  if (props.species === 'cat') {
    const patterns = ['spots', 'stripes', 'zigzag'];
    return patterns[gen % patterns.length];
  } else {
    const patterns = ['bone', 'paw', 'patch'];
    return patterns[gen % patterns.length];
  }
});

// --- PORTRAIT LOGIC ---

const furColor = computed(() => {
  const colors = ['#ffdbac', '#e0e0e0', '#d2b48c', '#ffdead'];
  const gen = props.stats.generation || 1;
  return colors[gen % colors.length];
});

const eyeColor = computed(() => {
  const { str, int, dex } = props.stats;
  if (int > 30) return '#2ce8f4'; // Cyan eyes for high INT
  if (str > 30) return '#d95763'; // Red eyes for high STR
  return '#1b1026'; // Black eyes default
});

const auraColor = computed(() => {
   const { str, int, dex } = props.stats;
   if (str > int && str > dex) return '#d95763';
   if (int > str && int > dex) return '#2ce8f4';
   if (dex > str && dex > int) return '#99e550';
   return '#ffffff';
});

const mood = computed(() => {
  if (props.isDead) return 'dead';
  const h = props.stats.happiness;
  if (h >= 70) return 'happy';
  if (h <= 30) return 'sad';
  return 'neutral';
});

const outfitColor = computed(() => {
    return props.outfitColor;
});

</script>

<style scoped>
.image-pixelated {
  image-rendering: pixelated;
}
</style>
