import React, { useState, useEffect } from 'react';
import { Table, Card, Tag, Button, Space, Input, DatePicker, Select, message, Descriptions, Divider, Tabs, Modal, Result } from 'antd';
import { EyeOutlined, CalendarOutlined, UserOutlined, FilterOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { useAuthStore } from '../../store/authStore';

const { Option } = Select;
const { RangePicker } = DatePicker;

const AdvanceVerificationStatusPage: React.FC = () => {
  const { user } = useAuthStore();
  const [loading, setLoading] = useState(false);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [selectedAdvance, setSelectedAdvance] = useState<any>(null);
  const [unsettledAdvances, setUnsettledAdvances] = useState<any[]>([]);
  const [settledAdvances, setSettledAdvances] = useState<any[]>([]);
  const [searchName, setSearchName] = useState('');
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs, dayjs.Dayjs] | null>(null);
  const [sortField, setSortField] = useState('');
  const [sortOrder, setSortOrder] = useState('');

  // 检查权限
  const hasPermission = user?.role === 'admin' || user?.department === '财务部';
  
  if (!hasPermission) {
    return (
      <div style={{ padding: 24, textAlign: 'center' }}>
        <Result
          status="403"
          title="无权限访问"
          subTitle="您没有权限访问此页面，只有管理员和财务人员可以查看预支核销状态。"
        />
      </div>
    );
  }

  // 获取未核销和已核销的预支单
  const fetchAdvances = async () => {
    setLoading(true);
    try {
      // 获取所有预支单
      const res = await fetch('/api/advances');
      const data = await res.json();
      if (data.success) {
        // 处理数据，确保每个预支单都有total_reimbursed字段
        const processedAdvances = data.data.map((advance: any) => ({
          ...advance,
          total_reimbursed: advance.total_reimbursed || 0,
          isSettled: advance.status === 'settled' || (advance.total_reimbursed || 0) >= advance.amount
        }));

        // 分离未核销和已核销的预支单
        const unsettled = processedAdvances.filter((advance: any) => !advance.isSettled && (advance.status === 'approved' || advance.status === 'executed' || advance.status === 'partial_verification'));
        const settled = processedAdvances.filter((advance: any) => advance.isSettled || advance.status === 'settled' || advance.status === 'completed');

        setUnsettledAdvances(unsettled);
        setSettledAdvances(settled);
      }
    } catch (error) {
      message.error('获取预支单失败');
    } finally {
      setLoading(false);
    }
  };

  // 获取预支单详情，包括关联的核销单
  const fetchAdvanceDetail = async (advanceId: number) => {
    setLoading(true);
    try {
      // 获取预支单详情
      const advanceRes = await fetch(`/api/advances/${advanceId}`);
      const advanceData = await advanceRes.json();
      
      if (advanceData.success) {
        // 获取关联的核销单
        const verificationRes = await fetch(`/api/verifications?advance_id=${advanceId}`);
        const verificationData = await verificationRes.json();
        
        if (verificationData.success) {
          // 只保留已执行或已批准的核销单，并且关联的预支单编号与当前预支单一致
          const validVerifications = (verificationData.data || []).filter((verification: any) => 
            (verification.status === 'approved' || verification.status === 'executed') && 
            verification.advance_code === advanceData.data.advance_code
          );
          
          setSelectedAdvance({
            ...advanceData.data,
            verifications: validVerifications
          });
          setDetailModalVisible(true);
        }
      }
    } catch (error) {
      message.error('获取预支单详情失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchAdvances();
  }, []);

  const formatAmount = (amount: number, currency: string = 'CNY') => {
    const symbols: Record<string, string> = { CNY: '¥', USD: '$', LAK: '₭', THB: '฿' };
    return (symbols[currency] || '¥') + (amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  };

  const getStatusTag = (status: string) => {
    const statusMap: Record<string, { color: string; text: string }> = {
      pending: { color: 'processing', text: '待审批' },
      approved: { color: 'success', text: '已批准' },
      rejected: { color: 'error', text: '已退回' },
      withdrawn: { color: 'default', text: '已撤回' },
      settled: { color: 'blue', text: '已核销' },
      pending_edit: { color: 'warning', text: '待编辑' },
      partial_verification: { color: 'orange', text: '部分核销' },
      completed: { color: 'green', text: '已完成' },
    };
    const config = statusMap[status] || { color: 'default', text: status };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

  const handleSearch = () => {
    // 这里可以添加搜索逻辑
    fetchAdvances();
  };

  const handleSort = (field: string, order: string) => {
    setSortField(field);
    setSortOrder(order);
    // 这里可以添加排序逻辑
    fetchAdvances();
  };

  const columns = [
    {
      title: '事由',
      dataIndex: 'reason',
      key: 'reason',
      ellipsis: true,
      render: (v: string, r: any) => (
        <a onClick={() => fetchAdvanceDetail(r.id)}>{v}</a>
      )
    },
    {
      title: '申请人',
      dataIndex: 'applicant',
      key: 'applicant',
      width: 100,
      sorter: (a: any, b: any) => a.applicant.localeCompare(b.applicant),
      onHeaderCell: (column: any) => ({
        onClick: () => handleSort('applicant', sortOrder === 'ascend' ? 'descend' : 'ascend')
      })
    },
    {
      title: '预支金额',
      dataIndex: 'amount',
      key: 'amount',
      width: 140,
      render: (v: number, r: any) => formatAmount(v, r.currency),
      sorter: (a: any, b: any) => a.amount - b.amount,
      onHeaderCell: (column: any) => ({
        onClick: () => handleSort('amount', sortOrder === 'ascend' ? 'descend' : 'ascend')
      })
    },
    {
      title: '已核销金额',
      dataIndex: 'total_reimbursed',
      key: 'total_reimbursed',
      width: 140,
      render: (v: number, r: any) => formatAmount(v || 0, r.currency),
      sorter: (a: any, b: any) => (a.total_reimbursed || 0) - (b.total_reimbursed || 0),
      onHeaderCell: (column: any) => ({
        onClick: () => handleSort('total_reimbursed', sortOrder === 'ascend' ? 'descend' : 'ascend')
      })
    },
    {
      title: '剩余金额',
      dataIndex: 'remaining',
      key: 'remaining',
      width: 140,
      render: (_, r: any) => formatAmount((r.amount || 0) - (r.total_reimbursed || 0), r.currency),
      sorter: (a: any, b: any) => ((a.amount || 0) - (a.total_reimbursed || 0)) - ((b.amount || 0) - (b.total_reimbursed || 0)),
      onHeaderCell: (column: any) => ({
        onClick: () => handleSort('remaining', sortOrder === 'ascend' ? 'descend' : 'ascend')
      })
    },
    {
      title: '预支日期',
      dataIndex: 'advance_date',
      key: 'advance_date',
      width: 120,
      sorter: (a: any, b: any) => new Date(a.advance_date).getTime() - new Date(b.advance_date).getTime(),
      onHeaderCell: (column: any) => ({
        onClick: () => handleSort('advance_date', sortOrder === 'ascend' ? 'descend' : 'ascend')
      })
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (status: string) => getStatusTag(status)
    },
    {
      title: '编号',
      dataIndex: 'advance_code',
      key: 'advance_code',
      width: 120
    },
    {
      title: '操作',
      key: 'action',
      width: 80,
      render: (_: any, record: any) => (
        <Space wrap>
          <Button size="small" icon={<EyeOutlined />} onClick={() => fetchAdvanceDetail(record.id)}>详情</Button>
        </Space>
      )
    }
  ];

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ marginBottom: 8 }}>预支核销状态管理</h2>
        <p style={{ color: '#888', marginBottom: 0 }}>管理预支单的核销状态和进度</p>
      </div>

      {/* 搜索和筛选区域 */}
      <Card style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'flex-end' }}>
          <div style={{ flex: 1, minWidth: 200 }}>
            <Input
              placeholder="按申请人姓名搜索"
              prefix={<UserOutlined />}
              value={searchName}
              onChange={(e) => setSearchName(e.target.value)}
              style={{ width: '100%' }}
            />
          </div>
          <div style={{ width: 300 }}>
            <RangePicker
              placeholder={['开始日期', '结束日期']}
              onChange={(dates) => setDateRange(dates)}
              style={{ width: '100%' }}
            />
          </div>
          <Button type="primary" icon={<FilterOutlined />} onClick={handleSearch}>
            搜索
          </Button>
        </div>
      </Card>

      {/* 预支单列表 */}
      <Card>
        <Tabs
          items={[
            {
              key: 'unsettled',
              label: '未核销完成',
              children: (
                <Table
                  dataSource={unsettledAdvances}
                  columns={columns}
                  rowKey="id"
                  loading={loading}
                  pagination={{ pageSize: 20 }}
                  scroll={{ x: 1200 }}
                />
              )
            },
            {
              key: 'settled',
              label: '已完结',
              children: (
                <Table
                  dataSource={settledAdvances}
                  columns={columns}
                  rowKey="id"
                  loading={loading}
                  pagination={{ pageSize: 20 }}
                  scroll={{ x: 1200 }}
                />
              )
            }
          ]}
        />
      </Card>

      {/* 详情模态框 */}
      <Modal
        title={`预支单详情：${selectedAdvance?.advance_code}`}
        open={detailModalVisible}
        onCancel={() => setDetailModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setDetailModalVisible(false)}>关闭</Button>
        ]}
        width={900}
      >
        {selectedAdvance && (
          <>
            {/* 预支单基本信息 */}
            <Descriptions bordered column={2} size="small">
              <Descriptions.Item label="预支编号">{selectedAdvance.advance_code}</Descriptions.Item>
              <Descriptions.Item label="状态">{getStatusTag(selectedAdvance.status)}</Descriptions.Item>
              <Descriptions.Item label="申请人">{selectedAdvance.applicant}</Descriptions.Item>
              <Descriptions.Item label="预支日期">{selectedAdvance.advance_date}</Descriptions.Item>
              <Descriptions.Item label="金额">
                {formatAmount(selectedAdvance.amount, selectedAdvance.currency)}
                {selectedAdvance.currency !== 'CNY' && selectedAdvance.amount_cny && (
                  <span style={{ color: '#999', marginLeft: 8 }}>≈ ¥{selectedAdvance.amount_cny.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}</span>
                )}
              </Descriptions.Item>
              <Descriptions.Item label="已核销金额">{formatAmount(selectedAdvance.total_reimbursed || 0, selectedAdvance.currency)}</Descriptions.Item>
              <Descriptions.Item label="剩余金额">{formatAmount((selectedAdvance.amount || 0) - (selectedAdvance.total_reimbursed || 0), selectedAdvance.currency)}</Descriptions.Item>
              <Descriptions.Item label="币种">{selectedAdvance.currency}</Descriptions.Item>
              <Descriptions.Item label="事由" span={2}>{selectedAdvance.reason}</Descriptions.Item>
            </Descriptions>

            {/* 关联的核销单 */}
            {selectedAdvance.verifications && selectedAdvance.verifications.length > 0 && (
              <>
                <Divider>关联核销单</Divider>
                <Table
                  dataSource={selectedAdvance.verifications}
                  rowKey="id"
                  pagination={false}
                  columns={[
                    {
                      title: '核销编号',
                      dataIndex: 'verification_code',
                      key: 'verification_code'
                    },
                    {
                      title: '关联预支单',
                      dataIndex: 'advance_code',
                      key: 'advance_code'
                    },
                    {
                      title: '核销金额',
                      dataIndex: 'amount',
                      key: 'amount',
                      render: (v: number, r: any) => formatAmount(v, r.currency)
                    },
                    {
                      title: '核销日期',
                      dataIndex: 'verification_date',
                      key: 'verification_date'
                    },
                    {
                      title: '是否结算',
                      dataIndex: 'settlement',
                      key: 'settlement',
                      render: (v: boolean) => (
                        <Tag color={v ? 'green' : 'orange'}>{v ? '是' : '否'}</Tag>
                      )
                    },
                    {
                      title: '状态',
                      dataIndex: 'status',
                      key: 'status',
                      render: (status: string) => getStatusTag(status)
                    }
                  ]}
                />
              </>
            )}

            {/* 附件 */}
            {selectedAdvance.attachments && selectedAdvance.attachments.length > 0 && (
              <>
                <Divider>凭证附件</Divider>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {selectedAdvance.attachments.map((url: string, index: number) => (
                    <div key={index} style={{ position: 'relative' }}>
                      {url && url.match(/\.(jpg|jpeg|png|gif|webp)$/i) ? (
                        <img
                          src={url}
                          alt={`附件${index + 1}`}
                          style={{ width: 120, height: 120, objectFit: 'cover', borderRadius: 4, border: '1px solid #f0f0f0', cursor: 'pointer' }}
                          onClick={() => window.open(url, '_blank')}
                        />
                      ) : (
                        <a href={url} target="_blank" rel="noopener noreferrer">
                          <div style={{ width: 120, height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #f0f0f0', borderRadius: 4, background: '#f5f5f5' }}>
                            <span style={{ color: '#666' }}>附件 {index + 1}</span>
                          </div>
                        </a>
                      )}
                    </div>
                  ))}
                </div>
              </>
            )}
          </>
        )}
      </Modal>
    </div>
  );
};

export default AdvanceVerificationStatusPage;