<script setup>
// One parsed skill or protocol document, drawn as a document: the parts a
// reader needs first (when it applies, what is required, the ordered steps and
// their checks) and the markdown body last. Shared by the proposal card in the
// chat and the catalog in Settings so both read the same way.
import { computed } from 'vue'
import { t } from '@/i18n/index.js'
import { renderMarkdown } from '@/composables/useMarkdown.js'

const props = defineProps({
  doc: { type: Object, required: true },
})

const triggers = computed(() =>
  Array.isArray(props.doc.triggers) ? props.doc.triggers : []
)
const preconditions = computed(() => props.doc.preconditions ?? [])
const postChecks = computed(() => props.doc.post_checks ?? [])
const bodyHtml = computed(() => {
  const body = props.doc.body
  return body ? renderMarkdown(body) : ''
})

// The catalogue's format asks for steps as strings, but a model sometimes
// writes each step as a mapping and the parser turns that mapping into Python
// repr text ("{'title': ..., 'action': ...}"). Unwind it here so the reader sees
// the step, not the literal representation of it.
function parseStep(raw) {
  const text = String(raw ?? '').trim()
  const looksLikeMapping = text.startsWith('{') && text.endsWith('}')
  if (!looksLikeMapping) return { title: text, action: '', check: '' }

  const field = key => {
    const match = text.match(
      new RegExp(`['"]${key}['"]\\s*:\\s*(['"])([\\s\\S]*?)\\1\\s*(?:,|})`)
    )
    return match ? match[2].replace(/\\(['"\\])/g, '$1') : ''
  }
  const title = field('title')
  const action = field('action')
  const check = field('check')
  if (!title && !action) return { title: text, action: '', check: '' }
  return { title, action, check }
}

const steps = computed(() =>
  (props.doc.steps ?? []).map((raw, index) => ({ index: index + 1, ...parseStep(raw) }))
)

// The three escape hatches are the part of a protocol that decides what the
// agent does when reality differs — a definition list reads them as rules.
const hatches = computed(() => {
  const d = props.doc
  return [
    { key: 'deviation', term: t('ui.proposalOnDeviation'), value: d.on_deviation },
    { key: 'blocked', term: t('ui.proposalOnBlocked'), value: d.on_blocked },
    { key: 'already', term: t('ui.proposalOnAlreadyDone'), value: d.on_already_done },
  ].filter(item => item.value)
})
</script>

<template>
  <div class="skill-doc">
    <section v-if="triggers.length" class="skill-doc-section">
      <h4 class="skill-doc-label">{{ t('ui.proposalTriggers') }}</h4>
      <div class="skill-doc-triggers">
        <span v-for="trigger in triggers" :key="trigger" class="skill-doc-trigger">
          «{{ trigger }}»
        </span>
      </div>
    </section>

    <section v-if="preconditions.length" class="skill-doc-section">
      <h4 class="skill-doc-label">{{ t('ui.proposalPreconditions') }}</h4>
      <ul class="skill-doc-list is-required">
        <li v-for="(item, index) in preconditions" :key="index">
          <i class="ph ph-warning-circle" aria-hidden="true"></i>
          <span>{{ item }}</span>
        </li>
      </ul>
    </section>

    <section v-if="steps.length" class="skill-doc-section">
      <h4 class="skill-doc-label">{{ t('ui.proposalSteps') }}</h4>
      <ol class="skill-doc-steps">
        <li v-for="step in steps" :key="step.index">
          <span class="skill-doc-step-num">{{ step.index }}</span>
          <div class="skill-doc-step-body">
            <div class="skill-doc-step-title" v-html="renderMarkdown(step.title)" />
            <div
              v-if="step.action"
              class="skill-doc-step-action"
              v-html="renderMarkdown(step.action)"
            />
            <div v-if="step.check" class="skill-doc-step-check">
              <i class="ph ph-check-square" aria-hidden="true"></i>
              <span v-html="renderMarkdown(step.check)" />
            </div>
          </div>
        </li>
      </ol>
    </section>

    <section v-if="postChecks.length" class="skill-doc-section">
      <h4 class="skill-doc-label">{{ t('ui.proposalPostChecks') }}</h4>
      <ul class="skill-doc-list is-check">
        <li v-for="(item, index) in postChecks" :key="index">
          <i class="ph ph-check-circle" aria-hidden="true"></i>
          <span>{{ item }}</span>
        </li>
      </ul>
    </section>

    <section v-if="hatches.length" class="skill-doc-section">
      <h4 class="skill-doc-label">{{ t('ui.proposalFallbacks') }}</h4>
      <dl class="skill-doc-hatches">
        <template v-for="hatch in hatches" :key="hatch.key">
          <dt>{{ hatch.term }}</dt>
          <dd>{{ hatch.value }}</dd>
        </template>
      </dl>
    </section>

    <section v-if="bodyHtml" class="skill-doc-section">
      <h4 class="skill-doc-label">{{ t('ui.proposalContext') }}</h4>
      <div class="skill-doc-body markdown-body" v-html="bodyHtml" />
    </section>
  </div>
</template>

<style scoped>
.skill-doc-section {
  padding: 12px 0;
  border-top: 1px solid var(--gn-border-color-muted);
}

/* The first section stands directly under the reader's header. */
.skill-doc > .skill-doc-section:first-child {
  padding-top: 0;
  border-top: none;
}

.skill-doc-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gn-color-text-dark);
}

.skill-doc-triggers {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.skill-doc-trigger {
  color: var(--gn-color-secondary);
}

/* ---------- lists ---------- */

.skill-doc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.skill-doc-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: start;
}

.skill-doc-list i {
  font-size: 15px;
  line-height: 1.4;
}

.skill-doc-list.is-required i {
  color: var(--gn-color-warning);
}

.skill-doc-list.is-check i {
  color: var(--gn-color-success);
}

/* ---------- steps ---------- */

.skill-doc-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.skill-doc-steps > li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}

.skill-doc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid var(--gn-border-color-muted);
  font-size: 12px;
  font-weight: 700;
  color: var(--gn-color-secondary);
}

.skill-doc-step-body {
  min-width: 0;
  padding-top: 1px;
}

.skill-doc-step-title {
  font-weight: 600;
  color: var(--gn-color-text-light);
}

.skill-doc-step-action {
  margin-top: 2px;
  color: var(--gn-color-text-medium);
}

.skill-doc-step-check {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  color: var(--gn-color-text-dark);
  font-size: 12px;
}

.skill-doc-step-check i {
  color: var(--gn-color-success);
}

/* Markdown arrives as HTML; inline code and paragraphs need the document's
   rhythm, not the message layout's. */
.skill-doc-step-body :deep(p),
.skill-doc-body :deep(p) {
  margin: 0;
}

.skill-doc-step-body :deep(p + p),
.skill-doc-body :deep(p + p) {
  margin-top: 8px;
}

.skill-doc-step-body :deep(code),
.skill-doc-body :deep(code) {
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--gn-surface-panel-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}

.skill-doc-step-body :deep(ul),
.skill-doc-step-body :deep(ol),
.skill-doc-body :deep(ul),
.skill-doc-body :deep(ol) {
  margin: 4px 0 0;
  padding-left: 18px;
}

/* ---------- escape hatches ---------- */

.skill-doc-hatches {
  margin: 0;
  display: grid;
  /* The term column takes as much as its longest label needs, so a translated
     label does not wrap, and gives it back when the card is narrow. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0;
}

.skill-doc-hatches dt,
.skill-doc-hatches dd {
  padding: 7px 0;
  border-top: 1px solid var(--gn-border-color-muted);
}

.skill-doc-hatches dt:nth-of-type(1),
.skill-doc-hatches dt:nth-of-type(1) + dd {
  border-top: none;
  padding-top: 0;
}

.skill-doc-hatches dt {
  padding-right: 12px;
  font-weight: 600;
  color: var(--gn-color-text-dark);
}

.skill-doc-hatches dd {
  margin: 0;
  color: var(--gn-color-text-medium);
}

/* ---------- body ---------- */

.skill-doc-body {
  color: var(--gn-color-text-medium);
}

.skill-doc-body :deep(h1),
.skill-doc-body :deep(h2),
.skill-doc-body :deep(h3),
.skill-doc-body :deep(h4) {
  margin: 10px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gn-color-text-light);
}

.skill-doc-body :deep(pre) {
  overflow-x: auto;
}

@media (max-width: 560px) {
  .skill-doc-hatches {
    grid-template-columns: 1fr;
  }

  .skill-doc-hatches dt {
    padding-bottom: 0;
    border-top: 1px solid var(--gn-border-color-muted);
    padding-top: 7px;
  }

  .skill-doc-hatches dd {
    border-top: none;
    padding-top: 2px;
  }

  .skill-doc-hatches dt:nth-of-type(1) {
    border-top: none;
    padding-top: 0;
  }
}
</style>