import { Table, Select, Form, Button, Space, InputNumber, Modal } from 'antd';
import { useState } from 'react';

// 模拟接口调用函数
const addAgeRangeApi = async (start: number, end: number | null) => {
  // 这里替换为实际的接口调用
  console.log(`调用接口添加年龄范围: start=${start}, end=${end}`);
};

const addScoreStandardApi = async (score: number, standards: (number | null)[]) => {
  // 这里替换为实际的接口调用
  console.log(`调用接口添加分数标准: score=${score}, standards=${standards}`);
};

export default function AssessmentStandardPage() {
  const [form] = Form.useForm();
  const [ageRanges, setAgeRanges] = useState<{ start: number; end: number; label: string; }[]>([
    { start: 18, end: 24, label: '18-24岁' },
    { start: 25, end: 34, label: '25-34岁' },
    { start: 35, end: 44, label: '35-44岁' },
    { start: 45, end: null, label: '45岁以上' },
  ]);
  const [isAgeModalVisible, setIsAgeModalVisible] = useState(false);
  const [isScoreModalVisible, setIsScoreModalVisible] = useState(false);

  const columns = [
    {
      title: '分数',
      dataIndex: 'score',
      key: 'score',
      width: 100,
    },
    ...ageRanges.map((range, index) => ({
      title: range.label,
      dataIndex: `standard_${index}`,
      key: `standard_${index}`,
      render: (_: any, record: any) => (
        <InputNumber
          style={{ width: '100%' }}
          value={record[`standard_${index}`]}
          onChange={(value) => handleStandardChange(record.score, index, value)}
        />
      ),
    })),
  ];

  const handleStandardChange = (score: number, ageIndex: number, value: number | null) => {
    // 处理标准值变化
  };

  const showAgeModal = () => {
    setIsAgeModalVisible(true);
  };

  const handleAgeOk = async (values: any) => {
    const { start, end } = values;
    await addAgeRangeApi(start, end);
    const newRange = {
      start,
      end,
      label: end ? `${start}-${end}岁` : `${start}岁以上`,
    };
    setAgeRanges([...ageRanges, newRange]);
    setIsAgeModalVisible(false);
  };

  const handleAgeCancel = () => {
    setIsAgeModalVisible(false);
  };

  const showScoreModal = () => {
    setIsScoreModalVisible(true);
  };

  const handleScoreOk = async (values: any) => {
    const { score, standards } = values;
    await addScoreStandardApi(score, standards);
    // 这里可以更新表格的数据源
    setIsScoreModalVisible(false);
  };

  const handleScoreCancel = () => {
    setIsScoreModalVisible(false);
  };

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-6">考核标准管理</h1>
      <Button onClick={showAgeModal} className="mb-2">添加年龄范围</Button>
      <Button onClick={showScoreModal} className="mb-2 ml-2">添加分数标准</Button>
      <Form form={form} layout="vertical">
        <Space size="large" className="mb-6">
          <Form.Item label="项目" name="projectId">
            <Select
              style={{ width: 200 }}
              placeholder="选择考核项目"
              options={[
                { value: '1', label: '引体向上' },
                { value: '2', label: '3000米跑' },
                // 更多项目...
              ]}
            />
          </Form.Item>

          <Form.Item label="性别" name="gender">
            <Select
              style={{ width: 120 }}
              placeholder="选择性别"
              options={[
                { value: true, label: '男' },
                { value: false, label: '女' },
              ]}
            />
          </Form.Item>

          <Form.Item label="人员类型" name="personType">
            <Select
              style={{ width: 160 }}
              placeholder="选择人员类型"
              options={[
                { value: 'OFFICER', label: '警员' },
                { value: 'STAFF', label: '职工' },
              ]}
            />
          </Form.Item>
        </Space>

        <Table
          columns={columns}
          dataSource={[
            { score: 100, standard_0: 20, standard_1: 18, standard_2: 15, standard_3: 12 },
            { score: 90, standard_0: 18, standard_1: 16, standard_2: 13, standard_3: 10 },
            { score: 80, standard_0: 16, standard_1: 14, standard_2: 11, standard_3: 8 },
            // 更多分数标准...
          ]}
          bordered
          pagination={false}
          scroll={{ x: 'max-content' }}
        />

        <div className="mt-6">
          <Button type="primary">保存标准</Button>
        </div>
      </Form>

      <Modal
        title="添加年龄范围"
        visible={isAgeModalVisible}
        onOk={form.submit}
        onCancel={handleAgeCancel}
      >
        <Form form={form} onFinish={handleAgeOk}>
          <Form.Item name="start" label="起始年龄" rules={[{ required: true }]}>
            <InputNumber min={1} />
          </Form.Item>
          <Form.Item name="end" label="结束年龄">
            <InputNumber min={1} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="添加分数标准"
        visible={isScoreModalVisible}
        onOk={form.submit}
        onCancel={handleScoreCancel}
      >
        <Form form={form} onFinish={handleScoreOk}>
          <Form.Item name="score" label="分数" rules={[{ required: true }]}>
            <InputNumber min={0} />
          </Form.Item>
          {ageRanges.map((range, index) => (
            <Form.Item key={index} name={`standards[${index}]`} label={range.label}>
              <InputNumber min={0} />
            </Form.Item>
          ))}
        </Form>
      </Modal>
    </div>
  );
}