/* 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 { Button } from "@/components/ui/button";
import { Video } from "lucide-react";
import { geOneVideo } from "@/lib/features/admin/video/service";
import { VideoProps } from "@/lib/features/admin/video/type";


interface Props {
    dataId: number;
}

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


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







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


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

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

    // video details
    const detail: VideoProps = 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">
                                Video 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>Category:</b>
                                            <Link href="#">
                                                {" " + detail?.category}
                                            </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>
                                            <Link target="blank" href={detail?.video}>
                                                <Button>
                                                    <Video />
                                                    Watch
                                                </Button>

                                            </Link>
                                        </td>
                                    </tr>





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



                    </div>




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