<script>
// This card draws its own frame (GnCard), so the generic ui-component frame
// would put a second border and a "skill_proposal" header around it.
export const bare = true
</script>

<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { GnAlert, GnBadge, GnButton, GnCard, GnChip, GnDescriptionList, GnList, GnLoader, GnSteps } from 'gnexus-ui-kit/vue'
import { t } from '@/i18n/index.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 preconditions = computed(() => proposal.value?.preconditions ?? [])
const postChecks = computed(() => proposal.value?.post_checks ?? [])

const stepItems = computed(() =>
  (proposal.value?.steps ?? []).map(step => ({ title: step }))
)

// 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 hatchItems = computed(() => {
  const p = proposal.value
  if (!p) return []
  return [
    { term: t('ui.proposalOnDeviation'), value: p.on_deviation },
    { term: t('ui.proposalOnBlocked'), value: p.on_blocked },
    { 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>
  <GnCard class="skill-proposal">
    <template #title>
      <span class="skill-proposal-head">
        <span>{{ proposal?.name || t('ui.proposalLoading') }}</span>
        <GnBadge v-if="proposal" variant="info">{{ kindLabel }}</GnBadge>
      </span>
    </template>

    <div v-if="loading" class="skill-proposal-state">
      <GnLoader />
      <span>{{ t('ui.proposalLoading') }}</span>
    </div>

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

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

      <div class="skill-proposal-meta">
        <GnChip variant="secondary" icon="ph-folder">{{ areaLabel }}</GnChip>
        <GnChip v-for="tag in tags" :key="tag" icon="ph-tag">{{ tag }}</GnChip>
      </div>

      <section v-if="preconditions.length" class="skill-proposal-section">
        <h4 class="skill-proposal-label">{{ t('ui.proposalPreconditions') }}</h4>
        <GnList :items="preconditions" icons />
      </section>

      <section v-if="stepItems.length" class="skill-proposal-section">
        <h4 class="skill-proposal-label">{{ t('ui.proposalSteps') }}</h4>
        <GnSteps :items="stepItems" vertical />
      </section>

      <section v-if="postChecks.length" class="skill-proposal-section">
        <h4 class="skill-proposal-label">{{ t('ui.proposalPostChecks') }}</h4>
        <GnList :items="postChecks" icons />
      </section>

      <section v-if="hatchItems.length" class="skill-proposal-section">
        <GnDescriptionList :items="hatchItems" compact />
      </section>

      <p v-if="proposal.body" class="skill-proposal-body">{{ proposal.body }}</p>
    </template>

    <template #footer>
      <div v-if="status === 'pending'" class="skill-proposal-actions">
        <GnButton
          variant="primary"
          icon="ph-check"
          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">
          {{ actionError || decisionError }}
        </span>
      </div>

      <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>
    </template>
  </GnCard>
</template>

<style scoped>
/* Only the composition of kit components lives here — colours, typography,
   buttons and borders come from the kit's own classes. */
.skill-proposal {
  margin: 8px 0;
}

.skill-proposal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.skill-proposal-state {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gn-color-text-dark);
}

.skill-proposal-description {
  margin: 0 0 12px;
  line-height: 1.5;
  color: var(--gn-color-text-light);
}

.skill-proposal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.skill-proposal-section {
  margin-bottom: 14px;
}

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

.skill-proposal-body {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--gn-border-color-muted);
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--gn-color-text-light);
}

.skill-proposal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.skill-proposal-error {
  font-size: 0.8rem;
  color: var(--gn-color-error);
}
</style>