"use client";

import { CardResponse, DeckResponse } from "@/lib/types/cards";
import React, {
  ReactNode,
  useCallback,
  useEffect,
  useState,
  useTransition,
} from "react";
import { Button } from "../ui/button";
import { ChevronLeftIcon, ChevronRightIcon, RotateCcwIcon } from "lucide-react";
import "./cards.css";

type CardData = {
  id: number;
  front: ReactNode;
  back: ReactNode;
};
// --- Main App Component ---
function Deck({ data, cards }: { data: any; cards: CardData[] }) {
  const [currentPage, setCurrentPage] = useState<number>(0);
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [isFlipped, setIsFlipped] = useState<boolean>(false);
  const [animationDirection, setAnimationDirection] = useState<
    "enter-left" | "enter-right" | "exit-left" | "exit-right" | "none"
  >("none");
  const [isAnimating, setIsAnimating] = useState<boolean>(false);

  const handleFlip = () => {
    if (isAnimating) return;
    setIsFlipped(!isFlipped);
  };

  const handleNext = useCallback(() => {
    if (isAnimating || currentIndex >= cards.length - 1) return;
    setIsAnimating(true);
    setIsFlipped(false); // Flip back to front before changing card
    setAnimationDirection("exit-left");

    setTimeout(() => {
      setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, cards.length - 1));
      setAnimationDirection("enter-right");
      setTimeout(() => {
        setAnimationDirection("none");
        setIsAnimating(false);
      }, 200); // Duration of enter animation
    }, 200); // Duration of exit animation
  }, [currentIndex, cards.length, isAnimating]);

  const handlePrev = useCallback(() => {
    if (isAnimating || currentIndex <= 0) return;
    setIsAnimating(true);
    setIsFlipped(false); // Flip back to front
    setAnimationDirection("exit-right");

    setTimeout(() => {
      setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
      setAnimationDirection("enter-left");
      setTimeout(() => {
        setAnimationDirection("none");
        setIsAnimating(false);
      }, 200); // Duration of enter animation
    }, 200); // Duration of exit animation
  }, [currentIndex, isAnimating]);

  // Keyboard navigation
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (isAnimating) return;
      if (event.key === "ArrowRight") {
        handleNext();
      } else if (event.key === "ArrowLeft") {
        handlePrev();
      } else if (event.key === " " || event.key === "Enter") {
        // Space or Enter to flip
        event.preventDefault(); // Prevent scrolling if space is pressed
        handleFlip();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [handleNext, handlePrev, isAnimating]);

  const [isPending, startTransition] = useTransition();
  const shuffle = () => {
    startTransition(async () => {
      "use server";
      console.log("shuffling deck...");
    });
  };

  if (cards.length === 0) {
    return (
      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex flex-col items-center justify-center p-4 font-inter text-slate-800 dark:text-slate-200">
        <p>No flashcards available.</p>
      </div>
    );
  }

  const currentCard = cards[currentIndex];
  if (!currentCard) return <p>wtf</p>;

  return (
    <div className="min-h-screen bg-slate-100 dark:bg-slate-900 flex flex-col items-center justify-center p-4 font-inter transition-colors duration-300">
      <header>
        <h1 className="text-2xl ">Deck: {data.lesson.name}</h1>
        <p>{data.lesson.description}</p>
      </header>
      <div className="w-full max-w-md mb-8 relative">
        {/* This div is for positioning the card and managing overflow during animations */}
        <div className="relative h-80">
          <FlashCard
            key={currentCard.id} // Important for re-rendering on card change with animation
            isFlipped={isFlipped}
            onFlip={handleFlip}
            animationDirection={animationDirection}
            front={currentCard.front}
            back={currentCard.back}
          />
        </div>
      </div>

      <div className="flex items-center justify-between w-full max-w-md mb-6">
        <Button
          onClick={handlePrev}
          disabled={currentIndex === 0 || isAnimating}
          variant="outline"
          size="icon"
          aria-label="Previous card"
        >
          <ChevronLeftIcon />
        </Button>
        <div className="text-center">
          <p className="text-sm text-slate-600 dark:text-slate-400">
            Card {currentIndex + 1} of {cards.length}
          </p>
          <Button
            onClick={handleFlip}
            variant="ghost"
            size="sm"
            className="mt-1 text-slate-600 dark:text-slate-400"
            disabled={isAnimating}
          >
            <RotateCcwIcon className="w-4 h-4 mr-2" /> Flip Card
          </Button>
        </div>
        <Button
          onClick={handleNext}
          disabled={currentIndex === cards.length - 1 || isAnimating}
          variant="outline"
          size="icon"
          aria-label="Next card"
        >
          <ChevronRightIcon />
        </Button>
      </div>

      <div className="text-xs text-slate-500 dark:text-slate-400 mt-8">
        Use Arrow Keys (← →) to navigate, Space/Enter to flip.
      </div>
      <Button onClick={shuffle}>Shuffle Deck</Button>
    </div>
  );
}

export default Deck;

interface FlashcardProps {
  isFlipped: boolean;
  onFlip: () => void;
  animationDirection:
    | "enter-left"
    | "enter-right"
    | "exit-left"
    | "exit-right"
    | "none";
}
interface ServerCards {
  front: ReactNode;
  back: ReactNode;
}

function FlashCard({
  isFlipped,
  onFlip,
  animationDirection,
  front,
  back,
}: FlashcardProps & ServerCards) {
  const getAnimationClass = () => {
    switch (animationDirection) {
      case "enter-right":
        return "animate-slide-in-right";
      case "enter-left":
        return "animate-slide-in-left";
      case "exit-right":
        return "animate-slide-out-right";
      case "exit-left":
        return "animate-slide-out-left";
      default:
        return "";
    }
  };
  return (
    <div
      className={`w-full max-w-md h-80 perspective group ${getAnimationClass()}`}
      onClick={onFlip}
    >
      <div
        className={`relative w-full h-full rounded-xl shadow-xl transition-transform duration-700 ease-in-out transform-style-preserve-3d cursor-pointer ${
          isFlipped ? "rotate-y-180" : ""
        }`}
      >
        {front}
        {back}
      </div>
    </div>
  );
}