import React, { useState } from 'react';
import { Card, Modal, Form } from 'antd';
import { PageHeader } from '@/components/common/PageHeader';
import { BaseTable } from '@/components/common/BaseTable';
import { ProjectForm } from './components/ProjectForm';
import { useProjectData } from './hooks/useProjectData';
import { getStatusColumn, getDateColumn } from '@/utils/tableColumns';

const CampaignProject = () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const { loading, data, pagination, loadData } = useProjectData();

  const columns = [
    {
      title: '专案名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '负责人',
      dataIndex: 'manager',
      key: 'manager',
    },
    getDateColumn('开始日期', 'startDate'),
    getStatusColumn(),
  ];

  const handleAdd = () => {
    setVisible(true);
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      console.log('Success:', values);
      setVisible(false);
      form.resetFields();
      loadData();
    } catch (error) {
      console.error('Failed:', error);
    }
  };

  return (
    <Card>
      <PageHeader 
        title="行销活动专案" 
        onAdd={handleAdd}
        addButtonText="新增专案"
      />
      <BaseTable 
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={pagination}
        onChange={loadData}
      />
      <Modal
        title="新增专案"
        open={visible}
        onOk={handleSubmit}
        onCancel={() => setVisible(false)}
      >
        <ProjectForm form={form} />
      </Modal>
    </Card>
  );
};

export default CampaignProject;