<template>
  <div>
    <div class="row" style="align-items:center">
      <h2 style="margin:0">{{ i18n.t('weakAreas') }}</h2>
      <router-link :to="`/my/generate?mode=weak`" style="margin-left:auto"><button class="primary">🔒 Generate a lock persona</button></router-link>
    </div>
    <div class="row" style="gap:16px;margin:16px 0">
      <div class="card stat"><div>Wins</div><strong>{{ insight.wins }}</strong></div>
      <div class="card stat"><div>Losses</div><strong>{{ insight.losses }}</strong></div>
      <div class="card stat"><div>Total</div><strong>{{ insight.total_sessions }}</strong></div>
    </div>

    <div v-for="g in insight.by_tier" :key="g.value" class="card" style="margin-bottom:8px">
      <span class="badge" :class="g.value">Tier {{ g.value }}</span> — {{ g.losses }} losses
    </div>

    <h3 style="margin-top:20px">Top loss personas</h3>
    <div v-if="!insight.top_loss_personas || !insight.top_loss_personas.length" class="card muted">No losses yet — 🎉</div>
    <div class="card" v-for="(p, i) in insight.top_loss_personas" :key="i" style="margin-bottom:8px">
      <strong>{{ p.persona_name }}</strong> — score {{ p.score }}<br />
      <span class="muted">{{ p.why }}</span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { api } from '../api'
import { i18n } from '../i18n'

const insight = ref({ wins: 0, losses: 0, total_sessions: 0, by_tier: [], top_loss_personas: [] })
onMounted(async () => { insight.value = (await api.weakAreas()).insight })
</script>

<style scoped>
.stat { text-align: center; min-width: 100px; }
.stat div { color: var(--muted); font-size: 12px; }
.stat strong { font-size: 22px; }
</style>
