"use client";

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

// --- Main App Component ---
function Deck({ data }: { data: DeckResponse }) {
  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 flashcards = data.cards;
  const [isAnimating, setIsAnimating] = useState<boolean>(false);

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

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

    setTimeout(() => {
      setCurrentIndex((prevIndex) =>
        Math.min(prevIndex + 1, flashcards.length - 1),
      );
      setAnimationDirection("enter-right");
      setTimeout(() => {
        setAnimationDirection("none");
        setIsAnimating(false);
      }, 500); // Duration of enter animation
    }, 500); // Duration of exit animation
  }, [currentIndex, flashcards.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);
      }, 500); // Duration of enter animation
    }, 500); // 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]);

  if (flashcards.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 = flashcards[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">
      <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">
          {" "}
          {/* Ensure this matches card height */}
          <Flashcard
            key={currentCard.id} // Important for re-rendering on card change with animation
            data={currentCard}
            isFlipped={isFlipped}
            onFlip={handleFlip}
            animationDirection={animationDirection}
          />
        </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 {flashcards.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 === flashcards.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>
    </div>
  );
}

export default Deck;