<script>
// This card draws its own frame, so the generic ui-component frame would put a
// second border and a "skill_proposal" header around it. It is a chat domain
// card — layout is app-owned (like ToolCard/SummaryCard), atoms come from the
// kit: buttons, alerts, chips, badge and loader.
export const bare = true
</script>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { GnAlert, GnBadge, GnButton, GnChip, GnLoader } from 'gnexus-ui-kit/vue'
import { t } from '@/i18n/index.js'
import { renderMarkdown } from '@/composables/useMarkdown.js'
import { wsSend } from '@/composables/wsBridge.js'
import * as api from '@/api/index.js'

const props = defineProps({
  data: { type: Object, default: () => ({}) }
})

const AREA_SLUGS = {
  home: 'settings.skillsAreaHome',
  infrastructure: 'settings.skillsAreaInfrastructure',
  workflows: 'settings.skillsAreaWorkflows',
  general: 'settings.skillsAreaGeneral',
}

const proposal = ref(null)
const loading = ref(true)
const loadError = ref('')
const sending = ref(false)
const actionError = ref('')

const proposalId = computed(() => props.data?.proposal_id || '')

// The payload is what the chat store patches when the decided event arrives;
// the fetched copy is the fallback for a card restored from history.
const status = computed(
  () => props.data?.status || proposal.value?.status || 'pending'
)
const decisionError = computed(() => props.data?.error || '')

const kindLabel = computed(() =>
  proposal.value?.replaces_id ? t('ui.proposalReplaces') : t('ui.proposalNew')
)

const areaLabel = computed(() =>
  t(AREA_SLUGS[proposal.value?.area] || AREA_SLUGS.general)
)

const tags = computed(() => (Array.isArray(proposal.value?.tags) ? proposal.value.tags : []))
const triggers = computed(() => (Array.isArray(proposal.value?.triggers) ? proposal.value.triggers : []))
const preconditions = computed(() => proposal.value?.preconditions ?? [])
const postChecks = computed(() => proposal.value?.post_checks ?? [])
const bodyHtml = computed(() => {
  const body = proposal.value?.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 card shows
// 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(() =>
  (proposal.value?.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 p = proposal.value
  if (!p) return []
  return [
    { key: 'deviation', term: t('ui.proposalOnDeviation'), value: p.on_deviation },
    { key: 'blocked', term: t('ui.proposalOnBlocked'), value: p.on_blocked },
    { key: 'already', term: t('ui.proposalOnAlreadyDone'), value: p.on_already_done },
  ].filter(item => item.value)
})

// A decided card or a refusal both end the wait; the status may stay
// 'pending' when the catalog refused the document, so the error is the other
// signal that the request came back.
watch([status, decisionError], () => {
  sending.value = false
})

onMounted(async () => {
  if (!proposalId.value) {
    loading.value = false
    loadError.value = t('ui.proposalNotFound')
    return
  }
  try {
    proposal.value = await api.getSkillProposal(proposalId.value)
  } catch (err) {
    loadError.value = t('ui.proposalNotFound')
    console.error('[SkillProposal]', err)
  } finally {
    loading.value = false
  }
})

function decide(action) {
  if (sending.value) return
  actionError.value = ''
  sending.value = true
  const sent = wsSend({ type: 'skill_proposal', proposal_id: proposalId.value, action })
  if (!sent) {
    sending.value = false
    actionError.value = t('ui.proposalOffline')
  }
}
</script>

<template>
  <article class="skill-proposal" :class="`is-${status}`">
    <div v-if="loading" class="skill-proposal-loading">
      <GnLoader />
      <span>{{ t('ui.proposalLoading') }}</span>
    </div>

    <GnAlert v-else-if="loadError" variant="danger">{{ loadError }}</GnAlert>

    <template v-else-if="proposal">
      <header class="skill-proposal-head">
        <div class="skill-proposal-kicker">
          <span class="skill-proposal-kind">
            <i class="ph ph-file-text" aria-hidden="true"></i>
            {{ kindLabel }}
          </span>
          <span class="skill-proposal-area">{{ areaLabel }}</span>
          <span v-if="tags.length" class="skill-proposal-tags">
            <GnChip v-for="tag in tags" :key="tag" icon="ph-tag">{{ tag }}</GnChip>
          </span>
          <GnBadge v-if="status === 'accepted'" variant="success">
            {{ t('ui.proposalInCatalog') }}
          </GnBadge>
        </div>

        <h3 class="skill-proposal-name">{{ proposal.name }}</h3>
        <p v-if="proposal.description" class="skill-proposal-description">
          {{ proposal.description }}
        </p>

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

      <section v-if="preconditions.length" class="skill-proposal-section">
        <h4 class="skill-proposal-label">{{ t('ui.proposalPreconditions') }}</h4>
        <ul class="skill-proposal-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-proposal-section">
        <h4 class="skill-proposal-label">{{ t('ui.proposalSteps') }}</h4>
        <ol class="skill-proposal-steps">
          <li v-for="step in steps" :key="step.index">
            <span class="skill-proposal-step-num">{{ step.index }}</span>
            <div class="skill-proposal-step-body">
              <div
                class="skill-proposal-step-title"
                v-html="renderMarkdown(step.title)"
              />
              <div
                v-if="step.action"
                class="skill-proposal-step-action"
                v-html="renderMarkdown(step.action)"
              />
              <div v-if="step.check" class="skill-proposal-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-proposal-section">
        <h4 class="skill-proposal-label">{{ t('ui.proposalPostChecks') }}</h4>
        <ul class="skill-proposal-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-proposal-section">
        <h4 class="skill-proposal-label">{{ t('ui.proposalFallbacks') }}</h4>
        <dl class="skill-proposal-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-proposal-section">
        <h4 class="skill-proposal-label">{{ t('ui.proposalContext') }}</h4>
        <div class="skill-proposal-body markdown-body" v-html="bodyHtml" />
      </section>

      <footer class="skill-proposal-footer">
        <template v-if="status === 'pending'">
          <GnButton
            variant="primary"
            icon="ph-plus"
            class="skill-proposal-btn is-accept"
            :loading="sending"
            @click="decide('accept')"
          >
            {{ t('ui.proposalAccept') }}
          </GnButton>
          <GnButton
            variant="secondary"
            icon="ph-x"
            class="skill-proposal-btn is-reject"
            :disabled="sending"
            @click="decide('reject')"
          >
            {{ t('ui.proposalReject') }}
          </GnButton>
          <span
            v-if="actionError || decisionError"
            class="skill-proposal-error"
            role="alert"
          >
            {{ actionError || decisionError }}
          </span>
        </template>

        <GnAlert
          v-else
          :variant="status === 'accepted' ? 'success' : 'warning'"
          class="skill-proposal-decision"
        >
          <i
            class="ph"
            :class="status === 'accepted' ? 'ph-check-circle' : 'ph-x-circle'"
            aria-hidden="true"
          ></i>
          <span>{{ status === 'accepted' ? t('ui.proposalAccepted') : t('ui.proposalRejected') }}</span>
          <span v-if="decisionError" class="skill-proposal-error">{{ decisionError }}</span>
        </GnAlert>
      </footer>
    </template>
  </article>
</template>

<style scoped>
/* Layout for a chat document card: the frame, the sections and their rhythm
   are app-owned (see the chat-domain escape hatch in webclient/CLAUDE.md);
   colours, spacing and typography come from the kit's tokens. */
.skill-proposal {
  margin: 10px 0;
  max-width: 100%;
  background: var(--gn-surface-panel);
  border: 1px solid var(--gn-border-color-muted);
  border-left: 3px solid var(--gn-color-secondary);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gn-color-text-light);
}

.skill-proposal.is-accepted {
  border-left-color: var(--gn-color-success);
}

.skill-proposal.is-rejected {
  border-left-color: var(--gn-color-text-dark);
}

.skill-proposal-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: var(--gn-color-text-dark);
}

/* ---------- header ---------- */

.skill-proposal-head {
  padding: 14px 16px 12px;
}

.skill-proposal-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gn-color-secondary);
}

.skill-proposal-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.skill-proposal-area {
  color: var(--gn-color-text-dark);
}

.skill-proposal-tags {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
}

.skill-proposal-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gn-color-text-light);
}

.skill-proposal-description {
  margin: 6px 0 0;
  color: var(--gn-color-text-medium);
}

.skill-proposal-triggers {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 12px;
}

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

/* ---------- sections ---------- */

.skill-proposal-section {
  padding: 12px 16px;
  border-top: 1px solid var(--gn-border-color-muted);
}

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

/* A label that sits inline at the start of a row of chips. */
.skill-proposal-triggers .skill-proposal-label {
  margin: 0 4px 0 0;
}

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

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

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

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

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

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

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

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

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

.skill-proposal-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-proposal-step-body {
  min-width: 0;
  padding-top: 1px;
}

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

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

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

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

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

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

.skill-proposal-step-body :deep(code),
.skill-proposal-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-proposal-step-body :deep(ul),
.skill-proposal-step-body :deep(ol),
.skill-proposal-body :deep(ul),
.skill-proposal-body :deep(ol) {
  margin: 4px 0 0;
  padding-left: 18px;
}

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

.skill-proposal-hatches {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 0;
}

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

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

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

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

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

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

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

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

/* ---------- footer ---------- */

.skill-proposal-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--gn-border-color-muted);
  background: var(--gn-surface-panel-muted);
}

.skill-proposal-decision {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.skill-proposal-error {
  font-size: 12px;
  color: var(--gn-color-error);
}

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

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

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

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