import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Settings, Key, Eye, EyeOff, Check, X, AlertCircle } from 'lucide-react';
import { useMusicApiKeys } from '@/hooks/useMusicApiKeys';

interface ApiKeySettingsProps {
  isOpen: boolean;
  onClose: () => void;
  playSound: (sound: string) => void;
}

export const ApiKeySettings = ({ isOpen, onClose, playSound }: ApiKeySettingsProps) => {
  const { apiKeys, saveApiKeys, hasYoutubeKey, hasSoundcloudKey } = useMusicApiKeys();
  const [youtubeKey, setYoutubeKey] = useState(apiKeys.youtubeApiKey);
  const [soundcloudId, setSoundcloudId] = useState(apiKeys.soundcloudClientId);
  const [showYoutubeKey, setShowYoutubeKey] = useState(false);
  const [showSoundcloudKey, setShowSoundcloudKey] = useState(false);

  const handleSave = () => {
    playSound('click');
    saveApiKeys({
      youtubeApiKey: youtubeKey.trim(),
      soundcloudClientId: soundcloudId.trim(),
    });
    onClose();
  };

  const handleClose = () => {
    playSound('click');
    // Reset to current saved values
    setYoutubeKey(apiKeys.youtubeApiKey);
    setSoundcloudId(apiKeys.soundcloudClientId);
    onClose();
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4"
          onClick={handleClose}
        >
          <motion.div
            initial={{ scale: 0.95, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.95, opacity: 0 }}
            onClick={(e) => e.stopPropagation()}
            className="w-full max-w-md border border-primary bg-background box-glow p-6 space-y-6"
          >
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Settings className="w-5 h-5 text-primary" />
                <h2 className="font-minecraft text-xl text-primary text-glow">API Keys</h2>
              </div>
              <button
                onClick={handleClose}
                className="p-1 text-foreground/60 hover:text-primary transition-colors"
              >
                <X size={20} />
              </button>
            </div>

            <div className="flex items-start gap-2 p-3 bg-primary/10 border border-primary/30">
              <AlertCircle className="w-4 h-4 text-primary shrink-0 mt-0.5" />
              <p className="font-pixel text-xs text-foreground/80">
                API keys are stored locally in your browser. They are never sent to our servers.
              </p>
            </div>

            <div className="space-y-4">
              {/* YouTube API Key */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <label className="font-pixel text-sm text-primary flex items-center gap-2">
                    <Key size={14} />
                    YouTube Data API Key
                  </label>
                  {hasYoutubeKey && (
                    <span className="flex items-center gap-1 text-primary/80 font-pixel text-xs">
                      <Check size={12} /> Connected
                    </span>
                  )}
                </div>
                <div className="relative">
                  <input
                    type={showYoutubeKey ? 'text' : 'password'}
                    value={youtubeKey}
                    onChange={(e) => setYoutubeKey(e.target.value)}
                    placeholder="AIzaSy..."
                    className="w-full px-3 py-2 pr-10 bg-background border border-primary/30 focus:border-primary font-pixel text-sm text-foreground placeholder:text-foreground/40 outline-none transition-colors"
                  />
                  <button
                    type="button"
                    onClick={() => setShowYoutubeKey(!showYoutubeKey)}
                    className="absolute right-2 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-primary"
                  >
                    {showYoutubeKey ? <EyeOff size={16} /> : <Eye size={16} />}
                  </button>
                </div>
                <p className="font-pixel text-xs text-foreground/50">
                  Get from <a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">Google Cloud Console</a>
                </p>
              </div>

              {/* SoundCloud Client ID */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <label className="font-pixel text-sm text-primary flex items-center gap-2">
                    <Key size={14} />
                    SoundCloud Client ID
                  </label>
                  {hasSoundcloudKey && (
                    <span className="flex items-center gap-1 text-primary/80 font-pixel text-xs">
                      <Check size={12} /> Connected
                    </span>
                  )}
                </div>
                <div className="relative">
                  <input
                    type={showSoundcloudKey ? 'text' : 'password'}
                    value={soundcloudId}
                    onChange={(e) => setSoundcloudId(e.target.value)}
                    placeholder="Your Client ID..."
                    className="w-full px-3 py-2 pr-10 bg-background border border-primary/30 focus:border-primary font-pixel text-sm text-foreground placeholder:text-foreground/40 outline-none transition-colors"
                  />
                  <button
                    type="button"
                    onClick={() => setShowSoundcloudKey(!showSoundcloudKey)}
                    className="absolute right-2 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-primary"
                  >
                    {showSoundcloudKey ? <EyeOff size={16} /> : <Eye size={16} />}
                  </button>
                </div>
                <p className="font-pixel text-xs text-foreground/50">
                  Get from <a href="https://soundcloud.com/you/apps" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">SoundCloud Developers</a>
                </p>
              </div>
            </div>

            <div className="flex gap-3">
              <button
                onClick={handleClose}
                className="flex-1 py-2 border border-primary/30 text-primary/80 font-pixel text-sm hover:border-primary hover:text-primary transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleSave}
                className="flex-1 py-2 border border-primary bg-primary text-background font-pixel text-sm hover:bg-primary/90 transition-colors"
              >
                Save Keys
              </button>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};
