<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 { wsSend } from '@/composables/wsBridge.js'
import SkillDocument from '@/components/skills/SkillDocument.vue'
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 : []))

// 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>
      </header>

      <div class="skill-proposal-doc">
        <SkillDocument :doc="proposal" />
      </div>

      <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);
}

/* The document body: the card draws the frame and the header, the shared
   SkillDocument component draws the sections. */
.skill-proposal-doc {
  padding: 0 16px 12px;
}

/* ---------- 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);
}
</style>