<template>
  <div class="tutorial-panel" :class="{ collapsed: !visible }">
    <button class="toggle-btn" @click="$emit('toggle')" :title="visible ? 'Collapse' : 'Expand tutorial'">
      {{ visible ? '◀' : '▶' }}
    </button>
    <div v-show="visible" class="tutorial-content">
      <div class="goal-box">
        <h4>&#127919; Goal</h4>
        <p v-html="fmt(level.goal)"></p>
      </div>
      <div v-for="(sec, i) in level.tutorial" :key="i" class="tut-section">
        <h4>{{ sec.title }}</h4>
        <p v-html="fmt(sec.text)"></p>
        <pre v-if="sec.code" class="tut-code"><code>{{ sec.code }}</code></pre>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({ level: Object, visible: Boolean })
defineEmits(['toggle'])

function fmt(t) {
  if (!t) return ''
  return t
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/`(.+?)`/g, '<code>$1</code>')
    .replace(/\n/g, '<br>')
}
</script>

<style scoped>
.tutorial-panel {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: min-width 0.3s;
  display: flex;
  flex-direction: column;
}
.tutorial-panel.collapsed { min-width: 32px !important; max-width: 32px !important; }
.toggle-btn {
  position: absolute;
  top: 8px;
  right: 4px;
  z-index: 2;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--bg-surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.tutorial-content {
  padding: 16px;
  padding-right: 12px;
  overflow-y: auto;
  flex: 1;
}
.goal-box {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 20px;
}
.goal-box h4 { margin-bottom: 6px; font-size: 14px; }
.goal-box p { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.goal-box :deep(strong) { color: var(--accent-yellow); }
.tut-section { margin-bottom: 18px; }
.tut-section h4 { font-size: 14px; margin-bottom: 6px; color: var(--accent-cyan); }
.tut-section p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.tut-section :deep(code) {
  font-family: var(--font-mono);
  background: var(--bg-surface);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--accent-yellow);
}
.tut-section :deep(strong) { color: var(--text-primary); font-weight: 600; }
.tut-code {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 8px;
  overflow-x: auto;
}
.tut-code code { font-size: 12px; line-height: 1.5; color: var(--accent-green); }
</style>
