'use client';

import { useState } from 'react';

interface Group {
  id: number;
  name: string;
}

interface GroupBadgesProps {
  groups: Group[];
  maxDisplay?: number;
}

const GROUP_COLORS: Record<string, string> = {
  ADMIN: 'bg-rose-100 text-rose-700 dark:bg-rose-950 dark:text-rose-300 border border-rose-200 dark:border-rose-900',
  RECRUITER: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-900',
  INTERVIEWER: 'bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300 border border-amber-200 dark:border-amber-900',
  CANDIDATE: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-900',
};

export default function GroupBadges({ groups, maxDisplay = 3 }: GroupBadgesProps) {
  const [showPopover, setShowPopover] = useState(false);

  if (!groups || groups.length === 0) {
    return <span className="text-xs text-slate-400 dark:text-slate-500">No groups</span>;
  }

  const displayedGroups = groups.slice(0, maxDisplay);
  const hiddenCount = groups.length - maxDisplay;

  return (
    <div className="flex flex-wrap gap-2 items-center relative">
      {displayedGroups.map((group) => (
        <span
          key={group.id}
          className={`inline-block px-2.5 py-1 rounded-full text-xs font-bold whitespace-nowrap ${GROUP_COLORS[group.name] || 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300 border border-slate-200 dark:border-slate-700'}`}
        >
          {group.name}
        </span>
      ))}

      {hiddenCount > 0 && (
        <div className="relative">
          <button
            onClick={() => setShowPopover(!showPopover)}
            className="inline-block px-2.5 py-1 rounded-full text-xs font-bold bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-600 transition cursor-pointer"
          >
            +{hiddenCount} More
          </button>

          {/* Popover */}
          {showPopover && (
            <>
              <div
                className="fixed inset-0 z-40"
                onClick={() => setShowPopover(false)}
              />
              <div className="absolute top-full right-0 mt-2 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-none shadow-lg p-3 min-w-max max-w-xs">
                <p className="text-xs font-bold text-slate-600 dark:text-slate-400 mb-2 uppercase tracking-wider">
                  All Groups ({groups.length})
                </p>
                <div className="space-y-2">
                  {groups.map((group) => (
                    <span
                      key={group.id}
                      className={`inline-block px-2.5 py-1 rounded-full text-xs font-bold ${GROUP_COLORS[group.name] || 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300 border border-slate-200 dark:border-slate-700'}`}
                    >
                      {group.name}
                    </span>
                  ))}
                </div>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}