/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useEffect, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import apiClient from "@/lib/apiClient";
import "../../../styles/creative-page.css";
import LimitModal from "@/components/show-dailog/LimitModal";
import { useToast } from "@/components/ui/ToastContext";
import {
  PageHeader,
  VideoPlayer,
  VideoControls,
  NavigationChevrons,
  ActionButtons,
  GeneratedMedia,
  useVideoPlayer,
} from "@/components/edit-creative-video";

export default function EditCreativeVideoPage() {
  const searchParams = useSearchParams();
  const [media, setMedia] = useState<GeneratedMedia | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);
  const [versions, setVersions] = useState<GeneratedMedia[]>([]);

  // Video player state
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const [showImageVersion, setShowImageVersion] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [videoSrc, setVideoSrc] = useState<string>("");

  // Use custom video player hook
  const { isPlaying, isMuted, progress, handleSeek, togglePlay, toggleMute } = useVideoPlayer(videoRef, isLoading);

  // Modal and quota state
  const [showLimitModal, setShowLimitModal] = useState<boolean>(false);
  const [showExceedLimitModal, setShowExceedLimitModal] = useState<boolean>(false);
  const [quota, setQuota] = useState<any>(null);
  const [isLiked, setIsLiked] = useState(false);

  const router = useRouter();
  const showToast = useToast();

  // Load media data
  useEffect(() => {
    const id = searchParams.get("id");
    if (!id) return;

    let cancelled = false;

    async function load() {
      try {
        setLoading(true);
        setError(null);

        const res = await apiClient.get("/image/generated-media", {
          params: { id },
        });

        if (cancelled) return;

        if (res.data?.success && Array.isArray(res.data.data)) {
          const allVersions = res.data.data as GeneratedMedia[];
          console.log("All video versions:", allVersions);

          const first = allVersions.find((v) => v.id === Number(id)) || allVersions[0];

          if (!first) {
            setError("Creative not found.");
          } else {
            setMedia(first);
            setVersions(allVersions);
            if (first.external_url) {
              setVideoSrc(first.external_url);
            }
          }
        } else {
          setError("Failed to load creative.");
        }
      } catch (e: any) {
        if (cancelled) return;
        console.error("Failed to load creative", e);
        setError("Failed to load creative. Please try again.");
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    load();

    return () => {
      cancelled = true;
    };
  }, [searchParams]);

  // Fetch quota status - optimized to run once
  useEffect(() => {
    const fetchQuotaStatus = async () => {
      try {
        setError(null);
        const { data } = await apiClient.get("/quota/status");
        const quotaData = data.data;
        setQuota(quotaData);

        if (quotaData.used === 3) {
          setTimeout(() => {
            setShowExceedLimitModal(true);
          }, 1000);
        }

        if (quotaData.used >= quotaData.limit) {
          console.log("Quota limit reached, showing modal");
          setTimeout(() => {
            setShowLimitModal(true);
          }, 1000);
        }
      } catch (err) {
        console.error("Failed to fetch quota status", err);
        setError("Unable to fetch quota status");
      }
    };

    // Only fetch quota once when component mounts
    fetchQuotaStatus();
  }, []); // Removed versions dependency - only fetch once

  const closeLimitModal = () => {
    setShowLimitModal(false);
    setShowExceedLimitModal(false);
  };

  const handleUpgrade = () => {
    router.push("/pricing");
  };

  const handleLike = async () => {
    if (!media) return;

    const newLikedState = !isLiked;
    setIsLiked(newLikedState); // Optimistic update

    try {
      await apiClient.put(`/image/generated-media/${media.id}/favorite`, {
        is_favorite: newLikedState,
      });
      showToast(newLikedState ? "Added to favorites" : "Removed from favorites");
    } catch (error) {
      console.error("Failed to update favorite status:", error);
      setIsLiked(!newLikedState); // Revert on error
      showToast("Failed to update favorite status");
    }
  };

  const handleCopyLink = async () => {
    const videoUrl = videoSrc || media?.external_url || "";
    if (!videoUrl) {
      showToast("No video link available");
      return;
    }

    try {
      await navigator.clipboard.writeText(videoUrl);
      showToast("Copied link to clipboard. Shared links can be viewed by anyone with the link.");
    } catch (error) {
      console.error("Failed to copy link:", error);
      showToast("Failed to copy link");
    }
  };

  return (
    <div className="pcoded-main-container bg-white">
      <div className="pcoded-content generate-page-content px-0">
        <section className="generate-section w-100 m-0 bg-white">
          <div className="generate-section-area w-100 m-0">
            <PageHeader />

            {/* Main content */}
            <div className="row mt-3 mb-5 library-svg edit-creative-video">
              <div className="col-12 col-md-12 col-lg-9 col-xl-8 col-xxl-8 mx-auto">
                {/* Video carousel */}
                <div className="row mb-3">
                  <div className="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-5 col-xxl-5 mx-auto position-relative">
                    {error && !loading && (
                      <div className="library-error-state">{error}</div>
                    )}

                    {!error && media && (
                      <div
                        style={{
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          gap: 30,
                        }}
                      >
                        {/* <NavigationChevrons isLoading={isLoading} /> */}

                        <div style={{ position: "relative" }}>
                          <VideoPlayer
                            videoSrc={videoSrc}
                            media={media}
                            showImageVersion={showImageVersion}
                            isLoading={isLoading}
                            onLoadComplete={() => setIsLoading(false)}
                            videoRef={videoRef}
                          />

                          {videoSrc && (
                            <VideoControls
                              showImageVersion={showImageVersion}
                              onToggleVersion={setShowImageVersion}
                              isPlaying={isPlaying}
                              isMuted={isMuted}
                              progress={progress}
                              onTogglePlay={togglePlay}
                              onToggleMute={toggleMute}
                              onSeek={handleSeek}
                            />
                          )}
                        </div>

                        {/* <NavigationChevrons isLoading={isLoading} /> */}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>

            {/* Bottom actions section */}
            <div className="bg-white py-2 py-md-3 px-2 m-0">
              <div className="row align-items-center justify-content-center g-md-3 g-2 m-0">
                <div className="col-xxl-10 col-xl-10 col-lg-10 col-md-12 col-sm-12 col-12 m-0">
                  <div className="row mb-3">
                    <div className="col-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                      <ActionButtons
                        isLiked={isLiked}
                        onToggleLike={handleLike}
                        videoUrl={videoSrc || media?.external_url || ""}
                        onCopyLink={handleCopyLink}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {showExceedLimitModal && (
              <LimitModal
                showLimitModal={showExceedLimitModal}
                closeLimitModal={closeLimitModal}
                quota={quota}
                handleUpgrade={handleUpgrade}
                isLimitExceeded={showLimitModal}
              />
            )}
          </div>
        </section>
      </div>
    </div>
  );
}