/* global React */
/* ============================================
   Floating action buttons — bottom-right
   AI Agent + Telegram
   ============================================ */
function FloatingActions({ go }) {
  const [hover, setHover] = React.useState(null);

  const buttons = [
    {
      id: 'agent',
      label: 'AI Agent',
      tooltip: 'Chat with EFF AI',
      color: '#00E5FF',
      onClick: () => go('agent'),
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
          <circle cx="9" cy="10" r="1" fill="currentColor"/>
          <circle cx="15" cy="10" r="1" fill="currentColor"/>
        </svg>
      ),
    },
    {
      id: 'telegram',
      label: 'Telegram',
      tooltip: 'Message on Telegram',
      color: '#26A5E4',
      href: 'https://t.me/MH82580',
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
          <path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/>
        </svg>
      ),
    },
  ];

  return (
    <div style={{
      position: 'fixed',
      bottom: 24,
      right: 24,
      display: 'flex',
      flexDirection: 'column',
      gap: 14,
      zIndex: 90,
    }}>
      {buttons.map(b => {
        const isHovered = hover === b.id;
        const common = {
          width: 56,
          height: 56,
          borderRadius: '50%',
          display: 'grid',
          placeItems: 'center',
          background: `linear-gradient(135deg, ${b.color}, ${b.color}cc)`,
          color: '#000',
          border: '1px solid rgba(255,255,255,0.15)',
          cursor: 'pointer',
          textDecoration: 'none',
          boxShadow: isHovered
            ? `0 0 24px ${b.color}, 0 8px 24px rgba(0,0,0,0.5), 0 0 0 4px ${b.color}22`
            : `0 0 16px ${b.color}66, 0 6px 16px rgba(0,0,0,0.4)`,
          transition: 'all 0.2s ease',
          transform: isHovered ? 'scale(1.08)' : 'scale(1)',
          position: 'relative',
        };
        const tooltip = isHovered && (
          <span style={{
            position: 'absolute',
            right: 68,
            top: '50%',
            transform: 'translateY(-50%)',
            background: 'rgba(5,6,13,0.95)',
            backdropFilter: 'blur(8px)',
            border: `1px solid ${b.color}66`,
            borderRadius: 6,
            padding: '8px 12px',
            fontSize: 12,
            color: '#fff',
            fontFamily: 'var(--font-mono)',
            whiteSpace: 'nowrap',
            letterSpacing: '0.05em',
            animation: 'fadeIn 0.15s',
            pointerEvents: 'none',
          }}>{b.tooltip}</span>
        );

        if (b.href) {
          return (
            <a key={b.id}
              href={b.href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={b.label}
              style={common}
              onMouseEnter={() => setHover(b.id)}
              onMouseLeave={() => setHover(null)}>
              {b.icon}
              {tooltip}
            </a>
          );
        }
        return (
          <button key={b.id}
            type="button"
            aria-label={b.label}
            onClick={b.onClick}
            style={common}
            onMouseEnter={() => setHover(b.id)}
            onMouseLeave={() => setHover(null)}>
            {b.icon}
            {tooltip}
          </button>
        );
      })}
    </div>
  );
}

window.FloatingActions = FloatingActions;