import { useState } from "react";
import EmptyState from "@/components/CommonComponents/empty";
import { useGetWatchHistory, useReviews } from "@/state/profile/profile.action";
import { HistoryIcon, Play, StarIcon } from "lucide-react";
import Image from "next/image";
import { Button } from "../../ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../../ui/dialog";
import { Textarea } from "../../ui/textarea";
import PaginationComponent from "@/pagination/pagination";
import { ImageConstant } from "../../../../constant/ImageConstant";
import IconButton from "@/components/icon-button/icon-button";

const HistoryTab = () => {
  const [page, setPage] = useState(1); // pagination state
  const { data: historyData, refetch } = useGetWatchHistory({ page, limit: 5 }); // pass page
  const { mutate: submitReview, isPending } = useReviews();

  const [rating, setRating] = useState<number>(0);
  const [hover, setHover] = useState<number>(0);
  const [reviewText, setReviewText] = useState("");
  const [error, setError] = useState("");
  const [openDialogId, setOpenDialogId] = useState<string | null>(null);

  if (!historyData?.history || historyData?.history.length === 0) {
    return (
      <div className="mt-3">
        <EmptyState
          title="No Saved Items Yet"
          description="Looks like you haven’t saved anything. Browse our collection and add movies or series to your list!"
          icon={<HistoryIcon className="w-24 h-24" />}
        />
      </div>
    );
  }

  return (
    <div className="bg-[#1A1A1A] p-5 rounded-xl mt-3">
      {historyData?.history?.map((item) => (
        <div className="table gap-5 mb-5 md:flex" key={item?.id}>
          <Image
            // src={
            //   item?.series?.series_thumbnail?.startsWith("http")
            //     ? item.series.thumbnail_high_1x1
            //     : item?.series?.thumbnail_high_1x1
            //       ? `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${item.series.series_thumbnail}`
            //       : item?.video?.thumbnail?.startsWith("http")
            //         ? item.video.thumbnail
            //         : item?.thumbnailUrl
            //           ? `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${item.thumbnailUrl}`
            //           : ImageConstant.imagePlaceHolder
            // }
            src={
              item?.series?.thumbnail_high_1x1?.startsWith("http")
                ? item.series.thumbnail_high_1x1
                : item?.series?.thumbnail_high_1x1
                  ? `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${item.series.thumbnail_high_1x1}`
                  : item?.video?.thumbnail_high_1x1?.startsWith("http")
                    ? item.video.thumbnail_high_1x1
                    : item?.thumbnail_high_1x1
                      ? `${process.env.NEXT_PUBLIC_IMAGE_BASE_URL}/${item.thumbnail_high_1x1}`
                      : ImageConstant.imagePlaceHolder
            }
            alt=""
            className="rounded-lg object-cover aspect-[3/4]"
            width={200}
            height={100}
          />
          <div>
            <h5 className="text-[20px] text-white my-2">
              {item?.series?.title ?? item?.video?.title}
            </h5>

            {item?.episode?.episode_number && (
              <h5 className="bg-[#3D3D3D] w-fit p-2 px-6 rounded-sm border border-[#262525] mb-3">
                {`Ep.${item?.episode?.episode_number}`}
              </h5>
            )}

            {item?.series?.averageRating && item.series.averageRating > 0 ? (
              <div className="flex gap-2 items-center">
                <StarIcon className="fill-yellow-400 text-yellow-400" />
                {item?.series?.averageRating}
              </div>
            ) : (
              !item?.series?.is_reviewed &&
              item?.series &&
              !(
                item?.series?.deletedAt ||
                item?.video?.deletedAt ||
                item?.episode?.deletedAt
              ) && (
                <Dialog
                  open={openDialogId === item?.id}
                  onOpenChange={(open) => {
                    if (!open) {
                      setRating(0);
                      setHover(0);
                      setReviewText("");
                      setError("");
                      setOpenDialogId(null);
                    } else {
                      setOpenDialogId(item?.id ?? null);
                    }
                  }}
                >
                  <DialogTrigger asChild>
                    <Button variant="outline">Give Rating</Button>
                  </DialogTrigger>
                  <DialogContent className="bg-[#202020] border-gray-700 text-white border rounded-2xl p-10">
                    <DialogHeader>
                      <DialogTitle className="text-center mb-3 text-[30px]">
                        Ratings & Review
                      </DialogTitle>
                    </DialogHeader>

                    <h6 className="text-center text-[#B6B6B6] mb-2">
                      How would you rate this product?
                    </h6>

                    {/* ⭐ Star Rating */}
                    <div className="flex gap-2 justify-center">
                      {[1, 2, 3, 4, 5]?.map((star) => (
                        <StarIcon
                          key={star}
                          className={`w-8 h-8 cursor-pointer ${
                            star <= (hover || rating)
                              ? "fill-yellow-400 text-yellow-400"
                              : "text-gray-500"
                          }`}
                          onClick={() => setRating(star)}
                          onMouseEnter={() => setHover(star)}
                          onMouseLeave={() => setHover(0)}
                        />
                      ))}
                    </div>

                    <h6 className="text-left text-[#B6B6B6] mt-8">
                      Write your review
                    </h6>
                    <Textarea
                      placeholder="Type your Ratings & Review here."
                      className="border-gray-700 bg-[#333436] h-32"
                      value={reviewText}
                      onChange={(e) => setReviewText(e.target.value)}
                    />
                    {error && <p className="text-red-500 mt-2">{error}</p>}

                    <Button
                      onClick={() => {
                        if (!reviewText.trim()) {
                          setError(
                            "Please write your review before submitting!"
                          );
                          return;
                        }

                        const payload = {
                          seriesId: item?.series?.series_id,
                          videoId: item?.video?.video_id,
                          comment: reviewText,
                          rating,
                        };

                        submitReview(payload, {
                          onSuccess: () => {
                            setRating(0);
                            setHover(0);
                            setReviewText("");
                            setError("");
                            setOpenDialogId(null);
                            refetch?.();
                          },
                        });
                      }}
                      disabled={isPending || rating === 0}
                      className="border-[#E50914] bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] text-[14px] w-fit mx-auto px-8 mt-5 h-12 cursor-pointer"
                    >
                      {isPending ? "Submitting..." : "Submit Review"}
                    </Button>
                  </DialogContent>
                </Dialog>
              )
            )}

            <IconButton
              label="Watch Now"
              icon={<Play className="w-5 h-5" />}
              href={
                item?.episode
                  ? `/series/${item.series?.series_id}`
                  : `/video/${item?.video?.video_id}`
              }
              size="lg"
              className="!p-3 px-6 font-bold !py-2 mt-2 w-fit"
            />
          </div>
        </div>
      ))}

      {/* Pagination */}
      {historyData?.meta?.lastPage > 1 && (
        <PaginationComponent
          currentPage={page}
          totalPages={historyData.meta.lastPage}
          onPageChange={(p) => setPage(p)}
        />
      )}
    </div>
  );
};

export default HistoryTab;