components/ShareModal.tsx

import React from 'react';
import { X, Copy, Share2, MessageCircle, Facebook, Twitter, Check } from 'lucide-react';
import { Language } from '../types';
import { TRANSLATIONS } from '../constants/translations';

interface ShareModalProps {
  isVisible: boolean;
  onClose: () => void;
  language: Language;
  config?: any; // Share config from admin
  showToast: (msg: string) => void;
  onShareSuccess: () => void;
}

export const ShareModal: React.FC<ShareModalProps> = ({ 
  isVisible, onClose, language, config, showToast, onShareSuccess 
}) => {
  const t = TRANSLATIONS[language];
  const [copied, setCopied] = React.useState(false);
  
  if (!isVisible) return null;

  const shareTitle = config?.shareTitle || "Check out Romantic Life AI Studio!";
  const shareUrl = window.location.href;
  const fullShareText = `${shareTitle} ${shareUrl}`;

  const handleCopyLink = async () => {
    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        await navigator.clipboard.writeText(fullShareText);
        setCopied(true);
        showToast(t.toastCopy);
        onShareSuccess();
        setTimeout(() => {
            setCopied(false);
            onClose();
        }, 1500);
      } else {
        // Fallback for older browsers
        const textArea = document.createElement("textarea");
        textArea.value = fullShareText;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
        setCopied(true);
        showToast(t.toastCopy);
        onShareSuccess();
        setTimeout(() => onClose(), 1500);
      }
    } catch (err) {
      console.error('Failed to copy: ', err);
      alert("Failed to copy link. Please copy manually from address bar.");
    }
  };

  const handleWeChat = () => {
    // In a real PWA, this might trigger a native share if available, 
    // or show a QR code modal. For now, we simulate the "Shared" callback.
    if (navigator.share) {
        navigator.share({
            title: shareTitle,
            text: shareTitle,
            url: shareUrl,
        }).then(() => {
            onShareSuccess();
            onClose();
        }).catch((error) => console.log('Error sharing', error));
    } else {
        alert("Please screenshot this page and share to WeChat Moments.");
        onShareSuccess(); // Assume they did it for UX flow
        setTimeout(onClose, 500);
    }
  };

  return (
    <div className="fixed inset-0 z-[130] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
       <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden relative">
          <div className="bg-gray-50 p-4 border-b border-gray-100 flex justify-between items-center">
             <h3 className="font-bold text-gray-800 flex items-center gap-2">
                <Share2 className="w-4 h-4 text-rose-500" /> Share to Earn
             </h3>
             <button onClick={onClose} className="p-1 hover:bg-gray-200 rounded-full">
                <X className="w-5 h-5 text-gray-500" />
             </button>
          </div>
          
          <div className="p-6 grid grid-cols-2 gap-4">
             <button 
               onClick={handleWeChat}
               className="flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-green-50 text-green-700 hover:bg-green-100 transition-colors group"
             >
                <div className="w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform">
                   <MessageCircle className="w-6 h-6" />
                </div>
                <span className="text-xs font-bold">WeChat</span>
             </button>

             <button 
               onClick={handleCopyLink}
               className={`flex flex-col items-center justify-center gap-2 p-4 rounded-xl transition-colors group ${copied ? 'bg-gray-800 text-white' : 'bg-gray-50 text-gray-700 hover:bg-gray-100'}`}
             >
                <div className={`w-10 h-10 rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform ${copied ? 'bg-green-500 text-white' : 'bg-gray-700 text-white'}`}>
                   {copied ? <Check className="w-6 h-6" /> : <Copy className="w-5 h-5" />}
                </div>
                <span className="text-xs font-bold">{copied ? "Copied!" : "Copy Link"}</span>
             </button>
             
             <button 
                className="flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-blue-50 text-blue-700 hover:bg-blue-100 transition-colors opacity-60 hover:opacity-100"
                onClick={() => {
                    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`, '_blank');
                    onShareSuccess();
                }}
             >
                <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg">
                   <Facebook className="w-5 h-5" />
                </div>
                <span className="text-xs font-bold">Facebook</span>
             </button>

             <button 
                className="flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-sky-50 text-sky-700 hover:bg-sky-100 transition-colors opacity-60 hover:opacity-100"
                onClick={() => {
                    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareTitle)}&url=${encodeURIComponent(shareUrl)}`, '_blank');
                    onShareSuccess();
                }}
             >
                <div className="w-10 h-10 bg-sky-500 text-white rounded-full flex items-center justify-center shadow-lg">
                   <Twitter className="w-5 h-5" />
                </div>
                <span className="text-xs font-bold">Twitter</span>
             </button>
          </div>
          
          <div className="p-4 bg-gray-50 text-center">
             <p className="text-xs text-gray-500">Share now to earn +10 Points instantly!</p>
          </div>
       </div>
    </div>
  );
};