import React, { useMemo, useState } from 'react';
import {
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Pagination,
  Radio,
  Row,
  Select,
  Space,
  Table,
  Tag,
  TimePicker,
  Upload,
} from 'antd';
import { CloudUploadOutlined, FileTextOutlined, PlusOutlined } from '@ant-design/icons';
import styles from './Sglr.less';

const { TextArea } = Input;

const energyTypeOptions = [
  { label: '电表', value: 'electric' },
  { label: '燃气表', value: 'gas' },
  { label: '水表', value: 'water' },
  { label: '蒸汽表', value: 'steam' },
  { label: '其他', value: 'other' },
];

const templateList = [
  { key: 'tpl-1', title: '电表日常', icon: <FileTextOutlined /> },
  { key: 'tpl-2', title: '水表日常', icon: <FileTextOutlined /> },
  { key: 'tpl-3', title: '电表日常', icon: <FileTextOutlined /> },
  { key: 'tpl-4', title: '电表日常', icon: <FileTextOutlined /> },
  { key: 'tpl-5', title: '电表日常', icon: <FileTextOutlined /> },
  { key: 'tpl-6', title: '电表日常', icon: <FileTextOutlined /> },
  { key: 'tpl-7', title: '电表日常', icon: <FileTextOutlined /> },
  { key: 'tpl-8', title: '电表日常', icon: <FileTextOutlined /> },
];

const pendingCardsSeed = [
  {
    id: 'TR-001',
    deviceName: '变压器1#',
    submitTime: '14:20:00',
    energyType: '天然气',
    submitter: '张三',
    status: '待审核',
  },
  {
    id: 'TR-001-2',
    deviceName: '变压器1#',
    submitTime: '14:20:00',
    energyType: '天然气',
    submitter: '张三',
    status: '待审核',
  },
  {
    id: 'TR-001-3',
    deviceName: '变压器1#',
    submitTime: '14:20:00',
    energyType: '天然气',
    submitter: '张三',
    status: '待审核',
  },
];

const todayRowsSeed = Array.from({ length: 10 }).map((_, idx) => ({
  key: String(idx + 1),
  time: '14:30:00',
  device: '水表A',
  energyType: '水表',
  reading: 123.5,
  status: idx === 1 ? '未审核' : '已审核',
}));

const Sglr = () => {
  const [form] = Form.useForm();
  const [todayCount] = useState(15);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const pendingCards = useMemo(() => pendingCardsSeed, []);
  const todayRows = useMemo(() => todayRowsSeed, []);

  const tableColumns = useMemo(
    () => [
      { title: '时间', dataIndex: 'time', key: 'time', width: 120 },
      { title: '设备', dataIndex: 'device', key: 'device', width: 160 },
      { title: '能源类型', dataIndex: 'energyType', key: 'energyType', width: 140 },
      { title: '读数', dataIndex: 'reading', key: 'reading', width: 120 },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 120,
        render: (value) =>
          value === '已审核' ? (
            <Tag color="success">已审核</Tag>
          ) : (
            <Tag color="warning">未审核</Tag>
          ),
      },
    ],
    [],
  );

  const handleSubmit = async () => {
    await form.validateFields();
  };

  return (
    <div className={styles.container}>
      <Row gutter={16} className={styles.grid}>
        <Col xs={24} lg={13} className={styles.leftCol}>
          <div className={styles.panel}>
            <div className={styles.panelHeader}>
              <div className={styles.panelTitle}>新增数据</div>
              <Button className={styles.headerBtn}>批量导入</Button>
            </div>

            <div className={styles.leftBody}>
              <div className={styles.formWrap}>
                <Form form={form} layout="vertical" className={styles.form}>
                  <Form.Item
                    label="能源类型"
                    name="energyType"
                    rules={[{ required: true, message: '请选择能源类型' }]}
                  >
                    <Radio.Group options={energyTypeOptions} optionType="button" />
                  </Form.Item>

                  <Form.Item
                    label="设备选择"
                    name="device"
                    rules={[{ required: true, message: '请选择设备' }]}
                  >
                    <Select
                      placeholder="请选择"
                      options={[
                        { label: '变压器1#（TR-001）', value: 'TR-001' },
                        { label: '水表A', value: 'WATER-A' },
                      ]}
                    />
                  </Form.Item>

                  <Form.Item
                    label="读数日期"
                    name="recordDate"
                    rules={[{ required: true, message: '请选择读数日期' }]}
                  >
                    <DatePicker className={styles.fullWidth} placeholder="选择日期" />
                  </Form.Item>

                  <Form.Item
                    label="起止时刻"
                    name="timeRange"
                    rules={[{ required: true, message: '请选择起止时刻' }]}
                  >
                    <TimePicker.RangePicker className={styles.fullWidth} format="HH:mm:ss" />
                  </Form.Item>

                  <Form.Item label="读书数值1" required>
                    <Space.Compact className={styles.valueRow} block>
                      <Select
                        defaultValue="读数"
                        options={[
                          { label: '读数', value: 'reading' },
                          { label: '差值', value: 'delta' },
                        ]}
                        className={styles.valueSelect}
                      />
                      <Form.Item
                        name="readingValue"
                        noStyle
                        rules={[{ required: true, message: '请输入读数' }]}
                      >
                        <InputNumber placeholder="请输入" className={styles.valueInput} />
                      </Form.Item>
                      <Button className={styles.addBtn} icon={<PlusOutlined />} />
                    </Space.Compact>
                  </Form.Item>

                  <Form.Item label="备注信息" name="remark">
                    <TextArea maxLength={100} showCount autoSize={{ minRows: 4, maxRows: 4 }} />
                  </Form.Item>

                  <Form.Item label="上传附件" name="files">
                    <Upload.Dragger
                      className={styles.uploader}
                      multiple
                      beforeUpload={() => false}
                      accept=".doc,.docx,.pdf,.png,.jpg,.jpeg"
                      showUploadList={false}
                    >
                      <div className={styles.uploadInner}>
                        <div className={styles.uploadIcon}>
                          <CloudUploadOutlined />
                        </div>
                        <Button className={styles.uploadBtn}>上传</Button>
                        <div className={styles.uploadHint}>支持 word、pdf、png、jpeg、jpg 格式文件</div>
                      </div>
                    </Upload.Dragger>
                  </Form.Item>

                  <div className={styles.formActions}>
                    <Button type="primary" onClick={handleSubmit} className={styles.primaryAction}>
                      提交
                    </Button>
                    <Button onClick={() => form.resetFields()} className={styles.secondaryAction}>
                      取消
                    </Button>
                  </div>
                </Form>
              </div>

              <div className={styles.templateWrap}>
                <div className={styles.templateTitle}>日常抄表数据</div>
                <div className={styles.templateList}>
                  {templateList.map((item) => (
                    <div key={item.key} className={styles.templateItem}>
                      <div className={styles.templateIcon}>{item.icon}</div>
                      <div className={styles.templateText}>{item.title}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Col>

        <Col xs={24} lg={11} className={styles.rightCol}>
          <div className={styles.panel}>
            <div className={styles.panelHeader}>
              <div className={styles.panelTitle}>待审核数据</div>
            </div>

            <div className={styles.pendingRow}>
              {pendingCards.map((item) => (
                <Card key={item.id} className={styles.pendingCard} bordered={false}>
                  <div className={styles.pendingTop}>
                    <div className={styles.pendingDevice}>
                      设备：<a className={styles.deviceLink}>{item.deviceName}（{item.id}）</a>
                    </div>
                  </div>
                  <div className={styles.pendingMeta}>
                    <div className={styles.metaLine}>
                      <span className={styles.metaKey}>提交时间：</span>
                      <span className={styles.metaVal}>{item.submitTime}</span>
                    </div>
                    <div className={styles.metaLine}>
                      <span className={styles.metaKey}>能源类型：</span>
                      <span className={styles.metaVal}>{item.energyType}</span>
                    </div>
                    <div className={styles.metaLine}>
                      <span className={styles.metaKey}>提交人：</span>
                      <span className={styles.metaVal}>{item.submitter}</span>
                    </div>
                    <div className={styles.metaLine}>
                      <span className={styles.metaKey}>处理状态：</span>
                      <span className={styles.statusDot} />
                      <span className={styles.statusText}>{item.status}</span>
                    </div>
                  </div>
                  <div className={styles.pendingActions}>
                    <Button type="primary" className={styles.detailBtn}>
                      查看详情
                    </Button>
                  </div>
                </Card>
              ))}
            </div>

            <div className={styles.todaySection}>
              <div className={styles.todayHeader}>
                <div className={styles.todayTitle}>今日录入</div>
                <div className={styles.todayRight}>
                  <span className={styles.todayCount}>已录入：{todayCount}条</span>
                  <Button type="primary" className={styles.auditBtn}>
                    提交审核
                  </Button>
                </div>
              </div>

              <Table
                className={styles.table}
                columns={tableColumns}
                dataSource={todayRows.slice((page - 1) * pageSize, page * pageSize)}
                pagination={false}
                size="small"
                rowKey="key"
              />

              <div className={styles.paginationWrap}>
                <Pagination
                  current={page}
                  pageSize={pageSize}
                  total={todayRows.length}
                  onChange={(nextPage, nextSize) => {
                    setPage(nextPage);
                    setPageSize(nextSize);
                  }}
                  showSizeChanger
                  size="small"
                />
              </div>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default Sglr;
