<template>
  <div>
    <v-container>
      <v-text-field
        v-model="search"
        label="Search contacts"
        prepend-inner-icon="mdi-magnify"
        variant="outlined"
        class="mb-4"
        clearable
      ></v-text-field>

      <v-data-table
        :headers="headers"
        :items="filteredInterests"
        :search="search"
        :sort-by="[{ key: 'Full Name', order: 'asc' }]"
        must-sort
        hover
        :loading="loading"
        loading-text="Loading... Please wait"
        :items-per-page="50"
        :items-per-page-options="[10, 20, 50, 100]"
      >
        <template #item="{ item }">
          <tr @click="handleRowClick(item)" class="cursor-pointer">
            <td>{{ item["Full Name"] }}</td>
            <td>{{ item["Yacht Name"] }}</td>
            <td>{{ item.Length }}</td>
            <td>{{ item.Width }}</td>
            <td>{{ item.Depth }}</td>
            <td>{{ item["Berth Number"] }}</td>
            <td>
              <InterestSalesBadge
                :salesProcessLevel="item['Sales Process Level']"
              />
            </td>
            <td>{{ item["Phone Number"] }}</td>
            <td>{{ item["Email Address"] }}</td>
            <td><LeadCategoryBadge :leadCategory="item['Lead Category']" /></td>
            <td>
              <v-tooltip bottom>
                <template #activator="{ props }">
                  <v-icon v-if="item['Extra Comments']" v-bind="props"
                    >mdi-comment</v-icon
                  >
                </template>
                <span>{{ item["Extra Comments"] }}</span>
              </v-tooltip>
            </td>
          </tr>
        </template>
      </v-data-table>
    </v-container>
  </div>
</template>

<script lang="ts" setup>
import LeadCategoryBadge from "~/components/LeadCategoryBadge.vue";
import InterestSalesBadge from "~/components/InterestSalesBadge.vue";
import { useFetch } from "#app";
import { ref, computed } from "vue";

useHead({
  title: "Interest List",
});

const user = useDirectusUser();
const router = useRouter();
const loading = ref(true);

const { data: interests } = useFetch<InterestsResponse>("/api/get-interests", {
  headers: {
    "x-tag": user.value?.email ? "094ut234" : "pjnvü1230",
  },
  onResponse() {
    loading.value = false;
  },
  onResponseError() {
    loading.value = false;
  },
});

const search = ref("");

const handleRowClick = (interest: Interest) => {
  router.push(`/dashboard/interest-list/${interest.Id}`);
};

const headers = [
  { title: "Full Name", key: "Full Name", sortable: true },
  { title: "Yacht Name", key: "Yacht Name", sortable: true },
  { title: "Length", key: "Length", sortable: true },
  { title: "Width", key: "Width", sortable: true },
  { title: "Depth", key: "Depth", sortable: true },
  { title: "Berth Number", key: "Berth Number", sortable: true },
  { title: "Sales Process Level", key: "Sales Process Level", sortable: true },
  { title: "Phone", key: "Phone Number", sortable: false },
  { title: "Email", key: "Email Address", sortable: false },
  { title: "Lead Category", key: "Lead Category", sortable: true },
  { title: "Comments", key: "Extra Comments", sortable: false }, // New column for comments
];

const filteredInterests = computed(() => {
  if (!interests.value?.list) return [];

  return interests.value.list.filter((item) => {
    const searchLower = search.value?.toLowerCase() || "";
    return Object.values(item).some((value) =>
      String(value).toLowerCase().includes(searchLower)
    );
  });
});
</script>

<style scoped>
tr:hover {
  background-color: #f5f5f5;
}

.cursor-pointer {
  cursor: pointer;
}
</style>
