import React, { useState, useEffect } from 'react';
import { Card, Space, Table, Button, Typography, Modal, Checkbox, Input, message, DatePicker } from 'antd';
import { ArrowLeftOutlined, DollarOutlined, SettingOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { getFields, getMaterialConsumpList } from '../api';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

const toCamelCase = (str: string) => str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());

interface ConsumptionRecord {
  id: string;
  advertiser_id?: string;
  user_id?: string;
  consume_date?: string;
  [key: string]: any;
}

const ConsumePage: React.FC = () => {
  const navigate = useNavigate();
  const [consumptionRecords, setConsumptionRecords] = useState<ConsumptionRecord[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [columnsData, setColumnsData] = useState<{ name: string; description: string }[]>([]);
  const [selectedColumns, setSelectedColumns] = useState<string[]>([]);
  const [searchText, setSearchText] = useState('');
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [advertiserId, setAdvertiserId] = useState('');
  const [userId, setUserId] = useState('');
  const [consumeDateRange, setConsumeDateRange] = useState<[string, string] | undefined>();

  useEffect(() => {
    loadColumns();
    loadData();
  }, [page, pageSize, consumeDateRange]);

  const loadData = async () => {
    setLoading(true);
    console.log(consumeDateRange);
    try {
      const res = await getMaterialConsumpList({
        advertiser_id: advertiserId || undefined,
        user_id: userId || undefined,
        consume_date: consumeDateRange,
        page,
        page_size: pageSize,
      });
      setConsumptionRecords(res.data || []);
      setTotal(res.pagination?.total || 0);
    } catch (e: any) {
      message.error('加载数据失败');
    } finally {
      setLoading(false);
    }
  };

  const loadColumns = async () => {
    try {
      const res = await getFields();
      const fields = res.data || [];
      const formattedFields = fields.map((item: { field: string; description: string }) => ({
        name: toCamelCase(item.field),
        description: item.description,
      }));
      setColumnsData(formattedFields);
      const saved = localStorage.getItem('consumeColumns');
      if (saved) {
        setSelectedColumns(JSON.parse(saved));
      } else {
        setSelectedColumns(formattedFields.map((item: { name: string }) => item.name));
      }
    } catch (e: any) {
      message.error('加载表头字段失败');
    }
  };

  const tableData = consumptionRecords.map((item, index) => ({
    ...item,
    index: index + 1,
    key: item.id,
  }));

  const handleBack = () => {
    navigate('/authorization');
  };

  const handleSearch = () => {
    setPage(1);
    loadData();
  };

  const handleReset = () => {
    setAdvertiserId('');
    setUserId('');
    setConsumeDateRange(undefined);
    setPage(1);
    loadData();
  };

  const dynamicColumns = selectedColumns
    .map(colName => columnsData.find(col => col.name === colName))
    .filter((col): col is { name: string; description: string } => !!col)
    .map(col => ({
      title: col.description,
      dataIndex: col.name,
      key: col.name,
      ellipsis: true,
    }));

  return (
    <div style={{ minHeight: '94vh' }}>
      <Card  variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <Space>
            {/*<Button type="text" icon={<ArrowLeftOutlined />} onClick={handleBack} />
             <Button icon={<ArrowLeftOutlined />} onClick={handleBack}>返回</Button> */}
            <DollarOutlined style={{ fontSize: 18, color: '#6366f1' }} />
            <Typography.Text strong style={{ fontSize: 16 }}>消耗记录</Typography.Text>
          </Space>
          <Space>
            <Button icon={<SettingOutlined />} onClick={() => setShowModal(true)}>自定义表头</Button>
          </Space>
        </div>
        <div style={{ marginBottom: 16 }}>
          <Space wrap>
            <Input
              placeholder="广告主ID"
              value={advertiserId}
              onChange={(e) => setAdvertiserId(e.target.value)}
              style={{ width: 200 }}
            />
            <Input
              placeholder="用户ID"
              value={userId}
              onChange={(e) => setUserId(e.target.value)}
              style={{ width: 200 }}
            />
            <RangePicker
              value={consumeDateRange ? [dayjs(consumeDateRange[0]), dayjs(consumeDateRange[1])] : undefined}
              onChange={(dates) => {
                if (dates && dates[0] && dates[1]) {
                  setConsumeDateRange([dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD')]);
                } else {
                  setConsumeDateRange(undefined);
                }
              }}
            />
            <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>搜索</Button>
            <Button icon={<ReloadOutlined />} onClick={handleReset}>重置</Button>
          </Space>
        </div>
        <Table
          dataSource={tableData}
          columns={dynamicColumns}
          loading={loading}
          rowKey="id"
          bordered={false}
          scroll={{ x: 'max-content' }}
          pagination={{
            current: page,
            pageSize,
            total,
            showSizeChanger: true,
            showTotal: (t) => `共 ${t} 条记录`,
            size: 'small',
            onChange: (p, ps) => {
              setPage(p);
              setPageSize(ps);
            },
          }}
        />
      </Card>
      <Modal
        title="自定义表头"
        open={showModal}
        onOk={() => {
          localStorage.setItem('consumeColumns', JSON.stringify(selectedColumns));
          message.success('表头设置已保存');
          setShowModal(false);
        }}
        onCancel={() => {
          setShowModal(false);
          setSearchText('');
        }}
        okText="确定"
        cancelText="取消"
        width={800}
      >
        <div style={{ display: 'flex', gap: 20, height: 400 }}>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
            <Input
              placeholder="搜索指标..."
              value={searchText}
              allowClear={true}
              onChange={(e) => setSearchText(e.target.value)}
              style={{ marginBottom: 8 }}
            />
            <Typography.Text type="secondary" style={{ fontSize: 12, marginBottom: 12, display: 'block' }}>
              输入指标名称进行搜索
            </Typography.Text>
            <div style={{ flex: 1, overflowY: 'auto', border: '1px solid #f0f0f5', borderRadius: 8, padding: 12 }}>
              <div style={{ marginBottom: 16 }}>
                <Typography.Text strong style={{ fontSize: 14, color: '#1e293b' }}>任务详情指标</Typography.Text>
              </div>
              <Checkbox
                checked={selectedColumns.length === columnsData.length && columnsData.length > 0}
                indeterminate={selectedColumns.length > 0 && selectedColumns.length < columnsData.length}
                onChange={(e) => {
                  if (e.target.checked) {
                    setSelectedColumns(columnsData.map(item => item.name));
                  } else {
                    setSelectedColumns([]);
                  }
                }}
                style={{ marginBottom: 12 }}
              >
                全选
              </Checkbox>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {columnsData
                  .filter(item => 
                    item.description.toLowerCase().includes(searchText.toLowerCase()) ||
                    item.name.toLowerCase().includes(searchText.toLowerCase())
                  )
                  .map(item => (
                    <Checkbox
                      key={item.name}
                      checked={selectedColumns.includes(item.name)}
                      onChange={(e) => {
                        if (e.target.checked) {
                          setSelectedColumns(prev => [...prev, item.name]);
                        } else {
                          setSelectedColumns(prev => prev.filter(col => col !== item.name));
                        }
                      }}
                    >
                      {item.description}
                    </Checkbox>
                  ))}
              </div>
            </div>
          </div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <Typography.Text strong style={{ fontSize: 14, color: '#1e293b' }}>
                已添加({selectedColumns.length})
              </Typography.Text>
              <Space>
                <Button
                  size="small"
                  onClick={() => setSelectedColumns([])}
                  disabled={selectedColumns.length === 0}
                >
                  清空
                </Button>
                <Button
                  size="small"
                  onClick={async () => {
                    try {
                      const res = await getFields();
                      const fields = res.data || [];
                      const formattedFields = fields.map((item: { field: string; description: string }) => ({
                        name: toCamelCase(item.field),
                        description: item.description,
                      }));
                      setColumnsData(formattedFields);
                      setSelectedColumns(formattedFields.map((item: { name: string }) => item.name));
                      localStorage.removeItem('consumeColumns');
                      message.success('表头字段已更新');
                    } catch (e: any) {
                      message.error('更新表头字段失败');
                    }
                  }}
                >
                  更新表头字段
                </Button>
              </Space>
            </div>
            <div style={{ flex: 1, overflowY: 'auto', border: '1px solid #f0f0f5', borderRadius: 8, padding: 12 }}>
              {selectedColumns.length === 0 ? (
                <Typography.Text type="secondary" style={{ fontSize: 14, textAlign: 'center', display: 'block', padding: '40px 0' }}>
                  暂无已选指标
                </Typography.Text>
              ) : (
                <div>
                  {selectedColumns.map((colName, index) => {
                    const col = columnsData.find(c => c.name === colName);
                    return (
                      <div
                        key={colName}
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          padding: '8px 12px',
                          borderBottom: '1px solid #f0f0f5',
                          cursor: 'move',
                          userSelect: 'none',
                        }}
                        draggable
                        onDragStart={(e) => {
                          e.dataTransfer.setData('index', String(index));
                        }}
                        onDragOver={(e) => {
                          e.preventDefault();
                        }}
                        onDrop={(e) => {
                          const fromIndex = parseInt(e.dataTransfer.getData('index'));
                          const toIndex = index;
                          if (fromIndex !== toIndex) {
                            const newSelected = [...selectedColumns];
                            const [removed] = newSelected.splice(fromIndex, 1);
                            newSelected.splice(toIndex, 0, removed);
                            setSelectedColumns(newSelected);
                          }
                        }}
                      >
                        <Typography.Text>{col?.description || colName}</Typography.Text>
                        <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                          {index + 1}
                        </Typography.Text>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default ConsumePage;