web-bak/src/components/APKShareManager.tsx

import React, { useState, useEffect } from 'react'
import {
  Card,
  Button,
  Table,
  Typography,
  Space,
  message,
  Tag,
  Modal,
  QRCode,
  Tooltip,
  Alert,
  Row,
  Col
} from 'antd'
import {
  LinkOutlined,
  CopyOutlined,
  QrcodeOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined
} from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'
import apiClient from '../services/apiClient'

const { Text, Paragraph } = Typography

interface ShareInfo {
  sessionId: string
  filename: string
  shareUrl: string
  createdAt: string
  expiresAt: string
  isExpired: boolean
}

interface APKShareManagerProps {
  serverUrl: string
  onShareUrlGenerated?: (shareUrl: string) => void
}

const APKShareManager: React.FC<APKShareManagerProps> = ({ 
  serverUrl, 
  onShareUrlGenerated 
}) => {
  const [shares, setShares] = useState<ShareInfo[]>([])
  const [loading, setLoading] = useState(false)
  const [qrModalVisible, setQrModalVisible] = useState(false)
  const [currentShareUrl, setCurrentShareUrl] = useState('')
  const [currentFilename, setCurrentFilename] = useState('')

  // 获取分享链接列表
  const fetchShares = async () => {
    setLoading(true)
    try {
      const result = await apiClient.get<any>('/api/apk/shares')
      
      if (result.success) {
        setShares(result.shares || [])
        
        // 如果有新的分享链接，回调通知
        if (result.shares && result.shares.length > 0 && onShareUrlGenerated) {
          const latestShare = result.shares[result.shares.length - 1]
          onShareUrlGenerated(latestShare.shareUrl)
        }
      }
    } catch (error) {
      console.error('获取分享链接失败:', error)
      message.error('获取分享链接失败')
    } finally {
      setLoading(false)
    }
  }

  // 复制链接
  const copyShareUrl = async (shareUrl: string) => {
    try {
      await navigator.clipboard.writeText(shareUrl)
      message.success('分享链接已复制到剪贴板')
    } catch (error) {
      message.error('复制失败，请手动复制')
    }
  }

  // 显示二维码
  const showQRCode = (shareUrl: string, filename: string) => {
    setCurrentShareUrl(shareUrl)
    setCurrentFilename(filename)
    setQrModalVisible(true)
  }

  // 格式化时间
  const formatTime = (timeStr: string) => {
    const date = new Date(timeStr)
    return date.toLocaleString('zh-CN')
  }

  // 计算剩余时间
  const getRemainingTime = (expiresAt: string) => {
    const now = Date.now()
    const expiry = new Date(expiresAt).getTime()
    const remaining = expiry - now
    
    if (remaining <= 0) {
      return '已过期'
    }
    
    const minutes = Math.floor(remaining / 60000)
    const seconds = Math.floor((remaining % 60000) / 1000)
    
    if (minutes > 0) {
      return `${minutes}分${seconds}秒`
    } else {
      return `${seconds}秒`
    }
  }

  // 表格列定义
  const columns: ColumnsType<ShareInfo> = [
    {
      title: '文件名',
      dataIndex: 'filename',
      key: 'filename',
      render: (filename) => (
        <Space>
          <Text strong>{filename}</Text>
        </Space>
      )
    },
    {
      title: '状态',
      key: 'status',
      render: (_, record) => (
        <Tag 
          icon={record.isExpired ? <ClockCircleOutlined /> : <CheckCircleOutlined />}
          color={record.isExpired ? 'red' : 'green'}
        >
          {record.isExpired ? '已过期' : '活跃'}
        </Tag>
      )
    },
    {
      title: '剩余时间',
      key: 'remaining',
      render: (_, record) => (
        <Text type={record.isExpired ? 'danger' : 'success'}>
          {getRemainingTime(record.expiresAt)}
        </Text>
      )
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: (createdAt) => formatTime(createdAt)
    },
    {
      title: '过期时间',
      dataIndex: 'expiresAt',
      key: 'expiresAt',
      render: (expiresAt) => formatTime(expiresAt)
    },
    {
      title: '操作',
      key: 'actions',
      render: (_, record) => (
        <Space>
          <Tooltip title="显示二维码">
            <Button
              type="default"
              size="small"
              icon={<QrcodeOutlined />}
              onClick={() => showQRCode(record.shareUrl, record.filename)}
              disabled={record.isExpired}
            />
          </Tooltip>
        </Space>
      )
    }
  ]

  // 组件挂载时获取数据
  useEffect(() => {
    fetchShares()
    
    // 定时刷新分享列表
    const interval = setInterval(fetchShares, 10000) // 每10秒刷新一次
    
    return () => clearInterval(interval)
  }, [serverUrl])

  return (
    <Card 
      title={
        <Space>
          <LinkOutlined />
          <span>Cloudflare 分享链接</span>
        </Space>
      }
      extra={
        <Button 
          type="primary" 
          onClick={fetchShares}
          loading={loading}
        >
          刷新
        </Button>
      }
    >
      {shares.length === 0 ? (
        <Alert
          message="暂无分享链接"
          description="构建APK后将自动生成Cloudflare分享链接，有效期10分钟"
          type="info"
          showIcon
        />
      ) : (
        <>
          <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
            <Col span={24}>
              <Alert
                message="分享链接说明"
                description={
                  <div>
                    <p>• 每次构建APK后会自动生成Cloudflare临时分享链接</p>
                    <p>• 分享链接有效期为10分钟，过期后自动失效</p>
                    <p>• 可以通过二维码或链接分享给他人下载</p>
                    <p>• 建议及时下载，避免链接过期</p>
                  </div>
                }
                type="info"
                showIcon
              />
            </Col>
          </Row>
          
          <Table
            columns={columns}
            dataSource={shares || []}
            rowKey="sessionId"
            loading={loading}
            pagination={false}
            size="small"
          />
        </>
      )}

      {/* 二维码模态框 */}
      <Modal
        title={`${currentFilename} - 分享二维码`}
        open={qrModalVisible}
        onCancel={() => setQrModalVisible(false)}
        footer={[
          <Button key="copy" onClick={() => copyShareUrl(currentShareUrl)}>
            <CopyOutlined /> 复制链接
          </Button>,
          <Button key="close" onClick={() => setQrModalVisible(false)}>
            关闭
          </Button>
        ]}
        width={400}
      >
        <div style={{ textAlign: 'center', padding: '20px 0' }}>
          <QRCode value={currentShareUrl} size={200} />
          <Paragraph 
            copyable 
            style={{ 
              marginTop: 16, 
              wordBreak: 'break-all',
              fontSize: '12px' 
            }}
          >
            {currentShareUrl}
          </Paragraph>
          <Text type="secondary" style={{ fontSize: '12px' }}>
            使用手机扫描二维码或点击链接下载APK
          </Text>
        </div>
      </Modal>
    </Card>
  )
}

export default APKShareManager