import React, { useState, useRef, useEffect } from 'react';
import { useAuth } from 'react-oidc-context';
import { LogIn, LogOut, User, Loader2, Key, ChevronDown } from 'lucide-react';

interface AuthButtonProps {
  onAccountSettingsClick?: () => void;
}

export const AuthButton: React.FC<AuthButtonProps> = ({ onAccountSettingsClick }) => {
  const auth = useAuth();
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setDropdownOpen(false);
      }
    };

    if (dropdownOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownOpen]);

  if (auth.isLoading) {
    return (
      <div className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-xl">
        <Loader2 className="animate-spin" size={20} />
      </div>
    );
  }

  if (auth.error) {
    console.error('Auth error:', auth.error);
    return (
      <div className="flex items-center gap-2 bg-red-500/20 px-4 py-2 rounded-xl text-sm" title={auth.error.message}>
        <span>Auth Error: {auth.error.message}</span>
      </div>
    );
  }

  if (auth.isAuthenticated) {
    return (
      <div className="relative" ref={dropdownRef}>
        <button
          onClick={() => setDropdownOpen(!dropdownOpen)}
          className="flex items-center gap-2 bg-white/10 px-3 py-2 rounded-xl hover:bg-white/20 transition cursor-pointer"
        >
          <User size={18} />
          <span className="font-bold text-sm">
            {auth.user?.profile.preferred_username || auth.user?.profile.name || 'User'}
          </span>
          <ChevronDown size={16} className={`transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
        </button>

        {dropdownOpen && (
          <div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg py-2 z-50 border border-gray-100">
            {onAccountSettingsClick && (
              <button
                onClick={() => {
                  setDropdownOpen(false);
                  onAccountSettingsClick();
                }}
                className="w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2 font-medium transition"
              >
                <Key size={18} />
                Account Settings
              </button>
            )}
            <button
              onClick={() => {
                setDropdownOpen(false);
                auth.signoutRedirect({ post_logout_redirect_uri: window.location.origin });
              }}
              className="w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2 font-medium transition"
            >
              <LogOut size={18} />
              Sign Out
            </button>
          </div>
        )}
      </div>
    );
  }

  return (
    <button
      onClick={() => auth.signinRedirect()}
      className="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-xl hover:bg-white/20 transition font-bold"
    >
      <LogIn size={20} />
      Sign In
    </button>
  );
};