import { App as AntApp, Card, Form, Radio, Switch } from "antd";

import type { ThemePreference } from "../../../shared/api";
import { useSettings } from "../../shared/hooks/use-settings";
import { parseThemePreference, useThemePreference } from "../../shared/hooks/use-theme-preference";

const THEME_OPTIONS = [
  { label: "系统", value: "system" },
  { label: "明亮", value: "light" },
  { label: "黑暗", value: "dark" },
] as const;

const SAVE_MESSAGE_KEY = "settings-save";

export function SettingsPage() {
  const { message } = AntApp.useApp();
  const { compact, preference, setCompact, setPreference } = useThemePreference();
  const { isUpdating, updateSettings } = useSettings();

  const handleThemeChange = (value: ThemePreference) => {
    message.open({ content: "保存中...", duration: 0, key: SAVE_MESSAGE_KEY, type: "loading" });
    updateSettings(
      { theme: value },
      {
        onError: () => {
          void message.open({ content: "保存失败", duration: 2, key: SAVE_MESSAGE_KEY, type: "error" });
        },
        onSuccess: () => {
          setPreference(value);
          void message.open({ content: "已保存", duration: 1.5, key: SAVE_MESSAGE_KEY, type: "success" });
        },
      },
    );
  };

  const handleCompactChange = (checked: boolean) => {
    message.open({ content: "保存中...", duration: 0, key: SAVE_MESSAGE_KEY, type: "loading" });
    updateSettings(
      { compact: checked },
      {
        onError: () => {
          void message.open({ content: "保存失败", duration: 2, key: SAVE_MESSAGE_KEY, type: "error" });
        },
        onSuccess: () => {
          setCompact(checked);
          void message.open({ content: "已保存", duration: 1.5, key: SAVE_MESSAGE_KEY, type: "success" });
        },
      },
    );
  };

  return (
    <Card title="主题" type="inner">
      <Form
        className="settings-form"
        colon={false}
        disabled={isUpdating}
        labelAlign="left"
        labelCol={{ flex: "120px" }}
        layout="horizontal"
      >
        <Form.Item colon={false} help="选择跟随系统将自动适配操作系统的深浅色偏好" label="主题模式">
          <Radio.Group
            buttonStyle="solid"
            onChange={(e) => handleThemeChange(parseThemePreference(e.target.value))}
            optionType="button"
            options={THEME_OPTIONS.map((o) => ({ label: o.label, value: o.value }))}
            value={preference}
          />
        </Form.Item>
        <Form.Item colon={false} help="开启后控件间距和高度变小,显示更多内容" label="紧凑模式">
          <Switch checked={compact} onChange={handleCompactChange} />
        </Form.Item>
      </Form>
    </Card>
  );
}