import React, { useState, useMemo, useRef, useEffect } from "react";
import { Undo2, ChevronDown, Check } from "lucide-react";

export const systemFonts = [
  "Arial", "Helvetica", "Georgia", "Times New Roman", "Verdana",
  "Trebuchet MS", "Courier New", "Lucida Sans", "Tahoma"
];

export const googleFonts = [
  "Roboto", "Open Sans", "Lato", "Montserrat", "Poppins", "Inter", "Nunito", "Raleway",
  "Source Sans Pro", "Ubuntu", "PT Sans", "Noto Sans", "Work Sans", "IBM Plex Sans",
  "Fira Sans", "Source Sans 3", "Public Sans", "Inter Tight", "Albert Sans", "Plus Jakarta Sans",
  "Merriweather", "Playfair Display", "Lora", "Crimson Text", "Libre Baskerville",
  "Source Serif Pro", "Noto Serif", "Bitter", "Cormorant Garamond", "EB Garamond",
  "Oswald", "Bebas Neue", "Anton", "Righteous", "DM Sans", "Outfit", "Manrope", 
  "Space Grotesk", "Lexend", "Dancing Script", "Pacifico", "Great Vibes", "Caveat",
  "Roboto Mono", "Source Code Pro", "Fira Code", "JetBrains Mono", "IBM Plex Mono",
  "Quicksand", "Comfortaa", "Josefin Sans", "Barlow", "Cabin", "Rubik", "Mulish"
];

export const loadGoogleFont = (fontFamily) => {
  if (!fontFamily || systemFonts.includes(fontFamily) || fontFamily === 'inherit') return;
  const formattedFontName = fontFamily.replace(/ /g, "+");
  const fontUrl = `https://fonts.googleapis.com/css2?family=${formattedFontName}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&display=swap`;
  if (document.querySelector(`link[href="${fontUrl}"]`)) return;
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = fontUrl;
  document.head.appendChild(link);
};

export default function FontFamilyToggle({ currentFont = "Inter", onSelect, onReset }) {
  const [isOpen, setIsOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const dropdownRef = useRef(null);

  const filteredFonts = useMemo(() => {
    const all = [
      ...systemFonts.map(name => ({ name, type: 'System' })),
      ...googleFonts.map(name => ({ name, type: 'Google' }))
    ];
    if (!searchTerm) return all;
    return all.filter(f => f.name.toLowerCase().includes(searchTerm.toLowerCase()));
  }, [searchTerm]);

  const handleSelect = (name) => {
    loadGoogleFont(name);
    if (onSelect) onSelect(name);
    setIsOpen(false);
    setSearchTerm("");
  };

  useEffect(() => {
    const handler = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setIsOpen(false);
        setSearchTerm("");
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  return (
    <div className="relative w-full" ref={dropdownRef}>
      <div className="flex items-center gap-1.5">
        <button
          type="button"
          onClick={() => setIsOpen(!isOpen)}
          className="flex-1 px-3 py-1.5 text-xs text-left bg-white border border-gray-200 rounded-lg hover:border-gray-900 transition-colors flex items-center justify-between"
        >
          <span className="truncate text-gray-900 font-medium" style={{ fontFamily: currentFont }}>
            {currentFont}
          </span>
          <ChevronDown className="w-3.5 h-3.5 text-gray-500" />
        </button>
        {onReset && (
          <button
            type="button"
            onClick={onReset}
            title="Reset font"
            className="p-1.5 text-gray-400 hover:text-gray-700 rounded-lg hover:bg-gray-100"
          >
            <Undo2 className="w-3.5 h-3.5" />
          </button>
        )}
      </div>

      {isOpen && (
        <div className="absolute z-50 mt-1 w-56 max-h-60 bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden flex flex-col">
          <div className="p-2 border-b border-gray-100">
            <input
              type="text"
              placeholder="Search font..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full px-2 py-1 text-xs border border-gray-200 rounded-md focus:outline-none focus:border-gray-900"
              autoFocus
            />
          </div>
          <div className="overflow-y-auto flex-1 p-1">
            {filteredFonts.map((font) => (
              <button
                key={font.name}
                type="button"
                onClick={() => handleSelect(font.name)}
                className={`w-full px-2.5 py-1.5 text-left text-xs rounded-lg flex items-center justify-between transition-colors ${
                  currentFont === font.name ? 'bg-gray-100 font-semibold text-gray-900' : 'text-gray-700 hover:bg-gray-50'
                }`}
              >
                <span className="truncate" style={{ fontFamily: font.name }}>{font.name}</span>
                <span className="text-[10px] text-gray-400 uppercase tracking-wider">{font.type}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}