import { assessmentRequestManagementQueryOptions } from "@/modules/assessmentRequestManagement/queries/assessmentRequestManagementQueries";
import PageTemplate from "@/components/PageTemplate";
import { createLazyFileRoute } from "@tanstack/react-router";
import ExtractQueryDataType from "@/types/ExtractQueryDataType";
import { createColumnHelper } from "@tanstack/react-table";
import { Flex } from "@mantine/core";
import { Badge } from "@/shadcn/components/ui/badge";
import createActionButtons from "@/utils/createActionButton";
import { TbEye } from "react-icons/tb";
import AssessmentRequestManagementFormModal from "@/modules/assessmentRequestManagement/modals/AssessmentRequestManagementFormModal";
import { useState } from "react";
import { useQueryClient } from "@tanstack/react-query";

export const Route = createLazyFileRoute("/_dashboardLayout/assessmentRequestManagements/")({
	component: AssessmentRequestManagementsPage,
});

type DataType = ExtractQueryDataType<typeof assessmentRequestManagementQueryOptions>;

const columnHelper = createColumnHelper<DataType>();

export default function AssessmentRequestManagementsPage() {
	const [selectedId, setSelectedId] = useState<string | null>(null);
	const [modalOpen, setModalOpen] = useState(false);
	const queryClient = useQueryClient();

	const handleDetailClick = (id: string) => {
		setSelectedId(id);
		setModalOpen(true);
	};

	// Helper function to format the date
	const formatDate = (dateString: string | null) => {
		if (!dateString) {
			return "Tanggal tidak tersedia";
		}
		const date = new Date(dateString);
		return new Intl.DateTimeFormat("id-ID", {
			hour12: true,
			minute: "2-digit",
			hour: "2-digit",
			day: "2-digit",
			month: "long",
			year: "numeric",		
		})
		.format(date)
		.replace(/\./g, ':')
		.replace('pukul ', '');
	};

	return (
		<PageTemplate
			title="Manajemen Permohonan Asesmen"
			queryOptions={assessmentRequestManagementQueryOptions}
			modals={[
				<AssessmentRequestManagementFormModal 
					key="form-modal"
					assessmentId={selectedId}
					isOpen={modalOpen}
					onClose={() => {
						setModalOpen(false);
						queryClient.invalidateQueries();
					}}
				/>,
			]}
			createButton={null}
			columnDefs={[
				columnHelper.display({
					header: "#",
					cell: (props) => props.row.index + 1,
				}),

				columnHelper.display({
					header: "Tanggal",
					cell: (props) => formatDate(props.row.original.tanggal),
				}),

				columnHelper.display({
					header: "Nama Responden",
					cell: (props) => props.row.original.namaResponden,
				}),

				columnHelper.display({
					header: "Nama Perusahaan",
					cell: (props) => props.row.original.namaPerusahaan,
				}),

				columnHelper.display({
					header: "Status",
					cell: (props) => {
						const status = props.row.original.status;
						switch (status) {
							case "menunggu konfirmasi":
								return <Badge variant={"waiting"}>Menunggu Konfirmasi</Badge>;
							case "diterima":
								return <Badge variant={"accepted"}>Diterima</Badge>;
							case "ditolak":
								return <Badge variant={"rejected"}>Ditolak</Badge>;
							case "selesai":
								return <Badge variant={"completed"}>Selesai</Badge>;
							default:
								return <Badge variant={"outline"}>Tidak diketahui</Badge>;
						}
					},
				}),

				columnHelper.display({
					header: "Aksi",
					cell: (props) => (
						<Flex gap="xs">
							{createActionButtons([
								{
									label: "Detail",
									permission: true,
									action: () => handleDetailClick(props.row.original.idPermohonan),
									color: "green",
									icon: <TbEye />,
								},
							])}
						</Flex>
					),
				}),
			]}
		/>
	);
}