<!-- src/pages/customer/home.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>Customers</li>
        </ul>
      </div>

      <!-- Page Header -->
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
        <div>
          <h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
            <div
              class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" class="w-5 h-5 text-primary-content">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
              </svg>
            </div>
            Customers
          </h1>
          <p class="text-base-content/60 mt-1 ml-13">Manage customer profiles and accounts</p>
        </div>

        <div class="flex flex-wrap gap-3">
          <div class="stat-pill">
            <span class="stat-pill-value">{{ customer_count }}</span>
            <span class="stat-pill-label">Total Customers</span>
          </div>
        </div>
      </div>

      <!-- Main Content Card -->
      <div class="modern-table-card">

        <!-- Search/Filter Placeholder -->
        <div class="p-4 border-b border-base-content/5 flex justify-between items-center">
          <div class="text-sm text-base-content/60">
            Showing {{ customers.length }} records
          </div>
        </div>

        <!-- DESKTOP VIEW: Table -->
        <div class="overflow-x-auto hidden xl:block">
          <table class="modern-table">
            <thead>
              <tr>
                <th>Customer Name</th>
                <th>Address</th>
                <th>Map</th>
                <th>Status</th>
                <th>Phone</th>
                <th class="text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="person in customers" :key="person.id" class="table-row-hover">
                <td>
                  <router-link v-if="person.id" :to="{ name: 'customerProfile', params: { id: person.id } }"
                    class="group">
                    <div class="font-bold text-base group-hover:text-primary transition-colors">
                      {{ person.customer_first_name }} {{ person.customer_last_name }}
                    </div>
                    <div class="text-xs font-mono opacity-60 flex items-center gap-1">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-3 h-3">
                        <path stroke-linecap="round" stroke-linejoin="round"
                          d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                      </svg>
                      #{{ person.account_number }}
                    </div>
                  </router-link>
                  <div v-else>
                    <div class="font-bold text-base">{{ person.customer_first_name }} {{ person.customer_last_name }}
                    </div>
                    <div class="text-xs opacity-60">#{{ person.account_number }}</div>
                  </div>
                </td>
                <td>
                  <div class="flex flex-col">
                    <span class="font-medium text-sm">{{ person.customer_address }}</span>
                    <span class="text-xs opacity-70">{{ person.customer_town }}, {{ getStateAbbr(person.customer_state)
                    }} {{ person.customer_zip }}</span>
                  </div>
                </td>
                <td>
                  <a :href="`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${person.customer_address}, ${person.customer_town}, ${getStateAbbr(person.customer_state)}, ${person.customer_zip}`)}`"
                    target="_blank"
                    class="btn btn-xs btn-circle btn-ghost text-base-content/60 hover:text-primary hover:bg-primary/10 border border-base-content/10"
                    title="View on Google Maps">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" class="w-4 h-4">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                    </svg>
                  </a>
                </td>
                <td>
                  <span class="badge badge-sm font-medium"
                    :class="person.customer_automatic ? 'badge-success text-white' : 'badge-ghost opacity-70'">
                    {{ person.customer_automatic ? 'Automatic' : 'Will Call' }}
                  </span>
                </td>
                <td class="font-mono text-sm">{{ person.customer_phone_number }}</td>
                <td class="text-right">
                  <div class="flex items-center justify-end gap-1">
                    <router-link :to="{ name: 'deliveryCreate', params: { id: person.id } }"
                      class="btn btn-xs btn-success btn-outline" title="New Delivery">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-3 h-3">
                        <path stroke-linecap="round" stroke-linejoin="round"
                          d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
                      </svg>
                      Delivery
                    </router-link>

                    <router-link :to="{ name: 'CalenderCustomer', params: { id: person.id } }"
                      class="btn btn-xs btn-accent btn-outline" title="New Service">
                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-3 h-3">
                        <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>
                      Service
                    </router-link>

                    <router-link :to="{ name: 'customerProfile', params: { id: person.id } }"
                      class="btn btn-xs btn-neutral btn-outline">View</router-link>
                    <router-link :to="{ name: 'customerEdit', params: { id: person.id } }"
                      class="btn btn-xs btn-info btn-outline">Edit</router-link>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- MOBILE VIEW: Cards -->
        <div class="xl:hidden space-y-4 px-4 pb-4 pt-4">
          <div v-for="person in customers" :key="person.id" class="mobile-card">
            <div class="p-3">
              <div class="flex justify-between items-start">
                <div>
                  <router-link v-if="person.id" :to="{ name: 'customerProfile', params: { id: person.id } }"
                    class="font-bold text-base link link-hover text-primary">
                    {{ person.customer_first_name }} {{ person.customer_last_name }}
                  </router-link>
                  <div v-else class="font-bold text-base">{{ person.customer_first_name }} {{ person.customer_last_name
                  }}</div>

                  <div class="text-xs text-base-content/60 flex items-center gap-1 mt-0.5">
                    Account #{{ person.account_number }}
                  </div>
                </div>
                <span class="badge badge-sm"
                  :class="person.customer_automatic ? 'badge-success text-white' : 'badge-ghost opacity-70'">
                  {{ person.customer_automatic ? 'Auto' : 'Will Call' }}
                </span>
              </div>

              <div class="text-sm mt-3 grid grid-cols-1 gap-y-2">
                <div class="flex items-start gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-4 h-4 mt-0.5 opacity-50">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                  </svg>
                  <div>
                    <p>{{ person.customer_address }}</p>
                    <p class="text-xs opacity-70">{{ person.customer_town }}, {{ getStateAbbr(person.customer_state) }}
                      {{ person.customer_zip }}</p>
                    <a :href="`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${person.customer_address}, ${person.customer_town}, ${getStateAbbr(person.customer_state)}, ${person.customer_zip}`)}`"
                      target="_blank" class="link link-primary text-xs mt-1 block">
                      Open in Maps
                    </a>
                  </div>
                </div>
                <div class="flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-4 h-4 opacity-50">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                  </svg>
                  <span>{{ person.customer_phone_number }}</span>
                </div>
              </div>

              <div class="flex gap-2 pt-3 mt-3 border-t border-base-content/10 flex-wrap">
                <router-link :to="{ name: 'deliveryCreate', params: { id: person.id } }"
                  class="btn btn-sm btn-success btn-outline flex-1">
                  Delivery
                </router-link>
                <router-link :to="{ name: 'CalenderCustomer', params: { id: person.id } }"
                  class="btn btn-sm btn-accent flex-1">
                  Service
                </router-link>
                <router-link :to="{ name: 'customerEdit', params: { id: person.id } }"
                  class="btn btn-sm btn-info btn-outline flex-1">
                  Edit
                </router-link>
                <router-link :to="{ name: 'customerProfile', params: { id: person.id } }"
                  class="btn btn-sm btn-neutral btn-outline flex-1">
                  View
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Pagination -->
      <div class="mt-6 flex justify-center">
        <pagination @paginate="getPage" :records="customer_count" v-model="page" :per-page="10" :options="options">
        </pagination>
      </div>

    </div>
  </div>

</template>
<script setup lang="ts">
import { ref, onMounted, markRaw } from 'vue'
import { customerService } from '../../services/customerService'
import { authService } from '../../services/authService'
import { Customer } from '../../types/models'
import Header from '../../layouts/headers/headerauth.vue'
import PaginationComp from '../../components/pagination.vue'
import SideBar from '../../layouts/sidebar/sidebar.vue'

// Reactive data
const token = ref(null)
const user = ref(null)
const customers = ref<Customer[]>([])
const customer_count = ref(0)
const page = ref(1)
const perPage = ref(50)
const recordsLength = ref(0)
const options = ref({
  edgeNavigation: false,
  format: false,
  template: markRaw(PaginationComp)
})

// State Mapping
const STATE_ABBR_MAP: Record<number, string> = {
  0: 'MA', // Default for unmapped
  1: 'AL', 2: 'AK', 3: 'AS', 4: 'AZ', 5: 'AR', 6: 'CA', 7: 'CO', 8: 'CT',
  9: 'DE', 10: 'DC', 11: 'FL', 12: 'GA', 13: 'GU', 14: 'HI', 15: 'ID',
  16: 'IL', 17: 'IN', 18: 'IA', 19: 'KS', 20: 'KY', 21: 'LA', 22: 'ME',
  23: 'MD', 24: 'MA', 25: 'MI', 26: 'MN', 27: 'MS', 28: 'MO', 29: 'MT',
  30: 'NE', 31: 'NV', 32: 'NH', 33: 'NJ', 34: 'NM', 35: 'NY', 36: 'NC',
  37: 'ND', 38: 'OH', 39: 'OK', 40: 'OR', 41: 'PA', 42: 'PR', 43: 'RI',
  44: 'SC', 45: 'SD', 46: 'TN', 47: 'TX', 48: 'UT', 49: 'VT', 50: 'VA',
  51: 'VI', 52: 'WA', 53: 'WV', 54: 'WI', 55: 'WY',
}

const getStateAbbr = (stateId: number): string => {
  return STATE_ABBR_MAP[stateId] || 'MA';
}

// Functions
const getPage = (pageVal: any) => {
  customers.value = [];
  get_customers(pageVal)
  get_customer_count()
}

const userStatus = () => {
  authService.whoami()
    .then((response: any) => {
      if (response.data.ok) {
        user.value = response.data.user;
      }
    })
    .catch(() => {
      user.value = null
    })
}

const get_customers = async (pageVal: number) => {
  try {
    const response = await customerService.getAll(pageVal)
    customers.value = response.data?.customers || []
  } catch (error) {
    console.error('Error fetching customers:', error)
    customers.value = []
  }
}

const get_customer_count = async () => {
  try {
    const response = await customerService.getCount()
    if (response.data) {
      customer_count.value = response.data.count
    }
  } catch (error) {
    console.error('Error fetching customer count:', error)
  }
}

const deleteCustomer = (user_id: number) => {
  customerService.delete(user_id).then(() => {
    get_customers(1)
  })
}

// Lifecycle
onMounted(() => {
  userStatus()
  getPage(page.value)
})
</script>

<style scoped></style>
