import React, { useState } from 'react';
import { Form, Input, Select, Button, message, Upload, Checkbox } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

const IndependentSiteCreate: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: any) => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      message.success('独立站创建成功');
      setLoading(false);
      navigate('/independent-site');
    }, 1000);
  };

  const handleCancel = () => {
    navigate('/independent-site');
  };

  return (
    <div className="independent-site-create">
      <div className="page-header">
        <h1>创建独立站</h1>
      </div>

      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        initialValues={{
          platform: 'Shopify',
          status: 'building',
        }}
      >
        <Form.Item
          name="name"
          label="站点名称"
          rules={[{ required: true, message: '请输入站点名称' }]}
        >
          <Input placeholder="请输入站点名称" />
        </Form.Item>

        <Form.Item
          name="url"
          label="站点URL"
          rules={[{ required: true, message: '请输入站点URL' }]}
        >
          <Input placeholder="请输入站点URL，例如：https://example.com" />
        </Form.Item>

        <Form.Item
          name="platform"
          label="电商平台"
          rules={[{ required: true, message: '请选择电商平台' }]}
        >
          <Select placeholder="请选择电商平台">
            <Option value="Shopify">Shopify</Option>
            <Option value="WooCommerce">WooCommerce</Option>
            <Option value="Magento">Magento</Option>
            <Option value="BigCommerce">BigCommerce</Option>
            <Option value="Custom">自定义平台</Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="apiKey"
          label="API Key"
          rules={[{ required: true, message: '请输入API Key' }]}
        >
          <Input placeholder="请输入API Key" />
        </Form.Item>

        <Form.Item
          name="apiSecret"
          label="API Secret"
          rules={[{ required: true, message: '请输入API Secret' }]}
        >
          <Input.Password placeholder="请输入API Secret" />
        </Form.Item>

        <Form.Item
          name="webhookUrl"
          label="Webhook URL"
        >
          <Input placeholder="请输入Webhook URL" />
        </Form.Item>

        <Form.Item
          name="theme"
          label="主题选择"
        >
          <Select placeholder="请选择主题">
            <Option value="default">默认主题</Option>
            <Option value="minimal">极简主题</Option>
            <Option value="modern">现代主题</Option>
            <Option value="vintage">复古主题</Option>
          </Select>
        </Form.Item>

        <Form.Item
          name="logo"
          label="站点Logo"
        >
          <Upload
            name="logo"
            action="/api/upload"
            listType="picture"
          >
            <Button icon={<UploadOutlined />}>上传Logo</Button>
          </Upload>
        </Form.Item>

        <Form.Item
          name="description"
          label="站点描述"
        >
          <Input.TextArea rows={4} placeholder="请输入站点描述" />
        </Form.Item>

        <Form.Item
          name="isActive"
          valuePropName="checked"
        >
          <Checkbox>创建后立即启用</Checkbox>
        </Form.Item>

        <Form.Item
          name="notes"
          label="备注"
        >
          <Input.TextArea rows={3} placeholder="请输入备注信息" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            创建独立站
          </Button>
          <Button style={{ marginLeft: 16 }} onClick={handleCancel}>
            取消
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default IndependentSiteCreate;