import React, { useState } from 'react';
import { 
  Users, 
  X, 
  Copy, 
  Check, 
  Share2, 
  MessageSquare, 
  DollarSign, 
  Sparkles, 
  Send,
  QrCode
} from 'lucide-react';
import confetti from 'canvas-confetti';

interface GroupSplitModalProps {
  isOpen: boolean;
  onClose: () => void;
  initialPartyDetails?: {
    packageName?: string;
    date?: string;
    guests?: number;
    totalAmount?: number;
    perPerson?: number;
  };
}

export const GroupSplitModal: React.FC<GroupSplitModalProps> = ({
  isOpen,
  onClose,
  initialPartyDetails
}) => {
  const [partyName, setPartyName] = useState("Marcus's 30th Birthday Junk 🛥️");
  const [friendsCount, setFriendsCount] = useState(initialPartyDetails?.guests || 32);
  const [totalCost, setTotalCost] = useState(initialPartyDetails?.totalAmount || 28800);
  const [copied, setCopied] = useState(false);

  if (!isOpen) return null;

  const perPersonCost = Math.round(totalCost / Math.max(1, friendsCount));
  const shareableUrl = `https://entourage.hk/split?party=${encodeURIComponent(partyName)}&amount=${perPersonCost}&count=${friendsCount}`;

  const whatsappMessage = `Hey crew! 🥂 We are booking the 75ft luxury superyacht ENTOURAGE for ${partyName}!\n\n✨ Total per person is only HK$ ${perPersonCost.toLocaleString()} (Includes air-con saloon marble bar, teak BBQ & water sports!)\n\nCheck out the yacht and lock your spot here: ${shareableUrl}`;

  const handleCopyLink = () => {
    navigator.clipboard.writeText(shareableUrl);
    setCopied(true);
    try {
      confetti({
        particleCount: 40,
        spread: 50,
        origin: { y: 0.6 }
      });
    } catch (e) {}
    setTimeout(() => setCopied(false), 2500);
  };

  const handleOpenWhatsApp = () => {
    const url = `https://api.whatsapp.com/send?text=${encodeURIComponent(whatsappMessage)}`;
    window.open(url, '_blank');
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md">
      <div className="bg-slate-900 border border-sky-500/30 rounded-3xl max-w-lg w-full p-6 sm:p-7 shadow-2xl space-y-6 relative overflow-hidden">
        
        {/* Glow */}
        <div className="absolute top-0 right-0 w-48 h-48 bg-sky-500/10 rounded-full blur-3xl pointer-events-none" />

        {/* Header */}
        <div className="flex items-center justify-between border-b border-white/10 pb-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-sky-500/20 border border-sky-500/40 flex items-center justify-center text-sky-400">
              <Users className="w-5 h-5" />
            </div>
            <div>
              <h3 className="text-base font-bold text-white">
                "Split The Yacht" Group Organizer
              </h3>
              <p className="text-xs text-slate-400">
                Share costs transparently & invite friends seamlessly
              </p>
            </div>
          </div>

          <button
            onClick={onClose}
            className="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 text-slate-300 hover:text-white flex items-center justify-center"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Inputs */}
        <div className="space-y-4">
          <div>
            <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
              Party / Event Name
            </label>
            <input
              type="text"
              value={partyName}
              onChange={(e) => setPartyName(e.target.value)}
              className="w-full bg-slate-950 border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-sky-400"
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
                Total Friends: <span className="text-sky-400 font-bold">{friendsCount}</span>
              </label>
              <input
                type="number"
                min="5"
                max="48"
                value={friendsCount}
                onChange={(e) => setFriendsCount(parseInt(e.target.value) || 1)}
                className="w-full bg-slate-950 border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-sky-400"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-slate-300 mb-1.5">
                Total Charter (HKD)
              </label>
              <input
                type="number"
                step="500"
                value={totalCost}
                onChange={(e) => setTotalCost(parseInt(e.target.value) || 0)}
                className="w-full bg-slate-950 border border-white/15 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-sky-400 font-mono"
              />
            </div>
          </div>

          {/* Result Callout */}
          <div className="p-4 rounded-2xl bg-sky-500/15 border border-sky-500/30 text-center space-y-1">
            <span className="text-[11px] uppercase font-bold text-slate-400 tracking-wider">
              Each Friend's Individual Share:
            </span>
            <div className="flex items-center justify-center gap-1.5">
              <span className="text-3xl font-black text-sky-400 font-mono">
                HK$ {perPersonCost.toLocaleString()}
              </span>
              <span className="text-xs text-slate-300">/ person</span>
            </div>
            <p className="text-[11px] text-slate-400">
              Split smoothly across all {friendsCount} guests with zero calculation headaches!
            </p>
          </div>

          {/* Share Actions */}
          <div className="space-y-2 pt-2">
            <button
              onClick={handleOpenWhatsApp}
              className="w-full py-3 rounded-xl bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold text-xs shadow-lg shadow-emerald-500/20 transition-all flex items-center justify-center gap-2"
            >
              <MessageSquare className="w-4 h-4" />
              <span>Share Invite to WhatsApp Group</span>
            </button>

            <button
              onClick={handleCopyLink}
              className="w-full py-2.5 rounded-xl bg-white/10 hover:bg-white/15 text-white font-semibold text-xs border border-white/20 transition-all flex items-center justify-center gap-2"
            >
              {copied ? <Check className="w-4 h-4 text-emerald-400" /> : <Copy className="w-4 h-4" />}
              <span>{copied ? 'Party Invite Link Copied!' : 'Copy Shareable Link'}</span>
            </button>
          </div>
        </div>

      </div>
    </div>
  );
};