import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Save, X, Loader2, BrainCircuit } from 'lucide-react';
import { useBodyScrollLock } from '../hooks/useBodyScrollLock';

interface SaveQuizPromptProps {
  isOpen: boolean;
  quizTitle: string;
  onSave: () => Promise<void>;
  onSkip: () => void;
}

export const SaveQuizPrompt: React.FC<SaveQuizPromptProps> = ({
  isOpen,
  quizTitle,
  onSave,
  onSkip
}) => {
  const [isSaving, setIsSaving] = useState(false);

  useBodyScrollLock(isOpen);

  const handleSave = async () => {
    setIsSaving(true);
    try {
      await onSave();
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={!isSaving ? onSkip : undefined}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          >
            <motion.div
              initial={{ scale: 0.9, opacity: 0, y: 20 }}
              animate={{ scale: 1, opacity: 1, y: 0 }}
              exit={{ scale: 0.9, opacity: 0, y: 20 }}
              transition={{ type: "spring", bounce: 0.4 }}
              onClick={(e) => e.stopPropagation()}
              className="bg-white w-full max-w-md flex flex-col rounded-[2rem] shadow-[0_10px_0_rgba(0,0,0,0.1)] border-4 border-white/50 relative overflow-hidden"
            >
              <div className="p-8 text-center">
                <div className="bg-theme-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <BrainCircuit size={40} className="text-theme-primary" />
                </div>
                
                <h2 className="text-3xl font-black text-gray-900 mb-2 tracking-tight">Save this Quiz?</h2>
                <p className="text-gray-500 font-bold mb-6">
                  "{quizTitle}" generated successfully! Would you like to save it to your library?
                </p>

                <div className="space-y-3">
                  <button
                    onClick={handleSave}
                    disabled={isSaving}
                    className="w-full bg-theme-primary text-white py-4 rounded-2xl text-xl font-black shadow-[0_4px_0_#1e40af] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2 hover:bg-theme-primary-dark disabled:opacity-70 disabled:active:shadow-[0_4px_0_#1e40af] disabled:active:translate-y-0 disabled:cursor-not-allowed"
                  >
                    {isSaving ? (
                      <>
                        <Loader2 className="animate-spin" size={24} />
                        Saving...
                      </>
                    ) : (
                      <>
                        <Save size={24} strokeWidth={3} />
                        Save to Library
                      </>
                    )}
                  </button>

                  <button
                    onClick={onSkip}
                    disabled={isSaving}
                    className="w-full bg-gray-100 text-gray-500 py-3 rounded-2xl text-lg font-bold hover:bg-gray-200 hover:text-gray-700 transition-colors disabled:opacity-50"
                  >
                    Skip & Don't Save
                  </button>
                </div>
              </div>

              <div className="absolute top-4 right-4">
                <button
                  onClick={onSkip}
                  disabled={isSaving}
                  className="p-2 rounded-xl hover:bg-gray-100 transition-colors text-gray-400 hover:text-gray-600 disabled:opacity-0"
                >
                  <X size={24} strokeWidth={3} />
                </button>
              </div>
            </motion.div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};