import { useState } from 'react';
import { App as AntdApp, Button, Card, Form, Input, Space } from 'antd';
import { saveXxx } from './server';
import type { XxxFormValues } from './types';
import './Xxx.scss';

const Xxx = () => {
  const [submitting, setSubmitting] = useState(false);
  const [form] = Form.useForm<XxxFormValues>();
  const { message } = AntdApp.useApp();

  const handleFinish = (values: XxxFormValues) => {
    setSubmitting(true);
    saveXxx(values)
      .then(() => {
        message.success('保存成功');
        form.resetFields();
      })
      .catch((error) => {
        message.error(error instanceof Error ? error.message : '保存失败，请稍后重试');
      })
      .finally(() => {
        setSubmitting(false);
      });
  };

  return (
    <div className="xxx-page">
      <Card variant="borderless">
        <Form<XxxFormValues>
          form={form}
          layout="vertical"
          requiredMark={false}
          onFinish={handleFinish}
        >
          <Form.Item
            name="name"
            label="名称"
            rules={[{ required: true, message: '请输入名称' }]}
          >
            <Input placeholder="请输入名称" />
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" loading={submitting}>
                保存
              </Button>
              <Button onClick={() => form.resetFields()}>重置</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default Xxx;