import React, { useState } from 'react';
import { Card, Form, Input, Select, Button, Switch, message } from 'antd';
import { SaveOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

interface TenantData {
  name: string;
  domain: string;
  industry: string;
  timezone: string;
  currency: string;
  language: string;
  enableTwoFactor: boolean;
  enableNotifications: boolean;
  enableAnalytics: boolean;
}

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

  const initialTenant: TenantData = {
    name: 'Acme Inc.',
    domain: 'acme.example.com',
    industry: 'E-commerce',
    timezone: 'Asia/Shanghai',
    currency: 'USD',
    language: 'en',
    enableTwoFactor: false,
    enableNotifications: true,
    enableAnalytics: true,
  };

  const handleSubmit = async (values: any) => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      message.success('租户设置已更新');
      setLoading(false);
    }, 1000);
  };

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

  return (
    <div className="tenant-settings">
      <div className="page-header">
        <h1>租户设置</h1>
        <Button
          icon={<ArrowLeftOutlined />}
          onClick={handleBack}
        >
          返回
        </Button>
      </div>

      <Card title="基本信息">
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          initialValues={initialTenant}
        >
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Form.Item
              name="name"
              label="租户名称"
              rules={[{ required: true, message: '请输入租户名称' }]}
            >
              <Input placeholder="请输入租户名称" />
            </Form.Item>

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

            <Form.Item
              name="industry"
              label="行业"
              rules={[{ required: true, message: '请选择行业' }]}
            >
              <Select placeholder="请选择行业">
                <Option value="E-commerce">E-commerce</Option>
                <Option value="Retail">Retail</Option>
                <Option value="Manufacturing">Manufacturing</Option>
                <Option value="Technology">Technology</Option>
              </Select>
            </Form.Item>

            <Form.Item
              name="timezone"
              label="时区"
              rules={[{ required: true, message: '请选择时区' }]}
            >
              <Select placeholder="请选择时区">
                <Option value="Asia/Shanghai">Asia/Shanghai</Option>
                <Option value="America/New_York">America/New_York</Option>
                <Option value="Europe/London">Europe/London</Option>
                <Option value="Asia/Tokyo">Asia/Tokyo</Option>
              </Select>
            </Form.Item>

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

            <Form.Item
              name="language"
              label="语言"
              rules={[{ required: true, message: '请选择语言' }]}
            >
              <Select placeholder="请选择语言">
                <Option value="en">English</Option>
                <Option value="zh">中文</Option>
                <Option value="ja">日本語</Option>
                <Option value="ko">한국어</Option>
              </Select>
            </Form.Item>
          </div>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} icon={<SaveOutlined />}>
              保存
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <Card title="功能设置" style={{ marginTop: 24 }}>
        <Form
          layout="vertical"
          initialValues={initialTenant}
        >
          <Form.Item
            name="enableTwoFactor"
            label="启用双因素认证"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>

          <Form.Item
            name="enableNotifications"
            label="启用通知"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>

          <Form.Item
            name="enableAnalytics"
            label="启用数据分析"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>

          <Form.Item>
            <Button type="primary" icon={<SaveOutlined />}>
              保存设置
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default TenantSettings;