<!-- src/pages/customer/profile/profile/ServiceCallsTable.vue -->
<template>
  <div>
    <div v-if="!serviceCalls || serviceCalls.length === 0" class="text-center p-10">
      <p>No service calls found.</p>
    </div>
    <div v-else class="overflow-x-auto bg-base-100 rounded-lg">
      <table class="table table-sm w-full">
        <thead>
          <tr>
            <th>Date</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <!-- Note: The @click handler is removed from the <tr> since the row itself is no longer the primary action -->
          <tr v-for="service in serviceCalls" :key="service.id" class="hover">
            <td class="align-top">
              <div>{{ formatDate(service.scheduled_date) }}</div>
              <div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
            </td>
            <td class="align-top">
              <span class="font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
                {{ getServiceTypeName(service.type_service_call) }}
              </span>
            </td>
            <td class="whitespace-normal text-sm align-top">
              <!-- If the text is short OR this row is expanded, show the full text -->
              <div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
                {{ service.description }}
                <a v-if="isLongDescription(service.description)" 
                   @click.prevent="toggleExpand(service.id)" 
                   href="#" 
                   class="link link-info link-hover text-xs ml-1 whitespace-nowrap">
                  Show less
                </a>
              </div>
              <!-- Otherwise, show the truncated text -->
              <div v-else>
                {{ truncateDescription(service.description) }}
                <a @click.prevent="toggleExpand(service.id)" 
                   href="#" 
                   class="link link-info link-hover text-xs ml-1 whitespace-nowrap">
                  Read more
                </a>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

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

interface ServiceCall {
  id: number;
  scheduled_date: string;
  type_service_call: number;
  description: string;
}

interface Props {
  serviceCalls: ServiceCall[];
}

defineProps<Props>();

// --- NEW LOGIC FOR TEXT TRUNCATION ---

// 1. Define the word limit as a constant for easy changes
const WORD_LIMIT = 50;

// 2. Create a reactive array to store the IDs of expanded rows
const expandedIds = ref<number[]>([]);

// 3. Helper function to check if a description is long
const isLongDescription = (text: string): boolean => {
  if (!text) return false;
  return text.split(/\s+/).length > WORD_LIMIT;
};

// 4. Helper function to truncate the description
const truncateDescription = (text: string): string => {
  if (!isLongDescription(text)) return text;
  const words = text.split(/\s+/);
  return words.slice(0, WORD_LIMIT).join(' ') + '...';
};

// 5. Helper function to check if a specific row is expanded
const isExpanded = (id: number): boolean => {
  return expandedIds.value.includes(id);
};

// 6. Function to add/remove an ID from the expanded list
const toggleExpand = (id: number): void => {
  const index = expandedIds.value.indexOf(id);
  if (index === -1) {
    // If not found, add it to expand
    expandedIds.value.push(id);
  } else {
    // If found, remove it to collapse
    expandedIds.value.splice(index, 1);
  }
};

// --- EXISTING HELPER FUNCTIONS ---

const formatDate = (dateString: string) => dayjs(dateString).format('MMMM D, YYYY');
const formatTime = (dateString: string) => dayjs(dateString).format('h:mm A');
const getServiceTypeName = (typeId: number) => ({ 0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other' }[typeId] || 'Unknown');
const getServiceTypeColor = (typeId: number) => ({ 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' }[typeId] || 'gray');
</script>