'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ChevronDown, Check, Code, Database } from 'lucide-react';
import {
  TargetLanguage,
  TargetDatabase,
  LANGUAGE_OPTIONS,
  DATABASE_OPTIONS,
  getLanguageOption,
  getDatabaseOption,
} from '@/lib/dark-factory/types/generation-options';

interface LanguageDBSelectorProps {
  language: TargetLanguage;
  database: TargetDatabase;
  onLanguageChange: (lang: TargetLanguage) => void;
  onDatabaseChange: (db: TargetDatabase) => void;
  disabled?: boolean;
}

export function LanguageDBSelector({
  language,
  database,
  onLanguageChange,
  onDatabaseChange,
  disabled = false,
}: LanguageDBSelectorProps) {
  const [showLangDropdown, setShowLangDropdown] = useState(false);
  const [showDbDropdown, setShowDbDropdown] = useState(false);

  const selectedLang = getLanguageOption(language);
  const selectedDb = getDatabaseOption(database);

  return (
    <div className="flex flex-wrap items-center gap-3">
      {/* Language Selector */}
      <div className="relative">
        <button
          type="button"
          onClick={() => { if (!disabled) { setShowLangDropdown(!showLangDropdown); setShowDbDropdown(false); } }}
          disabled={disabled}
          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10 hover:border-brand-deep/40 text-sm text-gray-300 hover:text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <Code className="w-4 h-4 text-brand" />
          <span>{selectedLang.icon} {selectedLang.shortLabel}</span>
          <ChevronDown className={`w-3.5 h-3.5 text-gray-500 transition-transform ${showLangDropdown ? 'rotate-180' : ''}`} />
        </button>

        <AnimatePresence>
          {showLangDropdown && (
            <motion.div
              initial={{ opacity: 0, y: -4, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -4, scale: 0.95 }}
              transition={{ duration: 0.15 }}
              className="absolute z-50 top-full mt-1 left-0 w-72 py-1 bg-brand-bg-elevated border border-white/10 rounded-xl shadow-2xl"
            >
              {LANGUAGE_OPTIONS.map((lang) => (
                <button
                  key={lang.id}
                  type="button"
                  onClick={() => { onLanguageChange(lang.id); setShowLangDropdown(false); }}
                  className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
                    language === lang.id
                      ? 'bg-brand-deep/10 text-brand-light'
                      : 'text-gray-300 hover:bg-white/5 hover:text-white'
                  }`}
                >
                  <span className="text-lg">{lang.icon}</span>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium">{lang.label}</div>
                    <div className="text-xs text-gray-500">{lang.description}</div>
                  </div>
                  {language === lang.id && <Check className="w-4 h-4 text-brand flex-shrink-0" />}
                </button>
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      {/* Database Selector */}
      <div className="relative">
        <button
          type="button"
          onClick={() => { if (!disabled) { setShowDbDropdown(!showDbDropdown); setShowLangDropdown(false); } }}
          disabled={disabled}
          className="flex items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10 hover:border-brand-secondary/40 text-sm text-gray-300 hover:text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <Database className="w-4 h-4 text-brand-secondary-light" />
          <span>{selectedDb.icon} {selectedDb.shortLabel}</span>
          <ChevronDown className={`w-3.5 h-3.5 text-gray-500 transition-transform ${showDbDropdown ? 'rotate-180' : ''}`} />
        </button>

        <AnimatePresence>
          {showDbDropdown && (
            <motion.div
              initial={{ opacity: 0, y: -4, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: -4, scale: 0.95 }}
              transition={{ duration: 0.15 }}
              className="absolute z-50 top-full mt-1 left-0 w-72 py-1 bg-brand-bg-elevated border border-white/10 rounded-xl shadow-2xl"
            >
              {DATABASE_OPTIONS.map((db) => (
                <button
                  key={db.id}
                  type="button"
                  onClick={() => { onDatabaseChange(db.id); setShowDbDropdown(false); }}
                  className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
                    database === db.id
                      ? 'bg-brand-secondary/10 text-brand-secondary-light'
                      : 'text-gray-300 hover:bg-white/5 hover:text-white'
                  }`}
                >
                  <span className="text-lg">{db.icon}</span>
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium">{db.label}</div>
                    <div className="text-xs text-gray-500">{db.description}</div>
                  </div>
                  {database === db.id && <Check className="w-4 h-4 text-brand-secondary-light flex-shrink-0" />}
                </button>
              ))}
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      {/* Close dropdowns on outside click */}
      {(showLangDropdown || showDbDropdown) && (
        <div
          className="fixed inset-0 z-40"
          onClick={() => { setShowLangDropdown(false); setShowDbDropdown(false); }}
        />
      )}
    </div>
  );
}
