"use client";

import { useEffect, useState, useRef } from "react";
import { getCurrentUser, User } from "@/lib/api";
import { MessageSquare, User as UserIcon, X } from "lucide-react";

interface UserProfileCardProps {
  user: { id: string; name?: string; display_name?: string; displayName?: string; email?: string };
  position?: { top: number; left: number };
  onClose?: () => void;
}

export function UserProfileCard({ user, position, onClose }: UserProfileCardProps) {
  const [profile, setProfile] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const cardRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Try to fetch full profile
    getCurrentUser()
      .then(setProfile)
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const displayName = user.display_name || user.displayName || user.name || user.email || "Unknown User";
  const initial = displayName[0]?.toUpperCase() || "U";

  const style: React.CSSProperties = position
    ? { top: position.top, left: position.left }
    : { top: 100, left: 100 };

  return (
    <div
      ref={cardRef}
      className="fixed z-50 w-64 bg-white rounded-lg shadow-xl border border-gray-200 overflow-hidden"
      style={style}
    >
      {/* Header background */}
      <div className="h-16 bg-slack-purple relative">
        {onClose && (
          <button
            onClick={onClose}
            className="absolute top-2 right-2 p-1 rounded text-white/60 hover:text-white hover:bg-white/10 transition-colors"
          >
            <X size={14} />
          </button>
        )}
      </div>

      {/* Avatar */}
      <div className="px-4 -mt-8">
        <div className="w-14 h-14 rounded-md bg-white flex items-center justify-center">
          <div className="w-12 h-12 rounded-md bg-slack-purple text-white flex items-center justify-center text-xl font-bold">
            {initial}
          </div>
        </div>
      </div>

      {/* Info */}
      <div className="px-4 py-3">
        <h3 className="font-bold text-gray-800">{displayName}</h3>
        {user.email && <p className="text-sm text-gray-400">{user.email}</p>}

        {loading ? (
          <div className="mt-2 text-xs text-gray-400 animate-pulse">Loading...</div>
        ) : (
          <>
            {profile?.display_name && profile.display_name !== displayName && (
              <p className="text-sm text-gray-600 mt-2">{profile.display_name}</p>
            )}
            {/* Bio placeholder */}
            <p className="text-xs text-gray-400 mt-2">
              No bio available.
            </p>
          </>
        )}

        {/* Action buttons */}
        <div className="flex gap-2 mt-4">
          <button className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-slack-purple text-white text-xs font-medium hover:bg-slack-darkpurple transition-colors">
            <MessageSquare size={12} />
            Message
          </button>
          <button className="flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-gray-300 text-gray-600 text-xs font-medium hover:bg-gray-50 transition-colors">
            <UserIcon size={12} />
            View Profile
          </button>
        </div>
      </div>
    </div>
  );
}