import { Modal, Card, Row, Col, Divider, Tag, Typography, Avatar, Empty } from 'antd';
import React, { useEffect, useState } from 'react';
import { getDictValueEnum } from '@/services/system/dict';
import DictTag from '@/components/DictTag';

const { Text, Paragraph, Title } = Typography;

export type ResumeDetailProps = {
  onCancel: (flag?: boolean, formVals?: unknown) => void;
  open: boolean;
  values?: any;
};

const ResumeDetail: React.FC<ResumeDetailProps> = (props) => {
  const [sexEnum, setSexEnum] = useState<any>([]);
  const [educationEnum, setEducationEnum] = useState<any>([]);
  const [politicalEnum, setPoliticalEnum] = useState<any>([]);
  const [areaEnum, setAreaEnum] = useState<any>([]);

  // 获取字典数据
  useEffect(() => {
    getDictValueEnum('sys_user_sex', true).then((data) => {
      setSexEnum(data);
    });
    getDictValueEnum('education', true, true).then((data) => {
      setEducationEnum(data);
    });
    getDictValueEnum('political_affiliation', true, true).then((data) => {
      setPoliticalEnum(data);
    });
    getDictValueEnum('area', true, true).then((data) => {
      setAreaEnum(data);
    });
  }, []);

  const handleCancel = () => {
    props.onCancel();
  };

  const { values } = props;

  // 格式化时间显示
  const formatTimeRange = (start: string, end: string) => {
    if (!start && !end) return '';
    return `${start || ''} - ${end || '至今'}`;
  };

  // 渲染空状态
  const renderEmpty = (description: string) => (
    <Empty
      image={Empty.PRESENTED_IMAGE_SIMPLE}
      description={description}
      style={{ margin: '20px 0' }}
    />
  );

  return (
    <Modal
      title={
        <div style={{ textAlign: 'center', fontSize: 18, fontWeight: 'bold' }}>
          {values?.name || '用户'} - 简历详情
        </div>
      }
      open={props.open}
      width={1100}
      onCancel={handleCancel}
      footer={null}
      bodyStyle={{ maxHeight: '80vh', overflowY: 'auto', padding: '24px' }}
    >
      {/* 头部基本信息卡片 */}
      <Card
        style={{
          marginBottom: 24,
          borderRadius: 8,
          border: '1px solid #f0f0f0',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
        }}
      >
        <Row gutter={24}>
          {/* 头像区域 */}
          <Col span={6}>
            <div style={{ textAlign: 'center' }}>
              {values?.avatar ? (
                <Avatar
                  size={120}
                  src={values.avatar}
                  style={{
                    borderRadius: '50%',
                    border: '4px solid #e8f4fd',
                    marginBottom: 16,
                  }}
                />
              ) : (
                <Avatar
                  size={120}
                  style={{
                    backgroundColor: '#1890ff',
                    fontSize: 36,
                    marginBottom: 16,
                    borderRadius: '50%',
                    border: '4px solid #e8f4fd',
                  }}
                >
                  {values?.name?.charAt(0) || 'U'}
                </Avatar>
              )}
              <div style={{ fontSize: 20, fontWeight: 'bold', color: '#1890ff' }}>
                {values?.name || '未填写'}
              </div>
              <div style={{ color: '#666', marginTop: 4 }}>
                {values?.jobTitle?.join(' / ') || '暂无期望岗位'}
              </div>
            </div>
          </Col>

          {/* 详细信息区域 */}
          <Col span={18}>
            <Row gutter={[16, 16]}>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>性别：</div>
                  <div style={{ fontWeight: 'bold' }}>
                    <DictTag enums={sexEnum} value={values?.sex} />
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>年龄：</div>
                  <div style={{ fontWeight: 'bold' }}>{values?.age || '未填写'}</div>
                </div>
              </Col>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>学历：</div>
                  <div style={{ fontWeight: 'bold' }}>
                    <DictTag enums={educationEnum} value={values?.education} />
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>手机号：</div>
                  <div style={{ fontWeight: 'bold' }}>{values?.phone || '未填写'}</div>
                </div>
              </Col>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>政治面貌：</div>
                  <div style={{ fontWeight: 'bold' }}>
                    <DictTag enums={politicalEnum} value={values?.politicalAffiliation} />
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>出生日期：</div>
                  <div style={{ fontWeight: 'bold' }}>{values?.birthDate || '未填写'}</div>
                </div>
              </Col>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>工作年限：</div>
                  <div style={{ fontWeight: 'bold' }}>{values?.workYears || '未填写'}</div>
                </div>
              </Col>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>期望工作地：</div>
                  <div style={{ fontWeight: 'bold' }}>
                    <DictTag enums={areaEnum} value={values?.area} />
                  </div>
                </div>
              </Col>
              <Col span={8}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>期望薪资：</div>
                  <div style={{ fontWeight: 'bold', color: '#ff4d4f' }}>
                    {values?.salaryMin || '面议'} - {values?.salaryMax || '面议'} 元/月
                  </div>
                </div>
              </Col>
            </Row>

            {/* 附加信息 */}
            <Divider style={{ margin: '16px 0' }} />
            <Row gutter={16}>
              <Col span={12}>
                <div style={{ display: 'flex' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>毕业院校：</div>
                  <div>{values?.graduationSchool || '未填写'}</div>
                </div>
              </Col>
              <Col span={12}>
                <div style={{ display: 'flex' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>就读专业：</div>
                  <div>{values?.major || '未填写'}</div>
                </div>
              </Col>
              <Col span={24} style={{ marginTop: 8 }}>
                <div style={{ display: 'flex' }}>
                  <div style={{ color: '#999', minWidth: 80 }}>居住地址：</div>
                  <div>{values?.residenceAddress || '未填写'}</div>
                </div>
              </Col>
            </Row>
          </Col>
        </Row>
      </Card>

      {/* 个人介绍与求职意向 - 新布局 */}
      <Card
        title={
          <div style={{ fontSize: 16, fontWeight: 'bold', color: '#1890ff' }}>
            📋 个人介绍与求职意向
          </div>
        }
        style={{
          marginBottom: 24,
          borderRadius: 8,
          border: '1px solid #f0f0f0',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
        }}
      >
        <Row gutter={24}>
          <Col span={24} style={{ marginBottom: 20 }}>
            <Title level={5} style={{ color: '#666', marginBottom: 12 }}>
              <span style={{ color: '#1890ff', marginRight: 8 }}>●</span>
              个人简要介绍
            </Title>
            <Paragraph
              style={{
                padding: 16,
                backgroundColor: '#f8f9fa',
                borderRadius: 6,
                lineHeight: 1.8,
                minHeight: 60,
                color: '#333',
              }}
            >
              {values?.introduction || '暂无个人介绍'}
            </Paragraph>
          </Col>

          <Col span={24} style={{ marginBottom: 20 }}>
            <Title level={5} style={{ color: '#666', marginBottom: 12 }}>
              <span style={{ color: '#1890ff', marginRight: 8 }}>●</span>
              求职意向岗位
            </Title>
            <div style={{ padding: '0 16px' }}>
              {values?.jobTitle?.length > 0 ? (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {values.jobTitle.map((job: string, index: number) => (
                    <Tag
                      key={index}
                      color="blue"
                      style={{
                        padding: '4px 12px',
                        borderRadius: 4,
                        fontSize: 14,
                        marginBottom: 8,
                      }}
                    >
                      {job}
                    </Tag>
                  ))}
                </div>
              ) : (
                <Paragraph
                  style={{
                    padding: 16,
                    backgroundColor: '#f8f9fa',
                    borderRadius: 6,
                    lineHeight: 1.8,
                    color: '#999',
                  }}
                >
                  {values?.jobIntention || '暂无求职意向'}
                </Paragraph>
              )}
            </div>
          </Col>

          <Col span={24}>
            <Title level={5} style={{ color: '#666', marginBottom: 12 }}>
              <span style={{ color: '#1890ff', marginRight: 8 }}>●</span>
              自我评价
            </Title>
            <Paragraph
              style={{
                padding: 16,
                backgroundColor: '#f8f9fa',
                borderRadius: 6,
                lineHeight: 1.8,
                minHeight: 60,
                color: '#333',
              }}
            >
              {values?.selfEvaluation || '暂无自我评价'}
            </Paragraph>
          </Col>
        </Row>
      </Card>

      {/* 工作经历 - 新布局 */}
      <Card
        title={
          <div style={{ fontSize: 16, fontWeight: 'bold', color: '#1890ff' }}>
            💼 工作经历 ({values?.workExp?.length || 0})
          </div>
        }
        style={{
          marginBottom: 24,
          borderRadius: 8,
          border: '1px solid #f0f0f0',
          boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
        }}
      >
        {values?.workExp?.length > 0 ? (
          <div style={{ maxHeight: 400, overflowY: 'auto' }}>
            {values.workExp.map((work: any, index: number) => (
              <div
                key={index}
                style={{
                  padding: '20px',
                  marginBottom: 16,
                  border: '1px solid #e8e8e8',
                  borderRadius: 8,
                  backgroundColor: index % 2 === 0 ? '#fafafa' : '#fff',
                  transition: 'all 0.3s',
                  ':hover': {
                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                    transform: 'translateY(-2px)',
                  },
                }}
              >
                <Row justify="space-between" align="top">
                  <Col span={16}>
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                      <Title level={5} style={{ margin: 0, marginRight: 12 }}>
                        {work.company || '未填写公司'}
                      </Title>
                      {work.isFullTime !== null && (
                        <Tag
                          color={work.isFullTime ? 'blue' : 'orange'}
                          style={{ fontSize: 12, height: 20, lineHeight: '18px' }}
                        >
                          {work.isFullTime ? '全职' : '兼职'}
                        </Tag>
                      )}
                    </div>
                    <div style={{ marginBottom: 8 }}>
                      <Text strong style={{ marginRight: 16 }}>
                        {work.position || '未填写职位'}
                      </Text>
                      <Text type="secondary">部门：{work.department || '未填写'}</Text>
                    </div>
                    {work.duty && (
                      <Paragraph
                        style={{
                          color: '#666',
                          lineHeight: 1.6,
                          marginBottom: 8,
                          fontSize: 14,
                        }}
                      >
                        {work.duty}
                      </Paragraph>
                    )}
                  </Col>
                  <Col span={8}>
                    <div style={{ textAlign: 'right' }}>
                      <div
                        style={{
                          color: '#1890ff',
                          fontSize: 14,
                          fontWeight: 'bold',
                          marginBottom: 4,
                        }}
                      >
                        {formatTimeRange(work.startTime, work.endTime)}
                      </div>
                      {work.salary && (
                        <div style={{ color: '#ff4d4f', fontSize: 14, fontWeight: 'bold' }}>
                          薪资：{work.salary}
                        </div>
                      )}
                    </div>
                  </Col>
                </Row>
              </div>
            ))}
          </div>
        ) : (
          renderEmpty('暂无工作经历')
        )}
      </Card>
    </Modal>
  );
};

export default ResumeDetail;