import BlockDeviceDialog from "@/components/block-device-dialog";
import Search from "@/components/search";
import { Badge } from "@/components/ui/badge";
import { getDevice } from "@/queries/devices";
import { tryCatch } from "@/utils/tryCatch";
import React from "react";

export default async function DeviceDetails({
	params,
}: {
	params: Promise<{ deviceId: string }>;
}) {
	const deviceId = (await params)?.deviceId;
	const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
	if (error) return <div>{error.message}</div>;
	if (!device) return null;

	return (
		<div>
			<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-2">
				<div className="flex flex-col justify-between items-start">
					<h3 className="text-2xl text-sarLinkOrange font-bold">
						{device?.name}
					</h3>
					<Badge variant={"secondary"}>{device?.mac}</Badge>
					<p className="text-muted-foreground text-sm mt-2">
						Device active until{" "}
						{new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
							month: "short",
							day: "2-digit",
							year: "numeric",
						})}
					</p>
				</div>
				<div className="flex items-center gap-2 flex-col">
					{device?.expiry_date && new Date() < new Date(device.expiry_date) && (
						<p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
							ACTIVE
						</p>
					)}
					<BlockDeviceDialog
						device={device}
						type={device.blocked ? "unblock" : "block"}
					/>
					<pre>{JSON.stringify(device.blocked, null, 2)}</pre>
				</div>
			</div>

			<div
				id="user-filters"
				className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
			>
				<Search />
				{/* <Filter
        options={sortfilterOptions}
        defaultOption="asc"
        queryParamKey="sortBy"
      /> */}
			</div>
			{/* <Suspense key={query} fallback={"loading...."}>
      <DevicesTable searchParams={searchParams} />
    </Suspense> */}
		</div>
	);
}