import React, { useEffect, useState } from 'react';
import { Card, Form, Select, Input, Button, message, Spin, Divider } from 'antd';
import { getStorageConfig, updateStorageConfig } from '@/api/config';

const providerOptions = [
  { value: 'local', label: '本地存储' },
  { value: 'tencent_cos', label: '腾讯云 COS' },
  { value: 'aliyun_oss', label: '阿里云 OSS' },
];

const StorageSettings: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [provider, setProvider] = useState<string>('local');
  const [form] = Form.useForm();

  const fetchConfig = async () => {
    setLoading(true);
    try {
      const res: any = await getStorageConfig();
      const data = res.data || {};
      setProvider(data.storage_provider || 'local');
      form.setFieldsValue({
        storage_provider: data.storage_provider || 'local',
        storage_local_path: data.storage_local_path || './uploads',
        storage_cos_bucket: data.storage_cos_bucket || '',
        storage_cos_region: data.storage_cos_region || '',
        storage_cos_secret_id: data.storage_cos_secret_id || '',
        storage_cos_secret_key: data.storage_cos_secret_key || '',
        storage_oss_bucket: data.storage_oss_bucket || '',
        storage_oss_region: data.storage_oss_region || '',
        storage_oss_access_key_id: data.storage_oss_access_key_id || '',
        storage_oss_access_key_secret: data.storage_oss_access_key_secret || '',
      });
    } catch {
      form.setFieldsValue({ storage_provider: 'local', storage_local_path: './uploads' });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetchConfig(); }, []);

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      setSaving(true);
      const data: Record<string, string> = {};
      for (const [key, value] of Object.entries(values)) {
        if (value !== undefined && value !== null && value !== '') {
          data[key] = String(value);
        }
      }
      data.storage_provider = provider;
      await updateStorageConfig(data);
      message.success('存储配置已保存');
    } catch (e: any) {
      if (e?.message) message.error(e.message);
    } finally {
      setSaving(false);
    }
  };

  if (loading) return <Spin size="large" style={{ display: 'block', marginTop: 100 }} />;

  return (
    <Card title="存储配置" style={{ maxWidth: 700 }}>
      <Form form={form} layout="vertical">
        <Form.Item label="存储方式" name="storage_provider" rules={[{ required: true, message: '请选择存储方式' }]}>
          <Select options={providerOptions} onChange={(v) => setProvider(v)} />
        </Form.Item>

        {provider === 'local' && (
          <>
            <Form.Item label="存储路径" name="storage_local_path" extra="相对于服务启动目录">
              <Input placeholder="./uploads" />
            </Form.Item>
            <div style={{ color: '#888', fontSize: 13, marginBottom: 16 }}>
              文件将保存到服务器本地目录，通过 /uploads/ 路径访问。适用于开发环境或小规模部署。
            </div>
          </>
        )}

        {provider === 'tencent_cos' && (
          <>
            <Divider orientation="left" plain>腾讯云 COS 配置</Divider>
            <Form.Item label="Bucket" name="storage_cos_bucket" rules={[{ required: true, message: '请输入 Bucket' }]}>
              <Input placeholder="example-1250000000" />
            </Form.Item>
            <Form.Item label="Region" name="storage_cos_region" rules={[{ required: true, message: '请输入 Region' }]}>
              <Input placeholder="ap-guangzhou" />
            </Form.Item>
            <Form.Item label="SecretId" name="storage_cos_secret_id" rules={[{ required: true, message: '请输入 SecretId' }]}>
              <Input.Password placeholder="请输入 SecretId" />
            </Form.Item>
            <Form.Item label="SecretKey" name="storage_cos_secret_key" rules={[{ required: true, message: '请输入 SecretKey' }]}>
              <Input.Password placeholder="请输入 SecretKey" />
            </Form.Item>
            <div style={{ color: '#888', fontSize: 13, marginBottom: 16 }}>
              需安装 SDK: pnpm add cos-nodejs-sdk-v5
            </div>
          </>
        )}

        {provider === 'aliyun_oss' && (
          <>
            <Divider orientation="left" plain>阿里云 OSS 配置</Divider>
            <Form.Item label="Bucket" name="storage_oss_bucket" rules={[{ required: true, message: '请输入 Bucket' }]}>
              <Input placeholder="my-bucket" />
            </Form.Item>
            <Form.Item label="Region" name="storage_oss_region" rules={[{ required: true, message: '请输入 Region' }]}>
              <Input placeholder="oss-cn-hangzhou" />
            </Form.Item>
            <Form.Item label="AccessKeyId" name="storage_oss_access_key_id" rules={[{ required: true, message: '请输入 AccessKeyId' }]}>
              <Input.Password placeholder="请输入 AccessKeyId" />
            </Form.Item>
            <Form.Item label="AccessKeySecret" name="storage_oss_access_key_secret" rules={[{ required: true, message: '请输入 AccessKeySecret' }]}>
              <Input.Password placeholder="请输入 AccessKeySecret" />
            </Form.Item>
            <div style={{ color: '#888', fontSize: 13, marginBottom: 16 }}>
              需安装 SDK: pnpm add ali-oss
            </div>
          </>
        )}

        <Form.Item>
          <Button type="primary" loading={saving} onClick={handleSave}>保存配置</Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default StorageSettings;
