import instance from '@/utils/axios';
import React, { useState } from 'react';
import styles from './upload.module.css';
import { Upload } from '@/api/upload';
import { useNavigate } from 'react-router-dom'; // 用于跳转

const PostDetails = () => {
  const [postTitle, setPostTitle] = useState('');
  const [postType, setPostType] = useState('');
  const [postContent, setPostContent] = useState('');
  const [isChecked, setIsChecked] = useState(false);

  const navigate = useNavigate();

  const handleSubmit = async () => {
    if (!postTitle.trim() || !postType || !postContent.trim()) {
      alert('请填写完整内容（资源名、类型、内容介绍）');
      return;
    }

    if (!isChecked) {
      alert('请先确认您已知晓以上内容');
      return;
    }

    const payload = {
      post: {
        postId: 0,
        userId: 0,
        postTitle,
        postContent,
        createdAt: Date.now(),
        postType,
        viewCount: 0,
        hotScore: 5,
        lastCalculated: Date.now()
      },
      tagIds: [0]
    };

    try {
      const res = await instance.post(Upload, payload);

      console.log('mock返回内容：', res.code);

      // 判断返回内容是否成功（根据你 mock 接口返回的 code 字段）
      if (res.code !== 0) throw new Error('发布失败');

      alert('发布成功！');
      navigate(-1); // 返回上一页（homepage）
    } catch (error) {
      alert('发布失败，请稍后重试');
      console.error(error);
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.formGroup}>
        <label>资源名：</label>
        <input
          type="text"
          value={postTitle}
          placeholder="请输入文本"
          onChange={(e) => setPostTitle(e.target.value)}
          className={styles.input}
        />
      </div>

      <div className={styles.formGroup}>
        <label>类型选择：</label>
        <select
          value={postType}
          onChange={(e) => setPostType(e.target.value)}
          className={styles.select}
        >
          <option value="">下拉选择</option>
          <option value="type1">类型一</option>
          <option value="type2">类型二</option>
        </select>
      </div>

      {/* 暂时移除上传文件表单 */}
      {/* <div className={styles.formGroup}>
        <label>上传资源：</label>
        <input
          type="file"
          onChange={(e) => setFile(e.target.files?.[0] || null)}
          className={styles.upload}
        />
      </div> */}

      <div className={styles.formGroup}>
        <label>内容介绍：</label>
        <textarea
          placeholder="请输入内容介绍"
          value={postContent}
          onChange={(e) => setPostContent(e.target.value)}
          maxLength={200}
          className={styles.textarea}
        />
        <div className={styles.charCount}>{postContent.length}/200</div>
      </div>

      <div className={styles.requirement}>【发布内容要求】</div>

      <div className={styles.checkbox}>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={() => setIsChecked(!isChecked)}
        />
        <span>我已知晓以上内容</span>
      </div>

      <button onClick={handleSubmit} className={styles.submitBtn}>
        我已知晓
      </button>
    </div>
  );
};

export default PostDetails;