import { useEffect, useState } from 'react';
import { Form, InputNumber, Button, Typography, message, Card } from 'antd';
import { fetchAdminSettings, updateAdminSettings } from './adminSettingsApi';

const { Title, Text } = Typography;

export default function Settings() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchAdminSettings().then(s => {
      form.setFieldsValue({ cartExpiryHours: s.cartExpiryHours });
      setLoading(false);
    });
  }, [form]);

  async function handleSave() {
    const values = await form.validateFields();
    await updateAdminSettings(values);
    message.success('Settings saved');
  }

  return (
    <Card style={{ maxWidth: 480 }}>
      <Title level={4}>Cart Settings</Title>
      <Text type="secondary">
        How long an item stays reserved in a customer's cart before it's automatically released back to available inventory.
      </Text>
      <Form form={form} layout="vertical" style={{ marginTop: 16 }} disabled={loading}>
        <Form.Item name="cartExpiryHours" label="Cart expiry (hours)" rules={[{ required: true }]}>
          <InputNumber min={0.5} step={0.5} style={{ width: '100%' }} />
        </Form.Item>
        <Button type="primary" onClick={handleSave} loading={loading}>Save</Button>
      </Form>
    </Card>
  );
}