"use client";

import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MoreHorizontal } from "lucide-react";
import type IShortcode from "@/interfaces/IShortcode";
import ShortcodeDialog from "@/components/shortcode-dialogue";
import { useState } from "react";
import IUser from "@/interfaces/IUser";
import hasPermissions from "@/lib/hasPermissions";
import {
	HoverCard,
	HoverCardContent,
	HoverCardTrigger,
} from "@radix-ui/react-hover-card";
import Image from "next/image";

interface ShortcodeTableProps {
	user: IUser;
	shortcodes: IShortcode[];
	onUpdate: (shortcode: IShortcode) => void;
	onDelete: (id: string) => void;
	onAdd: (shortcode: Omit<IShortcode, "id">) => void;
}

export function ShortcodeTable({
	shortcodes,
	onUpdate,
	onDelete,
	onAdd,
	user,
}: ShortcodeTableProps) {
	const permissions = hasPermissions(user.roles, {
		shortcodes: ["insert", "update", "delete"],
	} as const);
	const [shortcodeSelected, setUpdateDialog] = useState<IShortcode | null>(
		null,
	);
	const [addDialog, setAddDialog] = useState<boolean>(false);

	return (
		<div>
			{permissions.shortcodes.insert && (
				<div className="mb-4">
					<Button
						onClick={() => {
							setAddDialog(true);
						}}
					>
						Ajouter
					</Button>
					<ShortcodeDialog
						onSave={onAdd}
						open={addDialog}
						setOpen={() => setAddDialog(false)}
					/>
				</div>
			)}
			<div className="rounded-md border">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>ID</TableHead>
							<TableHead>Code</TableHead>
							<TableHead>Type</TableHead>
							<TableHead>Valeur</TableHead>
							<TableHead>Media ID</TableHead>
							<TableHead className="w-[80px]">Actions</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{shortcodes.map((shortcode) => (
							<TableRow key={shortcode.id}>
								<TableCell>{shortcode.id}</TableCell>
								<TableCell>{shortcode.code}</TableCell>
								<TableCell>{shortcode.type}</TableCell>
								<TableCell>
									{shortcode.value || "N/A"}
								</TableCell>
								<TableCell>
									<HoverCard>
										<HoverCardTrigger className="underline decoration-dotted cursor-pointer">
											{shortcode.media_id || "N/A"}
										</HoverCardTrigger>
										{shortcode.media && (
											<HoverCardContent>
												<Image
													src={shortcode.media.url}
													alt={shortcode.media.alt}
													width={200}
													height={200}
												/>
											</HoverCardContent>
										)}
									</HoverCard>
								</TableCell>
								<TableCell>
									<DropdownMenu>
										<DropdownMenuTrigger asChild>
											<Button
												variant="ghost"
												className="h-8 w-8 p-0"
											>
												<span className="sr-only">
													Ouvrir le menu
												</span>
												<MoreHorizontal className="h-4 w-4" />
											</Button>
										</DropdownMenuTrigger>
										<DropdownMenuContent align="end">
											{permissions.shortcodes.update && (
												<DropdownMenuItem
													onClick={() =>
														setUpdateDialog(
															shortcode,
														)
													}
												>
													Mettre à jour
												</DropdownMenuItem>
											)}
											{permissions.shortcodes.delete && (
												<DropdownMenuItem
													onClick={() =>
														onDelete(shortcode.code)
													}
												>
													Supprimer
												</DropdownMenuItem>
											)}
										</DropdownMenuContent>
									</DropdownMenu>
								</TableCell>
							</TableRow>
						))}
					</TableBody>
				</Table>

				{shortcodeSelected && (
					<ShortcodeDialog
						onSave={onUpdate}
						shortcode={shortcodeSelected}
						open={shortcodeSelected ? true : false}
						setOpen={() => setUpdateDialog(null)}
					/>
				)}
			</div>
		</div>
	);
}