import {
  useState,
  Tabs,
  Card,
  Button,
  Form,
  Input,
  Modal,
  message,
  SafetyOutlined,
  FC,
} from '@/imports';

const Settings: FC = () => {
  const [activeTab, setActiveTab] = useState('account');
  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
  const [apiKeyModalVisible, setApiKeyModalVisible] = useState(false);
  const [twoFactorModalVisible, setTwoFactorModalVisible] = useState(false);
  
  const [passwordForm] = Form.useForm();
  const [apiKeyForm] = Form.useForm();

  const handlePasswordSubmit = async (_values: any) => {
    try {
      // 模拟密码修改
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('密码修改成功');
      setPasswordModalVisible(false);
      passwordForm.resetFields();
    } catch (error) {
      message.error('密码修改失败');
    }
  };

  const handleApiKeySubmit = async (_values: any) => {
    try {
      // 模拟API密钥生成
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('API密钥生成成功');
      setApiKeyModalVisible(false);
      apiKeyForm.resetFields();
    } catch (error) {
      message.error('API密钥生成失败');
    }
  };

  const tabItems = [
    {
      key: 'account',
      label: '账户设置',
      children: (
        <div>
          <Card title="个人信息" style={{ marginBottom: 16 }}>
            <p>用户名: admin</p>
            <p>邮箱: admin@example.com</p>
            <p>注册时间: 2024-01-01</p>
          </Card>
          <Card title="密码设置" style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={() => setPasswordModalVisible(true)}>
              修改密码
            </Button>
          </Card>
          <Card title="API密钥" style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={() => setApiKeyModalVisible(true)}>
              生成API密钥
            </Button>
          </Card>
          <Card title="双因素认证" style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={() => setTwoFactorModalVisible(true)}>
              启用双因素认证
            </Button>
          </Card>
        </div>
      ),
    },
    {
      key: 'notification',
      label: '通知设置',
      children: (
        <div>
          <Card title="邮件通知" style={{ marginBottom: 16 }}>
            <p>启用邮件通知: ✓</p>
            <p>通知频率: 实时</p>
          </Card>
          <Card title="短信通知" style={{ marginBottom: 16 }}>
            <p>启用短信通知: ✗</p>
            <p>手机号码: 未设置</p>
          </Card>
        </div>
      ),
    },
  ];

  return (
    <div className="settings-page" style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}>
        <h4 style={{ marginBottom: 8, fontSize: 16, fontWeight: 600 }}>系统设置</h4>
        <p style={{ color: '#666', margin: 0 }}>管理您的账户设置、通知偏好和系统配置</p>
      </div>

      <Tabs activeKey={activeTab} onChange={setActiveTab} type="card" items={tabItems} />

      {/* 密码修改弹窗 */}
      <Modal
        title="修改密码"
        open={passwordModalVisible}
        onCancel={() => setPasswordModalVisible(false)}
        footer={null}
      >
        <Form form={passwordForm} layout="vertical" onFinish={handlePasswordSubmit}>
          <Form.Item
            name="currentPassword"
            label="当前密码"
            rules={[{ required: true, message: '请输入当前密码' }]}
          >
            <Input.Password placeholder="当前密码" />
          </Form.Item>
          <Form.Item
            name="newPassword"
            label="新密码"
            rules={[
              { required: true, message: '请输入新密码' },
              { min: 8, message: '密码至少8位' },
            ]}
          >
            <Input.Password placeholder="新密码" />
          </Form.Item>
          <Form.Item
            name="confirmPassword"
            label="确认新密码"
            rules={[{ required: true, message: '请确认新密码' }]}
          >
            <Input.Password placeholder="确认新密码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ marginRight: 8 }}>
              确认修改
            </Button>
            <Button onClick={() => setPasswordModalVisible(false)}>
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      {/* API密钥生成弹窗 */}
      <Modal
        title="生成API密钥"
        open={apiKeyModalVisible}
        onCancel={() => setApiKeyModalVisible(false)}
        footer={null}
      >
        <Form form={apiKeyForm} layout="vertical" onFinish={handleApiKeySubmit}>
          <Form.Item
            name="name"
            label="密钥名称"
            rules={[{ required: true, message: '请输入密钥名称' }]}
          >
            <Input placeholder="例如：Production API Key" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ marginRight: 8 }}>
              生成密钥
            </Button>
            <Button onClick={() => setApiKeyModalVisible(false)}>
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      {/* 双因素认证弹窗 */}
      <Modal
        title="启用双因素认证"
        open={twoFactorModalVisible}
        onCancel={() => setTwoFactorModalVisible(false)}
        onOk={() => setTwoFactorModalVisible(false)}
      >
        <div style={{ textAlign: 'center' }}>
          <SafetyOutlined style={{ fontSize: 48, color: '#52c41a' }} />
          <p style={{ marginTop: 16 }}>
            启用双因素认证后，每次登录时除了密码外，还需要输入手机验证码。
          </p>
          <p>
            这将大大提高您账户的安全性。
          </p>
        </div>
      </Modal>
    </div>
  );
};

export default Settings;