<!-- src/pages/customer/profile/profile/EquipmentParts.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-warning/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-warning">
              <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" />
            </svg>
          </div>
          Equipment Parts
        </h2>
        <button @click="$emit('open-parts-modal')" class="btn btn-xs btn-outline btn-success">
          Edit
        </button>
      </div>
      
      <!-- v-if="parts" correctly handles the null case, preventing errors below -->
      <div v-if="parts" class="mt-2 text-sm">
        <div v-if="hasPartsData" class="grid grid-cols-2 gap-x-4 gap-y-2">
          <div v-if="parts.oil_filter">
            <div class="font-bold">Oil Filter 1:</div>
            <div>{{ parts.oil_filter }}</div>
          </div>
          <div v-if="parts.oil_filter_2">
            <div class="font-bold">Oil Filter 2:</div>
            <div>{{ parts.oil_filter_2 }}</div>
          </div>
          <div v-if="parts.oil_nozzle">
            <div class="font-bold">Oil Nozzle 1:</div>
            <div :style="{ color: getNozzleColor(parts.oil_nozzle), fontWeight: 'bold' }">{{ parts.oil_nozzle }}</div>
          </div>
          <div v-if="parts.oil_nozzle_2">
            <div class="font-bold">Oil Nozzle 2:</div>
            <div :style="{ color: getNozzleColor(parts.oil_nozzle_2), fontWeight: 'bold' }">{{ parts.oil_nozzle_2 }}</div>
          </div>
          <div class="col-span-2" v-if="parts.hot_water_tank !== undefined">
            <div class="font-bold">Hot Water Tank:</div>
            <div>{{ parts.hot_water_tank ? 'Yes' : 'No' }}</div>
          </div>
        </div>
        <div v-else>
          <p class="text-xs opacity-70">No equipment parts information available.</p>
        </div>
      </div>
      <div v-else class="text-xs opacity-70 mt-2">
        Loading parts info...
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

// 1. Define the interface for the parts object.
interface ServiceParts {
  id?: number;
  customer_id: number;
  oil_filter: string;
  oil_filter_2: string;
  oil_nozzle: string;
  oil_nozzle_2: string;
  hot_water_tank: number;
}

// 2. Define the Props interface, explicitly allowing 'null'.
interface Props {
  parts: ServiceParts | null;
}

// 3. Use the typed defineProps and assign to a const.
const props = defineProps<Props>();

defineEmits(['open-parts-modal']);

const hasPartsData = computed(() => {
  if (!props.parts) return false;
  return !!(props.parts.oil_filter || props.parts.oil_filter_2 || props.parts.oil_nozzle || props.parts.oil_nozzle_2 || (props.parts.hot_water_tank !== undefined && props.parts.hot_water_tank !== null));
});

const getNozzleColor = (nozzleString: string): string => {
  if (!nozzleString) return 'inherit';
  const firstChar = nozzleString.trim().toLowerCase().charAt(0);
  switch (firstChar) {
    case 'a': return '#EF4444'; // Red
    case 'b': return '#3B82F6'; // Blue
    case 'w': return '#16a34a'; // Green
    default: return 'inherit';
  }
};
</script>
