import * as React from 'react';
import { Icon } from './ui/Icon';
import { useTranslation } from '../hooks/useI18n';

interface ShareModalProps {
    pageSlug: string;
    onClose: () => void;
}

const QRCode: React.FC<{ url: string }> = ({ url }) => {
    const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(url)}`;
    return <img src={qrUrl} alt="QR Code" className="w-32 h-32 rounded-lg" />
};

const ShareModal: React.FC<ShareModalProps> = ({ pageSlug, onClose }) => {
    const { t } = useTranslation();
    const [copiedLink, setCopiedLink] = React.useState<string | null>(null);

    const baseUrl = `${window.location.origin}${window.location.pathname.replace(/\/$/, '')}`;
    const pcUrl = `${baseUrl}?page=${pageSlug}&view=pc`;
    const mobileUrl = `${baseUrl}?page=${pageSlug}&view=mobile`;

    const handleCopy = (url: string, type: string) => {
        navigator.clipboard.writeText(url).then(() => {
            setCopiedLink(type);
            setTimeout(() => setCopiedLink(null), 2000);
        });
    };

    return (
        <div className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center backdrop-blur-sm" onClick={onClose}>
            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-3xl p-8 border border-gray-200 dark:border-gray-700" onClick={e => e.stopPropagation()}>
                <div className="flex justify-between items-center mb-6">
                    <h2 className="text-3xl font-bold text-gray-900 dark:text-white">{t('modal.share.title')}</h2>
                    <button onClick={onClose} className="text-gray-400 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
                        <Icon className="h-8 w-8"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /></Icon>
                    </button>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {/* PC Version */}
                    <div className="text-center">
                        <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{t('modal.share.pc_version')}</h3>
                        <div className="flex justify-center mb-4">
                            <QRCode url={pcUrl} />
                        </div>
                        <div className="flex items-center bg-gray-100 dark:bg-gray-700 rounded-md">
                            <input type="text" readOnly value={pcUrl} className="flex-1 bg-transparent p-2 text-sm text-gray-600 dark:text-gray-300 focus:outline-none truncate" />
                            <button onClick={() => handleCopy(pcUrl, 'pc')} className="bg-brand-primary text-white font-semibold py-2 px-3 rounded-r-md hover:bg-brand-secondary text-sm">
                                {copiedLink === 'pc' ? t('modal.share.copied') : t('modal.share.copy')}
                            </button>
                        </div>
                    </div>
                    {/* Mobile Version */}
                    <div className="text-center">
                        <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">{t('modal.share.mobile_version')}</h3>
                         <div className="flex justify-center mb-4">
                            <QRCode url={mobileUrl} />
                        </div>
                        <div className="flex items-center bg-gray-100 dark:bg-gray-700 rounded-md">
                            <input type="text" readOnly value={mobileUrl} className="flex-1 bg-transparent p-2 text-sm text-gray-600 dark:text-gray-300 focus:outline-none truncate" />
                            <button onClick={() => handleCopy(mobileUrl, 'mobile')} className="bg-brand-primary text-white font-semibold py-2 px-3 rounded-r-md hover:bg-brand-secondary text-sm">
                                {copiedLink === 'mobile' ? t('modal.share.copied') : t('modal.share.copy')}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ShareModal;