<template>
  <div class="approval-status">
    <!-- نمایش وضعیت تأیید -->
    <v-chip
      :color="statusColor"
      size="small"
      class="me-2"
    >
      <v-icon size="small" class="me-1">
        {{ statusIcon }}
      </v-icon>
      {{ statusText }}
    </v-chip>

    <!-- دکمه تأیید (فقط اگر کاربر مجوز داشته باشد) -->
    <v-btn
      v-if="showApprovalButton"
      :color="approvalButtonColor"
      size="small"
      variant="outlined"
      @click="handleApproval"
      :loading="approving"
      :disabled="approving"
    >
      <v-icon size="small" class="me-1">
        {{ approvalButtonIcon }}
      </v-icon>
      {{ approvalButtonText }}
    </v-btn>

    <!-- اطلاعات تأییدکننده -->
    <div v-if="document.approvedBy" class="text-caption text-medium-emphasis mt-1">
      تایید شده توسط: {{ document.approvedBy.name || document.approvedBy }}
      <span v-if="document.approvedAt">
        در تاریخ: {{ formatDate(document.approvedAt) }}
      </span>
    </div>

    <!-- اطلاعات ردکننده -->
    <div v-if="document.rejectedBy" class="text-caption text-error mt-1">
      رد شده توسط: {{ document.rejectedBy.name || document.rejectedBy }}
      <span v-if="document.rejectedAt">
        در تاریخ: {{ formatDate(document.rejectedAt) }}
      </span>
      <span v-if="document.rejectionReason" class="ms-2">
        دلیل: {{ document.rejectionReason }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { 
  getApprovalStatusText, 
  getApprovalStatusColor, 
  shouldShowApprovalButton,
  getApprovalButtonText,
  getDocumentType
} from '@/utils/approvalUtils'

const props = defineProps({
  document: {
    type: Object,
    required: true
  },
  businessSettings: {
    type: Object,
    required: true
  },
  currentUserEmail: {
    type: String,
    required: true
  },
  isBusinessOwner: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['approve', 'reject'])

const approving = ref(false)

// محاسبه وضعیت تأیید
const statusText = computed(() => getApprovalStatusText(props.document))
const statusColor = computed(() => getApprovalStatusColor(props.document))
const statusIcon = computed(() => {
  if (props.document.approved === true) return 'mdi-check-circle'
  if (props.document.approved === false) return 'mdi-close-circle'
  return 'mdi-clock-outline'
})

// محاسبه دکمه تأیید
const showApprovalButton = computed(() => {
  return shouldShowApprovalButton(
    props.businessSettings, 
    props.document, 
    props.currentUserEmail, 
    props.isBusinessOwner
  )
})

const approvalButtonText = computed(() => getApprovalButtonText(props.document))
const approvalButtonColor = computed(() => {
  if (props.document.approved === false) return 'warning'
  return 'success'
})
const approvalButtonIcon = computed(() => {
  if (props.document.approved === false) return 'mdi-refresh'
  return 'mdi-check'
})

// مدیریت تأیید
const handleApproval = async () => {
  try {
    approving.value = true
    
    // اگر سند رد شده، برای تأیید مجدد ارسال کن
    if (props.document.approved === false) {
      await emit('approve', props.document)
    } else {
      // تأیید عادی
      await emit('approve', props.document)
    }
  } catch (error) {
    console.error('خطا در تأیید سند:', error)
  } finally {
    approving.value = false
  }
}

// فرمت تاریخ
const formatDate = (date) => {
  if (!date) return ''
  
  try {
    const dateObj = new Date(date)
    if (isNaN(dateObj.getTime())) return date
    
    return dateObj.toLocaleDateString('fa-IR')
  } catch (error) {
    return date
  }
}
</script>

<style scoped>
.approval-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.approval-status .v-chip {
  font-weight: 500;
}

.approval-status .v-btn {
  text-transform: none;
}
</style>
