<!-- src/pages/service/ServiceHome.vue -->
<template>
  <div class="flex">
    <div class="w-full px-4 md:px-10 py-4">
      <!-- Breadcrumbs & Title -->
      <div class="text-sm breadcrumbs">
        <ul>
          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
          <li>Service Calls</li>
        </ul>
      </div>
      <h1 class="text-3xl font-bold mt-4">Service Calls</h1>

      <!-- Main Content Card -->
      <div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
        <!-- Header: Title and Count -->
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
          <h2 class="text-lg font-bold">Upcoming and Active Service Calls</h2>
          <div v-if="!isLoading" class="badge badge-ghost">{{ services.length }} calls found</div>
        </div>
        <div class="divider"></div>

        <!-- Loading State -->
        <div v-if="isLoading" class="text-center p-10">
          <span class="loading loading-spinner loading-lg"></span>
          <p class="mt-2">Loading service calls...</p>
        </div>

        <!-- Empty State -->
        <div v-else-if="services.length === 0" class="text-center p-10">
          <p>No active service calls found.</p>
        </div>

        <!-- Data Display -->
        <div v-else>
          <!-- DESKTOP VIEW: Table -->
          <div class="overflow-x-auto hidden xl:block">
            <table class="table w-full">
              <thead>
                <tr>
                  <th>Date / Time</th>
                  <th>Customer</th>
                  <th>Address</th>
                  <th>Service Type</th>
                  <th>Description</th>
                  <th class="text-right">Cost</th>
                  <th class="text-right">Actions</th>
                </tr>
              </thead>
              <tbody>
                <!-- Removed @click from tr to avoid conflicting actions -->
                <tr v-for="service in services" :key="service.id" class=" hover:bg-blue-600">
                  <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">{{ service.customer_name }}</td>
                  <td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td>
                  <td class="align-top">
                   <span 
    class="badge badge-sm text-white" 
    :style="{ 'background-color': getServiceTypeColor(service.type_service_call), 'border-color': getServiceTypeColor(service.type_service_call) }"
  >
                      {{ getServiceTypeName(service.type_service_call) }}
                    </span>
                  </td>
                  <td class="whitespace-normal text-sm align-top">
                    <!-- TRUNCATION LOGIC FOR DESKTOP -->
                    <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>
                    <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>
                  <td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td>
                  <td class="text-right align-top">
                    <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- MOBILE VIEW: Cards -->
          <div class="xl:hidden space-y-4">
            <div v-for="service in services" :key="service.id" class="card bg-base-100 shadow-md">
              <div class="card-body p-4">
                <div class="flex justify-between items-start">
                  <div>
                    <h2 class="card-title text-base">{{ service.customer_name }}</h2>
                    <p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p>
                  </div>
                  <div class="badge badge-outline text-right" :style="{ 'border-color': getServiceTypeColor(service.type_service_call), color: getServiceTypeColor(service.type_service_call) }">
                    {{ getServiceTypeName(service.type_service_call) }}
                  </div>
                </div>

                <div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
                  <p><strong class="font-semibold">Date:</strong> {{ formatDate(service.scheduled_date) }}</p>
                  <p><strong class="font-semibold">Time:</strong> {{ formatTime(service.scheduled_date) }}</p>
                  <p><strong class="font-semibold">Cost:</strong> <span class="font-mono">{{ formatCurrency(service.service_cost) }}</span></p>
                </div>
                
                <!-- TRUNCATION LOGIC FOR MOBILE -->
                <div v-if="service.description" class="text-sm mt-2 p-2 bg-base-200 rounded-md prose max-w-none">
                  <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>
                  <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>
                </div>
                
                <div class="card-actions justify-end mt-2">
                  <button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <Footer />

  <ServiceEditModal
    v-if="selectedServiceForEdit"
    :service="selectedServiceForEdit"
    @close-modal="closeEditModal"
    @save-changes="handleSaveChanges"
    @delete-service="handleDeleteService"
  />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
import authHeader from '../../services/auth.header'
import Footer from '../../layouts/footers/footer.vue'
import ServiceEditModal from './ServiceEditModal.vue'
import dayjs from 'dayjs';

interface ServiceCall {
  id: number;
  scheduled_date: string;
  customer_id: number;
  customer_name: string;
  customer_address: string;
  customer_town: string;
  type_service_call: number;
  description: string;
  service_cost: string;
}

export default defineComponent({
  name: 'ServiceHome',
  components: { Footer, ServiceEditModal },
  data() {
    return {
      user: null,
      services: [] as ServiceCall[],
      isLoading: true,
      selectedServiceForEdit: null as ServiceCall | null,
      // --- ADDITIONS FOR TRUNCATION ---
      wordLimit: 50,
      expandedIds: [] as number[],
    }
  },
  created() {
    this.userStatus();
    this.fetchUpcomingServices();
  },
  methods: {
    async fetchUpcomingServices(): Promise<void> {
      this.isLoading = true;
      try {
        const path = import.meta.env.VITE_BASE_URL + '/service/upcoming';
        const response = await axios.get(path, {
          headers: authHeader(),
          withCredentials: true,
        });
        this.services = response.data;
      } catch (error) {
        console.error("Failed to fetch upcoming service calls:", error);
      } finally {
        this.isLoading = false;
      }
    },
    
    userStatus() {
      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
      axios({
        method: 'get',
        url: path,
        withCredentials: true,
        headers: authHeader(),
      })
        .then((response: any) => {
          if (response.data.ok) {
            this.user = response.data.user;
          }
        })
        .catch(() => {
          this.user = null
        })
    },

    openEditModal(service: ServiceCall) {
      this.selectedServiceForEdit = service;
    },

    closeEditModal() {
      this.selectedServiceForEdit = null;
    },
    isLongDescription(text: string): boolean {
      if (!text) return false;
      return text.split(/\s+/).length > this.wordLimit;
    },
    truncateDescription(text: string): string {
      if (!this.isLongDescription(text)) return text;
      const words = text.split(/\s+/);
      return words.slice(0, this.wordLimit).join(' ') + '...';
    },
    isExpanded(id: number): boolean {
      return this.expandedIds.includes(id);
    },
    toggleExpand(id: number): void {
      const index = this.expandedIds.indexOf(id);
      if (index === -1) {
        this.expandedIds.push(id);
      } else {
        this.expandedIds.splice(index, 1);
      }
    },
    async handleSaveChanges(updatedService: ServiceCall) {
      try {
        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
        const response = await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
        if (response.data.ok) {
          const index = this.services.findIndex(s => s.id === updatedService.id);
          if (index !== -1) {
            this.services[index] = response.data.service;
          }
          this.closeEditModal();
        }
      } catch (error) {
        console.error("Failed to save changes:", error);
        alert("An error occurred while saving. Please check the console.");
      }
    },

    async handleDeleteService(serviceId: number) {
      try {
        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
        const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
        if (response.data.ok) {
          this.services = this.services.filter(s => s.id !== serviceId);
          this.closeEditModal();
        }
      } catch (error) {
        console.error("Failed to delete service call:", error);
        alert("An error occurred while deleting. Please check the console.");
      }
    },
    
    formatDate(dateString: string): string {
      if (!dateString) return 'N/A';
      return dayjs(dateString).format('MMMM D, YYYY');
    },

    formatTime(dateString: string): string {
      if (!dateString) return 'N/A';
      return dayjs(dateString).format('h:mm A');
    },

    getServiceTypeName(typeId: number): string {
      const typeMap: { [key: number]: string } = {
        0: 'Tune-up',
        1: 'No Heat',
        2: 'Fix',
        3: 'Tank Install',
        4: 'Other',
      };
      return typeMap[typeId] || 'Unknown Service';
    },
 // --- ADD THIS METHOD ---
    formatCurrency(value: string | number): string {
      if (value === null || value === undefined || value === '') return '$0.00';
      const numberValue = Number(value);
      if (isNaN(numberValue)) return '$0.00';
      
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
      }).format(numberValue);
    },
    getServiceTypeColor(typeId: number): string {
       const colorMap: { [key: number]: string } = {
        0: 'blue',
        1: 'red',
        2: 'green',
        3: '#B58900',
        4: 'black',
      };
      return colorMap[typeId] || 'gray';
    }
  },
})
</script>