<script setup lang="ts">
import { computed } from 'vue'
import type { ParsedSystemMessage } from '@/types/transcript-debug'

const props = defineProps<{
  message: ParsedSystemMessage
}>()

const duration = computed(() => {
  const ms = props.message.durationMs
  if (!ms) return ''
  const s = Math.floor(ms / 1000)
  if (s < 60) return `${s}s`
  const m = Math.floor(s / 60)
  return `${m}m ${s % 60}s`
})
</script>

<template>
  <div class="turn-end">
    <div class="reef-line">
      <!-- Left reef: anchored to left edge, extends right -->
      <svg class="reef reef-left" viewBox="0 0 200 14" preserveAspectRatio="xMinYMid slice" shape-rendering="crispEdges">
        <!-- Ocean stone floor (prismarine-inspired mosaic) -->
        <defs>
          <pattern id="pfl" x="0" y="0" width="12" height="2" patternUnits="userSpaceOnUse">
            <rect width="12" height="2" fill="#0e3b3b"/>
            <rect x="0" y="0" width="5" height="1" fill="#1f7270"/>
            <rect x="6" y="0" width="5" height="1" fill="#2a8a7e"/>
            <rect x="0" y="1" width="2" height="1" fill="#35a098"/>
            <rect x="3" y="1" width="5" height="1" fill="#1f7270"/>
            <rect x="9" y="1" width="2" height="1" fill="#2a8a7e"/>
          </pattern>
        </defs>
        <rect x="0" y="12" width="200" height="2" fill="url(#pfl)" opacity="0.85"/>
        <!-- Crystal highlights -->
        <rect x="3" y="12" width="1" height="1" fill="#5ec4b8" opacity="0.5"/>
        <rect x="15" y="13" width="1" height="1" fill="#7edcd2" opacity="0.4"/>
        <rect x="28" y="12" width="1" height="1" fill="#4ebdb2" opacity="0.45"/>
        <rect x="42" y="13" width="1" height="1" fill="#5ec4b8" opacity="0.35"/>
        <rect x="58" y="12" width="1" height="1" fill="#7edcd2" opacity="0.4"/>
        <rect x="75" y="13" width="1" height="1" fill="#4ebdb2" opacity="0.45"/>
        <rect x="91" y="12" width="1" height="1" fill="#5ec4b8" opacity="0.35"/>
        <rect x="108" y="13" width="1" height="1" fill="#7edcd2" opacity="0.4"/>
        <rect x="130" y="12" width="1" height="1" fill="#4ebdb2" opacity="0.3"/>
        <rect x="155" y="13" width="1" height="1" fill="#5ec4b8" opacity="0.25"/>
        <rect x="175" y="12" width="1" height="1" fill="#7edcd2" opacity="0.2"/>

        <!-- Tall coral cluster (left edge) -->
        <rect x="2" y="4" width="2" height="10" fill="#f87171" opacity="0.85"/>
        <rect x="4" y="2" width="2" height="12" fill="#fb923c" opacity="0.8"/>
        <rect x="6" y="5" width="2" height="9" fill="#f87171" opacity="0.75"/>
        <rect x="8" y="7" width="2" height="7" fill="#ef4444" opacity="0.65"/>
        <rect x="3" y="1" width="2" height="2" fill="#fca5a5" opacity="0.55"/>

        <!-- Seaweed grove -->
        <rect x="14" y="1" width="2" height="13" fill="#22c55e" opacity="0.75"/>
        <rect x="16" y="3" width="2" height="11" fill="#4ade80" opacity="0.7"/>
        <rect x="18" y="5" width="2" height="9" fill="#16a34a" opacity="0.65"/>
        <rect x="13" y="0" width="2" height="2" fill="#86efac" opacity="0.5"/>

        <!-- Orange fish school (3 fish) -->
        <rect x="26" y="4" width="3" height="2" fill="#f97316" opacity="0.85"/>
        <rect x="25" y="5" width="1" height="1" fill="#fb923c" opacity="0.7"/>
        <rect x="30" y="6" width="3" height="2" fill="#f97316" opacity="0.75"/>
        <rect x="29" y="7" width="1" height="1" fill="#fb923c" opacity="0.65"/>
        <rect x="33" y="3" width="3" height="2" fill="#ea580c" opacity="0.7"/>
        <rect x="32" y="4" width="1" height="1" fill="#fdba74" opacity="0.55"/>

        <!-- Bubbles -->
        <rect x="24" y="1" width="1" height="1" fill="white" opacity="0.4"/>
        <rect x="22" y="3" width="1" height="1" fill="white" opacity="0.35"/>
        <rect x="37" y="2" width="1" height="1" fill="white" opacity="0.35"/>

        <!-- Purple brain coral -->
        <rect x="42" y="7" width="4" height="5" fill="#a855f7" opacity="0.7"/>
        <rect x="43" y="6" width="2" height="2" fill="#c084fc" opacity="0.65"/>
        <rect x="46" y="8" width="2" height="4" fill="#7c3aed" opacity="0.55"/>
        <rect x="44" y="12" width="2" height="2" fill="#6d28d9" opacity="0.4"/>

        <!-- Jellyfish -->
        <rect x="54" y="2" width="3" height="2" fill="#c084fc" opacity="0.65"/>
        <rect x="55" y="1" width="1" height="1" fill="#e9d5ff" opacity="0.5"/>
        <rect x="54" y="4" width="1" height="2" fill="#a855f7" opacity="0.4"/>
        <rect x="56" y="4" width="1" height="2" fill="#a855f7" opacity="0.4"/>

        <!-- Starfish -->
        <rect x="62" y="10" width="3" height="2" fill="#fbbf24" opacity="0.65"/>
        <rect x="63" y="9" width="1" height="1" fill="#fde68a" opacity="0.55"/>
        <rect x="63" y="12" width="1" height="1" fill="#f59e0b" opacity="0.5"/>

        <!-- Anemone -->
        <rect x="70" y="6" width="2" height="8" fill="#ec4899" opacity="0.65"/>
        <rect x="72" y="7" width="2" height="7" fill="#f472b6" opacity="0.55"/>
        <rect x="69" y="5" width="2" height="2" fill="#f9a8d4" opacity="0.5"/>
        <rect x="73" y="6" width="2" height="2" fill="#f9a8d4" opacity="0.5"/>

        <!-- Blue fish -->
        <rect x="80" y="5" width="3" height="2" fill="#3b82f6" opacity="0.75"/>
        <rect x="79" y="6" width="1" height="1" fill="#93c5fd" opacity="0.65"/>

        <!-- Seaweed tuft -->
        <rect x="88" y="4" width="2" height="10" fill="#059669" opacity="0.6"/>
        <rect x="90" y="6" width="2" height="8" fill="#10b981" opacity="0.5"/>

        <!-- Small coral -->
        <rect x="96" y="8" width="2" height="6" fill="#f87171" opacity="0.6"/>
        <rect x="98" y="9" width="2" height="5" fill="#fb923c" opacity="0.5"/>

        <!-- Seahorse -->
        <rect x="106" y="4" width="2" height="2" fill="#fbbf24" opacity="0.65"/>
        <rect x="106" y="6" width="2" height="3" fill="#f59e0b" opacity="0.55"/>
        <rect x="107" y="9" width="1" height="2" fill="#d97706" opacity="0.5"/>

        <!-- Bubbles -->
        <rect x="104" y="1" width="1" height="1" fill="white" opacity="0.35"/>
        <rect x="112" y="3" width="1" height="1" fill="white" opacity="0.3"/>

        <!-- More coral -->
        <rect x="118" y="7" width="2" height="7" fill="#0ea5e9" opacity="0.5"/>
        <rect x="120" y="9" width="2" height="5" fill="#22d3ee" opacity="0.4"/>

        <!-- Tiny fish -->
        <rect x="130" y="6" width="2" height="1" fill="#f97316" opacity="0.55"/>
        <rect x="140" y="4" width="2" height="1" fill="#818cf8" opacity="0.5"/>

        <!-- Shell -->
        <rect x="150" y="10" width="3" height="2" fill="#fde68a" opacity="0.5"/>
        <rect x="151" y="9" width="1" height="1" fill="#fef3c7" opacity="0.4"/>

        <!-- Fade-out elements -->
        <rect x="160" y="8" width="2" height="6" fill="#22c55e" opacity="0.35"/>
        <rect x="170" y="9" width="2" height="5" fill="#a855f7" opacity="0.3"/>
        <rect x="180" y="7" width="1" height="1" fill="white" opacity="0.2"/>
        <rect x="190" y="10" width="2" height="4" fill="#f87171" opacity="0.2"/>
      </svg>

      <!-- Center badge -->
      <span v-if="duration" class="duration-badge">{{ duration }}</span>
      <span v-else class="end-badge">~</span>

      <!-- Right reef: anchored to right edge, extends left -->
      <svg class="reef reef-right" viewBox="0 0 200 14" preserveAspectRatio="xMaxYMid slice" shape-rendering="crispEdges">
        <!-- Ocean stone floor (prismarine-inspired mosaic) -->
        <defs>
          <pattern id="pfr" x="0" y="0" width="12" height="2" patternUnits="userSpaceOnUse">
            <rect width="12" height="2" fill="#0e3b3b"/>
            <rect x="0" y="0" width="5" height="1" fill="#2a8a7e"/>
            <rect x="6" y="0" width="5" height="1" fill="#1f7270"/>
            <rect x="0" y="1" width="2" height="1" fill="#1f7270"/>
            <rect x="3" y="1" width="5" height="1" fill="#35a098"/>
            <rect x="9" y="1" width="2" height="1" fill="#1f7270"/>
          </pattern>
        </defs>
        <rect x="0" y="12" width="200" height="2" fill="url(#pfr)" opacity="0.85"/>
        <!-- Crystal highlights -->
        <rect x="190" y="12" width="1" height="1" fill="#5ec4b8" opacity="0.5"/>
        <rect x="178" y="13" width="1" height="1" fill="#7edcd2" opacity="0.4"/>
        <rect x="162" y="12" width="1" height="1" fill="#4ebdb2" opacity="0.45"/>
        <rect x="145" y="13" width="1" height="1" fill="#5ec4b8" opacity="0.35"/>
        <rect x="128" y="12" width="1" height="1" fill="#7edcd2" opacity="0.4"/>
        <rect x="110" y="13" width="1" height="1" fill="#4ebdb2" opacity="0.45"/>
        <rect x="92" y="12" width="1" height="1" fill="#5ec4b8" opacity="0.35"/>
        <rect x="70" y="13" width="1" height="1" fill="#7edcd2" opacity="0.3"/>
        <rect x="45" y="12" width="1" height="1" fill="#4ebdb2" opacity="0.25"/>
        <rect x="22" y="13" width="1" height="1" fill="#5ec4b8" opacity="0.2"/>

        <!-- Tall coral cluster (right edge) -->
        <rect x="192" y="3" width="2" height="11" fill="#ec4899" opacity="0.85"/>
        <rect x="194" y="5" width="2" height="9" fill="#f472b6" opacity="0.8"/>
        <rect x="196" y="4" width="2" height="10" fill="#ec4899" opacity="0.75"/>
        <rect x="190" y="6" width="2" height="8" fill="#db2777" opacity="0.65"/>
        <rect x="193" y="1" width="2" height="3" fill="#fbcfe8" opacity="0.55"/>

        <!-- Seaweed grove -->
        <rect x="182" y="2" width="2" height="12" fill="#10b981" opacity="0.75"/>
        <rect x="184" y="4" width="2" height="10" fill="#34d399" opacity="0.7"/>
        <rect x="180" y="0" width="2" height="3" fill="#6ee7b7" opacity="0.5"/>

        <!-- Purple fish school -->
        <rect x="170" y="5" width="3" height="2" fill="#818cf8" opacity="0.85"/>
        <rect x="173" y="6" width="1" height="1" fill="#a5b4fc" opacity="0.7"/>
        <rect x="166" y="3" width="3" height="2" fill="#6366f1" opacity="0.75"/>
        <rect x="169" y="4" width="1" height="1" fill="#c7d2fe" opacity="0.65"/>
        <rect x="163" y="7" width="3" height="2" fill="#818cf8" opacity="0.7"/>
        <rect x="166" y="8" width="1" height="1" fill="#a5b4fc" opacity="0.55"/>

        <!-- Bubbles -->
        <rect x="175" y="1" width="1" height="1" fill="white" opacity="0.4"/>
        <rect x="178" y="3" width="1" height="1" fill="white" opacity="0.35"/>
        <rect x="160" y="2" width="1" height="1" fill="white" opacity="0.35"/>

        <!-- Orange fan coral -->
        <rect x="152" y="6" width="4" height="6" fill="#fb923c" opacity="0.7"/>
        <rect x="153" y="5" width="2" height="2" fill="#fdba74" opacity="0.65"/>
        <rect x="150" y="8" width="2" height="4" fill="#ea580c" opacity="0.55"/>

        <!-- Turtle -->
        <rect x="140" y="4" width="4" height="2" fill="#22c55e" opacity="0.7"/>
        <rect x="139" y="5" width="1" height="1" fill="#4ade80" opacity="0.55"/>
        <rect x="144" y="5" width="1" height="1" fill="#4ade80" opacity="0.55"/>
        <rect x="141" y="3" width="2" height="1" fill="#86efac" opacity="0.5"/>

        <!-- Shell -->
        <rect x="132" y="10" width="3" height="2" fill="#fde68a" opacity="0.55"/>
        <rect x="133" y="9" width="1" height="1" fill="#fef3c7" opacity="0.5"/>

        <!-- Cyan coral -->
        <rect x="124" y="7" width="2" height="7" fill="#0ea5e9" opacity="0.65"/>
        <rect x="126" y="8" width="2" height="6" fill="#22d3ee" opacity="0.55"/>
        <rect x="122" y="9" width="2" height="5" fill="#0284c7" opacity="0.5"/>

        <!-- Red anemone -->
        <rect x="112" y="6" width="2" height="8" fill="#f87171" opacity="0.6"/>
        <rect x="114" y="7" width="2" height="7" fill="#fca5a5" opacity="0.5"/>
        <rect x="111" y="5" width="2" height="2" fill="#fecaca" opacity="0.4"/>

        <!-- Tiny fish -->
        <rect x="104" y="5" width="2" height="1" fill="#f97316" opacity="0.55"/>

        <!-- Seaweed -->
        <rect x="96" y="5" width="2" height="9" fill="#059669" opacity="0.5"/>
        <rect x="94" y="7" width="2" height="7" fill="#10b981" opacity="0.4"/>

        <!-- Starfish -->
        <rect x="86" y="10" width="3" height="2" fill="#fbbf24" opacity="0.5"/>
        <rect x="87" y="9" width="1" height="1" fill="#fde68a" opacity="0.4"/>

        <!-- Bubbles -->
        <rect x="80" y="2" width="1" height="1" fill="white" opacity="0.3"/>
        <rect x="72" y="4" width="1" height="1" fill="white" opacity="0.25"/>

        <!-- Fade-out elements -->
        <rect x="60" y="8" width="2" height="6" fill="#ec4899" opacity="0.3"/>
        <rect x="46" y="9" width="2" height="5" fill="#22c55e" opacity="0.25"/>
        <rect x="30" y="7" width="1" height="1" fill="white" opacity="0.2"/>
        <rect x="14" y="10" width="2" height="4" fill="#0ea5e9" opacity="0.2"/>
      </svg>
    </div>
  </div>
</template>

<style scoped>
.turn-end {
  padding: 0.25rem 0;
  user-select: none;
}

.reef-line {
  display: flex;
  align-items: center;
  gap: 0;
  height: 28px;
}

.reef {
  flex: 1;
  height: 100%;
  image-rendering: pixelated;
  overflow: hidden;
}

.duration-badge,
.end-badge {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: rgba(14, 165, 233, 0.85);
  padding: 0 6px;
  letter-spacing: 1px;
  z-index: 1;
  text-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
  animation: badge-glow 3s ease-in-out infinite;
}

.end-badge {
  font-size: 12px;
  color: rgba(14, 165, 233, 0.5);
  animation: badge-drift 4s ease-in-out infinite;
}

@keyframes badge-glow {
  0%, 100% {
    text-shadow: 0 0 6px rgba(14, 165, 233, 0.3);
    color: rgba(14, 165, 233, 0.8);
  }
  50% {
    text-shadow: 0 0 12px rgba(14, 165, 233, 0.6), 0 0 4px rgba(34, 211, 238, 0.3);
    color: rgba(14, 165, 233, 0.95);
  }
}

@keyframes badge-drift {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}
</style>
