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


import { ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@radix-ui/react-checkbox";

import { DotsHorizontalIcon } from "@radix-ui/react-icons";
import DataTable from "@/components/Table";

import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import Link from "next/link";
import { ErrorMessage } from "@/components/ui/error-message";
import Loading from "../../components/loading";
import { Button } from "@/components/ui/button";
import { Eye, Pencil } from "lucide-react"
import { geOneClub } from "@/lib/features/admin/club/service";
import { ClubProps, ClubStatProps, otherClubStatProps } from "@/lib/features/admin/club/type";
import { IMAGEURL } from "@/lib/constant";

import Image from "next/image"
import { PlayerProps } from "@/lib/features/admin/player/type";


interface Props {
    dataId: number;
}

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


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



    // view player states
    const [selectedId, setSelectedId] = useState<number | null>(null);
    const [isViewModalOpen, setViewModalOpen] = useState(false);

    const openViewModal = (id: number) => {
        setSelectedId(id);
        setViewModalOpen(true);
    };

    const closeViewModal = () => {
        setViewModalOpen(false);
        setSelectedId(null);
    };

    console.log(selectedId, closeViewModal, isViewModalOpen)



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


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

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

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

    // general statistics
    const generalStats: ClubStatProps[] = data?.data?.details?.generalStat || [];

    //general stats columns
    const generalStatColumns: ColumnDef<ClubStatProps>[] = [
        {
            id: "select",
            header: ({ table }) => (
                <Checkbox
                    checked={
                        table.getIsAllPageRowsSelected() ||
                        (table.getIsSomePageRowsSelected() && "indeterminate")
                    }
                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
                    aria-label="Select all"
                />
            ),
            cell: ({ row }) => (
                <Checkbox
                    checked={row.getIsSelected()}
                    onCheckedChange={(value) => row.toggleSelected(!!value)}
                    aria-label="Select row"
                />
            ),
            enableSorting: false,
            enableHiding: false,
        },

        {
            accessorKey: "season",
            header: () => <div className="text-left table-size">Season</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        {row.getValue("season")}
                    </div>
                );
            },
        },


        {
            accessorKey: "games",
            header: () => <div className="text-left table-size">Games</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        <b>{row.getValue("games")}</b>
                    </div>
                );
            },
        },


        {
            accessorKey: "win",
            header: () => <div className="text-left table-size">Won</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        <b className="text-green-500">{row.getValue("win")}</b>
                    </div>
                );
            },
        },

        {
            accessorKey: "draw",
            header: () => <div className="text-left table-size">Draw</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        <b className="text-blue-500">{row.getValue("draw")}</b>
                    </div>
                );
            },
        },

        {
            accessorKey: "fail",
            header: () => <div className="text-left table-size">Failed</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        <b className="text-red-500">{row.getValue("fail")}</b>
                    </div>
                );
            },
        },


        {
            id: "actions",
            enableHiding: false,
            header: "Actions",
            cell: ({ row }) => {

                return (
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                <span className="sr-only">Open menu</span>
                                <DotsHorizontalIcon className="h-4 w-4" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuSeparator />

                            <DropdownMenuItem onClick={() => openViewModal(row?.original?.id)}>
                                <Eye />
                                View
                            </DropdownMenuItem>


                            <>
                                <DropdownMenuItem //onClick={() => openUpdateModal(row?.original?.id)}
                                >
                                    <Pencil className="text-blue-500" />
                                    Update
                                </DropdownMenuItem>
                            </>



                        </DropdownMenuContent>
                    </DropdownMenu>
                );
            },
        },
    ];

    // other statistics
    const otherStats: otherClubStatProps[] = data?.data?.details?.otherStats || [];

    //other stats columns
    const otherStatsColumns: ColumnDef<otherClubStatProps>[] = [
        {
            id: "select",
            header: ({ table }) => (
                <Checkbox
                    checked={
                        table.getIsAllPageRowsSelected() ||
                        (table.getIsSomePageRowsSelected() && "indeterminate")
                    }
                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
                    aria-label="Select all"
                />
            ),
            cell: ({ row }) => (
                <Checkbox
                    checked={row.getIsSelected()}
                    onCheckedChange={(value) => row.toggleSelected(!!value)}
                    aria-label="Select row"
                />
            ),
            enableSorting: false,
            enableHiding: false,
        },

        {
            accessorKey: "season",
            header: () => <div className="text-left table-size">Season</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        {row.getValue("season")}
                    </div>
                );
            },
        },


        {
            accessorKey: "type",
            header: () => <div className="text-left table-size">Type</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        <b>{row.getValue("type")}</b>
                    </div>
                );
            },
        },


        {
            accessorKey: "label",
            header: () => <div className="text-left table-size">Name</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        <b className="text-green-500">{row.getValue("label")}</b>
                    </div>
                );
            },
        },

        {
            accessorKey: "value",
            header: () => <div className="text-left table-size">Value</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        <b className="text-blue-500">{row.getValue("value")}</b>
                    </div>
                );
            },
        },


        {
            id: "actions",
            enableHiding: false,
            header: "Actions",
            cell: ({ row }) => {

                return (
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                <span className="sr-only">Open menu</span>
                                <DotsHorizontalIcon className="h-4 w-4" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuSeparator />

                            <DropdownMenuItem onClick={() => openViewModal(row?.original?.id)}>
                                <Eye />
                                View
                            </DropdownMenuItem>


                            <>
                                <DropdownMenuItem //onClick={() => openUpdateModal(row?.original?.id)}
                                >
                                    <Pencil className="text-blue-500" />
                                    Update
                                </DropdownMenuItem>
                            </>



                        </DropdownMenuContent>
                    </DropdownMenu>
                );
            },
        },
    ];


    // players
    const players: PlayerProps[] = data?.data?.details?.players || [];

    //player columns
    const playerColumns: ColumnDef<PlayerProps>[] = [
        {
            id: "select",
            header: ({ table }) => (
                <Checkbox
                    checked={
                        table.getIsAllPageRowsSelected() ||
                        (table.getIsSomePageRowsSelected() && "indeterminate")
                    }
                    onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
                    aria-label="Select all"
                />
            ),
            cell: ({ row }) => (
                <Checkbox
                    checked={row.getIsSelected()}
                    onCheckedChange={(value) => row.toggleSelected(!!value)}
                    aria-label="Select row"
                />
            ),
            enableSorting: false,
            enableHiding: false,
        },

        {
            accessorKey: "image",
            header: () => <div className="text-left table-size">Photo</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        <Image
                            src={`${IMAGEURL}/img/${row.getValue("image")}`}
                            alt={row?.original?.name}
                            width={40}
                            height={40}
                            className="rounded-2xl shadow-2xl"
                        />
                    </div>
                );
            },
        },

        {
            accessorKey: "name",
            header: () => <div className="text-left table-size">Name</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        {row.getValue("name")}
                    </div>
                );
            },
        },


        {
            accessorKey: "position",
            header: () => <div className="text-left table-size">Description</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        {row.getValue("position")}
                    </div>
                );
            },
        },


        {
            accessorKey: "date",
            header: () => <div className="text-left table-size">Date</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        {row.getValue("date")}
                    </div>
                );
            },
        },


        {
            id: "actions",
            enableHiding: false,
            header: "Actions",
            cell: ({ row }) => {

                return (
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="ghost" className="h-8 w-8 p-0">
                                <span className="sr-only">Open menu</span>
                                <DotsHorizontalIcon className="h-4 w-4" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuSeparator />

                            <DropdownMenuItem onClick={() => openViewModal(row?.original?.id)}>
                                <Eye />
                                View
                            </DropdownMenuItem>


                            <>
                                <DropdownMenuItem //onClick={() => openUpdateModal(row?.original?.id)}
                                >
                                    <Pencil className="text-blue-500" />
                                    Update
                                </DropdownMenuItem>
                            </>



                        </DropdownMenuContent>
                    </DropdownMenu>
                );
            },
        },
    ];




    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">Club 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">
                                Club 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?.name}
                                                width={80}
                                                height={80}
                                                className="rounded-2xl shadow-2xl"
                                            />

                                        </td>
                                    </tr>

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

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

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



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


                        {/*************** general club statistics ************ */}

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

                            <div>
                                <DataTable size={16} columns={generalStatColumns} data={generalStats} />
                            </div>
                        </fieldset>


                        {/*************** other club statistics ************ */}

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

                            <div>
                                <DataTable size={16} columns={otherStatsColumns} data={otherStats} />
                            </div>
                        </fieldset>


                        {/*************** Players ************ */}

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

                            <div>
                                <DataTable size={16} columns={playerColumns} data={players} />
                            </div>
                        </fieldset>





                    </div>




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