import { useEffect, useState } from 'react';
import { Form, Switch, TimePicker, Button, message } from 'antd';
import { BellOutlined } from '@ant-design/icons';
import { useThemeMode } from '../../hooks/useThemeMode';
import { updateSubscription } from '../../api/messages';

interface PreferencesData {
  dnd_enabled: boolean;
  dnd_start?: string;
  dnd_end?: string;
}

export default function NotificationPreferences() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [dndEnabled, setDndEnabled] = useState(false);
  const isDark = useThemeMode();

  useEffect(() => {
    form.setFieldsValue({ dnd_enabled: false });
  }, [form]);

  const handleSave = async () => {
    setLoading(true);
    try {
      const values = await form.validateFields();
      const req: PreferencesData = {
        dnd_enabled: values.dnd_enabled || false,
        dnd_start: values.dnd_range?.[0]?.format('HH:mm'),
        dnd_end: values.dnd_range?.[1]?.format('HH:mm'),
      };

      if (req.dnd_enabled && req.dnd_start && req.dnd_end) {
        if (req.dnd_start >= req.dnd_end) {
          message.error('免打扰开始时间必须早于结束时间');
          setLoading(false);
          return;
        }
      }

      await updateSubscription({
        dnd_enabled: req.dnd_enabled,
        dnd_start: req.dnd_start,
        dnd_end: req.dnd_end,
      });

      message.success('偏好设置已保存');
    } catch {
      message.error('保存失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      background: isDark ? '#111827' : '#FFFFFF',
      borderRadius: 12,
      border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
      padding: 24,
      maxWidth: 600,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
        <BellOutlined style={{ fontSize: 16, color: '#2563eb' }} />
        <span style={{ fontSize: 15, fontWeight: 600 }}>通知偏好设置</span>
      </div>

      <Form form={form} layout="vertical">
        <Form.Item name="dnd_enabled" label="免打扰模式" valuePropName="checked">
          <Switch onChange={setDndEnabled} />
        </Form.Item>

        {dndEnabled && (
          <Form.Item
            name="dnd_range"
            label="免打扰时段"
            rules={[{ required: true, message: '请选择免打扰时段' }]}
          >
            <TimePicker.RangePicker format="HH:mm" style={{ width: '100%' }} />
          </Form.Item>
        )}

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