import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Button, message, Switch, Card, Tabs } from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
import { independentSiteDataSource, SiteConfig } from '@/services/independentSiteDataSource';

const { Option } = Select;
const { TabPane } = Tabs;

const IndependentSiteConfig: React.FC = () => {
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [siteData, setSiteData] = useState<SiteConfig | null>(null);

  useEffect(() => {
    if (id) {
      fetchSiteData(id);
    }
  }, [id]);

  const fetchSiteData = async (siteId: string) => {
    setLoading(true);
    try {
      const data = await independentSiteDataSource.fetchSiteConfig(siteId);
      setSiteData(data);
      form.setFieldsValue(data);
    } catch (error) {
      message.error('加载站点配置失败');
    } finally {
      setLoading(false);
    }
  };

  const onFinish = async (values: any) => {
    if (!id) return;
    setLoading(true);
    try {
      await independentSiteDataSource.saveSiteConfig(id, values);
      message.success('配置保存成功');
    } catch (error) {
      message.error('配置保存失败');
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="independent-site-config">
      <div className="page-header">
        <h1>独立站配置 - {siteData.name}</h1>
      </div>

      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
      >
        <Tabs defaultActiveKey="basic">
          <TabPane tab="基本信息" key="basic">
            <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="description"
              label="站点描述"
            >
              <Input.TextArea rows={4} placeholder="请输入站点描述" />
            </Form.Item>

            <Form.Item
              name="isActive"
              label="状态"
              valuePropName="checked"
            >
              <Switch checkedChildren="启用" unCheckedChildren="停用" />
            </Form.Item>

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

          <TabPane tab="同步设置" key="sync">
            <Form.Item
              name={['settings', 'inventorySync']}
              label="库存同步"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name={['settings', 'orderSync']}
              label="订单同步"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name={['settings', 'pricingSync']}
              label="价格同步"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name={['settings', 'autoPublish']}
              label="自动发布"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name={['settings', 'currency']}
              label="货币"
            >
              <Select placeholder="请选择货币">
                <Option value="USD">USD</Option>
                <Option value="EUR">EUR</Option>
                <Option value="GBP">GBP</Option>
                <Option value="CNY">CNY</Option>
              </Select>
            </Form.Item>

            <Form.Item
              name={['settings', 'language']}
              label="语言"
            >
              <Select placeholder="请选择语言">
                <Option value="en">English</Option>
                <Option value="zh">中文</Option>
                <Option value="es">Español</Option>
                <Option value="fr">Français</Option>
              </Select>
            </Form.Item>
          </TabPane>

          <TabPane tab="物流设置" key="shipping">
            <Form.Item
              name={['shipping', 'freeShipping']}
              label="免费配送"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name={['shipping', 'freeShippingThreshold']}
              label="免费配送阈值"
            >
              <Input type="number" placeholder="请输入金额" />
            </Form.Item>

            <Form.Item
              name={['shipping', 'shippingZones']}
              label="配送区域"
            >
              <Select mode="multiple" placeholder="请选择配送区域">
                <Option value="US">美国</Option>
                <Option value="CA">加拿大</Option>
                <Option value="EU">欧盟</Option>
                <Option value="AU">澳大利亚</Option>
                <Option value="CN">中国</Option>
              </Select>
            </Form.Item>
          </TabPane>

          <TabPane tab="支付设置" key="payment">
            <Form.Item
              name={['payment', 'paypal']}
              label="PayPal"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name={['payment', 'stripe']}
              label="Stripe"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name={['payment', 'creditCard']}
              label="信用卡"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>

            <Form.Item
              name={['payment', 'applePay']}
              label="Apple Pay"
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>
          </TabPane>
        </Tabs>

        <Form.Item style={{ marginTop: 24 }}>
          <Button type="primary" htmlType="submit" loading={loading}>
            保存配置
          </Button>
          <Button style={{ marginLeft: 16 }} onClick={handleCancel}>
            返回列表
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default IndependentSiteConfig;