import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Tabs, Card, Descriptions, Button, Table, Tag, Progress, Space, message, Spin, Select, Menu, Dropdown, Modal, Form, Input, InputNumber, Switch, Upload, DatePicker } from 'antd'
import dayjs from 'dayjs'
import { DownOutlined, UploadOutlined, ToolOutlined } from '@ant-design/icons'
import { 
  ArrowLeftOutlined, 
  EditOutlined,
  InfoCircleOutlined,
  FileTextOutlined,
  TeamOutlined,
  DatabaseOutlined,
  CheckCircleOutlined,
  FileSearchOutlined,
  DollarOutlined,
  SafetyOutlined
} from '@ant-design/icons'
import apiClient from '../../utils/request'

const { TabPane } = Tabs

interface Project {
  id: number
  project_code: string
  name: string
  customer_id: number
  customer_name: string
  status: string
  budget: string
  spent: string
  start_date: string
  end_date: string
  description: string
  contract_type: string
  contract_amount: string
  currency: string
  contract_days: number
  project_manager_id: number
  manager_name: string
  location: string
  work_quantity: string
  project_situation: string
  settlement_type: string
  has_warranty: boolean
  warranty_amount: string
  warranty_percent: string
  warranty_months: number
  warranty_start_date: string
  warranty_end_date: string
  warranty_status: string
}

const ProjectDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const [project, setProject] = useState<Project | null>(null)
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState('basic')
  const [isMobile, setIsMobile] = useState(false)
  const [contractEditModalVisible, setContractEditModalVisible] = useState(false)
  const [basicInfoEditModalVisible, setBasicInfoEditModalVisible] = useState(false)
  const [contractForm] = Form.useForm()
  const [basicInfoForm] = Form.useForm()
  const [unitPriceItems, setUnitPriceItems] = useState([
    { key: '1', name: '项目1', unit: '个', quantity: 10, price: 100, total: 1000 },
    { key: '2', name: '项目2', unit: '米', quantity: 50, price: 20, total: 1000 }
  ])
  const [contractTotal, setContractTotal] = useState(0)
  const [settlementType, setSettlementType] = useState('lump_sum')
  const [paymentNodes, setPaymentNodes] = useState([
    { key: '1', name: '预付款', condition: '合同签订后7天内', percentage: 40, amount: 0, status: 'pending' },
    { key: '2', name: '进度款', condition: '所有设备材料达到现场', percentage: 30, amount: 0, status: 'pending' },
    { key: '3', name: '尾款', condition: '通电完工7天内', percentage: 27, amount: 0, status: 'pending' },
    { key: '4', name: '质保金', condition: '', percentage: 3, amount: 0, status: 'pending' }
  ])
  const [contractFile, setContractFile] = useState<string>('')
  const [contracts, setContracts] = useState<any[]>([])
  const [subcontracts, setSubcontracts] = useState<any[]>([])
  const [materials, setMaterials] = useState<any[]>([])
  const [milestones, setMilestones] = useState<any[]>([])
  const [finances, setFinances] = useState<any[]>([])
  const [warrantyDeposits, setWarrantyDeposits] = useState<any[]>([])
  const [constructionLogs, setConstructionLogs] = useState<any[]>([])
  const [subcontractModalVisible, setSubcontractModalVisible] = useState(false)
  const [subcontractForm] = Form.useForm()
  const [subcontractors, setSubcontractors] = useState<any[]>([])
  const [users, setUsers] = useState<any[]>([])
  const [usersLoading, setUsersLoading] = useState(false)

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768)
    }
    
    checkMobile()
    window.addEventListener('resize', checkMobile)
    return () => window.removeEventListener('resize', checkMobile)
  }, [])

  useEffect(() => {
    fetchProject()
  }, [id])

  // 获取用户列表
  useEffect(() => {
    const fetchUsers = async () => {
      setUsersLoading(true)
      try {
        const response = await apiClient.get('/users')
        const data = response.data
        if (data.success) {
          setUsers(data.data)
        }
      } catch (error) {
        console.error('获取用户列表失败:', error)
      } finally {
        setUsersLoading(false)
      }
    }
    
    fetchUsers()
  }, [])

  // 当project加载完成后，设置合同相关的默认值
  useEffect(() => {
    if (project) {
      setSettlementType(project.settlement_type || 'lump_sum')
      setContractTotal(parseFloat(project.contract_amount || '0'))
      
      // 初始化付款节点金额
      const initialNodes = paymentNodes.map(node => ({
        ...node,
        amount: Math.round((parseFloat(project.contract_amount || '0') * node.percentage) / 100)
      }))
      setPaymentNodes(initialNodes)
    }
  }, [project])

  // 当contracts数据加载完成后，设置合同表单默认值
  useEffect(() => {
    if (project && contracts.length === 0) {
      // 使用setTimeout确保Form组件已经渲染
      setTimeout(() => {
        contractForm.setFieldsValue({
          project_overview: project?.project_situation || project?.description || '无',
          settlement_type: project.settlement_type || 'lump_sum',
          contract_total: parseFloat(project.contract_amount || '0'),
          tax_included: false,
          other_info: ''
        })
      }, 0)
    }
  }, [project, contractForm, contracts.length])

  // 当project加载完成后，设置基本信息表单默认值
  useEffect(() => {
    if (project) {
      // 使用setTimeout确保Form组件已经渲染
      setTimeout(() => {
        // 优先使用project.contract_days作为工期天数
        let workDays = project.contract_days || 0;
        
        basicInfoForm.setFieldsValue({
          name: project.name,
          manager_id: Number(project.manager_id || project.project_manager_id || 0) || undefined,
          location: project.location,
          start_date: project.start_date ? dayjs(project.start_date) : null,
          end_date: project.end_date ? dayjs(project.end_date) : null,
          work_days: workDays,
          description: project.project_situation || project.description || ''
        })
      }, 0)
    }
  }, [project, basicInfoForm])

  // 当contracts数据加载完成后，更新表单默认值
  useEffect(() => {
    if (contracts.length > 0) {
      const contract = contracts[0]
      setSettlementType(contract.settlement_method || 'lump_sum')
      setContractTotal(parseFloat(contract.contract_amount || '0'))
      setContractFile(contract.contract_file || '')
      
      // 使用setTimeout确保Form组件已经渲染
      setTimeout(() => {
        // 更新表单默认值
        contractForm.setFieldsValue({
          project_overview: project?.project_situation || project?.description || '无',
          settlement_type: contract.settlement_method || 'lump_sum',
          contract_total: parseFloat(contract.contract_amount || '0'),
          tax_included: contract.tax_included || false,
          other_info: contract.other_info || ''
        })
      }, 0)
      
      // 更新付款节点金额
      const updatedNodes = paymentNodes.map(node => ({
        ...node,
        amount: Math.round((parseFloat(contract.contract_amount || '0') * node.percentage) / 100)
      }))
      setPaymentNodes(updatedNodes)
    }
  }, [contracts, project, contractForm])

  // 处理文件上传
  const handleFileUpload = async (options: any) => {
    const { file, onSuccess, onError } = options
    try {
      const formData = new FormData()
      formData.append('file', file)
      
      const response = await apiClient.post('/upload/single', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      
      if (response.data.success) {
        setContractFile(response.data.data.url)
        onSuccess(response.data.data)
      } else {
        onError(new Error('文件上传失败'))
      }
    } catch (error) {
      console.error('文件上传失败:', error)
      onError(error)
    }
  }

  // 打开新增分包模态框
  const openSubcontractModal = () => {
    subcontractForm.resetFields()
    // 设置默认的单价项目列表
    setUnitPriceItems([
      { key: '1', name: '线路架设', unit: 'km', quantity: 1, price: 0, total: 0 },
      { key: '2', name: '手续办理', unit: '项', quantity: 1, price: 0, total: 0 }
    ]);
    // 设置开始日期为当天
    subcontractForm.setFieldsValue({ start_date: dayjs() });
    setSubcontractModalVisible(true)
  }

  // 关闭新增分包模态框
  const closeSubcontractModal = () => {
    setSubcontractModalVisible(false)
  }

  // 添加单价项目
  const addUnitPriceItem = () => {
    setUnitPriceItems(prevItems => {
      const newItem = {
        key: (prevItems.length + 1).toString(),
        name: '',
        unit: '',
        quantity: 0,
        price: 0,
        total: 0
      };
      return [...prevItems, newItem];
    });
  };

  // 删除单价项目
  const removeUnitPriceItem = (index: number) => {
    setUnitPriceItems(prevItems => {
      const newItems = [...prevItems];
      newItems.splice(index, 1);
      // 更新key值
      newItems.forEach((item, i) => {
        item.key = (i + 1).toString();
      });
      return newItems;
    });
  };

  // 提交新增分包表单
  const handleSubcontractSubmit = async () => {
    try {
      const values = await subcontractForm.validateFields()
      
      let contractAmount = values.contract_amount;
      
      // 如果是单价结算，自动计算合同金额
      if (values.settlement_type === 'unit_price') {
        const totalAmount = unitPriceItems.reduce((sum, item) => sum + (item.total || 0), 0);
        contractAmount = totalAmount;
      }
      
      const response = await apiClient.post(`/projects/${id}/subcontracts`, {
        subcontractor_id: values.subcontractor_id,
        subcontractor_name: values.subcontractor_name,
        contract_amount: contractAmount,
        currency: values.currency,
        settlement_type: values.settlement_type,
        other_terms: values.other_terms,
        payment_description: values.payment_description,
        unit_price_items: values.settlement_type === 'unit_price' ? unitPriceItems : [],
        start_date: values.start_date ? values.start_date.toISOString() : null,
        end_date: values.end_date ? values.end_date.toISOString() : null,
        work_days: values.work_days,
        status: values.status
      })
      
      if (response.data.success) {
        message.success('新增分包成功')
        // 重新获取分包列表
        fetchProjectData()
        closeSubcontractModal()
        // 重置单价项目列表
        setUnitPriceItems([
          { key: '1', name: '项目1', unit: '个', quantity: 10, price: 100, total: 1000 },
          { key: '2', name: '项目2', unit: '米', quantity: 50, price: 20, total: 1000 }
        ]);
      } else {
        message.error('新增分包失败：' + response.data.message)
      }
    } catch (error) {
      console.error('新增分包失败:', error)
      message.error('新增分包失败，请检查表单数据')
    }
  }

  const fetchProject = async () => {
    try {
      const response = await apiClient.get(`/projects/${id}`)
      if (response.data.success) {
        setProject(response.data.data)
      }
    } catch (error) {
      message.error('获取项目信息失败')
    } finally {
      setLoading(false)
    }
  }

  const fetchProjectData = async () => {
    try {
      // 获取合同信息
      const contractsResponse = await apiClient.get(`/projects/${id}/contracts`)
      if (contractsResponse.data.success) {
        setContracts(contractsResponse.data.data)
      }

      // 获取分包信息
      const subcontractsResponse = await apiClient.get(`/projects/${id}/subcontracts`)
      if (subcontractsResponse.data.success) {
        setSubcontracts(subcontractsResponse.data.data)
      }

      // 获取材料信息
      const materialsResponse = await apiClient.get(`/projects/${id}/materials`)
      if (materialsResponse.data.success) {
        setMaterials(materialsResponse.data.data)
      }

      // 获取施工节点
      const milestonesResponse = await apiClient.get(`/projects/${id}/milestones`)
      if (milestonesResponse.data.success) {
        setMilestones(milestonesResponse.data.data)
      }

      // 获取财务信息
      const financesResponse = await apiClient.get(`/projects/${id}/finances`)
      if (financesResponse.data.success) {
        setFinances(financesResponse.data.data)
      }

      // 获取质保金信息
      const warrantyDepositsResponse = await apiClient.get(`/projects/${id}/warranty-deposits`)
      if (warrantyDepositsResponse.data.success) {
        setWarrantyDeposits(warrantyDepositsResponse.data.data)
      }

      // 获取施工日志
      const constructionLogsResponse = await apiClient.get(`/projects/${id}/construction-logs`)
      if (constructionLogsResponse.data.success) {
        setConstructionLogs(constructionLogsResponse.data.data)
      }
    } catch (error) {
      console.error('获取项目数据失败:', error)
    }
  }

  useEffect(() => {
    if (id) {
      fetchProject()
      fetchSubcontractors()
      fetchProjectData()
    }
  }, [id])

  // 获取分包商列表
  const fetchSubcontractors = async () => {
    try {
      const response = await apiClient.get('/subcontractors')
      if (response.data.success) {
        setSubcontractors(response.data.data)
      }
    } catch (error) {
      console.error('获取分包商列表失败:', error)
    }
  }

  // 监听单价项目变更，更新合同总价
  useEffect(() => {
    calculateContractTotal()
  }, [unitPriceItems])

  // 监听结算方式变更，更新合同总价字段状态
  useEffect(() => {
    if (settlementType === 'unit_price') {
      calculateContractTotal()
    }
  }, [settlementType])

  const getStatusTag = (status: string) => {
    const statusMap: Record<string, { color: string; text: string }> = {
      planning: { color: 'blue', text: '规划中' },
      in_progress: { color: 'processing', text: '进行中' },
      active: { color: 'processing', text: '进行中' },
      completed: { color: 'success', text: '已完成' },
      suspended: { color: 'warning', text: '已暂停' },
    }
    const config = statusMap[status] || { color: 'default', text: status }
    return <Tag color={config.color}>{config.text}</Tag>
  }

  // 计算合同总价
  const calculateContractTotal = () => {
    const total = unitPriceItems.reduce((sum, item) => sum + (item.total || 0), 0)
    setContractTotal(total)
  }

  // 处理单价项目变更
  const handleUnitPriceItemChange = (index: number, field: string, value: any) => {
    const newItems = [...unitPriceItems]
    newItems[index] = { ...newItems[index], [field]: value }
    
    // 计算单项总价
    if (field === 'quantity' || field === 'price') {
      newItems[index].total = (newItems[index].quantity || 0) * (newItems[index].price || 0)
    }
    
    setUnitPriceItems(newItems)
    calculateContractTotal()
    
    // 当单价项目变化时，自动更新合同金额字段
    const settlementType = subcontractForm.getFieldValue('settlement_type');
    if (settlementType === 'unit_price') {
      const totalAmount = newItems.reduce((sum, item) => sum + (item.total || 0), 0);
      subcontractForm.setFieldsValue({ contract_amount: totalAmount });
    }
  }

  // 处理结算方式变更
  const handleSettlementTypeChange = (value: string) => {
    setSettlementType(value)
    contractForm.setFieldsValue({ settlement_type: value })
  }

  // 处理付款节点比例变化
  const handlePaymentNodePercentageChange = (index: number, value: number) => {
    const newNodes = [...paymentNodes]
    newNodes[index].percentage = value
    newNodes[index].amount = Math.round((contractTotal * value) / 100)
    setPaymentNodes(newNodes)
    const total = newNodes.reduce((sum, n) => sum + (n.percentage || 0), 0)
    if (total > 100) {
      message.warning(`付款比例合计为 ${total}%，已超过 100%，请调整`)
    }
  }

  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 400 }}>
        <Spin size="large" />
      </div>
    )
  }

  if (!project) {
    return (
      <Card>
        <div style={{ textAlign: 'center', padding: 40 }}>
          项目不存在或已被删除
          <Button type="link" onClick={() => navigate('/projects')}>返回列表</Button>
        </div>
      </Card>
    )
  }

  // 基本信息 Tab
  const BasicInfoTab = () => {
    // 查找项目经理名称
    const getManagerName = () => {
      // 优先使用manager_name
      if (project.manager_name) return project.manager_name;
      // 尝试使用project_manager_id
      if (project.project_manager_id) {
        const user = users.find(u => Number(u.id) === Number(project.project_manager_id));
        return user ? user.name : '未知经理';
      }
      // 尝试使用manager_id（后端使用的字段）
      if (project.manager_id) {
        const user = users.find(u => Number(u.id) === Number(project.manager_id));
        return user ? user.name : '未知经理';
      }
      return '未知经理';
    };

    return (
      <Card title="项目基本信息" extra={<Button icon={<EditOutlined />} onClick={() => setBasicInfoEditModalVisible(true)}>编辑</Button>}>
        <Descriptions column={2} bordered>
          <Descriptions.Item label="项目编号">{project.project_code}</Descriptions.Item>
          <Descriptions.Item label="项目名称">{project.name}</Descriptions.Item>
          <Descriptions.Item label="客户">{project.customer_name}</Descriptions.Item>
          <Descriptions.Item label="项目经理">{getManagerName()}</Descriptions.Item>
          <Descriptions.Item label="项目地点">{project.location || '-'}</Descriptions.Item>
          <Descriptions.Item label="项目状态">{getStatusTag(project.status)}</Descriptions.Item>
          <Descriptions.Item label="开工日期">{project.start_date?.split('T')[0] || '-'}</Descriptions.Item>
          <Descriptions.Item label="完工日期">{project.end_date?.split('T')[0] || '-'}</Descriptions.Item>
          <Descriptions.Item label="合同工期">{project.contract_days} 天</Descriptions.Item>
          <Descriptions.Item label="结算方式">
            {project.settlement_type === 'lump_sum' ? '总价包干' : '单价结算'}
          </Descriptions.Item>
          <Descriptions.Item label="工程概况" span={2}>
            {project.project_situation || project.description || '-'}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间" span={2}>
            {new Date().toLocaleDateString()}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    );
  }

  // 合同详情 Tab
  const ContractTab = () => {
    // 获取最新的合同信息
    const latestContract = contracts.length > 0 ? contracts[0] : null;
    
    return (
      <Card title="合同详情" extra={<Button icon={<EditOutlined />} onClick={() => {
        const latestContract = contracts.length > 0 ? contracts[0] : null;
        const savedSettlement = latestContract?.settlement_method || 'lump_sum';
        const savedTotal = parseFloat(latestContract?.contract_amount || project?.contract_amount || '0');
        setSettlementType(savedSettlement);
        setContractTotal(savedTotal);
        setContractFile(latestContract?.contract_file || '');
        if (milestones.length > 0) {
          setPaymentNodes(milestones.map((m: any) => ({
            key: String(m.id),
            name: m.milestone_name || '',
            condition: m.condition || '',
            percentage: m.percentage || 0,
            amount: m.amount || 0,
            status: m.status || 'pending'
          })));
        } else {
          setPaymentNodes([
            { key: '1', name: '预付款', condition: '合同签订后7天内', percentage: 40, amount: Math.round(savedTotal * 0.4), status: 'pending' },
            { key: '2', name: '进度款', condition: '所有设备材料达到现场', percentage: 30, amount: Math.round(savedTotal * 0.3), status: 'pending' },
            { key: '3', name: '尾款', condition: '通电完工7天内', percentage: 27, amount: Math.round(savedTotal * 0.27), status: 'pending' },
            { key: '4', name: '质保金', condition: '', percentage: 3, amount: Math.round(savedTotal * 0.03), status: 'pending' }
          ]);
        }
        setContractEditModalVisible(true);
        setTimeout(() => {
          contractForm.setFieldsValue({
            project_overview: project?.project_situation || project?.description || '',
            settlement_type: savedSettlement,
            contract_total: savedTotal,
            tax_included: latestContract?.tax_included || false,
            other_info: latestContract?.other_info || ''
          });
        }, 100);
      }}>合同细节录入</Button>}>
        <Descriptions column={2} bordered style={{ marginBottom: 24 }}>
          <Descriptions.Item label="合同金额">
            {project.currency} {parseFloat(latestContract?.contract_amount || project.contract_amount || '0').toLocaleString()}
          </Descriptions.Item>
          <Descriptions.Item label="币种">{project.currency}</Descriptions.Item>
          <Descriptions.Item label="合同类型">
            {project.contract_type === 'lump_sum' ? '总价包干' : '单价合同'}
          </Descriptions.Item>
          <Descriptions.Item label="结算方式">
            {latestContract?.settlement_method === 'lump_sum' ? '总价包干' : '单价结算'}
          </Descriptions.Item>
          <Descriptions.Item label="是否含税">
            {latestContract?.tax_included ? '是' : '否'}
          </Descriptions.Item>
          <Descriptions.Item label="合同编号">
            {latestContract?.contract_code || '-'}
          </Descriptions.Item>
        </Descriptions>
        
        <Card type="inner" title="付款节点" style={{ marginBottom: 24 }}>
          <Table 
            dataSource={milestones.map(item => ({
              ...item,
              key: item.id
            }))}
            columns={[
              { title: '节点名称', dataIndex: 'milestone_name', key: 'milestone_name' },
              { title: '节点条件', dataIndex: 'condition', key: 'condition', render: (v: string) => v || '-' },
              { title: '比例', dataIndex: 'percentage', key: 'percentage', render: (v: number) => `${v}%` },
              { title: '金额', dataIndex: 'amount', key: 'amount', render: (v: number) => `¥${v.toLocaleString()}` },
              { title: '完成进度', dataIndex: 'completion_progress', key: 'completion_progress', render: (v: number) => <Progress percent={v} size="small" /> },
              { title: '状态', dataIndex: 'status', key: 'status', render: (v: string) => <Tag color={v === 'completed' ? 'success' : v === 'in_progress' ? 'processing' : 'default'}>{v === 'completed' ? '已完成' : v === 'in_progress' ? '进行中' : '待开始'}</Tag> },
            ]}
            locale={{ emptyText: '暂无节点记录' }}
          />
        </Card>

        <Card type="inner" title="合同附件" style={{ marginBottom: 24 }}>
          <div>
            {latestContract ? (
              <div style={{ marginBottom: 16 }}>
                <Descriptions column={1}>
                  <Descriptions.Item label="合同编号">{latestContract.contract_code}</Descriptions.Item>
                  <Descriptions.Item label="合同文件">
                    {latestContract.contract_file ? (
                      <a href={latestContract.contract_file} target="_blank" rel="noopener noreferrer">
                        查看合同文件
                      </a>
                    ) : (
                      '-'  
                    )}
                  </Descriptions.Item>
                </Descriptions>
              </div>
            ) : (
              <div>暂无合同附件</div>
            )}
          </div>
        </Card>

        <Card type="inner" title="其他合同信息" style={{ marginBottom: 24 }}>
          <Descriptions column={1}>
            <Descriptions.Item label="其他信息">
              {latestContract?.other_info || '-'}
            </Descriptions.Item>
          </Descriptions>
        </Card>

        <Card type="inner" title="质保金设置">
          <Descriptions column={2}>
            <Descriptions.Item label="是否有质保金">
              {milestones.find(m => m.milestone_name === '质保金') ? '是' : '否'}
            </Descriptions.Item>
            <Descriptions.Item label="质保金比例">
              {milestones.find(m => m.milestone_name === '质保金')?.percentage || 0}%
            </Descriptions.Item>
            <Descriptions.Item label="质保金金额">
              ¥{(milestones.find(m => m.milestone_name === '质保金')?.amount || 0).toLocaleString()}
            </Descriptions.Item>
            <Descriptions.Item label="质保期限">{project.warranty_months} 个月</Descriptions.Item>
            <Descriptions.Item label="到期日期">{project.warranty_end_date?.split('T')[0] || '-'}</Descriptions.Item>
            <Descriptions.Item label="质保金状态">
              <Tag color={project.warranty_status === 'released' ? 'success' : 'default'}>
                {project.warranty_status === 'released' ? '已释放' : '待释放'}
              </Tag>
            </Descriptions.Item>
          </Descriptions>
        </Card>
      </Card>
    )
  }

  // 分包管理 Tab
  const SubcontractTab = () => {
    const [subcontractDetailModalVisible, setSubcontractDetailModalVisible] = useState(false);
    const [selectedSubcontract, setSelectedSubcontract] = useState<any>(null);

    const openSubcontractDetail = (subcontract: any) => {
      setSelectedSubcontract(subcontract);
      setSubcontractDetailModalVisible(true);
    };

    const closeSubcontractDetail = () => {
      setSubcontractDetailModalVisible(false);
      setSelectedSubcontract(null);
    };

    const getCurrencySymbol = (currency: string) => {
      const symbols: Record<string, string> = {
        CNY: '¥',
        USD: '$',
        LAK: '₭',
        THB: '฿'
      };
      return symbols[currency] || '';
    };

    return (
      <Card title="分包管理" extra={<Button type="primary" onClick={openSubcontractModal}>新增分包</Button>}>
        <Table 
          dataSource={subcontracts.map(item => ({
            ...item,
            key: item.id
          }))}
          columns={[
            {
              title: '分包商', 
              dataIndex: 'subcontractor_name', 
              key: 'subcontractor_name',
              render: (text: string, record: any) => (
                <a onClick={() => openSubcontractDetail(record)}>{text}</a>
              )
            },
            {
              title: '合同金额', 
              dataIndex: 'contract_amount', 
              key: 'contract_amount', 
              render: (v: number, record: any) => {
                const symbol = getCurrencySymbol(record.currency);
                return `${symbol}${v.toLocaleString()}`;
              }
            },
            {
              title: '已付款', 
              dataIndex: 'paid_amount', 
              key: 'paid_amount', 
              render: (v: number, record: any) => {
                const symbol = getCurrencySymbol(record.currency);
                return `${symbol}${v.toLocaleString()}`;
              }
            },
            {
              title: '状态', 
              dataIndex: 'status', 
              key: 'status', 
              render: (v: string) => <Tag color={v === 'completed' ? 'success' : 'default'}>{v === 'completed' ? '已完成' : '进行中'}</Tag>
            },
          ]}
          locale={{ emptyText: '暂无分包记录' }}
        />

        {/* 分包详情模态框 */}
        <Modal
          title="分包详情"
          open={subcontractDetailModalVisible}
          onCancel={closeSubcontractDetail}
          width={800}
          footer={[
            <Button key="close" onClick={closeSubcontractDetail}>关闭</Button>
          ]}
        >
          {selectedSubcontract && (
            <div style={{ padding: 20 }}>
              <Descriptions column={2} bordered>
                <Descriptions.Item label="分包商">{selectedSubcontract.subcontractor_name}</Descriptions.Item>
                <Descriptions.Item label="合同金额">
                  {getCurrencySymbol(selectedSubcontract.currency)}{selectedSubcontract.contract_amount.toLocaleString()}
                </Descriptions.Item>
                <Descriptions.Item label="币种">{selectedSubcontract.currency}</Descriptions.Item>
                <Descriptions.Item label="结算方式">
                  {selectedSubcontract.settlement_type === 'lump_sum' ? '总价包干' : '单价结算'}
                </Descriptions.Item>
                <Descriptions.Item label="已付款">
                  {getCurrencySymbol(selectedSubcontract.currency)}{selectedSubcontract.paid_amount.toLocaleString()}
                </Descriptions.Item>
                <Descriptions.Item label="状态">
                  <Tag color={selectedSubcontract.status === 'completed' ? 'success' : 'default'}>
                    {selectedSubcontract.status === 'completed' ? '已完成' : '进行中'}
                  </Tag>
                </Descriptions.Item>
                <Descriptions.Item label="开始日期">
                  {selectedSubcontract.start_date ? selectedSubcontract.start_date.split('T')[0] : '-'}
                </Descriptions.Item>
                <Descriptions.Item label="结束日期">
                  {selectedSubcontract.end_date ? selectedSubcontract.end_date.split('T')[0] : '-'}
                </Descriptions.Item>
                <Descriptions.Item label="其他约定" span={2}>
                  {selectedSubcontract.other_terms || '-'}
                </Descriptions.Item>
                <Descriptions.Item label="付款说明" span={2}>
                  {selectedSubcontract.payment_description || '-'}
                </Descriptions.Item>
              </Descriptions>

              {/* 单价项目列表 */}
              {selectedSubcontract.settlement_type === 'unit_price' && selectedSubcontract.unit_price_items && selectedSubcontract.unit_price_items.length > 0 && (
                <Card type="inner" title="项目单项价" style={{ marginTop: 20 }}>
                  <Table
                    dataSource={selectedSubcontract.unit_price_items.map((item: any, index: number) => ({
                      ...item,
                      key: index
                    }))}
                    columns={[
                      { title: '项目名称', dataIndex: 'name', key: 'name' },
                      { title: '单位', dataIndex: 'unit', key: 'unit' },
                      { title: '数量', dataIndex: 'quantity', key: 'quantity' },
                      { 
                        title: '单价', 
                        dataIndex: 'price', 
                        key: 'price',
                        render: (v: number) => {
                          const symbol = getCurrencySymbol(selectedSubcontract.currency);
                          return `${symbol}${v.toLocaleString()}`;
                        }
                      },
                      { 
                        title: '总价', 
                        dataIndex: 'total', 
                        key: 'total',
                        render: (v: number) => {
                          const symbol = getCurrencySymbol(selectedSubcontract.currency);
                          return `${symbol}${v.toLocaleString()}`;
                        }
                      },
                    ]}
                    pagination={false}
                  />
                </Card>
              )}
            </div>
          )}
        </Modal>
      </Card>
    );
  }

  // 材料管理 Tab
  const MaterialTab = () => (
    <Card title="材料管理">
      <Table 
        dataSource={materials.map(item => ({
          ...item,
          key: item.id
        }))}
        columns={[
          { title: '材料名称', dataIndex: 'product_name', key: 'product_name' },
          { title: '单位', dataIndex: 'unit', key: 'unit' },
          { title: '预算量', dataIndex: 'budget_quantity', key: 'budget_quantity' },
          { title: '采购量', dataIndex: 'purchase_quantity', key: 'purchase_quantity' },
          { title: '使用量', dataIndex: 'used_quantity', key: 'used_quantity' },
          { title: '均价', dataIndex: 'average_price', key: 'average_price', render: (v: number) => `¥${v.toLocaleString()}` },
          { title: '总价', dataIndex: 'total_amount', key: 'total_amount', render: (v: number) => `¥${v.toLocaleString()}` },
        ]}
        locale={{ emptyText: '暂无材料记录' }}
      />
    </Card>
  )

  // 施工节点 Tab
  const MilestoneTab = () => (
    <Card title="施工节点">
      <Card type="inner" title="合同付款节点" style={{ marginBottom: 16 }}>
        <Table 
            dataSource={milestones.map(item => ({
              ...item,
              key: item.id
            }))}
            columns={[
              { title: '节点名称', dataIndex: 'milestone_name', key: 'milestone_name' },
              { title: '节点条件', dataIndex: 'condition', key: 'condition', render: (v: string) => v || '-' },
              { title: '比例', dataIndex: 'percentage', key: 'percentage', render: (v: number) => `${v}%` },
              { title: '金额', dataIndex: 'amount', key: 'amount', render: (v: number) => `¥${v.toLocaleString()}` },
              { title: '完成进度', dataIndex: 'completion_progress', key: 'completion_progress', render: (v: number) => <Progress percent={v} size="small" /> },
              { title: '状态', dataIndex: 'status', key: 'status', render: (v: string) => <Tag color={v === 'completed' ? 'success' : v === 'in_progress' ? 'processing' : 'default'}>{v === 'completed' ? '已完成' : v === 'in_progress' ? '进行中' : '待开始'}</Tag> },
            ]}
            locale={{ emptyText: '暂无节点记录' }}
          />
      </Card>
      <Card type="inner" title="重要节点完成情况">
        <Table 
          dataSource={milestones.map(item => ({
            ...item,
            key: item.id
          }))}
          columns={[
            { title: '节点名称', dataIndex: 'milestone_name', key: 'milestone_name' },
            { title: '计划日期', dataIndex: 'expected_date', key: 'expected_date' },
            { title: '实际日期', dataIndex: 'actual_date', key: 'actual_date' },
            { title: '状态', dataIndex: 'status', key: 'status', render: (v: string) => <Tag color={v === 'completed' ? 'success' : v === 'in_progress' ? 'processing' : 'default'}>{v === 'completed' ? '已完成' : v === 'in_progress' ? '进行中' : '待开始'}</Tag> },
            { title: '操作', key: 'action', render: () => <Button size="small">上传凭证</Button> },
          ]}
          locale={{ emptyText: '暂无记录' }}
        />
      </Card>
    </Card>
  )

  // 施工日志 Tab
  const LogTab = () => (
    <Card title="施工日志" extra={<Button type="primary">新增日志</Button>}>
      <Table 
        dataSource={constructionLogs.map(item => ({
          ...item,
          key: item.id
        }))}
        columns={[
          { title: '日期', dataIndex: 'log_date', key: 'log_date' },
          { title: '天气', dataIndex: 'weather', key: 'weather' },
          { title: '记录人', dataIndex: 'recorder', key: 'recorder', render: () => '系统管理员' },
          { title: '今日工作', dataIndex: 'work_content', key: 'work_content' },
          { title: '照片', dataIndex: 'photos', key: 'photos', render: (v: string) => v ? '查看照片' : '-' },
        ]}
        locale={{ emptyText: '暂无日志记录' }}
      />
    </Card>
  )

  const FinanceTab = () => {
    const [profitData, setProfitData] = React.useState<any>(null);
    const [profitLoading, setProfitLoading] = React.useState(false);

    React.useEffect(() => {
      if (!project?.id) return;
      setProfitLoading(true);
      apiClient.get(`/financial-records/project-profit/${project.id}`)
        .then(res => { if (res.data.success) setProfitData(res.data.data); })
        .catch(() => {})
        .finally(() => setProfitLoading(false));
    }, [project?.id]);

    const contractAmount = parseFloat(project?.contract_amount || '0');
    const totalIncome = profitData?.total_income || 0;
    const totalExpense = profitData?.total_expense || 0;
    const grossProfit = profitData?.gross_profit || 0;
    const grossMargin = profitData?.gross_margin || 0;

    const LEVEL2_LABELS: Record<string, string> = {
      material: '材料采购', equipment: '设备采购', subcontract: '施工分包', labor: '人工工资',
      travel: '差旅交通', accommodation: '食宿费用', freight: '运输物流', design: '勘测设计',
      tools: '小型工具', client_relations: '客户/EDL关系', other_project: '其他项目支出',
      contract_payment: '合同收款', deposit_refund: '质保金退回'
    };

    return (
      <Spin spinning={profitLoading}>
        <Card title="财务信息">
          <Descriptions column={2} bordered>
            <Descriptions.Item label="合同金额">¥{contractAmount.toLocaleString()}</Descriptions.Item>
            <Descriptions.Item label="已收款">
              <span style={{ color: '#3f8600', fontWeight: 'bold' }}>¥{totalIncome.toLocaleString()}</span>
            </Descriptions.Item>
            <Descriptions.Item label="支出合计">
              <span style={{ color: '#cf1322' }}>¥{totalExpense.toLocaleString()}</span>
            </Descriptions.Item>
            <Descriptions.Item label="毛利润">
              <span style={{ color: grossProfit >= 0 ? '#52c41a' : '#ff4d4f', fontWeight: 'bold', fontSize: 16 }}>
                ¥{grossProfit.toLocaleString()}
              </span>
            </Descriptions.Item>
            <Descriptions.Item label="毛利率" span={2}>
              <span style={{ color: grossProfit >= 0 ? '#52c41a' : '#ff4d4f', fontWeight: 'bold' }}>
                {grossMargin}%
              </span>
            </Descriptions.Item>
          </Descriptions>
        </Card>

        {profitData?.expense_by_category?.length > 0 && (
          <Card title="支出分类明细" size="small" style={{ marginTop: 16 }}>
            <Table
              dataSource={profitData.expense_by_category}
              rowKey="category_level2"
              pagination={false}
              size="small"
              columns={[
                { title: '分类', dataIndex: 'category_level2', render: (v: string) => LEVEL2_LABELS[v] || v },
                { title: '金额(¥)', dataIndex: 'total_amount', render: (v: number) => parseFloat(v).toLocaleString(), align: 'right' as const },
                { title: '笔数', dataIndex: 'count', align: 'center' as const },
                {
                  title: '占比', render: (_: unknown, r: any) => {
                    const pct = totalExpense > 0 ? (parseFloat(r.total_amount) / totalExpense * 100).toFixed(1) : '0';
                    return `${pct}%`;
                  }
                },
              ]}
            />
          </Card>
        )}

        {profitData?.expense_by_user?.length > 0 && (
          <Card title="人员支出明细" size="small" style={{ marginTop: 16 }}>
            <Table
              dataSource={profitData.expense_by_user}
              rowKey="user_name"
              pagination={false}
              size="small"
              columns={[
                { title: '人员', dataIndex: 'user_name' },
                { title: '金额(¥)', dataIndex: 'total_amount', render: (v: number) => parseFloat(v).toLocaleString(), align: 'right' as const },
                { title: '笔数', dataIndex: 'count', align: 'center' as const },
              ]}
            />
          </Card>
        )}
      </Spin>
    )
  }

  // 质保金 Tab
  const WarrantyTab = () => {
    // 从付款节点中查找质保金节点
    const warrantyMilestone = milestones.find(m => m.milestone_name === '质保金');
    
    // 如果找到质保金节点，使用该节点的数据；否则使用0
    const warrantyAmount = warrantyMilestone?.amount || 0;
    const warrantyPercent = warrantyMilestone?.percentage || 0;
    
    return (
      <Card title="质保金管理">
        <Descriptions column={2} bordered>
          <Descriptions.Item label="质保金金额">
            ¥{warrantyAmount.toLocaleString()}
          </Descriptions.Item>
          <Descriptions.Item label="质保比例">{warrantyPercent}%</Descriptions.Item>
          <Descriptions.Item label="质保期限">{project.warranty_months} 个月</Descriptions.Item>
          <Descriptions.Item label="起算日期">{project.warranty_start_date?.split('T')[0] || '-'}</Descriptions.Item>
          <Descriptions.Item label="到期日期">{project.warranty_end_date?.split('T')[0] || '-'}</Descriptions.Item>
          <Descriptions.Item label="质保金状态">
            <Tag color={project.warranty_status === 'released' ? 'success' : 'default'}>
              {project.warranty_status === 'released' ? '已释放' : '待释放'}
            </Tag>
          </Descriptions.Item>
        </Descriptions>
        <div style={{ marginTop: 16, textAlign: 'center' }}>
          <Space>
            <Button type="primary">标记已释放</Button>
            <Button>延期</Button>
          </Space>
        </div>
      </Card>
    )
  }

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/projects')}>
          返回列表
        </Button>
      </div>

      <Card style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <h2 style={{ margin: 0 }}>{project.name}</h2>
            <Space style={{ marginTop: 8 }}>
              {getStatusTag(project.status)}
              {project.current_phase && <Tag color="blue">当前: {project.current_phase}</Tag>}
              {project.phase_progress > 0 && <span>进度: {project.phase_progress}%</span>}
              <span>质保金: ¥{(milestones.find(m => m.milestone_name === '质保金')?.amount || 0).toLocaleString()}</span>
            </Space>
          </div>
          <Space>
            <Button icon={<ToolOutlined />} type="primary" onClick={() => navigate(`/construction/progress/${id}`)}>进入施工管理</Button>
            <Button icon={<EditOutlined />} onClick={() => setBasicInfoEditModalVisible(true)}>编辑项目</Button>
          </Space>
        </div>
        {project.phase_progress > 0 && (
          <Progress percent={project.phase_progress} style={{ marginTop: 12 }} strokeColor="#1890ff" />
        )}
      </Card>

      {isMobile ? (
        <div style={{ marginBottom: 16 }}>
          <Select
            style={{ width: '100%' }}
            value={activeTab}
            onChange={setActiveTab}
            options={[
              { value: 'basic', label: '基本信息' },
              { value: 'contract', label: '合同与收款' },
              { value: 'subcontract', label: '分包管理' },
              { value: 'material', label: '材料管理' },
              { value: 'finance', label: '财务收支' },
              { value: 'warranty', label: '质保金' },
              { value: 'log', label: '施工日志' }
            ]}
          />
          <div style={{ marginTop: 16 }}>
            {activeTab === 'basic' && <BasicInfoTab />}
            {activeTab === 'contract' && <ContractTab />}
            {activeTab === 'subcontract' && <SubcontractTab />}
            {activeTab === 'material' && <MaterialTab />}
            {activeTab === 'finance' && <FinanceTab />}
            {activeTab === 'warranty' && <WarrantyTab />}
            {activeTab === 'log' && <LogTab />}
          </div>
        </div>
      ) : (
        <Tabs 
          activeKey={activeTab} 
          onChange={setActiveTab} 
          type="card"
          items={[
            {
              key: 'basic',
              label: <span><InfoCircleOutlined /> 基本信息</span>,
              children: <BasicInfoTab />
            },
            {
              key: 'contract',
              label: <span><FileTextOutlined /> 合同与收款</span>,
              children: <ContractTab />
            },
            {
              key: 'subcontract',
              label: <span><TeamOutlined /> 分包管理</span>,
              children: <SubcontractTab />
            },
            {
              key: 'material',
              label: <span><DatabaseOutlined /> 材料管理</span>,
              children: <MaterialTab />
            },
            {
              key: 'finance',
              label: <span><DollarOutlined /> 财务收支</span>,
              children: <FinanceTab />
            },
            {
              key: 'warranty',
              label: <span><SafetyOutlined /> 质保金</span>,
              children: <WarrantyTab />
            },
            {
              key: 'log',
              label: <span><FileSearchOutlined /> 施工日志</span>,
              children: <LogTab />
            }
          ]}
        />
      )}

      {/* 基本信息编辑模态框 */}
      <Modal
        title="编辑项目基本信息"
        open={basicInfoEditModalVisible}
        onCancel={() => setBasicInfoEditModalVisible(false)}
        onOk={async () => {
          try {
            const values = await basicInfoForm.validateFields();
            // 构建保存数据
            const saveData = {
              name: values.name,
              manager_id: values.manager_id,
              location: values.location,
              start_date: values.start_date ? values.start_date.toISOString() : null,
              end_date: values.end_date ? values.end_date.toISOString() : null,
              description: values.description
            };
            
            
            // 发送保存请求
            const response = await apiClient.put(`/projects/${id}`, saveData);
            if (response.data.success) {
              message.success('基本信息保存成功');
              // 重新获取项目信息
              fetchProject();
              setBasicInfoEditModalVisible(false);
            } else {
              message.error('保存失败：' + response.data.message);
            }
          } catch (error) {
            console.error('保存失败:', error);
            message.error('保存失败，请检查表单数据');
          }
        }}
        width={600}
        okText="保存"
        cancelText="取消"
      >
        <div style={{ padding: 20 }}>
          <Form layout="vertical" form={basicInfoForm}>
            <Form.Item
              label="项目名称"
              name="name"
              rules={[{ required: true, message: '请输入项目名称' }]}
            >
              <Input placeholder="请输入项目名称" />
            </Form.Item>

            <Form.Item
              label="项目经理"
              name="manager_id"
              rules={[{ required: true, message: '请选择项目经理' }]}
            >
              <Select placeholder="请选择项目经理" loading={usersLoading}>
                {users.map(user => (
                  <Select.Option key={user.id} value={user.id}>
                    {user.name} ({user.username})
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item
              label="项目地点"
              name="location"
            >
              <Input placeholder="请输入项目地点" />
            </Form.Item>

            <Form.Item
              label="开工日期"
              name="start_date"
              rules={[{ required: true, message: '请选择开工日期' }]}
            >
              <DatePicker 
                style={{ width: '100%' }} 
                onChange={(date) => {
                  const values = basicInfoForm.getFieldsValue();
                  if (date && values.work_days) {
                    // 计算完工日期（减去1天，因为后端计算时会加1天）
                    const endDate = dayjs(date).add(values.work_days - 1, 'day');
                    basicInfoForm.setFieldsValue({ end_date: endDate });
                  }
                }}
              />
            </Form.Item>

            <Form.Item
              label="工期天数"
              name="work_days"
              rules={[{ required: true, message: '请输入工期天数' }]}
            >
              <InputNumber 
                min={1} 
                placeholder="请输入工期天数" 
                onChange={(value) => {
                  const values = basicInfoForm.getFieldsValue();
                  if (value && values.start_date) {
                    // 计算完工日期（减去1天，因为后端计算时会加1天）
                    const endDate = dayjs(values.start_date).add(value - 1, 'day');
                    basicInfoForm.setFieldsValue({ end_date: endDate });
                  }
                }}
              />
            </Form.Item>

            <Form.Item
              label="完工日期"
              name="end_date"
              rules={[{ required: true, message: '请选择完工日期' }]}
            >
              <DatePicker 
                style={{ width: '100%' }} 
                onChange={(date) => {
                  const values = basicInfoForm.getFieldsValue();
                  if (date && values.start_date) {
                    // 计算工期天数（加上1天，与后端计算逻辑一致）
                    const startDate = dayjs(values.start_date);
                    const endDate = dayjs(date);
                    const diffDays = endDate.diff(startDate, 'day') + 1;
                    basicInfoForm.setFieldsValue({ work_days: diffDays });
                  }
                }}
              />
            </Form.Item>

            <Form.Item
              label="工程概况"
              name="description"
            >
              <Input.TextArea rows={4} placeholder="请输入工程概况" />
            </Form.Item>
          </Form>
        </div>
      </Modal>

      {/* 新增分包模态框 */}
      <Modal
        title="新增分包"
        open={subcontractModalVisible}
        onCancel={closeSubcontractModal}
        onOk={handleSubcontractSubmit}
        width={800}
        okText="保存"
        cancelText="取消"
      >
        <div style={{ padding: 20 }}>
          <Form layout="vertical" form={subcontractForm}>
            <Form.Item
              label="分包商"
              name="subcontractor_id"
              rules={[{ required: true, message: '请选择分包商' }]}
            >
              <Select 
                placeholder="请选择分包商"
                onChange={(value) => {
                  const selectedSubcontractor = subcontractors.find(s => s.id === value);
                  if (selectedSubcontractor) {
                    subcontractForm.setFieldsValue({ subcontractor_name: selectedSubcontractor.name });
                  }
                }}
              >
                {subcontractors.map(subcontractor => (
                  <Select.Option key={subcontractor.id} value={subcontractor.id}>
                    {subcontractor.name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item
              label="分包商名称"
              name="subcontractor_name"
              rules={[{ required: true, message: '请输入分包商名称' }]}
            >
              <Input placeholder="请输入分包商名称" />
            </Form.Item>

            <Form.Item
              label="币种"
              name="currency"
            >
              <Select 
                placeholder="请选择币种"
                defaultValue="CNY"
              >
                <Select.Option value="CNY">人民币</Select.Option>
                <Select.Option value="USD">美元</Select.Option>
                <Select.Option value="LAK">老挝基普</Select.Option>
                <Select.Option value="THB">泰铢</Select.Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="合同金额"
              name="contract_amount"
              rules={[{ required: true, message: '请输入合同金额' }]}
            >
              <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.currency !== currentValues.currency}>
                {({ getFieldValue }) => {
                  const currency = getFieldValue('currency') || 'CNY';
                  const currencySymbol = {
                    CNY: '¥',
                    USD: '$',
                    LAK: '₭',
                    THB: '฿'
                  }[currency] || '';
                  
                  return (
                    <InputNumber
                      style={{ width: '100%' }}
                      min={0}
                      placeholder="请输入合同金额"
                      formatter={(value) => {
                        if (value === undefined || value === null) return '';
                        return `${currencySymbol} ${value}`;
                      }}
                      parser={(value) => {
                        if (!value) return 0;
                        // 移除所有非数字字符，保留小数点
                        return parseFloat(value.replace(/[^0-9.]/g, '')) || 0;
                      }}
                    />
                  );
                }}
              </Form.Item>
            </Form.Item>

            <Form.Item
              label="结算方式"
              name="settlement_type"
              rules={[{ required: true, message: '请选择结算方式' }]}
            >
              <Select 
                placeholder="请选择结算方式"
                defaultValue="lump_sum"
                onChange={(value) => {
                  if (value === 'unit_price') {
                    // 当选择单价结算时，自动计算并设置合同金额
                    const totalAmount = unitPriceItems.reduce((sum, item) => sum + (item.total || 0), 0);
                    subcontractForm.setFieldsValue({ contract_amount: totalAmount });
                  }
                }}
              >
                <Select.Option value="lump_sum">总价包干</Select.Option>
                <Select.Option value="unit_price">单价结算</Select.Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="其他约定"
              name="other_terms"
            >
              <Input.TextArea rows={3} placeholder="请输入其他约定" />
            </Form.Item>

            <Form.Item
              label="付款说明"
              name="payment_description"
            >
              <Input.TextArea rows={3} placeholder="请输入付款说明" />
            </Form.Item>

            {/* 单价结算项目列表 - 只在单价结算时显示 */}
            <Form.Item
              noStyle
              shouldUpdate={(prevValues, currentValues) => prevValues.settlement_type !== currentValues.settlement_type || prevValues.currency !== currentValues.currency}
            >
              {({ getFieldValue }) => {
                const settlementType = getFieldValue('settlement_type');
                const currency = getFieldValue('currency') || 'CNY';
                const currencySymbol = {
                  CNY: '¥',
                  USD: '$',
                  LAK: '₭',
                  THB: '฿'
                }[currency] || '';
                
                if (settlementType === 'unit_price') {
                    // 计算总合计
                    const totalAmount = unitPriceItems.reduce((sum, item) => sum + (item.total || 0), 0);
                    
                    return (
                      <Form.Item label="项目单项价">
                        <div style={{ marginBottom: 16, padding: 16, border: '1px solid #f0f0f0', borderRadius: 8, backgroundColor: '#fafafa' }}>
                          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr 0.5fr', gap: 12, marginBottom: 12, paddingBottom: 12, borderBottom: '1px solid #e8e8e8' }}>
                            <div style={{ fontWeight: 'bold' }}>项目名称</div>
                            <div style={{ fontWeight: 'bold' }}>单位</div>
                            <div style={{ fontWeight: 'bold' }}>数量</div>
                            <div style={{ fontWeight: 'bold' }}>单价 ({currencySymbol})</div>
                            <div style={{ fontWeight: 'bold' }}>总价 ({currencySymbol})</div>
                            <div style={{ fontWeight: 'bold' }}>操作</div>
                          </div>
                          {unitPriceItems.map((item, index) => (
                            <div key={item.key} style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr 0.5fr', gap: 12, marginBottom: 12, alignItems: 'center' }}>
                              <Input
                                placeholder="请输入项目名称"
                                value={item.name}
                                onChange={(e) => handleUnitPriceItemChange(index, 'name', e.target.value)}
                              />
                              <Input
                                placeholder="请输入单位"
                                value={item.unit}
                                onChange={(e) => handleUnitPriceItemChange(index, 'unit', e.target.value)}
                              />
                              <InputNumber
                                min={0}
                                placeholder="数量"
                                value={item.quantity}
                                onChange={(value) => handleUnitPriceItemChange(index, 'quantity', value)}
                              />
                              <InputNumber
                                min={0}
                                placeholder="单价"
                                value={item.price}
                                onChange={(value) => handleUnitPriceItemChange(index, 'price', value)}
                                style={{ width: '100%' }}
                              />
                              <InputNumber
                                min={0}
                                disabled
                                value={item.total}
                                formatter={(value) => `${currencySymbol} ${value}`}
                              />
                              <Button danger size="small" onClick={() => removeUnitPriceItem(index)}>删除</Button>
                            </div>
                          ))}
                          {/* 合计行 */}
                          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr 0.5fr', gap: 12, marginTop: 12, paddingTop: 12, borderTop: '1px solid #e8e8e8' }}>
                            <div style={{ fontWeight: 'bold' }}>合计</div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div style={{ fontWeight: 'bold', color: '#888' }}>{currencySymbol} {totalAmount.toLocaleString()}</div>
                            <div></div>
                          </div>
                        </div>
                        <Button type="dashed" style={{ width: '100%' }} onClick={() => addUnitPriceItem()}>
                          + 添加项目单项
                        </Button>
                      </Form.Item>
                    );
                  }
                return null;
              }}
            </Form.Item>

            <Form.Item
              label="开始日期"
              name="start_date"
              rules={[{ required: true, message: '请选择开始日期' }]}
            >
              <DatePicker 
                style={{ width: '100%' }} 
                onChange={(date) => {
                  const values = subcontractForm.getFieldsValue();
                  if (date && values.work_days) {
                    // 计算结束日期（减去1天，因为后端计算时会加1天）
                    const endDate = dayjs(date).add(values.work_days - 1, 'day');
                    subcontractForm.setFieldsValue({ end_date: endDate });
                  }
                }}
              />
            </Form.Item>

            <Form.Item
              label="工期天数"
              name="work_days"
              rules={[{ required: true, message: '请输入工期天数' }]}
            >
              <InputNumber 
                min={1} 
                placeholder="请输入工期天数" 
                onChange={(value) => {
                  const values = subcontractForm.getFieldsValue();
                  if (value && values.start_date) {
                    // 计算结束日期（减去1天，因为后端计算时会加1天）
                    const endDate = dayjs(values.start_date).add(value - 1, 'day');
                    subcontractForm.setFieldsValue({ end_date: endDate });
                  }
                }}
              />
            </Form.Item>

            <Form.Item
              label="结束日期"
              name="end_date"
              rules={[{ required: true, message: '请选择结束日期' }]}
            >
              <DatePicker 
                style={{ width: '100%' }} 
                onChange={(date) => {
                  const values = subcontractForm.getFieldsValue();
                  if (date && values.start_date) {
                    // 计算工期天数（加上1天，与后端计算逻辑一致）
                    const startDate = dayjs(values.start_date);
                    const endDate = dayjs(date);
                    const diffDays = endDate.diff(startDate, 'day') + 1;
                    subcontractForm.setFieldsValue({ work_days: diffDays });
                  }
                }}
              />
            </Form.Item>

            <Form.Item
              label="状态"
              name="status"
            >
              <Select 
                placeholder="请选择状态"
                defaultValue="active"
              >
                <Select.Option value="active">进行中</Select.Option>
                <Select.Option value="completed">已完成</Select.Option>
              </Select>
            </Form.Item>
          </Form>
        </div>
      </Modal>

      {/* 合同编辑模态框 */}
      <Modal
        title="合同细节录入"
        open={contractEditModalVisible}
        onCancel={() => setContractEditModalVisible(false)}
        onOk={async () => {
          try {
            // 手动设置合同总价字段，确保在单价结算时也有值
            if (settlementType === 'unit_price') {
              await contractForm.setFieldsValue({ contract_total: contractTotal });
            }
            
            const values = await contractForm.validateFields();
            const actualSettlementType = values.settlement_type || settlementType;
            const finalContractTotal = actualSettlementType === 'unit_price' ? contractTotal : (values.contract_total || 0);
            const saveData = {
              project_id: id,
              project_overview: values.project_overview,
              settlement_type: actualSettlementType,
              contract_total: finalContractTotal,
              tax_included: values.tax_included || false,
              unit_price_items: unitPriceItems,
              payment_nodes: paymentNodes,
              other_info: values.other_info || '',
              contract_file: contractFile
            };
            
            
            // 发送保存请求
            const response = await apiClient.put(`/projects/${id}/contract`, saveData);
            if (response.data.success) {
              message.success('合同细节保存成功');
              // 重新获取项目信息
              fetchProject();
              fetchProjectData();
              setContractEditModalVisible(false);
            } else {
              message.error('保存失败：' + response.data.message);
            }
          } catch (error) {
            console.error('保存失败:', error);
            message.error('保存失败，请检查表单数据');
          }
        }}
        width={900}
        okText="保存"
        cancelText="取消"
      >
        <div style={{ padding: 20 }}>
          <Form layout="vertical" form={contractForm}>
            {/* 工程概况 */}
            <Form.Item
              label="工程概况"
              name="project_overview"
              rules={[{ required: true, message: '请输入工程概况' }]}
            >
              <Input.TextArea rows={4} placeholder="请输入工程概况" />
            </Form.Item>

            {/* 结算方式 */}
            <Form.Item
              label="结算方式"
              name="settlement_type"
              rules={[{ required: true, message: '请选择结算方式' }]}
            >
              <Select
                placeholder="请选择结算方式"
                options={[
                  { value: 'lump_sum', label: '总价包干' },
                  { value: 'unit_price', label: '单价结算' }
                ]}
                onChange={(val) => {
                  setSettlementType(val);
                  if (val === 'lump_sum') {
                    const formTotal = contractForm.getFieldValue('contract_total') || 0;
                    setContractTotal(formTotal);
                  }
                }}
              />
            </Form.Item>

            {/* 合同总价 - 只在总价包干时显示 */}
            {settlementType === 'lump_sum' && (
              <Form.Item
                label="合同总价"
                name="contract_total"
                rules={[{ required: true, message: '请输入合同总价' }]}
              >
                <InputNumber 
                  min={0} 
                  placeholder="请输入合同总价" 
                  formatter={(value) => `¥ ${value}`}
                  parser={(value) => value?.replace(/¥\s?/, '')}
                  onChange={(val) => setContractTotal(val || 0)}
                />
              </Form.Item>
            )}
            {/* 隐藏的合同总价字段 - 用于单价结算时的验证 */}
            {settlementType === 'unit_price' && (
              <Form.Item
                name="contract_total"
                hidden
              >
                <InputNumber 
                  min={0} 
                />
              </Form.Item>
            )}

            {/* 合同是否含税 */}
            <Form.Item
              label="合同是否含税"
              name="tax_included"
              valuePropName="checked"
            >
              <Switch checkedChildren="是" unCheckedChildren="否" />
            </Form.Item>

            {/* 单价结算项目 - 只在单价结算时显示 */}
            {settlementType === 'unit_price' && (
              <Form.Item label="项目单项价">
                <Table
                  dataSource={unitPriceItems}
                  columns={[
                    { 
                      title: '项目名称', 
                      dataIndex: 'name', 
                      key: 'name', 
                      render: (_, record, index) => (
                        <Input 
                          placeholder="请输入项目名称" 
                          value={unitPriceItems[index].name}
                          onChange={(e) => handleUnitPriceItemChange(index, 'name', e.target.value)}
                        />
                      ) 
                    },
                    { 
                      title: '单位', 
                      dataIndex: 'unit', 
                      key: 'unit', 
                      render: (_, record, index) => (
                        <Input 
                          placeholder="请输入单位" 
                          value={unitPriceItems[index].unit}
                          onChange={(e) => handleUnitPriceItemChange(index, 'unit', e.target.value)}
                        />
                      ) 
                    },
                    { 
                      title: '数量', 
                      dataIndex: 'quantity', 
                      key: 'quantity', 
                      render: (_, record, index) => (
                        <InputNumber 
                          min={0} 
                          placeholder="请输入数量" 
                          value={unitPriceItems[index].quantity}
                          onChange={(value) => handleUnitPriceItemChange(index, 'quantity', value)}
                        />
                      ) 
                    },
                    { 
                      title: '单价', 
                      dataIndex: 'price', 
                      key: 'price', 
                      render: (_, record, index) => (
                        <InputNumber 
                          min={0} 
                          placeholder="请输入单价" 
                          value={unitPriceItems[index].price}
                          onChange={(value) => handleUnitPriceItemChange(index, 'price', value)}
                        />
                      ) 
                    },
                    { 
                      title: '总价', 
                      dataIndex: 'total', 
                      key: 'total', 
                      render: (_, record, index) => (
                        <InputNumber 
                          min={0} 
                          disabled 
                          value={unitPriceItems[index].total}
                        />
                      ) 
                    },
                    { title: '操作', key: 'action', render: (_, record, index) => <Button danger onClick={() => removeUnitPriceItem(index)}>删除</Button> }
                  ]}
                  pagination={false}
                  locale={{ emptyText: '暂无项目单项' }}
                />
                <Button type="dashed" style={{ marginTop: 16 }} onClick={() => addUnitPriceItem()}>添加项目单项</Button>
              </Form.Item>
            )}

            {/* 付款节点 */}
            <Form.Item label="付款节点">
              <Table
                dataSource={paymentNodes}
                columns={[
                  { 
                    title: '节点名称', 
                    dataIndex: 'name', 
                    key: 'name', 
                    render: (_, record, index) => (
                      <Input 
                        placeholder="请输入节点名称" 
                        value={paymentNodes[index].name}
                        onChange={(e) => {
                          const newNodes = [...paymentNodes]
                          newNodes[index].name = e.target.value
                          setPaymentNodes(newNodes)
                        }}
                      />
                    ) 
                  },
                  { 
                    title: '节点条件', 
                    dataIndex: 'condition', 
                    key: 'condition', 
                    render: (_, record, index) => (
                      <Input 
                        placeholder="请输入节点条件" 
                        value={paymentNodes[index].condition}
                        onChange={(e) => {
                          const newNodes = [...paymentNodes]
                          newNodes[index].condition = e.target.value
                          setPaymentNodes(newNodes)
                        }}
                      />
                    ) 
                  },
                  { 
                    title: '比例(%)', 
                    dataIndex: 'percentage', 
                    key: 'percentage', 
                    render: (_, record, index) => (
                      <InputNumber 
                        min={0} 
                        max={100} 
                        placeholder="请输入比例" 
                        value={paymentNodes[index].percentage}
                        onChange={(value) => handlePaymentNodePercentageChange(index, value || 0)}
                      />
                    ) 
                  },
                  { 
                    title: '金额', 
                    dataIndex: 'amount', 
                    key: 'amount', 
                    render: (_, record, index) => (
                      <InputNumber 
                        min={0} 
                        placeholder="请输入金额" 
                        value={paymentNodes[index].amount}
                        disabled
                      />
                    ) 
                  },
                  { 
                    title: '状态', 
                    dataIndex: 'status', 
                    key: 'status', 
                    render: () => <Tag color="default">未到达付款节点</Tag> 
                  },
                  { title: '操作', key: 'action', render: (_, record, index) => <Button danger onClick={() => { const newNodes = [...paymentNodes]; newNodes.splice(index, 1); setPaymentNodes(newNodes); }}>删除</Button> }
                ]}
                pagination={false}
                locale={{ emptyText: '暂无付款节点' }}
              />
              <Button type="dashed" style={{ marginTop: 16 }} onClick={() => { setPaymentNodes([...paymentNodes, { key: String(Date.now()), name: '', condition: '', percentage: 0, amount: 0, status: 'pending' }]); }}>添加付款节点</Button>
            </Form.Item>

            {/* 合同附件 */}
            <Form.Item label="合同附件">
              <Upload
                name="file"
                customRequest={handleFileUpload}
                listType="text"
                maxCount={1}
                fileList={contractFile ? [{ uid: '1', name: contractFile.split('/').pop() || '', status: 'done', url: contractFile }] : []}
                onRemove={() => setContractFile('')}
              >
                <Button icon={<UploadOutlined />}>{contractFile ? '更换文件' : '点击上传'}</Button>
              </Upload>
            </Form.Item>

            {/* 其他信息 */}
            <Form.Item
              label="其他合同信息"
              name="other_info"
            >
              <Input.TextArea rows={4} placeholder="请输入其他合同相关信息" />
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </div>
  )
}

export default ProjectDetail