import React, { useState, useRef, useEffect } from "react";
import { createPortal } from "react-dom";
import { 
  Search, Mail, User, Building, Phone, Globe, Calendar, Clock, 
  MapPin, FileText, Lock, Star, Heart, MessageSquare, Tag, 
  Link2, Download, Upload, Edit, Trash2, Check, Plus, Minus, 
  Settings, Info, HelpCircle, AlertCircle, AlertTriangle, 
  CheckCircle, XCircle, X
} from "lucide-react";

export const ICON_OPTIONS = [
  { value: "none", label: "No Icon", icon: X },
  { value: "mail", label: "Email", icon: Mail },
  { value: "user", label: "User", icon: User },
  { value: "building", label: "Building", icon: Building },
  { value: "phone", label: "Phone", icon: Phone },
  { value: "globe", label: "Globe", icon: Globe },
  { value: "calendar", label: "Calendar", icon: Calendar },
  { value: "clock", label: "Clock", icon: Clock },
  { value: "map-pin", label: "Location", icon: MapPin },
  { value: "file", label: "File", icon: FileText },
  { value: "lock", label: "Lock", icon: Lock },
  { value: "search", label: "Search", icon: Search },
  { value: "star", label: "Star", icon: Star },
  { value: "heart", label: "Heart", icon: Heart },
  { value: "message", label: "Comment", icon: MessageSquare },
  { value: "tag", label: "Tag", icon: Tag },
  { value: "link", label: "Link", icon: Link2 },
  { value: "download", label: "Download", icon: Download },
  { value: "upload", label: "Upload", icon: Upload },
  { value: "edit", label: "Edit", icon: Edit },
  { value: "trash", label: "Trash", icon: Trash2 },
  { value: "check", label: "Check", icon: Check },
  { value: "plus", label: "Plus", icon: Plus },
  { value: "minus", label: "Minus", icon: Minus },
  { value: "settings", label: "Settings", icon: Settings },
  { value: "info", label: "Info", icon: Info },
  { value: "help", label: "Question", icon: HelpCircle },
  { value: "alert", label: "Warning", icon: AlertTriangle },
  { value: "success", label: "Success", icon: CheckCircle },
  { value: "error", label: "Error", icon: XCircle }
];

export default function InlineIconEditor({
  field,
  isOpen,
  onClose,
  onUpdate,
  anchorRef,
  setIsDirty,
}) {
  const [searchTerm, setSearchTerm] = useState("");
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const [iconColor, setIconColor] = useState(field.iconColor || "#6B7280");
  const toolbarRef = useRef(null);
  const colorInputRef = useRef(null);

  useEffect(() => {
    if (field.iconColor) {
      setIconColor(field.iconColor);
    }
  }, [field.iconColor]);

  const filteredIcons = ICON_OPTIONS.filter(option =>
    option.label.toLowerCase().includes(searchTerm.toLowerCase())
  );

  useEffect(() => {
    if (isOpen && anchorRef.current) {
      const updatePosition = () => {
        const anchorRect = anchorRef.current.getBoundingClientRect();
        const toolbarWidth = 240;
        const toolbarHeight = 300;

        let top = anchorRect.bottom + 8;
        let left = anchorRect.left - (toolbarWidth / 2) + (anchorRect.width / 2);

        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;

        if (top + toolbarHeight > viewportHeight) {
          top = anchorRect.top - toolbarHeight - 8;
        }

        if (left < 8) left = 8;
        if (left + toolbarWidth > viewportWidth - 8) {
          left = viewportWidth - toolbarWidth - 8;
        }

        setPosition({ top, left });
      };

      updatePosition();
      window.addEventListener("scroll", updatePosition, true);
      window.addEventListener("resize", updatePosition);

      return () => {
        window.removeEventListener("scroll", updatePosition, true);
        window.removeEventListener("resize", updatePosition);
      };
    }
  }, [isOpen, anchorRef]);

  useEffect(() => {
    if (isOpen) {
      const handleClickOutside = (e) => {
        if (anchorRef.current && anchorRef.current.contains(e.target)) return;
        if (toolbarRef.current && toolbarRef.current.contains(e.target)) return;
        onClose();
      };

      document.addEventListener("mousedown", handleClickOutside);
      return () => document.removeEventListener("mousedown", handleClickOutside);
    }
  }, [isOpen, onClose, anchorRef]);

  const handleColorChange = (newColor) => {
    setIconColor(newColor);
    if (setIsDirty) setIsDirty(true);
    onUpdate({ iconColor: newColor });
  };

  if (!isOpen) return null;

  return createPortal(
    <div className="wpvfb-builder">
      <div
        ref={toolbarRef}
        className="fixed z-[9999] bg-white rounded-xl shadow-2xl border border-gray-200 flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200"
      style={{
        top: `${position.top}px`,
        left: `${position.left}px`,
        width: "240px",
        maxHeight: "310px",
      }}
      onClick={(e) => e.stopPropagation()}
    >
      <div className="p-2 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
        <div className="relative flex-1">
          <Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400 w-3 h-3" />
          <input
            type="text"
            placeholder="Search icon..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-7 pr-2 py-1 text-xs border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-900 bg-white"
            autoFocus
          />
        </div>
        <button 
          onClick={onClose} 
          className="ml-1 p-1 text-gray-400 hover:text-gray-700 rounded-md"
        >
          <X className="w-3.5 h-3.5" />
        </button>
      </div>

      <div className="flex-1 overflow-y-auto p-2" style={{ scrollbarWidth: "thin" }}>
        {filteredIcons.length > 0 ? (
          <div className="grid grid-cols-6 gap-1">
            {filteredIcons.map((option) => {
              const IconComp = option.icon;
              const isSelected = field.fieldIcon === option.value || field.icon === option.value;
              return (
                <button
                  key={option.value}
                  type="button"
                  onClick={() => {
                    if (setIsDirty) setIsDirty(true);
                    onUpdate({ 
                      fieldIcon: option.value, 
                      icon: option.value,
                      iconColor 
                    });
                    onClose();
                  }}
                  className={`aspect-square flex items-center justify-center rounded-lg transition-colors cursor-pointer ${
                    isSelected
                      ? 'bg-gray-900 text-white shadow-xs'
                      : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                  }`}
                  title={option.label}
                >
                  <IconComp className="w-4 h-4" />
                </button>
              );
            })}
          </div>
        ) : (
          <div className="text-center text-gray-400 py-6 text-xs">
            No icons found
          </div>
        )}
      </div>

      {/* Color Picker Section */}
      <div className="p-2 border-t border-gray-100 bg-gray-50 flex items-center justify-between">
        <span className="text-[11px] text-gray-600 font-medium">Icon Color</span>
        <div className="flex items-center gap-1.5">
          <button
            type="button"
            onClick={() => colorInputRef.current?.click()}
            className="w-5 h-5 rounded-full border border-gray-300 hover:border-gray-900 transition-all shadow-2xs cursor-pointer"
            style={{ backgroundColor: iconColor }}
            title="Change color"
          />
          <input
            ref={colorInputRef}
            type="color"
            value={iconColor}
            onChange={(e) => handleColorChange(e.target.value)}
            className="hidden"
          />
          <span className="text-[10px] font-mono text-gray-500 uppercase">{iconColor}</span>
        </div>
      </div>

      <div className="p-2 border-t border-gray-100 bg-gray-50 flex justify-between items-center text-[10px] text-gray-500">
        <span>{filteredIcons.length} icons</span>
        <button
          type="button"
          className="text-red-500 hover:text-red-700 font-medium px-2 py-0.5 rounded hover:bg-red-50 cursor-pointer"
          onClick={() => {
            if (setIsDirty) setIsDirty(true);
            onUpdate({ fieldIcon: "none", icon: "none", iconColor });
            onClose();
          }}
        >
          Remove Icon
        </button>
      </div>
    </div>
  </div>,
  document.body
);
}