'use client';

import React, { useEffect } from 'react';
import { CheckCircle2, PartyPopper, Swords, X } from 'lucide-react';
import { Button } from './Button';

type Props = {
  open: boolean;
  teamName: string;
  matchTitle?: string;
  onJoinContests: () => void;
  onClose: () => void;
};

export function TeamCreatedPopup({ open, teamName, matchTitle, onJoinContests, onClose }: Props) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div
      className="fixed inset-0 z-[60] flex items-end justify-center bg-black/50 p-4 backdrop-blur-sm sm:items-center"
      role="dialog"
      aria-modal="true"
      aria-labelledby="team-created-title"
      onClick={onClose}
    >
      <div
        className="success-pop relative w-full max-w-sm overflow-hidden rounded-3xl bg-white shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <button
          type="button"
          onClick={onClose}
          className="absolute right-3 top-3 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-black/5 text-gray-500 hover:bg-black/10"
          aria-label="Close"
        >
          <X className="h-5 w-5" />
        </button>

        <div className="relative bg-gradient-to-br from-d11-red to-[#c41520] px-6 pb-8 pt-10 text-center text-white">
          <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden>
            <span className="confetti c1" />
            <span className="confetti c2" />
            <span className="confetti c3" />
            <span className="confetti c4" />
            <span className="confetti c5" />
          </div>
          <div className="relative mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-white text-d11-red shadow-lg">
            <CheckCircle2 className="h-9 w-9" strokeWidth={2.5} />
          </div>
          <p className="relative mt-4 inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.2em] text-white/80">
            <PartyPopper className="h-3.5 w-3.5" /> Success
          </p>
          <h2 id="team-created-title" className="relative mt-2 font-display text-2xl font-extrabold">
            Team created!
          </h2>
          <p className="relative mt-2 text-sm text-white/90">
            <span className="font-bold">{teamName}</span>
            {matchTitle ? ` is ready for ${matchTitle}` : ' is ready to play'}
          </p>
        </div>

        <div className="space-y-3 p-5">
          <Button className="w-full gap-2 rounded-xl text-sm font-bold" onClick={onJoinContests}>
            <Swords className="h-4 w-4" />
            Join contests now
          </Button>
          <button
            type="button"
            onClick={onClose}
            className="w-full py-2.5 text-center text-xs font-bold text-d11-muted hover:text-d11-ink"
          >
            Maybe later
          </button>
        </div>
      </div>
    </div>
  );
}