import { useEffect, useRef, useState } from 'react';
import Avatar from './Avatar.jsx';
import { api } from '../utils/api.js';
import { useAuth } from '../contexts/AuthContext.jsx';

export default function UserProfilePopup({ user: profileUser, anchorEl, onClose, onDirectMessage }) {
  const { user: currentUser } = useAuth();
  const popupRef = useRef(null);
  const [starting, setStarting] = useState(false);

  const isSelf = currentUser?.id === profileUser?.id;

  useEffect(() => {
    const handler = (e) => {
      if (popupRef.current && !popupRef.current.contains(e.target) &&
          anchorEl && !anchorEl.contains(e.target)) {
        onClose();
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, [anchorEl, onClose]);

  useEffect(() => {
    if (!popupRef.current || !anchorEl) return;
    const anchor = anchorEl.getBoundingClientRect();
    const popup = popupRef.current;
    const viewportH = window.innerHeight;
    const viewportW = window.innerWidth;

    let top = anchor.bottom + 8;
    let left = anchor.left;

    if (top + 260 > viewportH) top = anchor.top - 268;
    if (left + 220 > viewportW) left = viewportW - 228;

    popup.style.top = `${top}px`;
    popup.style.left = `${left}px`;
  }, [anchorEl]);

  const handleDM = async () => {
    if (!onDirectMessage) return;
    setStarting(true);
    try {
      const { group } = await api.createGroup({
        type: 'private',
        memberIds: [profileUser.id],
        isDirect: true,
      });
      onClose();
      onDirectMessage(group);
    } catch (e) {
      console.error('DM error', e);
    } finally {
      setStarting(false);
    }
  };

  if (!profileUser) return null;

  return (
    <div
      ref={popupRef}
      style={{
        position: 'fixed',
        zIndex: 1000,
        background: 'var(--surface)',
        border: '1px solid var(--border)',
        borderRadius: 16,
        boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
        width: 220,
        padding: '20px 16px 16px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 8,
      }}
    >
      <Avatar user={profileUser} size="xl" />
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--text-primary)', marginBottom: 2 }}>
          {profileUser.name}
        </div>
        {profileUser.role === 'admin' && !profileUser.hide_admin_tag && (
          <span className="role-badge role-admin" style={{ fontSize: 11 }}>Admin</span>
        )}
      </div>
      {profileUser.about_me && (
        <p style={{
          fontSize: 13, color: 'var(--text-secondary)',
          textAlign: 'center', lineHeight: 1.5,
          marginTop: 4, wordBreak: 'break-word',
          borderTop: '1px solid var(--border)',
          paddingTop: 10, width: '100%',
        }}>
          {profileUser.about_me}
        </p>
      )}
      {!isSelf && onDirectMessage && (
        <button
          onClick={handleDM}
          disabled={starting}
          style={{
            marginTop: 6,
            width: '100%',
            padding: '8px 0',
            borderRadius: 'var(--radius)',
            border: '1px solid var(--primary)',
            background: 'transparent',
            color: 'var(--primary)',
            fontSize: 13,
            fontWeight: 600,
            cursor: starting ? 'default' : 'pointer',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 6,
            transition: 'background var(--transition), color var(--transition)',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--primary)'; e.currentTarget.style.color = 'white'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--primary)'; }}
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
          </svg>
          {starting ? 'Opening...' : 'Direct Message'}
        </button>
      )}
    </div>
  );
}
