/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";
import React from "react";
import { useQuery } from "@tanstack/react-query";

import Link from "next/link";
import { AccountProps } from "@/lib/features/admin/account/type";
import { ErrorMessage } from "@/components/ui/error-message";
import Loading from "../../components/loading";
import { geOneAccount } from "@/lib/features/admin/account/service";


interface Props {
    dataId: number;
}

export const ViewUserDialog = ({ dataId }: Props) => {


    const {
        data,
        isLoading,
        error
    } = useQuery({
        queryKey: ["view-user-details"],
        queryFn: () => geOneAccount(dataId),
    });




    if (isLoading) {
        return <Loading />;
    }


    //////////////////////error handling

    //error
    if (error) {
        return <ErrorMessage error={error} fallback="Dashboard error" />
    }

    // user details
    const detail: AccountProps = data?.data?.userDetails || null;






    return (
        <>


            <div className="h-auto max-h-[80vh] overflow-y-auto scrollbar-hide">
                <div className="text-sm font-bold text-neutral-600 pb-4" style={{ display: "none" }}>
                    <h4 className="text-center">User details {dataId}</h4>
                </div>

                <>
                    <div className="overflow-x-auto w-full grid grid-cols-1 gap-4">

                        <fieldset className="pl-2 text-sm font-bold border-4 rounded-[10px] text-neutral-600 pb-4">
                            <legend className="text-blue-700 text-center">
                                Account information
                            </legend>

                            <table className="min-w-full viewDetail" >
                                <tbody className="w-full">

                                    <tr style={{ border: 10 }} key={8765} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Name:</b>
                                            <Link href="#">
                                                {" " + detail?.tbl_userFname + " " + detail?.tbl_userLname}
                                            </Link>
                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={51} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Email:</b>
                                            <Link href="#">
                                                {" " + detail?.tbl_userEmail}
                                            </Link>
                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={8765} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Username:</b>
                                            <Link href="#">
                                                {" " + detail?.tbl_userName}
                                            </Link>
                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={11} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Role:</b>
                                            <Link className="text-blue-800" href="#" >
                                                {" " + detail?.tbl_roleName}
                                            </Link>
                                        </td>
                                    </tr>


                                    <tr style={{ border: 10 }} key={12} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Phone:</b>
                                            <Link href="#">
                                                {" " + detail?.tbl_userTel}
                                            </Link>
                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={8765} className="hover:bg-gray-50 border-2">
                                        <td >
                                            <Link href="#"
                                            >
                                                <b>Registration date:</b>
                                                {" " + detail?.tbl_userDate}
                                            </Link>
                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={10} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Status:</b>
                                            {detail?.tbl_userStatus === 1 ?

                                                <span className="text-green-500"> Active</span>

                                                : detail?.tbl_userStatus === 0 ?
                                                    <span className="text-red-500"> Removed</span>
                                                    : ""}
                                        </td>
                                    </tr>





                                </tbody>
                            </table>
                        </fieldset>



                    </div>




                </>
            </div>
        </>
    );
};