import React from 'react';
import { toast } from 'sonner';
import { Link as LinkIcon, Facebook, Mail, Share2 } from 'lucide-react';
import { Button } from '@/Components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import useTranslation from '@/hooks/useTranslation';

const XIcon = ({ className }) => (
    <svg viewBox="0 0 24 24" aria-hidden="true" className={className} fill="currentColor">
        <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
    </svg>
);

export default function ArticleShareMenu({ postUrl, postTitle }) {
    const { t } = useTranslation();

    const finalUrl = postUrl || (typeof window !== 'undefined' ? window.location.href : '');

    const handleCopyLink = () => {
        if (!finalUrl) {
            toast.error(t('_link_copy_failed', 'Failed to copy link'));
            return;
        }
        navigator.clipboard.writeText(finalUrl);
        toast.success(t('_link_copied', 'Link copied to clipboard'));
    };

    const handleShare = (platform) => {
        if (!finalUrl) return;

        const url = encodeURIComponent(finalUrl);
        const text = encodeURIComponent(postTitle || 'Read this article');
        let shareUrl = "";
        
        if (platform === 'facebook') {
            shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
        } else if (platform === 'x') {
            shareUrl = `https://x.com/intent/tweet?url=${url}&text=${text}`;
        } else if (platform === 'mail') { 
            window.location.href = `mailto:?subject=${text}&body=Check this out: ${url}`; 
            return; 
        }
        
        window.open(shareUrl, '_blank', 'width=600,height=400');
    };

    return (
        <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="h-9 gap-2">
                    <Share2 className="w-4 h-4" /> 
                    <span className="hidden sm:inline">{t('_share', 'Share')}</span>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-48 z-[200]">
                <DropdownMenuItem onClick={handleCopyLink} className="cursor-pointer">
                    <LinkIcon className="mr-2 h-4 w-4" /> {t('_copy_link', 'Copy Link')}
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => handleShare('facebook')} className="cursor-pointer">
                    <Facebook className="mr-2 h-4 w-4" /> Facebook
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => handleShare('x')} className="cursor-pointer">
                    <XIcon className="mr-2 h-4 w-4" /> X
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => handleShare('mail')} className="cursor-pointer">
                    <Mail className="mr-2 h-4 w-4" /> Mail
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}