"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";

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

export function ShortcodeTable({
	shortcodes,
	onUpdate,
	onDelete,
	onAdd,
}: ShortcodeTableProps) {
	return (
		<div>
			<div className="mb-4">
				<ShortcodeDialog onSave={onAdd} />
			</div>
			<div className="rounded-md border">
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>ID</TableHead>
							<TableHead>Code</TableHead>
							<TableHead>Type</TableHead>
							<TableHead>Value</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>
									{shortcode.media_id || "N/A"}
								</TableCell>
								<TableCell>
									<DropdownMenu>
										<DropdownMenuTrigger asChild>
											<Button
												variant="ghost"
												className="h-8 w-8 p-0"
											>
												<span className="sr-only">
													Open menu
												</span>
												<MoreHorizontal className="h-4 w-4" />
											</Button>
										</DropdownMenuTrigger>
										<DropdownMenuContent align="end">
											<DropdownMenuItem
												onClick={() =>
													onUpdate(shortcode)
												}
											>
												Update
											</DropdownMenuItem>
											<DropdownMenuItem
												onClick={() =>
													onDelete(shortcode.code)
												}
											>
												Delete
											</DropdownMenuItem>
										</DropdownMenuContent>
									</DropdownMenu>
								</TableCell>
							</TableRow>
						))}
					</TableBody>
				</Table>
			</div>
		</div>
	);
}