"use client";

import { Check, MessageSquareWarning, Settings } from "lucide-react";
import { MessageForm } from "./_components/MessageForm";
import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
import { ColumnDef } from "@tanstack/react-table";
import { Notam } from "@repo/db";
import { useRef } from "react";

export default function MessagePage() {
	const tableRef = useRef<PaginatedTableRef | null>(null);
	return (
		<>
			<div className="grid grid-cols-6 gap-4">
				<div className="col-span-full">
					<p className="text-2xl font-semibold text-left flex items-center gap-2">
						<Settings className="w-5 h-5" /> Config
					</p>
				</div>
				<div className="card bg-base-200 shadow-xl mb-4 col-span-6">
					<div className="card-body">
						<MessageForm tableRef={tableRef} />
					</div>
				</div>
			</div>
			<PaginatedTable
				ref={tableRef}
				prismaModel="notam"
				initialOrderBy={[{ id: "createdAt", desc: true }]}
				columns={
					[
						{
							accessorKey: "message",
							header: "Nachricht",
						},
						{
							accessorKey: "color",
							header: "Typ",
							cell: ({ row }) => {
								const color = row.getValue("color");
								return color;
							},
						},
						{
							accessorKey: "wartungsmodus",
							header: "Wartungsmodus",
							cell: ({ row }) => {
								const wartungsmodus = row.original.maintenanceEnabled;
								return wartungsmodus ? <Check /> : "";
							},
						},
						{
							accessorKey: "disableHPG",
							header: "HPG deaktiviert",
							cell: ({ row }) => {
								const disableHPG = row.original.disableHPG;
								return disableHPG ? <Check /> : "";
							},
						},

						{
							accessorKey: "createdAt",
							header: "Erstellt am",
							cell: ({ cell }) => {
								const date = new Date(cell.getValue() as string);
								return date.toLocaleDateString("de-DE", {
									year: "numeric",
									month: "2-digit",
									day: "2-digit",
									hour: "2-digit",
									minute: "2-digit",
								});
							},
						},
					] as ColumnDef<Notam>[]
				}
			/>
		</>
	);
}