import React, { useState, useEffect } from 'react';
import { Card, Typography, Button, Space, Table, Tag, Modal, Form, Input, InputNumber, DatePicker, Select, message, Radio, Upload, Row, Col, Divider, Popconfirm } from 'antd';
import { PlusOutlined, DeleteOutlined, UploadOutlined, EditOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import dayjs from 'dayjs';
import { useAuthStore } from '../../store/authStore';

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

const CURRENCIES = [
  { value: 'CNY', label: '人民币', symbol: '¥' },
  { value: 'USD', label: '美元', symbol: '$' },
  { value: 'LAK', label: '老挝基普', symbol: '₭' },
  { value: 'THB', label: '泰铢', symbol: '฿' },
];

interface PaymentNode {
  id?: number;
  node_name: string;
  percentage: number;
  node_amount: number;
  trigger_condition: string;
}

interface UnitPriceItem {
  id?: number;
  item_name: string;
  unit: string;
  quantity: number;
  unit_price: number;
  total_price: number;
}

const ProjectsPage: React.FC = () => {
  const [isMobile, setIsMobile] = useState(false);
  const [projects, setProjects] = useState([]);
  const [customers, setCustomers] = useState([]);
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingProject, setEditingProject] = useState<any>(null);
  const [form] = Form.useForm();
  const navigate = useNavigate();

  // 当前用户信息 - 使用zustand authStore
  const { user: currentUser } = useAuthStore();
  const isAdmin = currentUser?.role === 'admin';

  // 表单监听值
  const settlementType = Form.useWatch('settlement_type', form);
  const contractAmount = Form.useWatch('contract_amount', form);
  const currency = Form.useWatch('currency', form);
  const contractDays = Form.useWatch('contract_days', form);
  const startDate = Form.useWatch('start_date', form);

  // 付款节点和单价列表
  const [paymentNodes, setPaymentNodes] = useState<PaymentNode[]>([]);
  const [unitPriceList, setUnitPriceList] = useState<UnitPriceItem[]>([]);

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

  useEffect(() => {
    fetchProjects();
    fetchCustomers();
    fetchUsers();
  }, []);

  // 自动计算结束日期
  useEffect(() => {
    if (startDate && contractDays) {
      const endDate = startDate.add(contractDays, 'day');
      form.setFieldsValue({ expected_end_date: endDate });
    }
  }, [startDate, contractDays, form]);

  const fetchProjects = async () => {
    setLoading(true);
    try {
      const res = await axios.get('/api/projects');
      if (res.data.success) setProjects(res.data.data);
    } catch (error) {
      console.error('获取项目失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const fetchCustomers = async () => {
    try {
      const res = await axios.get('/api/customers');
      if (res.data.success) setCustomers(res.data.data);
    } catch (error) {
      console.error('获取客户列表失败:', error);
    }
  };

  const fetchUsers = async () => {
    try {
      const res = await axios.get('/api/users');
      if (res.data.success) setUsers(res.data.data);
    } catch (error) {
      console.error('获取用户列表失败:', error);
    }
  };

  // 添加付款节点
  const addPaymentNode = () => {
    setPaymentNodes([...paymentNodes, {
      node_name: '',
      percentage: 0,
      node_amount: 0,
      trigger_condition: ''
    }]);
  };

  // 删除付款节点
  const removePaymentNode = (index: number) => {
    const newNodes = paymentNodes.filter((_, i) => i !== index);
    setPaymentNodes(newNodes);
  };

  // 更新付款节点
  const updatePaymentNode = (index: number, field: string, value: any) => {
    const newNodes = [...paymentNodes];
    newNodes[index] = { ...newNodes[index], [field]: value };
    if (field === 'percentage' && contractAmount) {
      newNodes[index].node_amount = contractAmount * value / 100;
    }
    setPaymentNodes(newNodes);
  };

  // 添加单价项
  const addUnitPriceItem = () => {
    setUnitPriceList([...unitPriceList, {
      item_name: '',
      unit: '',
      quantity: 0,
      unit_price: 0,
      total_price: 0
    }]);
  };

  // 删除单价项
  const removeUnitPriceItem = (index: number) => {
    const newItems = unitPriceList.filter((_, i) => i !== index);
    setUnitPriceList(newItems);
  };

  // 更新单价项
  const updateUnitPriceItem = (index: number, field: string, value: any) => {
    const newItems = [...unitPriceList];
    newItems[index] = { ...newItems[index], [field]: value };
    if (field === 'quantity' || field === 'unit_price') {
      const item = newItems[index];
      item.total_price = (item.quantity || 0) * (item.unit_price || 0);
    }
    setUnitPriceList(newItems);
  };

  // 计算单价结算总金额
  const totalUnitPrice = unitPriceList.reduce((sum, item) => sum + (item.total_price || 0), 0);

  const handleCreate = () => {
    setEditingProject(null);
    form.resetFields();
    setPaymentNodes([]);
    setUnitPriceList([]);
    setModalVisible(true);
  };

  const handleEdit = (record: any) => {
    setEditingProject(record);
    form.setFieldsValue({
      ...record,
      start_date: record.start_date ? dayjs(record.start_date) : null,
      expected_end_date: record.expected_end_date ? dayjs(record.expected_end_date) : null,
    });
    setPaymentNodes(record.payment_nodes || []);
    setUnitPriceList(record.unit_price_list || []);
    setModalVisible(true);
  };

  const handleDelete = async (id: number) => {
    try {
      const res = await axios.delete('/api/projects/' + id);
      if (res.data.success) {
        message.success('删除成功');
        fetchProjects();
      }
    } catch (error) {
      message.error('删除失败');
    }
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      
      const totalPercentage = paymentNodes.reduce((sum, node) => sum + (node.percentage || 0), 0);
      if (paymentNodes.length > 0 && totalPercentage > 100) {
        message.error('付款节点比例总和不能超过100%');
        return;
      }

      const projectData = {
        ...values,
        start_date: values.start_date?.format('YYYY-MM-DD'),
        expected_end_date: values.expected_end_date?.format('YYYY-MM-DD'),
        contract_amount: settlementType === 'unit' ? totalUnitPrice : values.contract_amount,
        payment_nodes: paymentNodes,
        unit_price_list: settlementType === 'unit' ? unitPriceList : [],
        status: editingProject ? values.status : 'planning',
      };

      if (editingProject) {
        const res = await axios.put('/api/projects/' + editingProject.id, projectData);
        if (res.data.success) {
          message.success('更新成功');
          setModalVisible(false);
          fetchProjects();
        }
      } else {
        const res = await axios.post('/api/projects', projectData);
        if (res.data.success) {
          message.success('创建成功');
          setModalVisible(false);
          fetchProjects();
        }
      }
    } catch (error) {
      message.error('操作失败');
    }
  };

  const getStatusTag = (status: string) => {
    const statusMap: Record<string, { color: string; text: string }> = {
      planning: { color: 'default', 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 formatAmount = (val: number, curr: string = 'CNY') => {
    const c = CURRENCIES.find(item => item.value === curr);
    const symbol = c?.symbol || '¥';
    return symbol + ' ' + (val || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2 });
  };

  const columns = [
    { title: '项目编号', dataIndex: 'project_code', width: 120 },
    { title: '项目名称', dataIndex: 'name', ellipsis: true },
    { title: '客户', dataIndex: 'customer_name', render: (v: string) => v || '-' },
    { title: '项目经理', dataIndex: 'manager_name', render: (v: string) => v || '-' },
    { title: '合同金额', dataIndex: 'contract_amount', render: (v: number, r: any) => formatAmount(v, r.currency) },
    { title: '状态', dataIndex: 'status', render: (status: string) => getStatusTag(status) },
    { title: '开始日期', dataIndex: 'start_date' },
    { title: '操作', key: 'action', width: isAdmin ? 200 : 80, render: (_: any, record: any) => (
      <Space>
        <Button size="small" onClick={() => navigate('/projects/' + record.id)}>查看</Button>
        {isAdmin && (
          <>
            <Button size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
            <Popconfirm title="确定删除此项目吗？" onConfirm={() => handleDelete(record.id)}>
              <Button size="small" danger icon={<DeleteOutlined />}>删除</Button>
            </Popconfirm>
          </>
        )}
      </Space>
    )}
  ];

  return (
    <div style={{ padding: isMobile ? 8 : 24 }}>
      <div style={{ marginBottom: isMobile ? 12 : 24 }}>
        <Title level={isMobile ? 3 : 2} style={{ marginBottom: 8 }}>项目管理</Title>
        <Paragraph type="secondary" style={{ marginBottom: 0 }}>管理项目信息、进度和预算</Paragraph>
      </div>
      
      <Card 
        title="项目列表" 
        extra={isAdmin && <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>新建项目</Button>}
      >
        <Table dataSource={projects} columns={columns} rowKey="id" loading={loading} pagination={{ pageSize: 10 }} scroll={{ x: 1200 }} />
      </Card>

      {isAdmin && (
        <Modal
          title={editingProject ? '编辑项目' : '新建项目'}
          open={modalVisible}
          onOk={handleSubmit}
          onCancel={() => setModalVisible(false)}
          width={1000}
          style={{ top: 20 }}
          okText="确定"
          cancelText="取消"
        >
          <Form form={form} layout="vertical" initialValues={{ settlement_type: 'total', currency: 'CNY' }}>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item name="name" label="项目名称" rules={[{ required: true }]}>
                  <Input placeholder="请输入项目名称" size="large" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="customer_id" label="客户名称" rules={[{ required: true }]}>
                  <Select placeholder="选择客户" showSearch optionFilterProp="children" size="large">
                    {customers.map((c: any) => <Option key={c.id} value={c.id}>{c.name}</Option>)}
                  </Select>
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={16}>
              <Col span={12}>
                <Form.Item name="project_manager_id" label="项目负责人" rules={[{ required: true }]}>
                  <Select placeholder="选择项目负责人" showSearch optionFilterProp="children" size="large">
                    {users.map((u: any) => <Option key={u.id} value={u.id}>{u.name} ({u.department})</Option>)}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="work_quantity" label="工程量">
                  <Input placeholder="如：10000立方米、5000平方米" size="large" />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item name="project_situation" label="项目情况">
              <TextArea rows={2} placeholder="描述项目具体情况" />
            </Form.Item>

            <Divider orientation="left">结算方式</Divider>

            <Row gutter={16}>
              <Col span={8}>
                <Form.Item name="settlement_type" label="结算方式" rules={[{ required: true }]}>
                  <Radio.Group onChange={() => { setPaymentNodes([]); setUnitPriceList([]); }}>
                    <Radio value="total">总价包干</Radio>
                    <Radio value="unit">单价结算</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="currency" label="币种">
                  <Select size="large">
                    {CURRENCIES.map(c => <Option key={c.value} value={c.value}>{c.label}</Option>)}
                  </Select>
                </Form.Item>
              </Col>
              {settlementType === 'total' && (
                <Col span={8}>
                  <Form.Item name="contract_amount" label="合同金额" rules={[{ required: true }]}>
                    <InputNumber 
                      style={{ width: '100%' }} 
                      size="large"
                      min={0} 
                      precision={2} 
                      formatter={v => v ? v.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') : ''} 
                      parser={v => v ? v.replace(/,/g, '') : ''} 
                    />
                  </Form.Item>
                </Col>
              )}
            </Row>

            {settlementType === 'unit' && (
              <div style={{ marginBottom: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                  <Text strong style={{ fontSize: 16 }}>单价结算明细</Text>
                  <Button type="dashed" onClick={addUnitPriceItem} icon={<PlusOutlined />}>添加项目</Button>
                </div>
                
                {unitPriceList.length === 0 && (
                  <div style={{ padding: 24, textAlign: 'center', background: '#fafafa', borderRadius: 8, border: '1px dashed #d9d9d9' }}>
                    <Text type="secondary">点击上方"添加项目"按钮添加明细</Text>
                  </div>
                )}

                {unitPriceList.map((item, index) => (
                  <Card 
                    key={index} 
                    size="small" 
                    style={{ marginBottom: 12, background: '#fafafa' }}
                    title={<Text>项目 {index + 1}</Text>}
                    extra={<Button type="text" danger icon={<DeleteOutlined />} onClick={() => removeUnitPriceItem(index)}>删除</Button>}
                  >
                    <Row gutter={16}>
                      <Col span={12}>
                        <Form.Item label="项目名称">
                          <Input 
                            value={item.item_name} 
                            onChange={e => updateUnitPriceItem(index, 'item_name', e.target.value)} 
                            placeholder="如：土方开挖"
                          />
                        </Form.Item>
                      </Col>
                      <Col span={6}>
                        <Form.Item label="单位">
                          <Input 
                            value={item.unit} 
                            onChange={e => updateUnitPriceItem(index, 'unit', e.target.value)} 
                            placeholder="如：m³"
                          />
                        </Form.Item>
                      </Col>
                      <Col span={6}>
                        <Form.Item label="数量">
                          <InputNumber 
                            style={{ width: '100%' }}
                            value={item.quantity} 
                            onChange={val => updateUnitPriceItem(index, 'quantity', val)} 
                            min={0}
                          />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <Form.Item label="单价">
                          <InputNumber 
                            style={{ width: '100%' }}
                            value={item.unit_price} 
                            onChange={val => updateUnitPriceItem(index, 'unit_price', val)} 
                            min={0}
                            precision={2}
                            formatter={v => v ? formatAmount(parseFloat(v.toString()), currency) : ''}
                          />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item label="总价">
                          <Text strong style={{ fontSize: 16 }}>{formatAmount(item.total_price, currency)}</Text>
                        </Form.Item>
                      </Col>
                    </Row>
                  </Card>
                ))}

                {unitPriceList.length > 0 && (
                  <div style={{ padding: 16, background: '#e6f7ff', borderRadius: 8, textAlign: 'right' }}>
                    <Text strong style={{ fontSize: 16 }}>合计金额：{formatAmount(totalUnitPrice, currency)}</Text>
                  </div>
                )}
              </div>
            )}

            <Divider orientation="left">付款节点</Divider>

            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                <Text strong style={{ fontSize: 16 }}>付款节点设置</Text>
                <Button type="dashed" onClick={addPaymentNode} icon={<PlusOutlined />}>添加节点</Button>
              </div>
              
              {paymentNodes.length === 0 && (
                <div style={{ padding: 24, textAlign: 'center', background: '#fafafa', borderRadius: 8, border: '1px dashed #d9d9d9' }}>
                  <Text type="secondary">点击上方"添加节点"按钮添加付款节点</Text>
                </div>
              )}

              {paymentNodes.map((node, index) => (
                <Card 
                  key={index} 
                  size="small" 
                  style={{ marginBottom: 12, background: '#fafafa' }}
                  title={<Text>节点 {index + 1}</Text>}
                  extra={<Button type="text" danger icon={<DeleteOutlined />} onClick={() => removePaymentNode(index)}>删除</Button>}
                >
                  <Row gutter={16}>
                    <Col span={12}>
                      <Form.Item label="节点名称">
                        <Input 
                          value={node.node_name} 
                          onChange={e => updatePaymentNode(index, 'node_name', e.target.value)} 
                          placeholder="如：预付款、进度款、尾款"
                        />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item label="比例(%)">
                        <InputNumber 
                          style={{ width: '100%' }}
                          value={node.percentage} 
                          onChange={val => updatePaymentNode(index, 'percentage', val)} 
                          min={0} 
                          max={100}
                          placeholder="如：30"
                        />
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                      <Form.Item label="金额">
                        <Text strong style={{ fontSize: 16 }}>{formatAmount(node.node_amount || 0, currency)}</Text>
                      </Form.Item>
                    </Col>
                  </Row>
                  <Form.Item label="触发条件">
                    <Input 
                      value={node.trigger_condition} 
                      onChange={e => updatePaymentNode(index, 'trigger_condition', e.target.value)} 
                      placeholder="如：合同签订后支付、工程完工后支付"
                    />
                  </Form.Item>
                </Card>
              ))}

              {paymentNodes.length > 0 && (
                <div style={{ padding: 16, background: '#f6ffed', borderRadius: 8, textAlign: 'right' }}>
                  <Text type="secondary">总比例：</Text>
                  <Text strong style={{ fontSize: 16, marginLeft: 8 }}>{paymentNodes.reduce((sum, n) => sum + (n.percentage || 0), 0)}%</Text>
                </div>
              )}
            </div>

            <Divider orientation="left">工期要求</Divider>

            <Row gutter={16}>
              <Col span={8}>
                <Form.Item name="contract_days" label="合同工期（天）">
                  <InputNumber style={{ width: '100%' }} min={1} placeholder="输入天数" size="large" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="start_date" label="开始日期">
                  <DatePicker style={{ width: '100%' }} size="large" />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="expected_end_date" label="结束日期">
                  <DatePicker style={{ width: '100%' }} size="large" disabled />
                </Form.Item>
              </Col>
            </Row>

            <Divider orientation="left">合同附件</Divider>

            <Form.Item name="contract_file" label="上传合同">
              <Upload maxCount={1} accept=".pdf,.doc,.docx,.jpg,.png">
                <Button icon={<UploadOutlined />}>选择文件</Button>
              </Upload>
            </Form.Item>
          </Form>
        </Modal>
      )}
    </div>
  );
};

export default ProjectsPage;