import React from 'react';
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
  ContextMenuSeparator,
} from "./ui/context-menu";
import { History, UserX, ExternalLink, ShieldAlert, Server } from "lucide-react";

interface PlayerContextMenuProps {
  player: {
    name: string;
    nameHash: string;
  };
  serverName?: string;
  onViewInsights: (player: { name: string; nameHash: string }) => void;
  onKick?: (player: { name: string; nameHash: string }) => void;
  onBan?: (player: { name: string; nameHash: string }) => void;
  children: React.ReactNode;
}

export const PlayerContextMenu: React.FC<PlayerContextMenuProps> = ({
  player,
  serverName,
  onViewInsights,
  onKick,
  onBan,
  children,
}) => {
  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        {children}
      </ContextMenuTrigger>
      <ContextMenuContent className="w-60 bg-card/95 backdrop-blur-xl border-border/50">
        <div className="px-3 py-2 space-y-0.5">
          <p className="text-xs font-black text-foreground truncate">{player.name}</p>
          {serverName && (
            <p className="text-[10px] text-muted-foreground/60 flex items-center gap-1">
              <Server className="w-3 h-3" />
              {serverName}
            </p>
          )}
        </div>
        <ContextMenuSeparator />
        <ContextMenuItem onClick={() => onViewInsights(player)} className="font-bold">
          <History className="mr-2 h-4 w-4" />
          View Insights
        </ContextMenuItem>
        <ContextMenuItem
          onClick={() => window.open(`https://steamcommunity.com/search/users/#text=${encodeURIComponent(player.name)}`, '_blank')}
          className="font-bold"
        >
          <ExternalLink className="mr-2 h-4 w-4" />
          Steam Search
        </ContextMenuItem>
        {(onKick || onBan) && <ContextMenuSeparator />}
        {onKick && (
          <ContextMenuItem onClick={() => onKick(player)} className="font-bold text-amber-500 focus:text-amber-500 focus:bg-amber-500/10">
            <UserX className="mr-2 h-4 w-4" />
            Kick
          </ContextMenuItem>
        )}
        {onBan && (
          <ContextMenuItem onClick={() => onBan(player)} className="font-bold text-destructive focus:text-destructive focus:bg-destructive/10">
            <ShieldAlert className="mr-2 h-4 w-4" />
            Ban
          </ContextMenuItem>
        )}
      </ContextMenuContent>
    </ContextMenu>
  );
};
