"use client";
import React, { useEffect } from "react";
import AdminLayout from "../../layout";
import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbLink,
	BreadcrumbList,
	BreadcrumbPage,
	BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import Link from "next/link";

import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import {
	DropdownMenu,
	DropdownMenuCheckboxItem,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "@radix-ui/react-dropdown-menu";
import { Button } from "@/components/ui/button";
import { Icons } from "@/utils/Icons";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "@/lib/store/store";
import { Components } from "@/components/Index";
import { UserType } from "@/types/UserTypes";
import { formartDate } from "@/utils/formartDate";
import { fetchUserById, fetchUsers } from "@/lib/store/users/userSlice";
import { useParams } from "next/navigation";
import { AdminComponents } from "@/components/admin/Index";

export default function Page() {
	const param = useParams<{ id: string }>();

	const loading = useSelector((state: RootState) => state.users.loading);
	const users = useSelector((state: RootState) => state.users.users);
	const user = users.find((data) => data.id === param.id);
	const dispatch = useDispatch<AppDispatch>();

	useEffect(() => {
		dispatch(fetchUserById(param.id));
	}, []);

	return (
		<AdminLayout>
			<div className='flex flex-col sm:gap-4 sm:py-4 sm:pl-14'>
				<header className='sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6'>
					<Breadcrumb className='hidden md:flex'>
						<BreadcrumbList>
							<BreadcrumbItem>
								<BreadcrumbLink asChild>
									<Link href='/admin'>Dashboard</Link>
								</BreadcrumbLink>
							</BreadcrumbItem>
							<BreadcrumbSeparator />
							<BreadcrumbItem>
								<BreadcrumbLink asChild>
									<Link href='/admin/users' className='underline'>
										Users
									</Link>
								</BreadcrumbLink>
							</BreadcrumbItem>
							<BreadcrumbSeparator />
							<BreadcrumbItem>
								<BreadcrumbLink asChild>
									<Link href={`/admin/users/${param.id}`}>{param.id}</Link>
								</BreadcrumbLink>
							</BreadcrumbItem>
							<BreadcrumbSeparator />

							<BreadcrumbItem>
								<BreadcrumbPage>User Details</BreadcrumbPage>
							</BreadcrumbItem>
						</BreadcrumbList>
					</Breadcrumb>
				</header>
				{loading === "pending" ? (
					<Components.LoadingComponent />
				) : (
					<div className=' flex items-center gap-2'>
						<AdminComponents.UserForm userId={param.id} />
					</div>
				)}
			</div>
		</AdminLayout>
	);
}