iloom-flatten/src/components/plans/ShareModal.tsx

import React, { useState, useCallback, useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { Share2, Copy, Check, X, AlertTriangle, Building2, Eye, EyeOff, Link2, Send } from 'lucide-react';
import { useResponsive } from '../../hooks/useResponsive';
import { encryptShareParams } from '../../utils/shareCrypto';
import { supabase } from '../../supabase/client';

interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  planId: string;
  factoryType: 'textile' | 'washing';
  factoryId?: string;
  factoryName?: string;
  planProductName?: string;
  planColor?: string;
  planColorCode?: string;
  onDirectPush?: () => void; // 直接推送回调
}

// 合作关系类型
interface CompanyRelationship {
  id: string;
  purchaser_company_id: string;
  factory_company_id: string;
  factory_type: 'textile' | 'washing';
  status: 'active' | 'inactive';
}

// 分享链接状态
interface ShareLinkStatus {
  id: string;
  short_code: string;
  status: 'pending' | 'clicked' | 'confirmed' | 'rejected' | 'expired' | 'cancelled';
  clicked_at: string | null;
  responded_at: string | null;
  response_result: 'confirmed' | 'rejected' | null;
  reject_reason: string | null;
  expires_at: string;
  created_at: string;
}

export function ShareModal({ 
  isOpen, 
  onClose, 
  planId, 
  factoryType, 
  factoryId,
  factoryName, 
  planProductName, 
  planColor, 
  planColorCode,
  onDirectPush 
}: ShareModalProps) {
  const { isMobile } = useResponsive();
  const [copied, setCopied] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [recipientCompany, setRecipientCompany] = useState<string>('');
  const [confirmFactoryName, setConfirmFactoryName] = useState('');
  const [confirmCompanyName, setConfirmCompanyName] = useState('');
  const [error, setError] = useState('');
  const [shortCode, setShortCode] = useState<string>('');
  const [hideSensitive, setHideSensitive] = useState(false);
  const shortLinkGenerated = useRef(false);
  
  // 新流程状态
  const [hasRelationship, setHasRelationship] = useState<boolean | null>(null);
  const [isCheckingRelationship, setIsCheckingRelationship] = useState(false);
  const [existingLink, setExistingLink] = useState<ShareLinkStatus | null>(null);
  const [isGeneratingLink, setIsGeneratingLink] = useState(false);
  const [pushSuccess, setPushSuccess] = useState(false);

  // 获取当前用户的公司名称和检查合作关系
  useEffect(() => {
    const fetchData = async () => {
      if (!isOpen || !factoryId) return;
      
      setIsCheckingRelationship(true);
      
      const { data: { user } } = await supabase.auth.getUser();
      if (!user) {
        setIsCheckingRelationship(false);
        return;
      }

      // 获取当前用户的公司信息
      const { data: profile } = await supabase
        .from('profiles')
        .select('company_id')
        .eq('id', user.id)
        .single();

      if (profile?.company_id) {
        // 获取公司名称
        const { data: company } = await supabase
          .from('companies')
          .select('name')
          .eq('id', profile.company_id)
          .single();
        
        if (company) {
          setRecipientCompany(company.name);
        }

        // 检查是否已有合作关系
        const { data: relationship } = await supabase
          .from('company_relationships')
          .select('*')
          .eq('purchaser_company_id', profile.company_id)
          .eq('factory_company_id', factoryId)
          .eq('status', 'active')
          .maybeSingle();

        setHasRelationship(!!relationship);

        // 如果没有合作关系，检查是否已有待处理的分享链接
        if (!relationship) {
          const { data: link } = await supabase
            .from('share_links')
            .select('*')
            .eq('plan_id', planId)
            .eq('factory_type', factoryType)
            .in('status', ['pending', 'clicked'])
            .order('created_at', { ascending: false })
            .limit(1)
            .maybeSingle();

          if (link) {
            // 检查是否过期
            const expiresAt = link.expires_at ? new Date(link.expires_at) : null;
            if (expiresAt && expiresAt > new Date()) {
              setExistingLink(link as ShareLinkStatus);
              setShortCode(link.short_code);
            }
          }
        }
      }
      
      setIsCheckingRelationship(false);
    };

    fetchData();

    // 清理
    return () => {
      shortLinkGenerated.current = false;
      setShortCode('');
      setExistingLink(null);
      setHasRelationship(null);
      setPushSuccess(false);
    };
  }, [isOpen, planId, factoryType, factoryId]);

  // 生成短链（30分钟有效）
  const generateShortLink = useCallback(async () => {
    if (!factoryId) return;
    
    setIsGeneratingLink(true);
    
    const baseUrl = window.location.origin + window.location.pathname;
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let code = '';
    for (let i = 0; i < 6; i++) {
      code += chars.charAt(Math.floor(Math.random() * chars.length));
    }

    const { data: { user } } = await supabase.auth.getUser();
    if (user) {
      // 取消该计划之前未处理的链接
      await supabase
        .from('share_links')
        .update({ status: 'cancelled' })
        .eq('plan_id', planId)
        .eq('status', 'pending');

      // 创建新链接（30分钟过期）
      const { data, error } = await supabase.from('share_links').insert({
        short_code: code,
        plan_id: planId,
        factory_type: factoryType,
        hide_sensitive: hideSensitive,
        created_by: user.id,
        status: 'pending',
        expires_at: new Date(Date.now() + 30 * 60 * 1000).toISOString() // 30分钟
      }).select().single();

      if (!error && data) {
        setShortCode(code);
        setExistingLink(data as ShareLinkStatus);
      } else {
        setError('生成链接失败，请重试');
      }
    }
    
    setIsGeneratingLink(false);
  }, [planId, factoryType, hideSensitive, factoryId]);

  // 直接推送计划（已有合作关系）
  const handleDirectPush = async () => {
    if (!factoryId || !onDirectPush) return;
    
    setIsGeneratingLink(true);
    
    // 直接创建 plan_factories 关联
    const { error } = await supabase.from('plan_factories').insert({
      plan_id: planId,
      factory_id: factoryId,
      factory_type: factoryType
    });

    if (!error) {
      setPushSuccess(true);
      setTimeout(() => {
        onDirectPush();
        onClose();
      }, 1500);
    } else {
      setError('推送失败，请重试');
    }
    
    setIsGeneratingLink(false);
  };

  // 长链接 token（异步生成）
  const [longLinkToken, setLongLinkToken] = useState<string>('');

  useEffect(() => {
    if (isOpen && !hasRelationship) {
      encryptShareParams(planId, factoryType, hideSensitive).then(token => {
        setLongLinkToken(token);
      });
    }
  }, [isOpen, planId, factoryType, hideSensitive, hasRelationship]);

  // 生成分享链接
  const generateShareLink = useCallback(() => {
    const baseUrl = window.location.origin + window.location.pathname;
    if (shortCode) {
      return `${baseUrl}#/import?s=${shortCode}`;
    }
    if (longLinkToken) {
      return `${baseUrl}#/import?token=${longLinkToken}`;
    }
    return '';
  }, [shortCode, longLinkToken]);

  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]);

  // 检查链接状态
  const checkLinkStatus = async () => {
    if (!existingLink) return;
    
    const { data } = await supabase
      .from('share_links')
      .select('*')
      .eq('id', existingLink.id)
      .single();
    
    if (data) {
      setExistingLink(data as ShareLinkStatus);
    }
  };

  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"
      >
        {/* 加载中 */}
        {isCheckingRelationship && (
          <div className="flex flex-col items-center justify-center py-8">
            <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mb-4" />
            <p className="text-gray-600">检查合作关系...</p>
          </div>
        )}

        {/* 已有合作关系 - 直接推送 */}
        {!isCheckingRelationship && hasRelationship === true && (
          <>
            <div className="flex items-center gap-2 sm:gap-3 mb-4">
              <div className="w-9 h-9 sm:w-10 sm:h-10 bg-emerald-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <Send className="w-4 h-4 sm:w-5 sm:h-5 text-emerald-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">已合作工厂，计划将直接推送</p>
              </div>
            </div>

            <div className="bg-emerald-50 rounded-xl p-4 mb-4 border border-emerald-200">
              <div className="flex items-center gap-2 mb-2">
                <Building2 className="w-4 h-4 text-emerald-600" />
                <span className="text-sm font-medium text-emerald-800">目标工厂</span>
              </div>
              <p className="text-gray-900 font-medium">{factoryName || '未指定'}</p>
              <p className="text-xs text-emerald-600 mt-1">✓ 已建立合作关系</p>
            </div>

            {pushSuccess && (
              <div className="bg-emerald-100 rounded-xl p-3 mb-4 border border-emerald-200">
                <p className="text-sm text-emerald-700 text-center">✓ 计划推送成功！</p>
              </div>
            )}

            {error && (
              <div className="bg-red-50 rounded-lg p-3 mb-4 border border-red-100">
                <p className="text-sm text-red-600">{error}</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={handleDirectPush}
                disabled={isGeneratingLink || pushSuccess}
                className="flex-1 py-2 sm:py-2.5 bg-emerald-500 hover:bg-emerald-600 disabled:bg-gray-300 rounded-xl text-white text-xs sm:text-sm font-medium transition-colors flex items-center justify-center gap-2"
              >
                {isGeneratingLink ? (
                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                ) : (
                  <Send size={isMobile ? 14 : 16} />
                )}
                {pushSuccess ? '已推送' : '直接推送'}
              </button>
            </div>
          </>
        )}

        {/* 无合作关系 - 生成分享链接 */}
        {!isCheckingRelationship && hasRelationship === false && (
          <>
            {!showConfirm ? (
              <>
                <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">
                    <Link2 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">首次合作，需生成链接邀请</p>
                  </div>
                </div>

                {/* 工厂信息 */}
                <div className="bg-amber-50 rounded-xl p-3 mb-3 border border-amber-200">
                  <div className="flex items-center gap-2 mb-1">
                    <Building2 className="w-4 h-4 text-amber-600" />
                    <span className="text-xs text-amber-600 font-medium">目标工厂</span>
                  </div>
                  <p className="text-sm text-gray-900 font-medium">{factoryName || '未指定'}</p>
                  <p className="text-xs text-amber-600 mt-1">⚠ 未建立合作关系</p>
                </div>

                {/* 已有链接状态显示 */}
                {existingLink && (
                  <div className={`rounded-xl p-3 mb-3 border ${
                    existingLink.status === 'pending' ? 'bg-blue-50 border-blue-200' :
                    existingLink.status === 'clicked' ? 'bg-yellow-50 border-yellow-200' :
                    'bg-gray-50 border-gray-200'
                  }`}>
                    <div className="flex items-center justify-between">
                      <span className="text-sm font-medium text-gray-800">链接状态</span>
                      <span className={`text-xs px-2 py-0.5 rounded ${
                        existingLink.status === 'pending' ? 'bg-blue-100 text-blue-700' :
                        existingLink.status === 'clicked' ? 'bg-yellow-100 text-yellow-700' :
                        'bg-gray-100 text-gray-600'
                      }`}>
                        {existingLink.status === 'pending' && '待点击'}
                        {existingLink.status === 'clicked' && '已点击'}
                        {existingLink.status === 'confirmed' && '已确认'}
                        {existingLink.status === 'rejected' && '已拒绝'}
                      </span>
                    </div>
                    {existingLink.status === 'clicked' && (
                      <p className="text-xs text-yellow-600 mt-1">
                        工厂已查看，等待确认...
                      </p>
                    )}
                    {existingLink.status === 'rejected' && existingLink.reject_reason && (
                      <p className="text-xs text-red-600 mt-1">
                        拒绝原因：{existingLink.reject_reason}
                      </p>
                    )}
                  </div>
                )}

                {/* 隐藏敏感信息开关 */}
                <div className="bg-gray-50 rounded-xl p-3 sm:p-4 mb-3 sm:mb-4 border border-gray-200">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      {hideSensitive ? <EyeOff className="w-4 h-4 text-amber-500" /> : <Eye className="w-4 h-4 text-emerald-500" />}
                      <div>
                        <p className="text-sm font-medium text-gray-800">隐藏成品信息</p>
                        <p className="text-xs text-gray-500">成品名称、颜色、色号将不在链接中显示</p>
                      </div>
                    </div>
                    <button
                      onClick={() => setHideSensitive(!hideSensitive)}
                      className={`relative w-11 h-6 rounded-full transition-colors duration-200 ${hideSensitive ? 'bg-amber-500' : 'bg-gray-300'}`}
                    >
                      <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform duration-200 ${hideSensitive ? 'translate-x-5' : 'translate-x-0'}`} />
                    </button>
                  </div>
                  {hideSensitive && (
                    <div className="mt-2 pt-2 border-t border-gray-200">
                      <p className="text-xs text-amber-600">以下信息将被隐藏：</p>
                      <div className="flex flex-wrap gap-1 mt-1">
                        {planProductName && <span className="px-2 py-0.5 text-xs bg-amber-50 text-amber-700 rounded">成品名称: {planProductName}</span>}
                        {planColor && <span className="px-2 py-0.5 text-xs bg-amber-50 text-amber-700 rounded">颜色: {planColor}</span>}
                        {planColorCode && <span className="px-2 py-0.5 text-xs bg-amber-50 text-amber-700 rounded">色号: {planColorCode}</span>}
                      </div>
                    </div>
                  )}
                </div>

                {/* 链接显示 */}
                {shortCode && (
                  <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 text-gray-500 mb-1">分享链接（30分钟内有效）</p>
                    <p className="text-xs sm:text-sm text-gray-700 break-all font-mono">{link}</p>
                  </div>
                )}

                {error && (
                  <div className="bg-red-50 rounded-lg p-2 border border-red-100 mb-3">
                    <p className="text-xs text-red-600">{error}</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>
                  {shortCode ? (
                    <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>
                  ) : (
                    <button
                      onClick={generateShortLink}
                      disabled={isGeneratingLink}
                      className="flex-1 py-2 sm:py-2.5 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 rounded-xl text-white text-xs sm:text-sm font-medium transition-colors flex items-center justify-center gap-2"
                    >
                      {isGeneratingLink ? (
                        <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                      ) : (
                        <Link2 size={isMobile ? 14 : 16} />
                      )}
                      生成链接
                    </button>
                  )}
                </div>
              </>
            ) : (
              <>
                <div className="flex items-center gap-2 sm:gap-3 mb-4">
                  <div className="w-9 h-9 sm:w-10 sm:h-10 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
                    <AlertTriangle className="w-4 h-4 sm:w-5 sm:h-5 text-amber-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">请确认分享信息</p>
                  </div>
                </div>

                <div className="space-y-3 mb-4">
                  <div className="bg-blue-50 rounded-xl p-3 border border-blue-100">
                    <div className="flex items-center gap-2 mb-1">
                      <Building2 className="w-4 h-4 text-blue-600" />
                      <span className="text-xs text-blue-600 font-medium">目标工厂</span>
                    </div>
                    <p className="text-sm text-gray-900 font-medium">{factoryName || '未指定'}</p>
                  </div>

                  <div className="bg-green-50 rounded-xl p-3 border border-green-100">
                    <div className="flex items-center gap-2 mb-1">
                      <Building2 className="w-4 h-4 text-green-600" />
                      <span className="text-xs text-green-600 font-medium">您的公司</span>
                    </div>
                    <p className="text-sm text-gray-900 font-medium">{recipientCompany || '加载中...'}</p>
                  </div>

                  <div className="space-y-2">
                    <div>
                      <label className="text-xs text-gray-500 mb-1 block">请输入工厂名称确认</label>
                      <input
                        type="text"
                        value={confirmFactoryName}
                        onChange={(e) => setConfirmFactoryName(e.target.value)}
                        placeholder="输入工厂名称"
                        className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500"
                      />
                    </div>
                    <div>
                      <label className="text-xs text-gray-500 mb-1 block">请输入对方公司名称确认</label>
                      <input
                        type="text"
                        value={confirmCompanyName}
                        onChange={(e) => setConfirmCompanyName(e.target.value)}
                        placeholder="输入对方公司名称"
                        className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500"
                      />
                    </div>
                  </div>

                  {error && (
                    <div className="bg-red-50 rounded-lg p-2 border border-red-100">
                      <p className="text-xs text-red-600">{error}</p>
                    </div>
                  )}
                </div>

                <div className="flex gap-2 sm:gap-3">
                  <button
                    onClick={() => setShowConfirm(false)}
                    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={() => setShowConfirm(false)}
                    className="flex-1 py-2 sm:py-2.5 bg-amber-500 hover:bg-amber-600 rounded-xl text-white text-xs sm:text-sm font-medium transition-colors"
                  >
                    确认分享
                  </button>
                </div>
              </>
            )}
          </>
        )}
      </motion.div>
    </div>
  );
}