/* 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 { ErrorMessage } from "@/components/ui/error-message";
import Loading from "../../components/loading";

import Image from "next/image"
import { geOneStanding } from "@/lib/features/admin/standing/service";
import { StandingProps } from "@/lib/features/admin/standing/type";


interface Props {
    dataId: number;
}

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


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



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


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

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

    // standing details
    const detail: StandingProps = data?.data?.details || null;


    return (
        <>


            <div className="h-auto max-h-[80vh] overflow-y-auto scrollbar-hide">
                <>
                    <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">
                                Standing information
                            </legend>

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

                                    <tr style={{ border: 10 }} key={12} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <Image
                                                src={`${detail?.image}`}
                                                alt={detail?.club}
                                                width={80}
                                                height={80}
                                            />

                                        </td>
                                    </tr>

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


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


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

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

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

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

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


                    </div>




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