<template>
	<div>
		<h2>Warranty Claims</h2>
		<div id="filter-container" class="filter-container">
			<button @click="addNewWarranty" id="add-warranty-button" class="interaction-button">
				Add New Warranty Claim
			</button>
		</div>
		<DataTable :data="tableData" :columns="columns" :filters="filters" />
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import DataTable from "../DataTable.vue";
import Api from "../../api";
import { FilterMatchMode } from "@primevue/core";

const tableData = ref([]);

const addNewWarranty = () => {
	// TODO: Open modal or navigate to create warranty form
	console.log("Add new warranty claim clicked");
	// In the future, this could open a modal or navigate to a form
	// For now, just log the action
};

const filters = {
	customer: { value: null, matchMode: FilterMatchMode.CONTAINS },
	warrantyId: { value: null, matchMode: FilterMatchMode.CONTAINS },
	address: { value: null, matchMode: FilterMatchMode.CONTAINS },
	assignedTechnician: { value: null, matchMode: FilterMatchMode.CONTAINS },
};

const columns = [
	{
		label: "Warranty ID",
		fieldName: "warrantyId",
		type: "text",
		sortable: true,
		filterable: true,
	},
	{
		label: "Customer",
		fieldName: "customer",
		type: "text",
		sortable: true,
		filterable: true,
	},
	{
		label: "Address",
		fieldName: "address",
		type: "text",
		sortable: true,
		filterable: true,
	},
	{
		label: "Issue Description",
		fieldName: "issueDescription",
		type: "text",
		sortable: true,
	},
	{
		label: "Priority",
		fieldName: "priority",
		type: "status",
		sortable: true,
	},
	{
		label: "Status",
		fieldName: "status",
		type: "status",
		sortable: true,
	},
	{
		label: "Assigned Technician",
		fieldName: "assignedTechnician",
		type: "text",
		sortable: true,
		filterable: true,
	},
	{
		label: "Date Reported",
		fieldName: "dateReported",
		type: "text",
		sortable: true,
	},
	{
		label: "Est. Completion",
		fieldName: "estimatedCompletionDate",
		type: "text",
		sortable: true,
	},
];

onMounted(async () => {
	if (tableData.value.length > 0) {
		return;
	}
	let data = await Api.getWarrantyData();
	tableData.value = data;
});
</script>

<style scoped>
.filter-container {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.interaction-button {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9rem;
}

.interaction-button:hover {
	background-color: #0056b3;
}
</style>
