import { useEffect, useCallback } from 'react';
import { Form, Input, Select, Button, ColorPicker, Typography, Divider } from 'antd';
import { getTheme, updateTheme } from '../../api/themes';
import { useApiRequest } from '../../hooks/useApiRequest';

export default function ThemeSettings() {
  const [form] = Form.useForm();
  const { execute, loading } = useApiRequest();

  const fetchTheme = useCallback(async () => {
    try {
      const theme = await getTheme();
      form.setFieldsValue({
        primary_color: theme.primary_color || '#1677ff',
        logo_url: theme.logo_url || '',
        sidebar_style: theme.sidebar_style || 'light',
        brand_name: theme.brand_name || '',
        brand_slogan: theme.brand_slogan || '',
        brand_features: theme.brand_features || '',
        brand_copyright: theme.brand_copyright || '',
      });
    } catch {
      form.setFieldsValue({
        primary_color: '#1677ff', logo_url: '', sidebar_style: 'light',
        brand_name: '', brand_slogan: '', brand_features: '', brand_copyright: '',
      });
    }
  }, [form]);

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

  const handleSave = async (values: Record<string, unknown>) => {
    await execute(async () => {
      await updateTheme({
        primary_color: typeof values.primary_color === 'string'
          ? values.primary_color
          : (values.primary_color as { toHexString?: () => string }).toHexString?.() ?? String(values.primary_color),
        logo_url: values.logo_url as string,
        sidebar_style: values.sidebar_style as 'light' | 'dark',
        brand_name: (values.brand_name as string) || undefined,
        brand_slogan: (values.brand_slogan as string) || undefined,
        brand_features: (values.brand_features as string) || undefined,
        brand_copyright: (values.brand_copyright as string) || undefined,
      });
    }, '主题设置已保存');
  };

  return (
    <div>
      <Typography.Title level={5} style={{ marginBottom: 16 }}>主题设置</Typography.Title>

      <Form form={form} onFinish={handleSave} layout="vertical" style={{ maxWidth: 480 }}>
        <Form.Item name="primary_color" label="主色调">
          <ColorPicker format="hex" />
        </Form.Item>
        <Form.Item name="logo_url" label="Logo URL">
          <Input placeholder="https://example.com/logo.png" />
        </Form.Item>
        <Form.Item name="sidebar_style" label="侧边栏风格">
          <Select options={[{ label: '亮色', value: 'light' }, { label: '暗色', value: 'dark' }]} />
        </Form.Item>

        <Divider>品牌设置</Divider>

        <Form.Item name="brand_name" label="品牌名称">
          <Input placeholder="HMS 健康管理平台" />
        </Form.Item>
        <Form.Item name="brand_slogan" label="品牌标语">
          <Input placeholder="新一代健康管理平台" />
        </Form.Item>
        <Form.Item name="brand_features" label="品牌特性">
          <Input placeholder="患者管理 · 健康监测 · 随访管理 · AI 智能分析" />
        </Form.Item>
        <Form.Item name="brand_copyright" label="版权信息">
          <Input placeholder="HMS 健康管理平台 · ©汕头市智界科技有限公司" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>保存</Button>
        </Form.Item>
      </Form>
    </div>
  );
}
