import React, { useEffect, useState } from 'react';
import { Modal, Table, Button, Select, Spin, message } from 'antd';
import { reviewInfo, update } from '../services'; 

interface ResultModalProps {
  visible: boolean;
  view: boolean;
  record?: { id?: string; [key: string]: any } | null;
  onCancel: () => void;
  onSubmit: () => void;
}

// 只读备注弹窗
const RemarkViewModal: React.FC<{
  visible: boolean;
  onCancel: () => void;
  remark: string;
  file?: any;
}> = ({ visible, onCancel, remark, file }) => (
  <Modal
    visible={visible}
    title="备注信息"
    footer={null}
    onCancel={onCancel}
    destroyOnClose
  >
    <div>
      <div style={{ marginBottom: 12 }}>
        <b>备注：</b>{remark || '无'}
      </div>
      {file && file.fileUrl && (
        <div>
          <b>附件：</b>
          <a href={file.fileUrl} target="_blank" rel="noopener noreferrer">
            {file.fileName}
          </a>
        </div>
      )}
    </div>
  </Modal>
);

const GroupLeaderModal: React.FC<ResultModalProps> = ({
  visible,
  record,
  view,
  onCancel,
  onSubmit,
}) => {
  const [loading, setLoading] = useState(false);
  const [suppliers, setSuppliers] = useState<any[]>([]);
  const [items, setItems] = useState<any[]>([]);
  // groupSummaryResult: { [supplierId]: 0|1 }
  const [groupSummaryResult, setGroupSummaryResult] = useState<{ [k: string]: '0' | '1' | undefined }>({});
  // 查看备注弹窗
  const [remarkModal, setRemarkModal] = useState({ open: false, remark: '', file: undefined as any });

  // 拉取数据
  useEffect(() => {
    if (visible && record?.id) {
      setLoading(true);
      reviewInfo({ id: record.id })
        .then((res: any) => {
          const supplierList = res?.data || [];
          setSuppliers(supplierList);
          // 所有项，取第一家公司
          const allItems = (supplierList[0]?.coscoAccessItemList || []);
          // 非summary项
          setItems(allItems.filter((item: any) => item.itemType !== 'summary'));
          // summary 行初始化
          const summaryMap: { [k: string]: '0' | '1' | undefined } = {};
          supplierList.forEach((sup: any) => {
            // summary 行
            const summaryItem = (sup.coscoAccessItemList || []).find((i: any) => i.itemType === 'summary');
            // summaryMap[sup.supplierId] = summaryItem?.reviewResult;
            summaryMap[sup.supplierId] = summaryItem.coscoAccessUserItemList[0]?.reviewResult;
          });
          setGroupSummaryResult(summaryMap);
        })
        .finally(() => setLoading(false));
    } else if (!visible) {
      setSuppliers([]);
      setItems([]);
      setGroupSummaryResult({});
    }
  }, [visible, record]);

  // 处理summary下拉变更
  const handleSummaryChange = (supplierId: string, value: '0' | '1') => {
    setGroupSummaryResult(prev => ({
      ...prev,
      [supplierId]: value,
    }));
  };

  // 提交
  const handleSubmit = () => {
    // 只收集 summary 行参数
    let summaryParams: any[] = [];
      summaryParams = suppliers.map((sup: any) => {
      // 找到summary项
      const summaryItem = (sup.coscoAccessItemList || []).find((i: any) => i.itemType === 'summary');
      if (!summaryItem) return null;
      return {
        id: summaryItem.id,
        reviewResult: groupSummaryResult[sup.supplierId],
        remark: '', // 可拓展
        coscoAccessTtemAttachments: undefined,
        accessWorkId: record?.id
      }
    }).filter(Boolean);
    let accessWorkId = ''
    if(record?.id) {
      accessWorkId = record?.id
    }
    update({ coscoAccessUserItemList: summaryParams, accessWorkId }).then((res: any) => {
      if (res.code === 200) {
        message.success('提交成功');
        onSubmit && onSubmit();
      }
    });
  };

  // 构造二级表头
  const columns: any[] = [
    {
      title: '评审项',
      dataIndex: 'itemName',
      key: 'itemName',
      width: 180,
      fixed: 'left',
    },
    ...suppliers.map(sup => {
      // 当前公司所有人员（所有非summary项，取 coscoAccessUserItemList 多个）
      const reviewerSet = new Set<string>();
      (sup.coscoAccessItemList || []).forEach((item: any) => {
        if (item.itemType !== 'summary' && Array.isArray(item.coscoAccessUserItemList)) {
          item.coscoAccessUserItemList.forEach((u: any) => {
            reviewerSet.add(u.reviewBy);
          });
        }
      });
      const reviewers = Array.from(reviewerSet);
      return {
        title: (
          <div>
            <div style={{ fontWeight: 600 }}>{sup.supplierName}</div>
          </div>
        ),
        children: reviewers.map((reviewBy: string) => ({
          title: reviewBy,
          dataIndex: `${sup.supplierId}_${reviewBy}`,
          key: `${sup.supplierId}_${reviewBy}`,
          width: 100,
          align: 'center',
          render: (_: any, row: any) => {
            // 在sup.coscoAccessItemList里找该itemName下该人员
            const item = (sup.coscoAccessItemList || []).find((it: any) => it.itemName === row.itemName && it.itemType !== 'summary');
            if (!item) return null;
            const userItem = (item.coscoAccessUserItemList || []).find((u: any) => u.reviewBy === reviewBy);
            if (!userItem) return null;
            return (
              <div>
                {userItem.reviewResult === '0'
                  ? <span style={{ color: '#52c41a' }}>合格</span>
                  : userItem.reviewResult === '1'
                  ? <span style={{ color: '#f5222d' }}>不合格</span>
                  : ''}
                {userItem.remark && (
                  <Button type="link" size="small" onClick={() =>
                    setRemarkModal({ open: true, remark: userItem.remark, file: userItem.coscoAccessTtemAttachments })
                  }>查看备注</Button>
                )}
              </div>
            );
          }
        }))
      }
    })
  ];

  // 组装表格行数据
  const tableData = items.map(item => {
    const row: any = {
      key: item.id,
      itemName: item.itemName
    };
    suppliers.forEach(sup => {
      // 每个人员一格
      const reviewerSet = new Set<string>();
      (sup.coscoAccessItemList || []).forEach((it: any) => {
        if (it.itemType !== 'summary' && Array.isArray(it.coscoAccessUserItemList)) {
          it.coscoAccessUserItemList.forEach((u: any) => {
            reviewerSet.add(u.reviewBy);
          });
        }
      });
      const reviewers = Array.from(reviewerSet);
      reviewers.forEach((reviewBy: string) => {
        row[`${sup.supplierId}_${reviewBy}`] = null; // 具体显示用render
      });
    });
    return row;
  });

  // summary 行
  const summaryRow = (
    <Table.Summary.Row>
      <Table.Summary.Cell index={-1}>结果汇总</Table.Summary.Cell>
      {suppliers.map((sup, index) => {
        // 统计reviewer个数
        const reviewerSet = new Set<string>();
        (sup.coscoAccessItemList || []).forEach((item: any) => {
          if (item.itemType !== 'summary' && Array.isArray(item.coscoAccessUserItemList)) {
            item.coscoAccessUserItemList.forEach((u: any) => {
              reviewerSet.add(u.reviewBy);
            });
          }
        });
        const colSpan = reviewerSet.size || 1;
        return (
          <Table.Summary.Cell index={index} key={sup.supplierId} colSpan={colSpan} align="center">
            {view && (
              <span style={{color: groupSummaryResult[sup.supplierId]  === '0'? '#52c41a': '#f5222d' }}> {groupSummaryResult[sup.supplierId]  === '0'? '合格': '不合格'}</span>
            )}
            { !view && (
               <Select
                style={{ width: 120 }}
                value={groupSummaryResult[sup.supplierId]}
                placeholder="请选择"
                onChange={val => handleSummaryChange(sup.supplierId, val)}
                options={[
                  { label: '合格', value: '0' },
                  { label: '不合格', value: '1' }
                ]}
              />
            )}
          </Table.Summary.Cell>
        )
      })}
    </Table.Summary.Row>
  );

  return (
    <Modal
      title="评审结果（组长）"
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          {view ? '关闭' : '取消'}
        </Button>,
        !view && (
          <Button key="submit" type="primary" onClick={handleSubmit}>
            提交评审结果
          </Button>
        )
      ]}
      width={1000}
      bodyStyle={{ maxHeight: '60vh', overflowY: 'auto' }}
      centered
      destroyOnClose
    >
      <Spin spinning={loading}>
        <Table
          columns={columns}
          dataSource={tableData}
          pagination={false}
          bordered
          summary={() => summaryRow}
          scroll={{ x: 300 * suppliers.length + 200 }}
        />
      </Spin>
      <RemarkViewModal
        visible={remarkModal.open}
        onCancel={() => setRemarkModal({ open: false, remark: '', file: undefined })}
        remark={remarkModal.remark}
        file={remarkModal.file}
      />
    </Modal>
  );
};

export default GroupLeaderModal;
