"use client";

import type { InferResultType } from "@/utils/drizzle";
import type { ColumnDef } from "@tanstack/react-table";
import { BadgeCheckIcon, EyeIcon, HourglassIcon, MoreHorizontal, OctagonXIcon, ShareIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useToast } from "@/components/ui/use-toast";
import type { printers } from "@/server/db/schema";
import type { InferSelectModel } from "drizzle-orm";
import Link from "next/link";

export const columns: ColumnDef<
	InferResultType<
		"printJobs",
		{
			printer: true;
		}
	>
>[] = [
	{
		accessorKey: "printer",
		header: "Drucker",
		cell: ({ row }) => {
			const printer: InferSelectModel<typeof printers> = row.getValue("printer");
			return printer.name;
		},
	},
	{
		accessorKey: "startAt",
		header: "Startzeitpunkt",
		cell: ({ row }) => {
			const startAt = new Date(row.original.startAt);

			return `${startAt.toLocaleDateString("de-DE", {
				dateStyle: "medium",
			})} ${startAt.toLocaleTimeString("de-DE")}`;
		},
	},
	{
		accessorKey: "durationInMinutes",
		header: "Dauer (Minuten)",
	},
	{
		accessorKey: "comments",
		header: "Anmerkungen",
		cell: ({ row }) => {
			const comments = row.original.comments;

			if (comments) {
				return <span className="text-sm">{comments.slice(0, 50)}</span>;
			}

			return <span className="text-muted-foreground text-sm">Keine Anmerkungen</span>;
		},
	},
	{
		accessorKey: "status",
		header: "Status",
		cell: ({ row }) => {
			const aborted = row.original.aborted;

			if (aborted) {
				return (
					<div className="flex items-center gap-2">
						<OctagonXIcon className="w-4 h-4 text-red-500" /> <span className="text-red-600">Abgebrochen</span>
					</div>
				);
			}

			const startAt = new Date(row.original.startAt).getTime();
			const endAt = startAt + row.original.durationInMinutes * 60 * 1000;

			if (Date.now() < endAt) {
				return (
					<div className="flex items-center gap-2">
						<HourglassIcon className="w-4 h-4 text-yellow-500" />
						<span className="text-yellow-600">Läuft...</span>
					</div>
				);
			}

			return (
				<div className="flex items-center gap-2">
					<BadgeCheckIcon className="w-4 h-4 text-green-500" />
					<span className="text-green-600">Abgeschlossen</span>
				</div>
			);
		},
	},
	{
		id: "actions",
		cell: ({ row }) => {
			const job = row.original;
			const { toast } = useToast();

			return (
				<DropdownMenu>
					<DropdownMenuTrigger asChild>
						<Button variant="ghost" className="h-8 w-8 p-0">
							<span className="sr-only">Menu öffnen</span>
							<MoreHorizontal className="h-4 w-4" />
						</Button>
					</DropdownMenuTrigger>
					<DropdownMenuContent align="end">
						<DropdownMenuLabel>Aktionen</DropdownMenuLabel>
						<DropdownMenuItem
							className="flex items-center gap-2"
							onClick={() => {
								const baseUrl = new URL(window.location.href);
								baseUrl.pathname = `/job/${job.id}`;
								navigator.clipboard.writeText(baseUrl.toString());
								toast({
									description: "URL zum Druckauftrag in die Zwischenablage kopiert.",
								});
							}}
						>
							<ShareIcon className="w-4 h-4" />
							<span>Teilen</span>
						</DropdownMenuItem>
						<DropdownMenuSeparator />
						<DropdownMenuItem>
							<Link href={`/job/${job.id}`} className="flex items-center gap-2">
								<EyeIcon className="w-4 h-4" />
								<span>Details anzeigen</span>
							</Link>
						</DropdownMenuItem>
					</DropdownMenuContent>
				</DropdownMenu>
			);
		},
	},
];
