<!-- src/pages/customer/profile/profile/TankInfo.vue -->
<template>
  <div class="card-glass">
    <div class="card-body p-4 sm:p-6">
      <div class="card-title flex justify-between items-center">
        <h2 class="flex items-center gap-2">
          <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-primary">
              <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
            </svg>
          </div>
          Tank Info
        </h2>
        <router-link :to="{ name: 'TankEdit', params: { id: customer_id } }" class="btn btn-xs btn-outline btn-success">
          Edit
        </router-link>
      </div>
      <div class="text-sm mt-2 space-y-1">
        <div class="flex justify-between">
          <span>Status:</span>
          <span class="badge" :class="tank.tank_status ? 'badge-success' : 'badge-error'">
            {{ tank.tank_status ? 'Inspected' : 'Needs Inspection' }}
          </span>
        </div>
        <div class="flex justify-between"><span>Last Inspection:</span> <strong>{{ tank.last_tank_inspection || 'N/A' }}</strong></div>
        <div class="flex justify-between"><span>Location:</span> <strong class="badge" :class="tank.outside_or_inside ? '' : 'badge-warning'">{{ tank.outside_or_inside ? 'Inside' : 'Outside' }}</strong></div>
        <div class="flex justify-between"><span>Size:</span> <strong>{{ tank.tank_size }} Gallons</strong></div>
        <div class="flex justify-between"><span>Fill Location:</span> <strong>{{ description.fill_location }}</strong></div>

        <!-- Estimation data (when available) -->
        <template v-if="estimation">
          <div class="divider my-1"></div>
          <div class="flex justify-between items-center">
            <span>Confidence:</span>
            <span class="badge badge-sm" :class="getConfidenceBadge(estimation.confidence_score)">
              {{ estimation.confidence_score ?? 20 }}
            </span>
          </div>
          <div class="flex justify-between">
            <span>K-Factor Source:</span>
            <strong class="capitalize">{{ estimation.k_factor_source || 'default' }}</strong>
          </div>
          <div class="flex justify-between items-center">
            <span>Days Remaining:</span>
            <span v-if="estimation.days_remaining >= 999" class="text-base-content/40">N/A</span>
            <strong v-else :class="{
              'text-error': estimation.days_remaining <= 7,
              'text-warning': estimation.days_remaining > 7 && estimation.days_remaining <= 14,
              'text-success': estimation.days_remaining > 14
            }">{{ estimation.days_remaining }} days</strong>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
    customer_id: { type: Number, required: true },
    tank: { type: Object, required: true },
    description: { type: Object, required: true },
    estimation: { type: Object, default: null }
});

const getConfidenceBadge = (score: number | null | undefined): string => {
  const s = score ?? 20
  if (s >= 70) return 'badge-success'
  if (s >= 40) return 'badge-warning'
  return 'badge-error'
}
</script>

