<template>
  <div v-if="open" class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-card ai-advice-modal compact">
      <div class="modal-head">
        <h3>{{ t('sections.aiAdvisorTitle') }}</h3>
        <button class="btn btn-outline btn-xs" @click="$emit('close')">×</button>
      </div>

      <div class="ai-modal-body compact">
        <div class="ai-image-wrap">
          <img v-if="image" class="ai-proof-image" :src="image" :alt="t('table.verification')" />
        </div>

        <div class="ai-info-panel">
          <template v-if="loading">
            <div class="loading-state ai-loading-state">
              <div class="spinner" />
              <p>{{ t('messages.aiAnalyzing') }}</p>
            </div>
          </template>
          <template v-else-if="error">
            <div class="hint-box danger">{{ error }}</div>
          </template>
          <template v-else-if="advice">
            <div class="ai-metric-grid">
              <div class="ai-metric-card">
                <p class="ai-label">{{ t('labels.currentScore') }}</p>
                <p class="ai-value mono">{{ currentScore }}</p>
              </div>
              <div class="ai-metric-card highlight">
                <p class="ai-label">{{ t('labels.aiSuggestedScore') }}</p>
                <p class="ai-value mono">{{ advice.advisedScore }}</p>
              </div>
            </div>
            <p class="ai-summary">{{ advice.reason }}</p>
          </template>
        </div>
      </div>

      <div class="modal-actions split">
        <button class="btn btn-outline" :disabled="loading" @click="$emit('refresh')">{{ t('actions.reAnalyze') }}</button>
        <button class="btn btn-secondary" @click="$emit('close')">{{ t('actions.cancel') }}</button>
        <button class="btn btn-ai" :disabled="loading || !advice" @click="$emit('apply')">{{ t('actions.quickApplyAi') }}</button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  open: { type: Boolean, default: false },
  t: { type: Function, required: true },
  advice: { type: Object, default: null },
  currentScore: { type: Number, default: 0 },
  image: { type: String, default: '' },
  loading: { type: Boolean, default: false },
  error: { type: String, default: '' },
})

defineEmits(['close', 'refresh', 'apply'])
</script>
