import React from "react";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { api } from "@/utils/api";
import { AddWorker } from "./workers/add-worker";
import { DateTooltip } from "@/components/shared/date-tooltip";
import { Badge } from "@/components/ui/badge";
import { DeleteWorker } from "./workers/delete-worker";
import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { MoreHorizontal, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuLabel,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ShowNodeData } from "./show-node-data";
import { AddManager } from "./manager/add-manager";

export const ShowNodes = () => {
	const { data, isLoading } = api.cluster.getNodes.useQuery();
	return (
		<Card className="bg-transparent h-full">
			<CardHeader className="flex flex-row gap-2 justify-between w-full items-center flex-wrap">
				<div className="flex flex-col gap-2">
					<CardTitle className="text-xl">Cluster</CardTitle>
					<CardDescription>Add nodes to your cluster</CardDescription>
				</div>
				<div className="flex flex-row gap-2">
					<DropdownMenu>
						<DropdownMenuTrigger asChild>
							<Button variant="ghost">
								<PlusIcon className="h-4 w-4" />
								Add
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end">
							<DropdownMenuLabel>Actions</DropdownMenuLabel>
							<AddWorker />
							<AddManager />
						</DropdownMenuContent>
					</DropdownMenu>
				</div>
			</CardHeader>
			<CardContent className="flex flex-col gap-4">
				<div className="grid md:grid-cols-1 gap-4">
					{isLoading && <div>Loading...</div>}
					<Table>
						<TableCaption>A list of your managers / workers.</TableCaption>
						<TableHeader>
							<TableRow>
								<TableHead className="w-[100px]">Hostname</TableHead>
								<TableHead className="text-right">Status</TableHead>
								<TableHead className="text-right">Role</TableHead>
								<TableHead className="text-right">Availability</TableHead>
								<TableHead className="text-right">Engine Version</TableHead>
								<TableHead className="text-right">Created</TableHead>

								<TableHead className="text-right">Actions</TableHead>
							</TableRow>
						</TableHeader>
						<TableBody>
							{data?.map((node) => {
								const isManager = node.Spec.Role === "manager";
								return (
									<TableRow key={node.ID}>
										<TableCell className="w-[100px]">
											{node.Description.Hostname}
										</TableCell>
										<TableCell className="text-right">
											{node.Status.State}
										</TableCell>
										<TableCell className="text-right">
											<Badge variant={isManager ? "default" : "secondary"}>
												{node?.Spec?.Role}
											</Badge>
										</TableCell>
										<TableCell className="text-right">
											{node.Spec.Availability}
										</TableCell>

										<TableCell className="text-right">
											{node?.Description.Engine.EngineVersion}
										</TableCell>

										<TableCell className="text-right">
											<DateTooltip date={node.CreatedAt} className="text-sm">
												Created{" "}
											</DateTooltip>
										</TableCell>
										<TableCell className="text-right flex justify-end">
											<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">
													<DropdownMenuLabel>Actions</DropdownMenuLabel>
													<ShowNodeData data={node} />
													{!node?.ManagerStatus?.Leader && (
														<DeleteWorker nodeId={node.ID} />
													)}
												</DropdownMenuContent>
											</DropdownMenu>
										</TableCell>
									</TableRow>
								);
							})}
						</TableBody>
					</Table>
				</div>
			</CardContent>
		</Card>
	);
};