<template>
  <q-page padding>
    <q-card
      flat
      bordered
      class="q-mb-xl"
    >
      <q-card-section class="row items-center justify-between">
        <div class="text-h4">
          Mantis Tickets
        </div>
        <q-input
          dense
          debounce="300"
          v-model="searchTerm"
          placeholder="Search tickets..."
          @update:model-value="fetchTickets(1)"
          clearable
          style="width: 300px"
        >
          <template #append>
            <q-icon name="search" />
          </template>
        </q-input>
      </q-card-section>

      <q-table
        :rows="tickets"
        :columns="columns"
        row-key="id"
        v-model:pagination="pagination"
        :loading="loading"
        @request="handleTableRequest"
        binary-state-sort
        flat
        bordered
        @row-click="onRowClick"
        class="cursor-pointer"
      >
        <template #body-cell-status="statusProps">
          <q-td :props="statusProps">
            <q-badge
              :color="getStatusColor(statusProps.row.status)"
              :label="statusProps.row.status"
            />
          </q-td>
        </template>
        <template #body-cell-priority="priorityProps">
          <q-td :props="priorityProps">
            <q-badge
              :color="getPriorityColor(priorityProps.row.priority)"
              :label="priorityProps.row.priority"
            />
          </q-td>
        </template>
        <template #body-cell-severity="severityProps">
          <q-td :props="severityProps">
            <q-badge
              :color="getSeverityColor(severityProps.row.severity)"
              :label="severityProps.row.severity"
            />
          </q-td>
        </template>
      </q-table>
    </q-card>

    <mantis-ticket-dialog
      v-model="showDialog"
      :ticket-id="selectedTicketId"
      @close="closeDialog"
    />
  </q-page>
</template>

<script setup>
import { ref, onMounted, watch, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useQuasar } from 'quasar';
import MantisTicketDialog from 'src/components/MantisTicketDialog.vue';

const props = defineProps({
  ticketId: {
    type: [String, Number],
    'default': null
  }
});

const $q = useQuasar();
const tickets = ref([]);
const loading = ref(false);
const searchTerm = ref('');
const showDialog = ref(false);
const selectedTicketId = ref(null);

const router = useRouter();

const pagination = ref({
  sortBy: 'updatedAt',
  descending: true,
  page: 1,
  rowsPerPage: 25,
  rowsNumber: 0 // Total number of rows/tickets
});

const columns = [
  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
  { name: 'title', label: 'Title', field: 'title', align: 'left', sortable: true },
  { name: 'status', label: 'Status', field: 'status', align: 'center', sortable: true },
  { name: 'priority', label: 'Priority', field: 'priority', align: 'center', sortable: true },
  { name: 'severity', label: 'Severity', field: 'severity', align: 'center', sortable: true },
  { name: 'reporterUsername', label: 'Reporter', field: 'reporterUsername', align: 'left', sortable: true },
  { name: 'updatedAt', label: 'Last Updated', field: 'updatedAt', align: 'left', sortable: true, format: (val) => new Date(val).toLocaleString() },
];

const fetchTickets = async(page = pagination.value.page) =>
{
  loading.value = true;
  try
  {
    const params = {
      page: page,
      limit: pagination.value.rowsPerPage,
      search: searchTerm.value || undefined,
      // Add sorting params if needed based on pagination.sortBy and pagination.descending
    };
    const response = await axios.get('/api/mantis', { params });
    tickets.value = response.data.data;
    pagination.value.rowsNumber = response.data.pagination.total;
    pagination.value.page = response.data.pagination.page; // Update current page
  }
  catch (error)
  {
    console.error('Error fetching Mantis tickets:', error);
    $q.notify({
      type: 'negative',
      message: 'Failed to fetch Mantis tickets.'
    });
  }
  finally
  {
    loading.value = false;
  }
};

const handleTableRequest = (props) =>
{
  const { page, rowsPerPage, sortBy, descending } = props.pagination;
  pagination.value.page = page;
  pagination.value.rowsPerPage = rowsPerPage;
  pagination.value.sortBy = sortBy;
  pagination.value.descending = descending;
  fetchTickets(page);
};

const onRowClick = (evt, row) =>
{
  //Change the route
  router.push({ name: 'mantis', params: { ticketId: row.id } });
};

const openDialogForTicket = (id) =>
{
  const ticketNum = Number(id);
  if (!isNaN(ticketNum) && ticketNum > 0)
  {
    selectedTicketId.value = ticketNum;
    showDialog.value = true;
  }
};

const closeDialog = () =>
{
  showDialog.value = false;
  selectedTicketId.value = null;

  //Reset the route to remove the ticketId from the URL
  router.push({ name: 'mantis' });
};

// Watch for changes in the ticketId prop
watch(() => props.ticketId, (newTicketId) =>
{
  if (newTicketId)
  {
    openDialogForTicket(newTicketId);
  }
  else
  {
    closeDialog();
  }
});

onMounted(() =>
{
  fetchTickets();
  // Check initial prop value on mount
  if (props.ticketId)
  {
    openDialogForTicket(props.ticketId);
  }
});

// Helper functions for badge colors (customize as needed)
const getStatusColor = (status) =>
{
  const lowerStatus = status?.toLowerCase();
  if (lowerStatus === 'new') return 'blue';
  if (lowerStatus === 'feedback') return 'orange';
  if (lowerStatus === 'acknowledged') return 'purple';
  if (lowerStatus === 'confirmed') return 'cyan';
  if (lowerStatus === 'assigned') return 'teal';
  if (lowerStatus === 'resolved') return 'green';
  if (lowerStatus === 'closed') return 'grey';
  return 'primary';
};

const getPriorityColor = (priority) =>
{
  const lowerPriority = priority?.toLowerCase();
  if (lowerPriority === 'none') return 'grey';
  if (lowerPriority === 'low') return 'blue';
  if (lowerPriority === 'normal') return 'green';
  if (lowerPriority === 'high') return 'orange';
  if (lowerPriority === 'urgent') return 'red';
  if (lowerPriority === 'immediate') return 'purple';
  return 'primary';
};

const getSeverityColor = (severity) =>
{
  const lowerSeverity = severity?.toLowerCase();
  if (lowerSeverity === 'feature') return 'info';
  if (lowerSeverity === 'trivial') return 'grey';
  if (lowerSeverity === 'text') return 'blue-grey';
  if (lowerSeverity === 'tweak') return 'light-blue';
  if (lowerSeverity === 'minor') return 'lime';
  if (lowerSeverity === 'major') return 'amber';
  if (lowerSeverity === 'crash') return 'deep-orange';
  if (lowerSeverity === 'block') return 'red';
  return 'primary';
};


</script>

<style scoped>
/* Add any specific styles here */
</style>
