import {
  createHealthPopularization,
  getHealthPopularizationDetail,
  updateHealthPopularization,
  uploadHealthPopularizationImage,
} from './service';
import BraftEditorCom from '@/components/BraftEditor';
import { PlusOutlined } from '@ant-design/icons';
import { history, useAccess } from '@umijs/max';
import { Button, Form, Image, Input, InputNumber, Switch, Upload, message } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import './style.less';

const HealthPopularizationManagePage: React.FC = () => {
  const access = useAccess();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [uploadingCover, setUploadingCover] = useState(false);
  const [coverImg, setCoverImg] = useState('');
  const pathname = history.location.pathname;
  const isCreate = pathname.endsWith('/create');
  const listPagePath = '/live/promotion/health-popularization';
  const recordId = useMemo(() => {
    if (isCreate) {
      return '';
    }
    const segments = pathname.split('/');
    return segments[segments.length - 2] || '';
  }, [isCreate, pathname]);
  const canAccess = isCreate ? access['live:health-popularization:add'] : access['live:health-popularization:edit'];

  useEffect(() => {
    if (!canAccess) {
      history.replace('/Welcome');
      return;
    }
    const bootstrap = async () => {
      setLoading(true);
      try {
        if (isCreate) {
          setCoverImg('');
          form.setFieldsValue({
            title: '',
            content: '',
            sort: 0,
            status: true,
            isHomeRecommend: true,
          });
          return;
        }
        const res = await getHealthPopularizationDetail(recordId);
        const detail = res.data;
        setCoverImg(detail.coverImg || '');
        form.setFieldsValue({
          title: detail.title,
          coverImg: detail.coverImg,
          content: detail.content || '',
          sort: detail.sort ?? 0,
          status: detail.status === 1,
          isHomeRecommend: detail.isHomeRecommend === 1,
        });
      } finally {
        setLoading(false);
      }
    };
    bootstrap();
  }, [canAccess, form, isCreate, recordId]);

  const handleSubmit = async () => {
    const values = await form.validateFields();
    const payload = {
      title: values.title?.trim(),
      coverImg,
      contentType: 1,
      content: values.content,
      sort: values.sort,
      status: values.status ? 1 : 0,
      isHomeRecommend: values.isHomeRecommend ? 1 : 0,
    };
    setSubmitting(true);
    try {
      if (isCreate) {
        await createHealthPopularization(payload);
        message.success('新增成功');
      } else {
        await updateHealthPopularization(recordId, payload);
        message.success('保存成功');
      }
      history.replace(`${listPagePath}?refresh=${Date.now()}`);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="health-popularization-page">
      <div className="health-popularization-page__panel">
        <div className="health-popularization-page__title">{isCreate ? '添加健康知识' : '编辑健康知识'}</div>
        <Form form={form} layout="vertical" className="health-popularization-edit-form">
          <div className="health-popularization-edit-form__section-title">信息</div>
          <div className="health-popularization-edit-form__grid">
            <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
              <Input placeholder="请输入" maxLength={128} disabled={loading} />
            </Form.Item>
            <Form.Item label="视频封面图" className="health-popularization-edit-form__upload" required>
              <Form.Item name="coverImg" rules={[{ required: true, message: '请上传视频封面图' }]} hidden>
                <Input />
              </Form.Item>
              <Upload
                accept="image/*"
                showUploadList={false}
                customRequest={async (options) => {
                  setUploadingCover(true);
                  try {
                    const res = await uploadHealthPopularizationImage(options.file as File);
                    const url = res.data?.url;
                    if (!url) {
                      throw new Error('upload failed');
                    }
                    setCoverImg(url);
                    form.setFieldsValue({ coverImg: url });
                    options.onSuccess?.(res);
                  } catch (error) {
                    message.error('封面图上传失败');
                    options.onError?.(error as Error);
                  } finally {
                    setUploadingCover(false);
                  }
                }}
              >
                <div className="health-popularization-edit-form__cover-box">
                  {coverImg ? (
                    <Image src={coverImg} width={96} height={96} preview={false} />
                  ) : uploadingCover ? (
                    '上传中...'
                  ) : (
                    <PlusOutlined />
                  )}
                </div>
              </Upload>
            </Form.Item>
            <div className="health-popularization-edit-form__switch-group">
              <div className="health-popularization-edit-form__switch-item">
                <span className="health-popularization-edit-form__switch-label">是否启用</span>
                <Form.Item name="status" valuePropName="checked" rules={[{ required: true, message: '请选择是否启用' }]}>
                  <Switch />
                </Form.Item>
              </div>
              <div className="health-popularization-edit-form__switch-item">
                <span className="health-popularization-edit-form__switch-label">首页推荐</span>
                <Form.Item
                  name="isHomeRecommend"
                  valuePropName="checked"
                  rules={[{ required: true, message: '请选择是否首页推荐' }]}
                >
                  <Switch />
                </Form.Item>
              </div>
            </div>
            <Form.Item label="排序" name="sort" rules={[{ required: true, message: '请输入排序' }]}>
              <InputNumber min={0} precision={0} placeholder="请输入" style={{ width: '100%' }} disabled={loading} />
            </Form.Item>
            <Form.Item
              label="内容详情"
              name="content"
              className="health-popularization-edit-form__editor-item"
              rules={[{ required: true, message: '请输入科普内容' }]}
            >
              <div className="health-popularization-edit-form__editor">
                <BraftEditorCom
                  data={form.getFieldValue('content') || ''}
                  resultCallback={(html: string) => form.setFieldsValue({ content: html })}
                />
              </div>
            </Form.Item>
          </div>
          <div className="health-popularization-edit-form__footer">
            <Button onClick={() => history.push(listPagePath)}>取消</Button>
            <Button type="primary" loading={submitting} onClick={handleSubmit}>
              保存
            </Button>
          </div>
        </Form>
      </div>
    </div>
  );
};

export default HealthPopularizationManagePage;