<template>
  <div class="section-card" v-if="warranties.length || showEmpty">
    <h3 class="section-title">Warranty</h3>

    <div v-if="warranties.length" class="warranty-list">
      <div v-for="w in warranties" :key="w.warrantyid" class="warranty-item">
        <div class="warranty-top">
          <span class="warranty-vendor">{{ w.vendor }}</span>
          <span class="status-badge" :style="colorStyle(w.statuscolor)">{{ statusLabel(w.status) }}</span>
        </div>
        <div class="warranty-meta">
          <span v-if="w.servicelevel">{{ w.servicelevel }}</span>
          <span v-if="w.enddate">Ends {{ formatDate(w.enddate) }}</span>
          <span v-if="w.servicetag" class="mono">Tag {{ w.servicetag }}</span>
        </div>
      </div>
      <router-link :to="`/warranties?addfor=${assetid}`" class="warranty-manage">Add / manage</router-link>
    </div>

    <div v-else class="warranty-empty">
      <span class="muted">No warranty on record.</span>
      <router-link :to="`/warranties?addfor=${assetid}`" class="warranty-manage">Add one</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { colorStyle } from '@/utils/colorStyle'
import { warrantyApi } from '../api'

const props = defineProps({
  assetid: { type: [Number, String], default: null },
  // When true, render the card even with no warranties (shows an "Add one" link).
  showEmpty: { type: Boolean, default: false },
  // Optional pre-fetched warranties. When provided, the panel uses them instead
  // of fetching (lets a parent share one fetch with e.g. a hero badge).
  items: { type: Array, default: null },
})

const warranties = ref([])

function statusLabel(status) {
  return { active: 'Active', expiring: 'Expiring Soon', expired: 'Expired', unknown: 'Unknown' }[status] || status
}

function formatDate(d) {
  if (!d) return '-'
  return new Date(d + 'T00:00:00').toLocaleDateString()
}

async function load() {
  // Parent-supplied data wins - skip the fetch.
  if (props.items !== null) { warranties.value = props.items; return }
  if (!props.assetid) { warranties.value = []; return }
  try {
    const response = await warrantyApi.forAsset(props.assetid)
    warranties.value = response.data.data || []
  } catch (err) {
    console.error('Error loading warranties:', err)
    warranties.value = []
  }
}

onMounted(load)
watch(() => props.assetid, load)
watch(() => props.items, load)
</script>

<style scoped>
.warranty-list { display: flex; flex-direction: column; gap: 0.75rem; }
.warranty-item { padding: 0.6rem 0.75rem; background: var(--bg); border-radius: 6px; }
.warranty-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.warranty-vendor { font-weight: 600; color: var(--text); }
.status-badge { padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.warranty-meta { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; color: var(--text-light); }
.warranty-empty { display: flex; align-items: center; gap: 0.6rem; }
.warranty-manage { font-size: 0.82rem; }
.mono { font-family: monospace; }
.muted { color: var(--text-light); }
</style>
