import React, { useState } from 'react';

interface ShareModalProps {
  isOpen: boolean;
  shareUrl: string;
  isExistingSession: boolean;
  onClose: () => void;
}

const ShareModal: React.FC<ShareModalProps> = ({
  isOpen,
  shareUrl,
  isExistingSession,
  onClose
}) => {
  const [copied, setCopied] = useState(false);

  if (!isOpen) return null;

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      // Fallback for browsers that don't support clipboard API
      const textArea = document.createElement('textarea');
      textArea.value = shareUrl;
      textArea.style.position = 'fixed';
      textArea.style.left = '-999999px';
      textArea.style.top = '-999999px';
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      try {
        document.execCommand('copy');
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      } catch (err) {
        console.error('Failed to copy to clipboard:', err);
      }
      document.body.removeChild(textArea);
    }
  };

  const handleBackgroundClick = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <div 
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      onClick={handleBackgroundClick}
    >
      <div className="bg-background-primary rounded-2xl shadow-2xl max-w-md w-full p-6 animate-in fade-in zoom-in duration-300">
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-gradient-to-r from-accent-green to-accent-blue rounded-full flex items-center justify-center">
              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
            </div>
            <div>
              <h2 className="text-xl font-bold text-foreground-primary">
                {isExistingSession ? 'Invite More Friends!' : 'Invite Friends!'}
              </h2>
              <p className="text-sm text-foreground-secondary">Share your music session</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-background-secondary rounded-full transition-colors"
          >
            <svg className="w-5 h-5 text-foreground-tertiary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Content */}
        <div className="mb-6">
          <p className="text-foreground-secondary mb-4">
            {isExistingSession 
              ? 'Forward this link to invite more friends to collaborate on this session:'
              : 'Share this link to invite friends to collaborate:'
            }
          </p>
          
          {/* URL Display */}
          <div className="bg-background-secondary border border-border-primary rounded-lg p-3 mb-4">
            <div className="flex items-center space-x-2">
              <div className="flex-1 min-w-0">
                <p className="text-sm text-foreground-primary font-mono truncate">
                  {shareUrl}
                </p>
              </div>
            </div>
          </div>

          {/* Copy Button */}
          <button
            onClick={handleCopy}
            className={`w-full px-4 py-3 rounded-xl font-medium transition-all ${
              copied
                ? 'bg-accent-success text-white'
                : 'bg-accent-blue hover:bg-accent-blue/80 text-white'
            }`}
          >
            {copied ? (
              <span className="flex items-center justify-center space-x-2">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                <span>Copied!</span>
              </span>
            ) : (
              <span className="flex items-center justify-center space-x-2">
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                <span>Copy Link</span>
              </span>
            )}
          </button>
        </div>

        {/* Instructions */}
        <div className="bg-accent-blue/10 rounded-lg p-4 border border-accent-blue/20">
          <div className="flex items-start space-x-3">
            <div className="w-5 h-5 bg-accent-blue rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
              <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <div>
              <p className="text-sm font-medium text-accent-blue mb-1">How it works:</p>
              <p className="text-xs text-accent-blue/80">
                When friends click this link, they'll see an invitation to join your collaborative music session. They can add their own layers and create music together!
              </p>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="mt-4 text-center">
          <p className="text-xs text-foreground-tertiary">
            Powered by <span className="font-semibold">SUNO</span> Music Generator
          </p>
        </div>
      </div>
    </div>
  );
};

export default ShareModal;