/* 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 Image from "next/image"
import { geOnePost } from "@/lib/features/admin/post/service";
import { FanchatPostCommentsProps, FanchatPostProps } from "@/lib/features/admin/post/type";


interface Props {
    dataId: number;
}

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

    const {
        data,
        isLoading,
        error
    } = useQuery({
        queryKey: ["view-fanchat-post-details"],
        queryFn: () => geOnePost(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, isViewModalOpen, closeViewModal)

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


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

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

    // fanchat post details
    const detail: FanchatPostProps = data?.data?.details || null;


    // replies
    const replies: FanchatPostCommentsProps[] = data?.data?.details?.comments || [];

    //replies columns
    const replyColumns: ColumnDef<FanchatPostCommentsProps>[] = [
        {
            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: "tbl_userFname",
            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("tbl_userFname") + " " + row?.original?.tbl_userLname}
                    </div>
                );
            },
        },


        {
            accessorKey: "description",
            header: () => <div className="text-left table-size">Commend</div>,
            cell: ({ row }) => {
                return (
                    <div className="text-left font-normal table-size" onClick={() => openViewModal(row?.original?.id)}>
                        {row.getValue("description")}
                    </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">
                                Fanchat 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?.title}
                                                width={200}
                                                height={200}
                                                className="rounded-2xl"
                                            /><br />

                                        </td>
                                    </tr>

                                    <tr style={{ border: 10 }} key={8765} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Title:</b>
                                            <Link href="#">
                                                {" " + detail?.title}
                                            </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>

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


                                    <tr style={{ border: 10 }} key={8765} className="hover:bg-gray-50 border-2">
                                        <td>
                                            <b>Open:</b>
                                            <Link href="#">
                                                {Number(detail?.open) === 1 ?
                                                    <b className="text-green-500">{" Yes"}</b>
                                                    :
                                                    <b className="text-red-500">{" No"}</b>
                                                }
                                            </Link>
                                        </td>
                                    </tr>


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


                        {/*************** Replies ************ */}

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

                            <div>
                                <DataTable size={16} columns={replyColumns} data={replies} />
                            </div>
                        </fieldset>





                    </div>




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