<template>
  <div class="processing-status-cell">
    <!-- Manual receipts (no batch_id) show dash -->
    <template v-if="!batchId">
      <span class="processing-status-dash">-</span>
    </template>

    <!-- Pending status -->
    <template v-else-if="status === 'pending'">
      <span class="processing-status processing-pending">
        În așteptare
      </span>
    </template>

    <!-- Processing status with spinner -->
    <template v-else-if="status === 'processing'">
      <span class="processing-status processing-active">
        <i class="pi pi-spin pi-spinner"></i>
        Se procesează...
      </span>
    </template>

    <!-- Completed status -->
    <template v-else-if="status === 'completed'">
      <span class="processing-status processing-success">
        ✓ Procesat
      </span>
    </template>

    <!-- Failed status with error message below -->
    <template v-else-if="status === 'failed'">
      <div class="processing-failed-container">
        <span
          class="processing-status processing-failed"
          v-tooltip.top="{ value: errorMessage, showDelay: 200 }"
          @click.stop="handleErrorClick"
        >
          ✗ Eroare
        </span>
        <!-- Truncated error message visible in list -->
        <span
          v-if="processingError"
          class="processing-error-message"
          v-tooltip.bottom="{ value: processingError, showDelay: 200 }"
        >
          {{ truncatedError }}
        </span>
      </div>
    </template>

    <!-- Unknown/null status for batch items -->
    <template v-else>
      <span class="processing-status-dash">-</span>
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  /**
   * Processing status value from receipt
   * Values: 'pending' | 'processing' | 'completed' | 'failed' | null
   */
  status: {
    type: String,
    default: null
  },
  /**
   * Batch ID - null means manual receipt (shows dash)
   */
  batchId: {
    type: String,
    default: null
  },
  /**
   * Error message to show in tooltip (for failed status)
   */
  processingError: {
    type: String,
    default: null
  }
})

const emit = defineEmits(['error-click'])

/**
 * Computed error message for tooltip
 * Falls back to generic message if no specific error provided
 */
const errorMessage = computed(() => {
  return props.processingError || 'Eroare la procesare'
})

/**
 * Truncated error message for inline display
 * Shows first 50 characters with '...' if longer
 */
const truncatedError = computed(() => {
  if (!props.processingError) return ''
  const maxLength = 50
  if (props.processingError.length <= maxLength) {
    return props.processingError
  }
  return props.processingError.substring(0, maxLength) + '...'
})

/**
 * Handle click on error status
 * Emits event for parent to handle (e.g., show modal with full error)
 */
const handleErrorClick = () => {
  emit('error-click', props.processingError)
}
</script>

<style scoped>
.processing-status-cell {
  display: flex;
  align-items: center;
}

.processing-status-dash {
  color: var(--text-color-secondary);
  font-size: var(--text-sm);
}

.processing-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
  /* US-019: Smooth transition for status changes */
  transition: opacity 300ms ease, background-color 300ms ease, color 300ms ease;
}

/* US-019: Respect prefers-reduced-motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .processing-status {
    transition: none;
  }
}

/* Pending: gray/muted */
.processing-pending {
  background: var(--surface-hover);
  color: var(--text-color-secondary);
}

/* Processing: blue with spinner */
.processing-active {
  background: var(--blue-50);
  color: var(--blue-600);
  border: 1px solid var(--blue-500);
}

.processing-active .pi-spinner {
  font-size: var(--text-xs);
}

/* Completed: green */
.processing-success {
  background: var(--green-50);
  color: var(--green-600);
}

/* Failed: red, clickable */
.processing-failed {
  background: var(--red-50);
  color: var(--red-600);
  border: 1px solid var(--red-500);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.processing-failed:hover {
  background: var(--red-100);
}

/* Container for failed status + error message */
.processing-failed-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* Truncated error message displayed below status */
.processing-error-message {
  font-size: var(--text-xs);
  color: var(--red-600);
  max-width: 200px;
  line-height: var(--leading-tight);
  cursor: help;
  word-break: break-word;
}
</style>
