"use client";

import {
  useDeleteAllMyEpisodesUnlocked,
  useDeleteMyEpisodeUnlocked,
  useGetMyEpisodeUnlockedList,
} from "@/state/profile/profile.action";
import { endOfMonth, format, startOfMonth } from "date-fns";
import { Trash2 } from "lucide-react";
import Image from "next/image";
import React from "react";
import { DateRange } from "react-day-picker";
import { ImageConstant } from "../../../constant/ImageConstant";
import { Button } from "../ui/button";
import DateRangePicker from "./date-range-picker";
import { DeleteModal } from "./delete-modal";
import PaginationComponent from "@/pagination/pagination";

// ✅ Types
interface Episode {
  id: string;
  title: string;
  currentEpisode: number;
  totalEpisodes: number;
  coinCost: number;
  transaction_id: string;
  amount: number;
  content?: {
    title?: string;
    seriesTitle?: string;
  };
}

interface EpisodeResponse {
  items: Episode[];
  total: number;
  page: number;
  limit: number;
  lastPage: number;
  history?: Episode[];
  meta: {
    page: number;
    limit: number;
    total: number;
    lastPage: number;
  };
}

const EpisodeUnlocked = () => {
  const [selectedRange, setSelectedRange] = React.useState<
    DateRange | undefined
  >({
    from: startOfMonth(new Date()),
    to: endOfMonth(new Date()),
  });

  const [selectedEpisode, setSelectedEpisode] = React.useState<Episode | null>(
    null
  );
  const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
  const [deleteMode, setDeleteMode] = React.useState<"single" | "all">(
    "single"
  );
  const [page, setPage] = React.useState(1);

  const payload = React.useMemo(
    () => ({
      filter: "SPENT",
      page,
      limit: 5,
      startDate: selectedRange?.from
        ? format(selectedRange.from, "yyyy-MM-dd")
        : undefined,
      endDate: selectedRange?.to
        ? format(selectedRange.to, "yyyy-MM-dd")
        : undefined,
    }),

    [selectedRange, page]
  );

  const { data, isLoading, error, refetch } = useGetMyEpisodeUnlockedList(
    payload
  ) as {
    data: EpisodeResponse | undefined;
    isLoading: boolean;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    error: any;
    refetch: () => void;
  };

  const deleteOne = useDeleteMyEpisodeUnlocked();
  const deleteAll = useDeleteAllMyEpisodesUnlocked();

  // Single delete
  const handleDeleteClick = (episode: Episode) => {
    setDeleteMode("single");
    setSelectedEpisode(episode);
    setIsDeleteModalOpen(true);
  };

  // Delete all
  const handleDeleteAllClick = () => {
    setDeleteMode("all");
    setSelectedEpisode(null);
    setIsDeleteModalOpen(true);
  };

  // Confirm delete
  const handleConfirmDelete = (episode?: Episode) => {
    if (deleteMode === "single" && episode) {
      deleteOne.mutate(episode.transaction_id, {
        onSuccess: () => {
          setIsDeleteModalOpen(false);
          refetch();
        },
      });
    } else if (deleteMode === "all") {
      deleteAll.mutate("", {
        onSuccess: () => {
          setIsDeleteModalOpen(false);
          refetch();
        },
      });
    }
  };

  return (
    <div>
      {/* Header */}
      <div className="flex justify-between items-center mb-3">
        <h5 className="text-[18px] text-[#D1D0CF] font-medium">
          Episode Unlocked
        </h5>
        {data?.history?.length ? (
          <Button
            className="bg-[#EF0D18] px-5 rounded-[10px] flex items-center justify-center hover:bg-[#e0222b]"
            onClick={handleDeleteAllClick}
          >
            Delete All
          </Button>
        ) : null}
      </div>

      {/* Date Range Picker */}
      <div className="mb-5">
        <DateRangePicker value={selectedRange} onChange={setSelectedRange} />
      </div>

      {/* Episodes List */}
      <div className="bg-[#1A1A1A] rounded-xl p-5">
        {isLoading ? (
          <p className="text-gray-400">Loading...</p>
        ) : error ? (
          <p className="text-red-400">Failed to load episodes</p>
        ) : data?.history?.length ? (
          <>
            {data.history?.map((episode: Episode, index: number) => (
              <div
                key={`${episode.id}_${index}`}
                className="grid grid-cols-1 md:grid-cols-12 gap-6 bg-[#1A1A1A] p-5 border-b border-gray-500"
              >
                <div className="md:col-span-10">
                  <div className="table gap-5 md:flex">
                    <div>
                      <h5 className="text-[20px] text-white my-2">
                        {episode?.content?.seriesTitle}
                      </h5>
                      <h5 className="text-[20px] text-white my-2">
                        {episode?.content?.title}
                      </h5>
                      <div className="flex gap-2 mt-2">
                        <h6 className="bg-[#3D3D3D] w-fit p-2 px-6 rounded-sm border-1 border-[#262525] mb-3 flex gap-2 font-semibold">
                          <Image
                            src={ImageConstant.coin}
                            alt=""
                            width={30}
                            height={30}
                            className="w-5 h-5"
                          />{" "}
                          {episode?.amount}
                        </h6>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="md:col-span-2 flex justify-end">
                  <Button
                    className="bg-[#EF0D18] p-0 rounded-[10px] flex items-center justify-center hover:bg-[#e0222b]"
                    onClick={() => handleDeleteClick(episode)}
                  >
                    <Trash2 size={20} />
                  </Button>
                </div>
              </div>
            ))}
          </>
        ) : (
          <p className="text-gray-400 text-center py-5">No episodes unlocked</p>
        )}
      </div>
      {data?.meta && data.meta.lastPage > 1 && (
        <div className="mt-6">
          <PaginationComponent
            currentPage={page}
            totalPages={data.meta.lastPage}
            onPageChange={(p) => setPage(p)}
          />
        </div>
      )}
      {/* Delete Modal */}
      <DeleteModal
        isOpen={isDeleteModalOpen}
        setIsOpen={setIsDeleteModalOpen}
        data={selectedEpisode || undefined}
        title={deleteMode === "all" ? "Delete All Episodes" : "Delete Episode"}
        description={(episode) =>
          deleteMode === "all"
            ? "Are you sure you want to delete all episodes? This action cannot be undone."
            : `Are you sure you want to delete "${episode?.content?.seriesTitle}"?`
        }
        onConfirm={handleConfirmDelete}
        // loading={
        //   deleteMode === "all" ? deleteAll.isLoading : deleteOne.isLoading
        // }
      />
    </div>
  );
};

export default EpisodeUnlocked;