import React, { useState, useCallback } from 'react';
import { motion } from 'framer-motion';
import { Share2, Copy, Check, X } from 'lucide-react';
import { useResponsive } from '../../hooks/useResponsive';
import { encryptShareParams } from '../../utils/shareCrypto';

interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  planId: string;
  factoryType: 'textile' | 'washing';
}

export function ShareModal({ isOpen, onClose, planId, factoryType }: ShareModalProps) {
  const { isMobile } = useResponsive();
  const [copied, setCopied] = useState(false);

  const generateShareLink = useCallback(() => {
    const baseUrl = window.location.origin + window.location.pathname;
    const token = encryptShareParams(planId, factoryType);
    return `${baseUrl}#/import?token=${token}`;
  }, [planId, factoryType]);

  const handleCopy = useCallback(async () => {
    const link = generateShareLink();
    try {
      await navigator.clipboard.writeText(link);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // 降级方案
      const textarea = document.createElement('textarea');
      textarea.value = link;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  }, [generateShareLink]);

  if (!isOpen) return null;

  const link = generateShareLink();
  const factoryLabel = factoryType === 'textile' ? '织布厂' : '水洗厂';

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-3 sm:p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.95 }}
        className="bg-white rounded-2xl p-4 sm:p-6 w-full max-w-md shadow-2xl"
      >
        <div className="flex items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
          <div className="w-9 h-9 sm:w-10 sm:h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
            <Share2 className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" />
          </div>
          <div className="min-w-0">
            <h3 className="text-base sm:text-lg font-semibold text-gray-900">分享链接</h3>
            <p className="text-xs sm:text-sm text-gray-500">发送给{factoryLabel}</p>
          </div>
        </div>

        <div className="bg-gray-50 rounded-xl p-2.5 sm:p-3 mb-3 sm:mb-4 border border-gray-200">
          <p className="text-xs sm:text-sm text-gray-700 break-all font-mono">{link}</p>
        </div>

        <div className="flex gap-2 sm:gap-3">
          <button
            onClick={onClose}
            className="flex-1 py-2 sm:py-2.5 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 text-xs sm:text-sm font-medium transition-colors"
          >
            关闭
          </button>
          <button
            onClick={handleCopy}
            className={`flex-1 py-2 sm:py-2.5 rounded-xl text-white flex items-center justify-center gap-1.5 sm:gap-2 transition-colors text-xs sm:text-sm font-medium ${
              copied ? 'bg-emerald-500' : 'bg-blue-600 hover:bg-blue-700'
            }`}
          >
            {copied ? <Check size={isMobile ? 14 : 16} /> : <Copy size={isMobile ? 14 : 16} />}
            {copied ? '已复制' : '复制链接'}
          </button>
        </div>
      </motion.div>
    </div>
  );
}