"use client"

import { useEffect } from "react"
import { X } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import type { DropCollaborator } from "@/components/drops/drops-experience"

interface CollaboratorPopupProps {
  collab: DropCollaborator
  onClose: () => void
}

// Même traitement glassmorphism que le panneau au survol de la page d'accueil
// (voir GlassHover dans app/(public)/page.tsx), mais ici déclenché au clic,
// avec un fond assombri et fermeture au clic extérieur / Échap.
export function CollaboratorPopup({ collab, onClose }: CollaboratorPopupProps) {
  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") onClose()
    }
    window.addEventListener("keydown", onKeyDown)
    return () => window.removeEventListener("keydown", onKeyDown)
  }, [onClose])

  return (
    <div
      className="fixed inset-0 z-[100] bg-black/60 flex items-center justify-center p-4"
      onClick={onClose}
      role="dialog"
      aria-modal="true"
      aria-label={collab.name}
    >
      <div
        className="relative w-full max-w-md rounded-lg border border-white/15 bg-white/10 backdrop-blur-xl shadow-2xl p-8 text-left"
        onClick={(e) => e.stopPropagation()}
      >
        <button
          type="button"
          onClick={onClose}
          className="absolute top-4 right-4 text-white/60 hover:text-white transition-colors"
          aria-label="Fermer"
        >
          <X size={20} />
        </button>

        <Badge variant={collab.isAI ? "accent" : "outline"} className="mb-4">
          {collab.role}
        </Badge>
        <h3 className="text-2xl font-heading font-bold uppercase tracking-tight text-white mb-4">
          {collab.name}
        </h3>
        <div className="space-y-4">
          <div>
            <p className="font-mono text-[10px] uppercase tracking-widest text-white/50 mb-1.5">Univers</p>
            <p className="text-sm text-white/80 leading-relaxed">{collab.universe}</p>
          </div>
          <div>
            <p className="font-mono text-[10px] uppercase tracking-widest text-white/50 mb-1.5">Parcours</p>
            <p className="text-sm text-white/80 leading-relaxed">{collab.background}</p>
          </div>
          <div>
            <p className="font-mono text-[10px] uppercase tracking-widest text-white/50 mb-1.5">Influences</p>
            <p className="text-sm text-white/80 leading-relaxed">{collab.influences}</p>
          </div>
        </div>
      </div>
    </div>
  )
}