import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Card,
  Descriptions,
  Button,
  Tag,
  Typography,
  Space,
  Modal,
  Input,
  message,
  Spin,
  Progress,
  Tabs,
  Image,
  Select,
  Form,
  Alert,
  Divider,
  Upload,
  Rate,
  Timeline,
  Statistic,
  Row,
  Col,
  Avatar,
} from 'antd';
import {
  ArrowLeftOutlined,
  FileTextOutlined,
  DownloadOutlined,
  EyeOutlined,
  EditOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  ExclamationCircleOutlined,
  FileOutlined,
  TranslationOutlined,
  UserOutlined,
  CalendarOutlined,
  DollarOutlined,
  StarOutlined,
  SettingOutlined,
  MessageOutlined,
  ReloadOutlined,
  DeleteOutlined,
  AuditOutlined,
  UploadOutlined,
  SwapOutlined,
} from '@ant-design/icons';
import { DocumentTranslation } from '../../types';
import { database } from '../../utils/database';
import { api } from '../../utils/api';

const { Title, Text, Paragraph } = Typography;
const { TextArea } = Input;
const { TabPane } = Tabs;
const { Option } = Select;

interface DocumentDetailProps {}

const DocumentDetail: React.FC<DocumentDetailProps> = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  
  const [document, setDocument] = useState<DocumentTranslation | null>(null);
  const [loading, setLoading] = useState(true);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [statusModalVisible, setStatusModalVisible] = useState(false);
  const [reassignModalVisible, setReassignModalVisible] = useState(false);
  const [refundModalVisible, setRefundModalVisible] = useState(false);
  const [adminNoteModalVisible, setAdminNoteModalVisible] = useState(false);
  const [retranslateModalVisible, setRetranslateModalVisible] = useState(false);
  const [form] = Form.useForm();
  const [statusForm] = Form.useForm();
  const [reassignForm] = Form.useForm();
  const [refundForm] = Form.useForm();
  const [noteForm] = Form.useForm();
  const [retranslateForm] = Form.useForm();

  useEffect(() => {
    if (id) {
      loadDocumentDetails();
    }
  }, [id]);

  const loadDocumentDetails = async () => {
    try {
      setLoading(true);
      await database.connect();
      
      // 模拟获取文档详情（管理员视角）
      const mockDocument: DocumentTranslation = {
        id: id!,
        userId: 'user_1',
        fileName: 'business_contract.pdf',
        originalSize: 2048576,
        fileUrl: '/documents/business_contract.pdf',
        translatedFileUrl: '/documents/business_contract_translated.pdf',
        sourceLanguage: 'zh-CN',
        targetLanguage: 'en-US',
        status: 'completed',
        progress: 100,
        quality: 'professional',
        urgency: 'normal',
        estimatedTime: 120,
        actualTime: 105,
        cost: 128.50,
        translatorId: 'translator_2',
        translatorName: '王译员',
        rating: 4,
        feedback: '翻译质量很好，术语准确，但有个别地方可以更流畅。',
        createdAt: '2024-01-15T09:00:00Z',
        completedAt: '2024-01-15T10:45:00Z',
        // 管理员相关字段
        adminNotes: '客户对翻译质量满意，已完成交付',
        paymentStatus: 'paid',
        refundAmount: 0,
        qualityScore: 92,
        issues: [],
        retranslationCount: 0,
        clientName: '李先生',
        clientEmail: 'li@example.com',
        clientPhone: '+86 138 0013 8000',
      };

      setDocument(mockDocument);
      
      // 填充表单数据
      form.setFieldsValue({
        fileName: mockDocument.fileName,
        quality: mockDocument.quality,
        urgency: mockDocument.urgency,
        cost: mockDocument.cost,
        translatorName: mockDocument.translatorName,
      });
      
      statusForm.setFieldsValue({
        status: mockDocument.status,
      });
      
    } catch (error) {
      console.error('加载文档详情失败:', error);
      message.error('加载文档详情失败');
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = async (values: any) => {
    if (!document) return;
    
    try {
      const updatedDocument = {
        ...document,
        ...values,
        updatedAt: new Date().toISOString(),
      };
      
      setDocument(updatedDocument);
      setEditModalVisible(false);
      message.success('文档信息更新成功');
    } catch (error) {
      message.error('更新文档信息失败');
    }
  };

  const handleStatusChange = async (values: any) => {
    if (!document) return;
    
    try {
      const updatedDocument = {
        ...document,
        status: values.status,
        updatedAt: new Date().toISOString(),
      };
      
      setDocument(updatedDocument);
      setStatusModalVisible(false);
      message.success('状态更新成功');
    } catch (error) {
      message.error('更新状态失败');
    }
  };

  const handleReassign = async (values: any) => {
    if (!document) return;
    
    try {
      const updatedDocument = {
        ...document,
        translatorId: values.translatorId,
        translatorName: values.translatorName,
        status: 'in_progress' as const,
        updatedAt: new Date().toISOString(),
      };
      
      setDocument(updatedDocument);
      setReassignModalVisible(false);
      message.success('译员重新分配成功');
    } catch (error) {
      message.error('重新分配译员失败');
    }
  };

  const handleRefund = async (values: any) => {
    if (!document) return;
    
    try {
      const refundAmount = values.amount || document.cost;
      
      // 模拟退款API调用
      await api.refundPayment(`payment_${document.id}`, refundAmount);
      
      const updatedDocument = {
        ...document,
        refundAmount: refundAmount,
        paymentStatus: 'refunded' as const,
        updatedAt: new Date().toISOString(),
      };
      
      setDocument(updatedDocument);
      setRefundModalVisible(false);
      message.success('退款处理成功');
    } catch (error) {
      message.error('退款处理失败');
    }
  };

  const handleAddAdminNote = async (values: any) => {
    if (!document) return;
    
    try {
      const updatedDocument = {
        ...document,
        adminNotes: values.note,
        updatedAt: new Date().toISOString(),
      };
      
      setDocument(updatedDocument);
      setAdminNoteModalVisible(false);
      message.success('管理员备注添加成功');
    } catch (error) {
      message.error('添加备注失败');
    }
  };

  const handleRetranslate = async (values: any) => {
    if (!document) return;
    
    try {
      const updatedDocument = {
        ...document,
        retranslationCount: (document.retranslationCount || 0) + 1,
        status: 'in_progress' as const,
        progress: 0,
        adminNotes: `${document.adminNotes || ''}\n重新翻译原因: ${values.reason}`,
        updatedAt: new Date().toISOString(),
      };
      
      setDocument(updatedDocument);
      setRetranslateModalVisible(false);
      message.success('重新翻译任务已创建');
    } catch (error) {
      message.error('创建重新翻译任务失败');
    }
  };

  const getStatusColor = (status: string) => {
    const colors = {
      pending: 'orange',
      in_progress: 'blue',
      completed: 'green',
      cancelled: 'red',
      failed: 'red',
    };
    return colors[status as keyof typeof colors] || 'default';
  };

  const getStatusText = (status: string) => {
    const texts = {
      pending: '等待处理',
      in_progress: '翻译中',
      completed: '已完成',
      cancelled: '已取消',
      failed: '翻译失败',
    };
    return texts[status as keyof typeof texts] || status;
  };

  const getPaymentStatusColor = (status: string) => {
    const colors = {
      pending: 'orange',
      paid: 'green',
      refunded: 'purple',
      failed: 'red',
    };
    return colors[status as keyof typeof colors] || 'default';
  };

  const getPaymentStatusText = (status: string) => {
    const texts = {
      pending: '待支付',
      paid: '已支付',
      refunded: '已退款',
      failed: '支付失败',
    };
    return texts[status as keyof typeof texts] || status;
  };

  const getQualityText = (quality: string) => {
    const texts = {
      basic: '基础版',
      professional: '专业版',
      premium: '高级版',
    };
    return texts[quality as keyof typeof texts] || quality;
  };

  const getUrgencyText = (urgency: string) => {
    const texts = {
      normal: '普通',
      urgent: '加急',
      emergency: '特急',
    };
    return texts[urgency as keyof typeof texts] || urgency;
  };

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />
        <div style={{ marginTop: '16px' }}>加载文档详情...</div>
      </div>
    );
  }

  if (!document) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <div>文档记录不存在</div>
        <Button type="primary" onClick={() => navigate('/documents')} style={{ marginTop: '16px' }}>
          返回文档列表
        </Button>
      </div>
    );
  }

  return (
    <div style={{ padding: '24px' }}>
      {/* 头部导航 */}
      <div style={{ marginBottom: '24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Button
            icon={<ArrowLeftOutlined />}
            onClick={() => navigate('/documents')}
            style={{ marginRight: '16px' }}
          >
            返回
          </Button>
          <Title level={2} style={{ display: 'inline-block', margin: 0 }}>
            文档详情 #{document.id}
          </Title>
        </div>
        
        {/* 管理员操作按钮 */}
        <Space>
          <Button
            icon={<EditOutlined />}
            onClick={() => setEditModalVisible(true)}
          >
            编辑信息
          </Button>
          <Button
            icon={<SettingOutlined />}
            onClick={() => setStatusModalVisible(true)}
          >
            更改状态
          </Button>
          <Button
            icon={<UserOutlined />}
            onClick={() => setReassignModalVisible(true)}
            disabled={document.status === 'completed'}
          >
            重新分配
          </Button>
          <Button
            icon={<ReloadOutlined />}
            onClick={() => setRetranslateModalVisible(true)}
            disabled={document.status !== 'completed'}
          >
            重新翻译
          </Button>
          <Button
            icon={<DollarOutlined />}
            onClick={() => setRefundModalVisible(true)}
            disabled={document.paymentStatus !== 'paid'}
          >
            处理退款
          </Button>
          <Button
            icon={<MessageOutlined />}
            onClick={() => setAdminNoteModalVisible(true)}
          >
            添加备注
          </Button>
        </Space>
      </div>

      {/* 系统状态提醒 */}
      {document.issues && document.issues.length > 0 && (
        <Alert
          message="系统检测到问题"
          description={document.issues.join(', ')}
          type="warning"
          showIcon
          style={{ marginBottom: '24px' }}
        />
      )}

      {/* 基本信息卡片 */}
      <Card title="文档信息" style={{ marginBottom: '24px' }}>
        <Descriptions column={3} bordered>
          <Descriptions.Item label="文件名" span={2}>
            <Space>
              <FileOutlined />
              {document.fileName}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="文件大小" span={1}>
            {formatFileSize(document.originalSize)}
          </Descriptions.Item>
          <Descriptions.Item label="状态" span={1}>
            <Tag color={getStatusColor(document.status)}>
              {getStatusText(document.status)}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="支付状态" span={1}>
            <Tag color={getPaymentStatusColor(document.paymentStatus)}>
              {getPaymentStatusText(document.paymentStatus)}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item label="翻译进度" span={1}>
            <Progress percent={document.progress} size="small" />
          </Descriptions.Item>
          <Descriptions.Item label="客户姓名" span={1}>
            <Space>
              <UserOutlined />
              {document.clientName}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="客户邮箱" span={1}>
            {document.clientEmail}
          </Descriptions.Item>
          <Descriptions.Item label="客户电话" span={1}>
            {document.clientPhone}
          </Descriptions.Item>
          <Descriptions.Item label="源语言" span={1}>
            {document.sourceLanguage}
          </Descriptions.Item>
          <Descriptions.Item label="目标语言" span={1}>
            {document.targetLanguage}
          </Descriptions.Item>
          <Descriptions.Item label="翻译质量" span={1}>
            {getQualityText(document.quality)}
          </Descriptions.Item>
          <Descriptions.Item label="紧急程度" span={1}>
            {getUrgencyText(document.urgency)}
          </Descriptions.Item>
          <Descriptions.Item label="译员" span={1}>
            <Space>
              <UserOutlined />
              {document.translatorName}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="重译次数" span={1}>
            <Text type={(document.retranslationCount || 0) > 0 ? 'warning' : 'secondary'}>
              {document.retranslationCount || 0} 次
            </Text>
          </Descriptions.Item>
          <Descriptions.Item label="创建时间" span={1}>
            <Space>
              <CalendarOutlined />
              {new Date(document.createdAt).toLocaleString()}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="完成时间" span={1}>
            <Space>
              <CalendarOutlined />
              {document.completedAt ? new Date(document.completedAt).toLocaleString() : '-'}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="预计时间" span={1}>
            {document.estimatedTime} 分钟
          </Descriptions.Item>
          <Descriptions.Item label="实际时间" span={1}>
            {document.actualTime || '-'} 分钟
          </Descriptions.Item>
          <Descriptions.Item label="费用" span={1}>
            <Space>
              <DollarOutlined />
              <Text strong>¥{document.cost.toFixed(2)}</Text>
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="退款金额" span={1}>
            <Space>
              <DollarOutlined />
              <Text type={document.refundAmount > 0 ? 'danger' : 'secondary'}>
                ¥{document.refundAmount.toFixed(2)}
              </Text>
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="质量评分" span={1}>
            <Space>
              <AuditOutlined />
              <Text strong style={{ color: document.qualityScore >= 90 ? '#52c41a' : document.qualityScore >= 70 ? '#faad14' : '#ff4d4f' }}>
                {document.qualityScore}/100
              </Text>
            </Space>
          </Descriptions.Item>
        </Descriptions>
        
        {document.adminNotes && (
          <div style={{ marginTop: '16px' }}>
            <Text strong>管理员备注：</Text>
            <Paragraph style={{ marginTop: '8px', background: '#f6f6f6', padding: '12px', borderRadius: '6px' }}>
              {document.adminNotes}
            </Paragraph>
          </div>
        )}
      </Card>

      {/* 文件操作卡片 */}
      <Card 
        title={
          <Space>
            <FileTextOutlined />
            文件管理
          </Space>
        }
        style={{ marginBottom: '24px' }}
      >
        <div style={{ display: 'flex', justifyContent: 'space-around', textAlign: 'center', padding: '20px' }}>
          <div>
            <Button
              type="primary"
              size="large"
              icon={<EyeOutlined />}
              onClick={() => message.success('预览原文件...')}
              style={{ marginBottom: '8px' }}
            >
              预览原文件
            </Button>
            <div>
              <Text type="secondary">原始文档</Text>
            </div>
          </div>
          
          <div>
            <Button
              size="large"
              icon={<DownloadOutlined />}
              onClick={() => message.success('下载原文件中...')}
              style={{ marginBottom: '8px' }}
            >
              下载原文件
            </Button>
            <div>
              <Text type="secondary">{formatFileSize(document.originalSize)}</Text>
            </div>
          </div>
          
          {document.translatedFileUrl && (
            <>
              <div>
                <Button
                  type="primary"
                  size="large"
                  icon={<EyeOutlined />}
                  onClick={() => message.success('预览译文...')}
                  style={{ marginBottom: '8px' }}
                >
                  预览译文
                </Button>
                <div>
                  <Text type="secondary">翻译文档</Text>
                </div>
              </div>
              
              <div>
                <Button
                  size="large"
                  icon={<DownloadOutlined />}
                  onClick={() => message.success('下载译文中...')}
                  style={{ marginBottom: '8px' }}
                >
                  下载译文
                </Button>
                <div>
                  <Text type="secondary">已完成</Text>
                </div>
              </div>
            </>
          )}
        </div>
      </Card>

      {/* 详细内容标签页 */}
      <Card>
        <Tabs defaultActiveKey="progress">
          <TabPane
            tab={
              <Space>
                <ClockCircleOutlined />
                进度追踪
              </Space>
            }
            key="progress"
          >
            <div style={{ padding: '20px' }}>
              <Timeline>
                <Timeline.Item color="green">
                  <div>
                    <Text strong>文档上传</Text>
                    <div style={{ color: '#999', fontSize: '12px' }}>
                      {new Date(document.createdAt).toLocaleString()}
                    </div>
                  </div>
                </Timeline.Item>
                <Timeline.Item color="blue">
                  <div>
                    <Text strong>分配译员</Text>
                    <div style={{ color: '#999', fontSize: '12px' }}>
                      译员：{document.translatorName}
                    </div>
                  </div>
                </Timeline.Item>
                <Timeline.Item color={document.status === 'completed' ? 'green' : 'blue'}>
                  <div>
                    <Text strong>翻译进行中</Text>
                    <div style={{ color: '#999', fontSize: '12px' }}>
                      进度：{document.progress}%
                    </div>
                  </div>
                </Timeline.Item>
                {document.status === 'completed' && (
                  <Timeline.Item color="green">
                    <div>
                      <Text strong>翻译完成</Text>
                      <div style={{ color: '#999', fontSize: '12px' }}>
                        {document.completedAt && new Date(document.completedAt).toLocaleString()}
                      </div>
                    </div>
                  </Timeline.Item>
                )}
              </Timeline>
            </div>
          </TabPane>
          
          <TabPane
            tab={
              <Space>
                <StarOutlined />
                用户评价
              </Space>
            }
            key="rating"
          >
            <div style={{ padding: '20px' }}>
              {document.rating ? (
                <>
                  <div style={{ marginBottom: '20px' }}>
                    <Text strong>服务评分：</Text>
                    <Rate disabled value={document.rating} style={{ marginLeft: '8px' }} />
                    <Text style={{ marginLeft: '8px' }}>
                      ({document.rating}/5 分)
                    </Text>
                  </div>
                  
                  {document.feedback && (
                    <div>
                      <Text strong>用户反馈：</Text>
                      <Paragraph style={{ marginTop: '8px' }}>
                        {document.feedback}
                      </Paragraph>
                    </div>
                  )}
                </>
              ) : (
                <div style={{ textAlign: 'center', color: '#999', padding: '50px' }}>
                  暂无用户评价
                </div>
              )}
            </div>
          </TabPane>
          
          <TabPane
            tab={
              <Space>
                <AuditOutlined />
                质量分析
              </Space>
            }
            key="quality"
          >
            <div style={{ padding: '20px' }}>
              <Descriptions column={2}>
                <Descriptions.Item label="质量评分">
                  <Progress
                    type="circle"
                    percent={document.qualityScore}
                    width={80}
                    strokeColor={document.qualityScore >= 90 ? '#52c41a' : document.qualityScore >= 70 ? '#faad14' : '#ff4d4f'}
                  />
                </Descriptions.Item>
                <Descriptions.Item label="系统检测">
                  {document.issues && document.issues.length > 0 ? (
                    <div>
                      {document.issues.map((issue, index) => (
                        <Tag key={index} color="red" style={{ marginBottom: '4px' }}>
                          {issue}
                        </Tag>
                      ))}
                    </div>
                  ) : (
                    <Tag color="green">无异常</Tag>
                  )}
                </Descriptions.Item>
                <Descriptions.Item label="时间效率">
                  <Statistic
                    title="实际用时/预计用时"
                    value={document.actualTime ? (document.actualTime / document.estimatedTime) * 100 : 0}
                    precision={1}
                    suffix="%"
                    valueStyle={{ color: (document.actualTime || 0) <= document.estimatedTime ? '#3f8600' : '#cf1322' }}
                  />
                </Descriptions.Item>
                <Descriptions.Item label="重译情况">
                  <Text type={(document.retranslationCount || 0) > 0 ? 'warning' : 'secondary'}>
                    {document.retranslationCount || 0} 次重译
                  </Text>
                </Descriptions.Item>
              </Descriptions>
            </div>
          </TabPane>
        </Tabs>
      </Card>

      {/* 编辑信息弹窗 */}
      <Modal
        title="编辑文档信息"
        visible={editModalVisible}
        onCancel={() => setEditModalVisible(false)}
        footer={null}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleEdit}
        >
          <Form.Item
            name="fileName"
            label="文件名"
            rules={[{ required: true, message: '请输入文件名' }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="quality"
            label="翻译质量"
            rules={[{ required: true, message: '请选择翻译质量' }]}
          >
            <Select>
              <Option value="basic">基础版</Option>
              <Option value="professional">专业版</Option>
              <Option value="premium">高级版</Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="urgency"
            label="紧急程度"
            rules={[{ required: true, message: '请选择紧急程度' }]}
          >
            <Select>
              <Option value="normal">普通</Option>
              <Option value="urgent">加急</Option>
              <Option value="emergency">特急</Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="cost"
            label="费用"
            rules={[{ required: true, message: '请输入费用' }]}
          >
            <Input type="number" addonAfter="元" />
          </Form.Item>
          
          <Form.Item
            name="translatorName"
            label="译员姓名"
          >
            <Input />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setEditModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 更改状态弹窗 */}
      <Modal
        title="更改文档状态"
        visible={statusModalVisible}
        onCancel={() => setStatusModalVisible(false)}
        footer={null}
      >
        <Form
          form={statusForm}
          layout="vertical"
          onFinish={handleStatusChange}
        >
          <Form.Item
            name="status"
            label="新状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select>
              <Option value="pending">等待处理</Option>
              <Option value="in_progress">翻译中</Option>
              <Option value="completed">已完成</Option>
              <Option value="cancelled">已取消</Option>
              <Option value="failed">翻译失败</Option>
            </Select>
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setStatusModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                更新状态
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 重新分配译员弹窗 */}
      <Modal
        title="重新分配译员"
        visible={reassignModalVisible}
        onCancel={() => setReassignModalVisible(false)}
        footer={null}
      >
        <Form
          form={reassignForm}
          layout="vertical"
          onFinish={handleReassign}
        >
          <Form.Item
            name="translatorId"
            label="选择译员"
            rules={[{ required: true, message: '请选择译员' }]}
          >
            <Select>
              <Option value="translator_1">李翻译 - 商务专家</Option>
              <Option value="translator_2">王译员 - 技术专家</Option>
              <Option value="translator_3">张翻译 - 法律专家</Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="translatorName"
            label="译员姓名"
            rules={[{ required: true, message: '请输入译员姓名' }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="reason"
            label="重新分配原因"
            rules={[{ required: true, message: '请输入原因' }]}
          >
            <TextArea rows={3} placeholder="请输入重新分配原因..." />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setReassignModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                确认分配
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 重新翻译弹窗 */}
      <Modal
        title="重新翻译"
        visible={retranslateModalVisible}
        onCancel={() => setRetranslateModalVisible(false)}
        footer={null}
      >
        <Form
          form={retranslateForm}
          layout="vertical"
          onFinish={handleRetranslate}
        >
          <Alert
            message="重新翻译提醒"
            description="重新翻译将重置翻译进度，请确认操作"
            type="warning"
            style={{ marginBottom: '16px' }}
          />
          
          <Form.Item
            name="reason"
            label="重新翻译原因"
            rules={[{ required: true, message: '请输入重新翻译原因' }]}
          >
            <TextArea rows={3} placeholder="请输入重新翻译原因..." />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setRetranslateModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" danger htmlType="submit">
                确认重新翻译
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 退款处理弹窗 */}
      <Modal
        title="处理退款"
        visible={refundModalVisible}
        onCancel={() => setRefundModalVisible(false)}
        footer={null}
      >
        <Form
          form={refundForm}
          layout="vertical"
          onFinish={handleRefund}
          initialValues={{ amount: document.cost }}
        >
          <Alert
            message="退款提醒"
            description={`原支付金额：¥${document.cost.toFixed(2)}`}
            type="info"
            style={{ marginBottom: '16px' }}
          />
          
          <Form.Item
            name="amount"
            label="退款金额"
            rules={[
              { required: true, message: '请输入退款金额' },
              { type: 'number', min: 0, max: document.cost, message: `退款金额不能超过¥${document.cost.toFixed(2)}` }
            ]}
          >
            <Input type="number" addonAfter="元" />
          </Form.Item>
          
          <Form.Item
            name="reason"
            label="退款原因"
            rules={[{ required: true, message: '请输入退款原因' }]}
          >
            <TextArea rows={3} placeholder="请输入退款原因..." />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setRefundModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" danger htmlType="submit">
                确认退款
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 添加管理员备注弹窗 */}
      <Modal
        title="添加管理员备注"
        visible={adminNoteModalVisible}
        onCancel={() => setAdminNoteModalVisible(false)}
        footer={null}
      >
        <Form
          form={noteForm}
          layout="vertical"
          onFinish={handleAddAdminNote}
          initialValues={{ note: document.adminNotes }}
        >
          <Form.Item
            name="note"
            label="备注内容"
            rules={[{ required: true, message: '请输入备注内容' }]}
          >
            <TextArea rows={4} placeholder="请输入管理员备注..." />
          </Form.Item>
          
          <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setAdminNoteModalVisible(false)}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                保存备注
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default DocumentDetail;