import React from 'react';
import { Breadcrumb, Button, Select, Input, Divider } from 'antd';
import { ArrowLeftOutlined, EditOutlined, ZoomInOutlined, ZoomOutOutlined, BorderOutlined, ColumnHeightOutlined } from '@ant-design/icons';
import { history } from 'umi';
import styles from './TemplateCreate.less';

const { Option } = Select;

const chartComponents = [
  { key: 'line', title: '折线图' },
  { key: 'bar', title: '柱状图' },
  { key: 'pie', title: '饼状图' },
];

const TemplateCreate = () => {
  const handleBack = () => {
    history.push('/topnavbar00/business/envInformationMonthly');
  };

  return (
    <div className={styles.templateCreatePage}>
      <div className={styles.topBar}>
        <Breadcrumb separator="/" className={styles.breadcrumb}>
          <Breadcrumb.Item>环保月报管理</Breadcrumb.Item>
          <Breadcrumb.Item>报表台账</Breadcrumb.Item>
          <Breadcrumb.Item>模板库</Breadcrumb.Item>
          <Breadcrumb.Item>新建模板</Breadcrumb.Item>
        </Breadcrumb>
        <Button icon={<ArrowLeftOutlined />} onClick={handleBack}>
          返回
        </Button>
      </div>

      <div className={styles.workspace}>
        <div className={styles.leftPanel}>
          <Select value="图表组件" className={styles.librarySelect} disabled>
            <Option value="图表组件">图表组件</Option>
          </Select>
          <div className={styles.componentList}>
            {chartComponents.map((item) => (
              <div key={item.key} className={styles.componentCard}>
                <div className={styles.componentPreview}>
                  <div className={styles.previewPlaceholder}>
                    {item.title}
                  </div>
                </div>
                <div className={styles.componentTitle}>{item.title}</div>
              </div>
            ))}
          </div>
        </div>

        <div className={styles.centerPanel}>
          <div className={styles.canvasHeader}>
            <div className={styles.canvasTitle}>
              <span>模板名称</span>
              <EditOutlined className={styles.editIcon} />
            </div>
            <div className={styles.canvasMeta}>
              <span className={styles.version}>版本号: 20250248</span>
              <span className={styles.updateTime}>数据更新时间: 2025-08-13 09:25:05</span>
            </div>
          </div>

          <div className={styles.canvasWrapper}>
            <div className={styles.canvasToolbar}>
              <div className={styles.toolbarIcon}>
                <ColumnHeightOutlined />
              </div>
              <div className={styles.toolbarIcon}>
                <BorderOutlined />
              </div>
              <div className={styles.toolbarIcon}>
                <EditOutlined />
              </div>
            </div>
            <div className={styles.canvasSurface}>
              <div className={styles.canvasGrid} />
              <div className={styles.canvasZoom}>
                <Button icon={<ZoomOutOutlined />} size="small" />
                <span className={styles.zoomLabel}>100%</span>
                <Button icon={<ZoomInOutlined />} size="small" />
                <Button size="small">全屏</Button>
              </div>
            </div>
          </div>
        </div>

        <div className={styles.rightPanel}>
          <div className={styles.rightHeader}>
            <span>样式</span>
            <Button type="primary">生成报表</Button>
          </div>

          <div className={styles.formSection}>
            <div className={styles.sectionTitle}>纸张大小</div>
            <Select placeholder="请选择" size="small" className={styles.inlineControl} />
            <div className={styles.inlineInputs}>
              <Input placeholder="W" size="small" className={styles.shortInput} />
              <Input placeholder="H" size="small" className={styles.shortInput} />
            </div>
          </div>

          <Divider />

          <div className={styles.formSection}>
            <div className={styles.sectionTitle}>纸张方向</div>
            <Select placeholder="请选择" size="small" className={styles.fullWidth} />
          </div>

          <Divider />

          <div className={styles.formSection}>
            <div className={styles.sectionTitle}>页边距</div>
            <div className={styles.marginGrid}>
              <Input placeholder="上" size="small" />
              <Input placeholder="右" size="small" />
              <Input placeholder="左" size="small" />
              <Input placeholder="下" size="small" />
            </div>
          </div>

          <Divider />

          <div className={styles.formSection}>
            <div className={styles.sectionTitle}>页眉页脚</div>
            <Input placeholder="页眉上边距" size="small" className={styles.fullWidth} />
            <Input placeholder="页脚上边距" size="small" className={styles.fullWidth} />
          </div>

          <Divider />

          <div className={styles.formSection}>
            <div className={styles.sectionTitle}>页眉背景</div>
            <Button size="small" className={styles.fullWidth}>
              选择图片
            </Button>
            <div className={styles.sectionTitle}>页脚背景</div>
            <Button size="small" className={styles.fullWidth}>
              选择图片
            </Button>
          </div>

          <Divider />

          <div className={styles.formSection}>
            <div className={styles.sectionTitle}>页码</div>
            <div className={styles.pageTemplates}>
              {Array.from({ length: 6 }).map((_, index) => (
                <div key={index} className={styles.pageTemplateCard}>
                  <div className={styles.pageTemplatePreview}>1</div>
                  <div className={styles.pageTemplateLabel}>页眉居左</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TemplateCreate;
