import { useState } from 'react'
import { useLanguage } from '../contexts/LanguageContext'
import Toast from './Toast'
import './ShareModal.css'

interface ShareModalProps {
  isOpen: boolean
  onClose: () => void
  shareUrl: string
}

export default function ShareModal({ isOpen, onClose, shareUrl }: ShareModalProps) {
  const { t } = useLanguage()
  const [showToast, setShowToast] = useState(false)

  if (!isOpen) return null

  const handleCopy = () => {
    navigator.clipboard.writeText(shareUrl)
    setShowToast(true)
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>&times;</button>

        <div className="modal-header">
          <div className="modal-icon">🎉</div>
          <h2 className="modal-title">{t('测试完成', 'Test Completed')}</h2>
          <p className="modal-subtitle">
            {t('您的网络延迟测试已完成，分享此链接给他人查看结果。', 'Your network latency test is complete. Share this link to show results.')}
          </p>
        </div>

        <div className="modal-body">
          <div className="share-box">
            <input
              type="text"
              value={shareUrl}
              readOnly
              className="share-input"
              onClick={handleCopy}
            />
            <button className="copy-btn" onClick={handleCopy}>
              {t('复制', 'Copy')}
            </button>
          </div>

          <div className="warning-box">
            <span className="warning-icon">⚠️</span>
            <p className="warning-text">
              {t('结果链接随时可能失效，请根据需要保存测试结果。', 'Result link may expire at any time. Please save your test results as needed.')}
            </p>
          </div>
        </div>
      </div>

      <Toast
        message={t('已复制到剪贴板!', 'Copied to clipboard!')}
        isVisible={showToast}
        onClose={() => setShowToast(false)}
      />
    </div>
  )
}