import React, { useState } from 'react';
import { Flashcard } from '../../types';
import { motion, AnimatePresence } from 'motion/react';
import { ChevronLeft, ChevronRight, RotateCcw } from 'lucide-react';

interface FlashcardsProps {
  cards: Flashcard[];
}

export function Flashcards({ cards }: FlashcardsProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isFlipped, setIsFlipped] = useState(false);

  const handleNext = () => {
    if (currentIndex < cards.length - 1) {
      setIsFlipped(false);
      setTimeout(() => setCurrentIndex(prev => prev + 1), 150);
    }
  };

  const handlePrev = () => {
    if (currentIndex > 0) {
      setIsFlipped(false);
      setTimeout(() => setCurrentIndex(prev => prev - 1), 150);
    }
  };

  const handleReset = () => {
    setIsFlipped(false);
    setTimeout(() => setCurrentIndex(0), 150);
  };

  if (!cards || cards.length === 0) return null;

  const currentCard = cards[currentIndex];
  const progress = ((currentIndex + 1) / cards.length) * 100;

  return (
    <div className="mx-auto flex h-full w-full max-w-[1120px] flex-col items-center justify-center px-8 py-8">
      <div className="mb-8 flex w-full items-center justify-between">
        <div>
          <h2 className="text-sm font-medium text-teal-500 uppercase tracking-widest mb-1">Flashcards</h2>
          <p className="text-zinc-400">Active recall drill</p>
        </div>
        <div className="text-right">
          <div className="text-sm font-mono text-zinc-400 mb-2">
            {currentIndex + 1} / {cards.length}
          </div>
          <div className="w-32 h-1 bg-white/5 rounded-full overflow-hidden">
            <div 
              className="h-full bg-amber-500 transition-all duration-300 ease-out"
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>
      </div>

      <div className="relative aspect-[3/2] w-full max-w-[760px] perspective-1000">
        <AnimatePresence mode="wait">
          <motion.div
            key={currentIndex + (isFlipped ? '-flipped' : '-front')}
            initial={{ opacity: 0, rotateX: isFlipped ? -90 : 90 }}
            animate={{ opacity: 1, rotateX: 0 }}
            exit={{ opacity: 0, rotateX: isFlipped ? 90 : -90 }}
            transition={{ duration: 0.2 }}
            onClick={() => setIsFlipped(!isFlipped)}
            className="absolute inset-0 w-full h-full cursor-pointer"
          >
            <div className={`w-full h-full rounded-2xl p-10 flex flex-col items-center justify-center text-center transition-colors border ${
              isFlipped 
                ? 'bg-[#131c2f] border-teal-500/20' 
                : 'bg-[#1a2333] border-white/5 hover:border-white/10'
            }`}>
              <span className="absolute top-6 left-6 text-xs font-medium uppercase tracking-wider text-zinc-500">
                {isFlipped ? 'Answer' : 'Question'}
              </span>
              
              <p className={`text-2xl leading-relaxed ${isFlipped ? 'text-teal-50' : 'text-zinc-100'}`}>
                {isFlipped ? currentCard.back : currentCard.front}
              </p>
              
              <span className="absolute bottom-6 text-xs text-zinc-500">
                Click to flip
              </span>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>

      <div className="flex items-center gap-6 mt-12">
        <button
          onClick={handlePrev}
          disabled={currentIndex === 0}
          className="p-3 rounded-full bg-white/5 text-zinc-300 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
        >
          <ChevronLeft size={24} />
        </button>
        
        <button
          onClick={handleReset}
          className="px-4 py-2 rounded-full text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors"
        >
          <RotateCcw size={16} />
        </button>

        <button
          onClick={handleNext}
          disabled={currentIndex === cards.length - 1}
          className="p-3 rounded-full bg-white/5 text-zinc-300 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
        >
          <ChevronRight size={24} />
        </button>
      </div>
    </div>
  );
}