/* 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 { geOneFixture } from "@/lib/features/admin/fixture/service";
import { FixtureProps } from "@/lib/features/admin/fixture/type";


interface Props {
    dataId: number;
}

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


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



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


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

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

    // fixture details
    const detail: FixtureProps = 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">
                                Fixture 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>Home team:</b>
                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={12} className="hover:bg-gray-50 border-2">
                                        <td className="flex gap-2">
                                            <Image
                                                src={`${detail?.homeImage}`}
                                                alt={detail?.home}
                                                width={80}
                                                height={80}
                                                className="rounded-2xl shadow-2xl"
                                            />
                                            <span className="mt-4">{" " + detail?.home}</span>

                                        </td>
                                    </tr>


                                    <tr style={{ border: 10 }} key={12007} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Away team:</b>
                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={12008} className="hover:bg-gray-50 border-2">
                                        <td className="flex gap-2">
                                            <Image
                                                src={`${detail?.awayImage}`}
                                                alt={detail?.away}
                                                width={80}
                                                height={80}
                                                className="rounded-2xl shadow-2xl"
                                            />
                                            <span className="mt-4">{" " + detail?.away}</span>

                                        </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 + " / " + detail?.hour}</b>
                                            </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>



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


                    </div>




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