<script setup lang="ts">
import { computed, inject } from 'vue'
import type { KbxAiProposal } from '@kbx/contracts'
import { KbxPermissionHostKey } from '../permission/host'
import KbxButton from './KbxButton.vue'

const props=defineProps<{proposal:KbxAiProposal;canApply?:boolean;can?:(permission:string)=>boolean}>()
const emit=defineEmits<{cancel:[];detail:[];apply:[]}>()
const permissionHost=inject(KbxPermissionHostKey,null)
const permissionAllowed=computed(()=>!props.proposal.requiredPermission||(props.can?props.can(props.proposal.requiredPermission):(permissionHost?.has(props.proposal.requiredPermission)??false)))
const validationAllowed=computed(()=>!props.proposal.validation||props.proposal.validation.state==='validated')
const applyDisabled=computed(()=>props.canApply===false||!permissionAllowed.value||!validationAllowed.value)
const guardMessage=computed(()=>{
  if(!permissionAllowed.value)return '이 제안을 적용할 권한이 없습니다.'
  if(props.proposal.validation?.state==='pending')return props.proposal.validation.message??'서버에서 대상·권한·업무규칙을 확인하고 있습니다.'
  if(props.proposal.validation?.state==='invalid')return props.proposal.validation.message??'현재 업무 상태에서는 이 제안을 적용할 수 없습니다.'
  if(props.proposal.validation?.state==='stale')return props.proposal.validation.message??'대상 데이터가 변경되었습니다. 최신 기준으로 제안을 다시 확인하세요.'
  if(props.canApply===false)return '현재 화면 상태에서는 이 제안을 적용할 수 없습니다.'
  return ''
})
function apply(){if(!applyDisabled.value)emit('apply')}
</script>

<template>
  <section class="kbx-proposal" aria-label="AI 제안" :data-validation="proposal.validation?.state ?? 'not-provided'">
    <header><strong>AI 제안</strong><span v-if="proposal.confidence!=null">신뢰도 {{Math.round(proposal.confidence*100)}}%</span></header>
    <div class="kbx-proposal__title"><h3>{{proposal.title}}</h3><small v-if="proposal.targets?.length">대상 {{proposal.targets.length.toLocaleString()}}건</small></div>
    <p>{{proposal.explanation}}</p>
    <dl v-if="proposal.proposedChanges?.length"><template v-for="change in proposal.proposedChanges" :key="`${change.field}:${String(change.before)}:${String(change.after)}`"><dt>{{change.label}}</dt><dd>{{change.before ?? '-'}} → {{change.after ?? '-'}}</dd></template></dl>
    <div v-if="proposal.evidence?.length" class="kbx-proposal__evidence"><strong>근거</strong><span v-for="evidence in proposal.evidence" :key="`${evidence.sourceType}:${evidence.label}`">{{evidence.label}} · {{evidence.sourceType}}</span></div>
    <p v-if="guardMessage" class="kbx-proposal__guard" role="status">{{guardMessage}}</p>
    <footer><KbxButton label="취소" @click="emit('cancel')"/><KbxButton label="상세보기" @click="emit('detail')"/><KbxButton label="변경안 적용" variant="primary" :disabled="applyDisabled" :title="guardMessage||undefined" @click="apply"/></footer>
  </section>
</template>

<style scoped>
.kbx-proposal{display:grid;gap:var(--kbx-space-2);padding:var(--kbx-space-3);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface)}header,footer,.kbx-proposal__title{display:flex;align-items:center;gap:var(--kbx-space-2)}header span,.kbx-proposal__title small{margin-left:auto;color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs)}h3,p{margin:0}dl{display:grid;grid-template-columns:calc(var(--kbx-label-width) + var(--kbx-space-6)) 1fr;gap:var(--kbx-space-1) var(--kbx-space-2);margin:var(--kbx-space-1) 0}dt{font-weight:500}dd{margin:0}.kbx-proposal__evidence{display:flex;gap:var(--kbx-space-2);flex-wrap:wrap;font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted)}.kbx-proposal__guard{padding:var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-warning-border);background:var(--kbx-color-warning-surface);font-size:var(--kbx-font-sm)}.kbx-proposal[data-validation="invalid"] .kbx-proposal__guard,.kbx-proposal[data-validation="stale"] .kbx-proposal__guard{border-color:var(--kbx-color-danger-border);background:var(--kbx-color-danger-surface)}footer{justify-content:flex-end}
</style>
