import React from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Copy, Mail, CheckCircle2, MessageCircle } from "lucide-react";
import { toast } from 'sonner';
import { useTranslation } from '@/hooks/useTranslation';

// Facebook Icon Component
const FacebookIcon = ({ className }) => (
    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
    </svg>
);

// X (formerly Twitter) Icon Component
const XIcon = ({ className }) => (
    <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
);

export default function ShareModal({ isOpen, onClose, productUrl, productTitle }) {
    const { t } = useTranslation();
    const [copied, setCopied] = React.useState(false);

    const handleCopy = () => {
        navigator.clipboard.writeText(productUrl);
        setCopied(true);
        toast.success(t("Link copied to clipboard!"));
        setTimeout(() => setCopied(false), 2000);
    };

    const shareLinks = [
        { 
            name: "Facebook", 
            icon: FacebookIcon, 
            color: "bg-[#1877F2] text-white hover:bg-[#1877F2]/90",
            url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(productUrl)}`
        },
        { 
            name: "X", 
            icon: XIcon, 
            color: "bg-black text-white hover:bg-black/80 dark:bg-white dark:text-black dark:hover:bg-white/80",
            url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(productUrl)}&text=${encodeURIComponent(productTitle)}`
        },
        { 
            name: "WhatsApp", 
            icon: MessageCircle, 
            color: "bg-[#25D366] text-white hover:bg-[#25D366]/90",
            url: `https://api.whatsapp.com/send?text=${encodeURIComponent(productTitle + " " + productUrl)}`
        },
        { 
            name: "Email", 
            icon: Mail, 
            color: "bg-gray-500 text-white hover:bg-gray-600",
            url: `mailto:?subject=${encodeURIComponent(t("Check out this product: :title", { title: productTitle }))}&body=${encodeURIComponent(productUrl)}`
        }
    ];

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-md bg-card">
                <DialogHeader>
                    <DialogTitle className="text-xl">{t("Share this product")}</DialogTitle>
                </DialogHeader>
                
                <div className="py-6 space-y-6">
                    <div className="flex items-center justify-center gap-4 sm:gap-6">
                        {shareLinks.map((social, idx) => (
                            <a 
                                key={idx} 
                                href={social.url} 
                                target="_blank" 
                                rel="noopener noreferrer"
                                className={`w-12 h-12 rounded-full flex items-center justify-center transition-transform hover:scale-110 shadow-sm ${social.color}`}
                                title={t("Share on :name", { name: social.name })}
                            >
                                <social.icon className="w-5 h-5" />
                            </a>
                        ))}
                    </div>

                    <div className="space-y-2">
                        <label className="text-xs font-bold text-muted-foreground uppercase tracking-wider">
                            {t("Copy Link")}
                        </label>
                        <div className="flex items-center gap-2">
                            <Input 
                                readOnly 
                                value={productUrl} 
                                className="bg-muted/50 font-mono text-xs focus-visible:ring-0" 
                            />
                            <Button 
                                onClick={handleCopy} 
                                variant={copied ? "default" : "secondary"}
                                className={copied ? "bg-green-600 text-white" : ""}
                            >
                                {copied ? <CheckCircle2 className="w-4 h-4 mr-2" /> : <Copy className="w-4 h-4 mr-2" />}
                                {copied ? t("Copied") : t("Copy")}
                            </Button>
                        </div>
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}