'use client';

import { useState, useRef, useEffect } from 'react';
import { FiShare2, FiLink, FiRefreshCw } from 'react-icons/fi';
import { FaTwitter, FaFacebook, FaLinkedin, FaReddit } from 'react-icons/fa';
import toast from 'react-hot-toast';

interface ShareButtonProps {
    badgeId: string | undefined;
    shareTitle: string;
    shareText: string;
    buttonText: string;
    className?: string;
    isPublic?: boolean;
    onTogglePrivacy?: () => Promise<void> | void;
}

const ShareButton = ({ badgeId, shareTitle, shareText, buttonText, className, isPublic = true, onTogglePrivacy }: ShareButtonProps) => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [isToggling, setIsToggling] = useState(false);
    const menuRef = useRef<HTMLDivElement>(null);
    const [isNativeShareSupported, setIsNativeShareSupported] = useState(false);
    const [url, setUrl] = useState('');

    useEffect(() => {
        setIsNativeShareSupported(!!navigator.share);
        if (badgeId) {
            setUrl(`${window.location.origin}/share/badge/${badgeId}`);
        }
    }, [badgeId]);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
                setIsMenuOpen(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [menuRef]);

    const handleButtonClick = async () => {
        if (!isPublic && onTogglePrivacy) {
            setIsToggling(true);
            try {
                await onTogglePrivacy();
                setIsMenuOpen(true);
            } catch (error) {
                // The parent component is expected to show a toast.
                console.error("Failed to make badge public for sharing.", error);
            } finally {
                setIsToggling(false);
            }
        } else {
            setIsMenuOpen(!isMenuOpen);
        }
    };

    const handleCopyLink = async () => {
        if (url) {
            try {
                await navigator.clipboard.writeText(url);
                toast.success('Link copied to clipboard!');
            } catch (error) {
                console.error('Failed to copy link:', error);
                toast.error('Failed to copy link.');
            }
        }
        setIsMenuOpen(false);
    };

    const socialPlatforms = [
        {
            name: 'Twitter',
            icon: FaTwitter,
            url: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(shareText)}`,
            color: 'text-sky-500'
        },
        {
            name: 'Facebook',
            icon: FaFacebook,
            url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
            color: 'text-blue-600'
        },
        {
            name: 'LinkedIn',
            icon: FaLinkedin,
            url: `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}&title=${encodeURIComponent(shareTitle)}&summary=${encodeURIComponent(shareText)}`,
            color: 'text-sky-700'
        },
        {
            name: 'Reddit',
            icon: FaReddit,
            url: `https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(shareTitle)}`,
            color: 'text-orange-500'
        }
    ];

    const handleNativeShare = async () => {
        if (url && navigator.share) {
            const shareData = {
                title: shareTitle,
                text: shareText,
                url: url,
            };
            try {
                await navigator.share(shareData);
                toast.success('Assessment shared successfully!');
            } catch (error) {
                if (!(error instanceof Error && error.name === 'AbortError')) {
                    console.error('Native share failed:', error);
                    toast.error('Could not share.');
                }
            }
        } else if (!navigator.share) {
            toast.error('Native sharing is not supported on this browser.');
        } else {
            toast.error('Could not find a valid badge to share.');
        }
        setIsMenuOpen(false);
    };

    return (
        <div className="relative" ref={menuRef}>
            <button
                onClick={handleButtonClick}
                disabled={!badgeId || !url || isToggling}
                className={className || "flex items-center px-4 py-2 text-white rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-[var(--icon-accent)] hover:bg-[var(--icon-accent-hover)]"}
            >
                {isToggling ? (
                    <FiRefreshCw className="animate-spin" />
                ) : (
                    <FiShare2 />
                )}
                <span className="hidden sm:inline sm:ml-2">{isToggling ? 'Making Public...' : buttonText}</span>
            </button>

            {isMenuOpen && (
                <div className="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-20" style={{ backgroundColor: 'var(--content-card-background)' }}>
                    <div className="py-1">
                        {socialPlatforms.map((platform) => {
                            const Icon = platform.icon;
                            return (
                                <a
                                    key={platform.name}
                                    href={platform.url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    onClick={() => setIsMenuOpen(false)}
                                    className="flex items-center w-full px-4 py-2 text-sm hover:bg-black/5"
                                    style={{ color: 'var(--text-main)' }}
                                >
                                    <Icon className={`mr-3 h-5 w-5 ${platform.color}`} />
                                    <span>Share on {platform.name}</span>
                                </a>
                            );
                        })}
                        <div className="my-1" style={{ borderTop: '1px solid var(--icon-button-secondary)' }}></div>
                        <button
                            onClick={handleCopyLink}
                            className="flex items-center w-full px-4 py-2 text-sm hover:bg-black/5"
                            style={{ color: 'var(--text-main)' }}
                        >
                            <FiLink className="mr-3 h-5 w-5" />
                            <span>Copy Link</span>
                        </button>
                        {isNativeShareSupported && (
                             <>
                                <div className="my-1" style={{ borderTop: '1px solid var(--icon-button-secondary)' }}></div>
                                <button
                                    onClick={handleNativeShare}
                                    className="flex items-center w-full px-4 py-2 text-sm hover:bg-black/5"
                                    style={{ color: 'var(--text-main)' }}
                                >
                                    <FiShare2 className="mr-3 h-5 w-5" />
                                    <span>Share via...</span>
                                </button>
                            </>
                        )}
                    </div>
                </div>
            )}
        </div>
    );
};

export default ShareButton;