<!-- src/pages/customer/profile/profile/HistoryTabs.vue -->
<template>
  <div role="tablist" class="tabs tabs-lifted">
    <a role="tab" class="tab [--tab-bg:oklch(var(--b1))] text-base-content" :class="{ 'tab-active': activeTab === 'deliveries' }" @click="activeTab = 'deliveries'">
      Will Call
    </a>
    <div role="tabpanel" class="tab-content card-glass rounded-box p-4" v-show="activeTab === 'deliveries'">
      <DeliveriesTable :deliveries="deliveries" />
    </div>

    <a role="tab" class="tab [--tab-bg:oklch(var(--b1))] text-base-content" :class="{ 'tab-active': activeTab === 'service' }" @click="activeTab = 'service'">
      Service
    </a>
    <div role="tabpanel" class="tab-content card-glass rounded-box p-4" v-show="activeTab === 'service'">
      <ServiceCallsTable :service-calls="serviceCalls" @open-service-modal="(service: ServiceCall) => $emit('openServiceModal', service)" />
    </div>

    <a role="tab" class="tab [--tab-bg:oklch(var(--b1))] text-base-content" :class="{ 'tab-active': activeTab === 'transactions' }" @click="activeTab = 'transactions'">
      Transactions
    </a>
    <div role="tabpanel" class="tab-content card-glass rounded-box p-4" v-show="activeTab === 'transactions'">
      <TransactionsTable :transactions="transactions" />
    </div>

    <a role="tab" class="tab [--tab-bg:oklch(var(--b1))] text-base-content" :class="{ 'tab-active': activeTab === 'automatic' }" @click="activeTab = 'automatic'" >
      Automatic
    </a>
    <div role="tabpanel" class="tab-content card-glass rounded-box p-4" v-show="activeTab === 'automatic'">
      <AutomaticDeliveries :deliveries="autodeliveries" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { AuthorizeTransaction } from '../../../../types/models';
import DeliveriesTable from './DeliveriesTable.vue';
import ServiceCallsTable from './ServiceCallsTable.vue';
import TransactionsTable from './TransactionsTable.vue';
import AutomaticDeliveries from './AutomaticDeliveries.vue';

// 1. Define the interfaces for the data this component receives and passes down.
// These should match the interfaces in the child components.
interface Delivery {
  id: number;
  delivery_status: number;
  customer_name: string;
  customer_asked_for_fill: number | boolean;
  gallons_ordered: number | string;
  gallons_delivered: number | string | null;
  expected_delivery_date: string;
}

interface AutomaticDelivery {
  id: number;
  customer_full_name: string;
  gallons_delivered: number | string;
  auto_status: number | string;
  open_ticket_id: number | string;
  fill_date: string;
}

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

// 2. Define the Props interface
interface Props {
  deliveries: Delivery[];
  autodeliveries: AutomaticDelivery[];
  serviceCalls: ServiceCall[];
  transactions: AuthorizeTransaction[];
}

// 3. Use the typed defineProps
defineProps<Props>();

defineEmits<{
  openServiceModal: [service: ServiceCall];
}>();
const activeTab = ref('deliveries');
</script>
