'use client';

import React, { useState } from 'react';
import { Modal, Button, Spin, QRCode } from 'antd';
import { 
  Youtube, 
  Instagram, 
  Share2,
  Copy,
  ExternalLink,
  Loader2
} from 'lucide-react';
import { shareApiUrl } from '@/lib/env';

interface ShareModalProps {
  /** 是否显示弹框 */
  visible: boolean;
  /** 关闭弹框回调 */
  onClose: () => void;
  /** 项目信息 */
  project: {
    project_id: string;
    name?: string;
    final_video_url?: string;
    final_simple_video_url?: string;
  };
}

interface SharePlatform {
  id: string;
  name: string;
  icon: React.ReactNode;
  color: string;
  description: string;
  apiPath: string | null;
}

const sharePlatforms: SharePlatform[] = [
  {
    id: 'youtube',
    name: 'YouTube',
    icon: <Youtube className="w-6 h-6" />,
    color: 'text-red-500',
    description: 'Share to YouTube',
    apiPath: '/api/video-share/youtube/auth/url'
  },
  {
    id: 'tiktok',
    name: 'TikTok',
    icon: <Share2 className="w-6 h-6" />,
    color: 'text-black',
    description: 'Share to TikTok',
    apiPath: '/api/video-share/tiktok/auth/url'
  },
  {
    id: 'instagram',
    name: 'Instagram',
    icon: <Instagram className="w-6 h-6" />,
    color: 'text-pink-500',
    description: 'Share to Instagram',
    apiPath: null // 开发中
  },
  {
    id: 'reddit',
    name: 'Reddit',
    icon: <ExternalLink className="w-6 h-6" />,
    color: 'text-orange-500',
    description: 'Share to Reddit',
    apiPath: '/api/video-share/reddit/auth/url'
  },
  {
    id: 'twitter',
    name: 'X (Twitter)',
    icon: <ExternalLink className="w-6 h-6" />,
    color: 'text-blue-400',
    description: 'Share to X (Twitter)',
    apiPath: '/api/video-share/x/auth/url'
  },
  {
    id: 'copy',
    name: 'Copy Link',
    icon: <Copy className="w-6 h-6" />,
    color: 'text-gray-400',
    description: 'Copy video link to clipboard',
    apiPath: null // 本地功能
  }
];

export default function ShareModal({ visible, onClose, project }: ShareModalProps) {
  const [loadingPlatform, setLoadingPlatform] = useState<string | null>(null);
  /**
   * 获取用户ID
   */
  const getUserId = () => {
    const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
    return currentUser.id || currentUser.userId;
  };

  /**
   * 通用平台授权检查
   */
  const checkPlatformAuth = async (apiPath: string, platformName: string) => {
    const userId = getUserId();
    
    if (!userId) {
      console.error('用户ID不存在，请先登录');
      return;
    }
    
    const response = await fetch(`${shareApiUrl}${apiPath}?user_id=${userId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${localStorage.getItem('token') || ''}`
      }
    });
    
    const data = await response.json();
    
    if (data.successful && data.code === 0) {
      const { has_valid_token, auth_url, access_token } = data.data;
      
      if (!has_valid_token) {
        // 需要用户授权，跳转到授权页面
        window.open(auth_url, '_blank');
      } else {
        // 用户已授权，直接使用access_token进行第三方登录
        console.log(`${platformName}用户已授权，access_token:`, access_token);
        // TODO: 实现视频上传逻辑
      }
    } else {
      console.error(`获取${platformName}授权信息失败:`, data.message);
    }
  };

  /**
   * 处理平台分享
   */
  const handlePlatformShare = async (platformId: string) => {
    setLoadingPlatform(platformId);
    
    try {
      const platform = sharePlatforms.find(p => p.id === platformId);
      if (!platform) return;

      if (platformId === 'copy') {
        await handleCopyLink();
      } else if (platformId === 'instagram') {
        alert('Instagram分享功能正在开发中，敬请期待！');
      } else if (platform.apiPath) {
        await checkPlatformAuth(platform.apiPath, platform.name);
      } else {
        console.log(`Share to ${platformId} not implemented yet`);
      }
    } catch (error) {
      console.error(`Share to ${platformId} failed:`, error);
    } finally {
      setLoadingPlatform(null);
    }
  };


  /**
   * 复制链接处理
   */
  const handleCopyLink = async () => {
    try {
      const videoUrl = project.final_video_url || project.final_simple_video_url;
      if (videoUrl) {
        await navigator.clipboard.writeText(videoUrl);
        console.log('视频链接已复制到剪贴板');
        // TODO: 显示复制成功提示
      } else {
        console.error('视频链接不存在');
      }
    } catch (error) {
      console.error('复制链接失败:', error);
    }
  };

  // 获取视频链接用于生成二维码
  const getVideoUrl = () => {
    return project.final_video_url || project.final_simple_video_url || '';
  };

  return (
    <Modal
      title={
        <div className="flex items-center gap-2">
          <Share2 className="w-5 h-5 text-white" />
          <span className="text-white font-medium">Share Video</span>
        </div>
      }
      open={visible}
      onCancel={onClose}
      footer={null}
      width={720}
      className="share-modal"
      styles={{
        content: {
          backgroundColor: 'rgba(27, 27, 27, 0.8)',
          backdropFilter: 'blur(20px)',
          border: '1px solid rgba(255, 255, 255, 0.1)',
        },
        header: {
          backgroundColor: 'rgba(27, 27, 27, 0.6)',
          backdropFilter: 'blur(20px)',
          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
        },
        body: {
          backgroundColor: 'transparent',
        }
      }}
    >
      <div className="flex gap-6">
        {/* 左侧：二维码区域 */}
        <div className="flex-1 flex flex-col items-center justify-center space-y-4">
          <div className="bg-white/90 backdrop-blur-sm p-4 rounded-lg border border-white/20">
            <QRCode
              value={getVideoUrl()}
              size={160}
              color="#000000"
              bgColor="#ffffff"
              errorLevel="M"
            />
          </div>
        </div>

        {/* 右侧：平台选择区域 */}
        <div className="flex-1 space-y-4">
          <div className="text-center mb-4">
            <h4 className="text-white font-medium text-sm mb-2">Share to Platform</h4>
            <p className="text-white/60 text-xs">
              Choose a platform to share your video
            </p>
          </div>

          {/* 分享平台选择 */}
          <div className="grid grid-cols-2 gap-3">
            {sharePlatforms.map((platform) => (
              <Button
                key={platform.id}
                type="text"
                 className={`
                   h-16 flex flex-col items-center justify-center gap-2
                   bg-black/20 backdrop-blur-sm hover:bg-white/10 border border-white/20
                   transition-all duration-300 rounded-lg
                   ${loadingPlatform === platform.id ? 'opacity-50' : ''}
                 `}
                disabled={loadingPlatform !== null}
                onClick={() => handlePlatformShare(platform.id)}
              >
                <div className={`${platform.color} ${loadingPlatform === platform.id ? 'opacity-50' : ''}`}>
                  {loadingPlatform === platform.id ? (
                    <Loader2 className="w-6 h-6 animate-spin" />
                  ) : (
                    platform.icon
                  )}
                </div>
                <span className="text-white text-xs font-medium">
                  {platform.name}
                </span>
              </Button>
            ))}
          </div>
         </div>
       </div>

     </Modal>
   );
 }