/* 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 Image from "next/image"
import { ShortProps } from "@/lib/features/admin/short/type";
import { Button } from "@/components/ui/button";
import { CircleXIcon, Eye } from "lucide-react";
import { geOneStory } from "@/lib/features/admin/story/service";
import { StoryImageProps } from "@/lib/features/admin/story/type";


interface Props {
    dataId: number;
}

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


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


    // view photo 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: ShortProps = data?.data?.details || null;


    // photos
    const photos: StoryImageProps[] = data?.data?.details?.images || [];

    //photo columns
    const photoColumns: ColumnDef<StoryImageProps>[] = [
        {
            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: "img",
            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={`${row.getValue("img")}`}
                            alt={row?.original?.date}
                            width={200}
                            height={200}
                            className="rounded-2xl shadow-2xl"
                        />
                    </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)}>
                        <b className="text-blue-500">
                            {row.getValue("date")}
                        </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)}
                                >
                                    <CircleXIcon className="text-red-500" />
                                    Remove
                                </DropdownMenuItem>
                            </>



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



    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">
                                Story 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>


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


                        {/*************** Story photos ************ */}

                        <fieldset className="pl-2 text-sm font-bold border-4 rounded-[10px] text-neutral-600 pb-4">
                            <legend className="text-blue-700 text-center">
                                Photos
                            </legend>
                            <div>
                                <DataTable size={16} columns={photoColumns} data={photos} />
                            </div>
                        </fieldset>



                    </div>




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