// // import React, { useEffect } from 'react';
// // import Header from '../../components/Header';
// // import { useGroupStore } from '../../context/useGroupStore';
// // // import GroupFilters from './GroupFilters';
// // import GroupList from './GroupList';
// // import GroupPagination from './GroupPagination';
// // import './InterestGroup.css';
// // const InterestGroup = () => {
// //   const { fetchGroupList, setPage, handleSearch } = useGroupStore();

// //   // 初始化加载
// //   useEffect(() => {
// //     fetchGroupList();
// //   }, [fetchGroupList]);

// //   return (
// //     <div className="interest-group-container">
// //       <Header />
// //       <div className="interest-group-card">
// //         {/* <GroupFilters /> */}
// //         <GroupList />
// //         <GroupPagination />
// //       </div>
// //     </div>
// //   );
// // };

// // export default InterestGroup;

// import React, { useEffect, useState } from 'react';
// import Header from '../../components/Header';
// import { useGroupStore } from '../../context/useGroupStore';
// import GroupList from './GroupList';
// import GroupPagination from './GroupPagination';
// import './InterestGroup.css';
// import axios from 'axios';

// const InterestGroup = () => {
//   const { fetchGroupList } = useGroupStore();

//   const [showModal, setShowModal] = useState(false);
//   const [groupName, setGroupName] = useState('');
//   const [groupDescription, setGroupDescription] = useState('');

//   useEffect(() => {
//     fetchGroupList();
//   }, [fetchGroupList]);

//   const handleCreateGroup = async () => {
//   try {
//     const res = await axios.post('http://localhost:3011/echo/groups/createGroup', {
//       user_id: 1,
//       group_name: groupName,               // ✅ 改为 snake_case
//       description: groupDescription,
//       time: new Date().toISOString(),
//       category: '默认分类',
//       cover_image: 'https://picsum.photos/300/200',
//     });

//     if (res.status === 200 && res.data.status === 'success') {
//       alert('小组创建成功');
//       setShowModal(false);
//       setGroupName('');
//       setGroupDescription('');
//       fetchGroupList();
//     } else {
//       alert('创建失败: ' + res.data.message);
//     }
//   } catch (error) {
//     alert('创建失败，请检查网络或输入');
//     console.error(error);
//   }
// };


//   // const handleCreateGroup = async () => {
//   //   try {
//   //     const res = await axios.post('/createGroup', {
//   //       groupName,
//   //       description: groupDescription,
//   //     });
//   //     if (res.status === 200) {
//   //       alert('小组创建成功');
//   //       setShowModal(false);
//   //       setGroupName('');
//   //       setGroupDescription('');
//   //       fetchGroupList(); // 刷新列表
//   //     }
//   //   } catch (error) {
//   //     alert('创建失败，请重试');
//   //   }
//   // };

//   return (
//     <div className="interest-group-container">
//       <Header />
//       <div className="interest-group-card">
//         <button className="create-group-btn" onClick={() => setShowModal(true)}>
//           创建小组
//         </button>

//         {showModal && (
//           <div className="modal-overlay">
//             <div className="modal-content">
//               <h2>创建新小组</h2>
//               <input
//                 type="text"
//                 placeholder="小组名称"
//                 value={groupName}
//                 onChange={(e) => setGroupName(e.target.value)}
//               />
//               <textarea
//                 placeholder="小组简介"
//                 value={groupDescription}
//                 onChange={(e) => setGroupDescription(e.target.value)}
//               />
//               <div className="modal-buttons">
//                 <button onClick={handleCreateGroup}>确定</button>
//                 <button onClick={() => setShowModal(false)}>取消</button>
//               </div>
//             </div>
//           </div>
//         )}

//         <GroupList />
//         <GroupPagination />
//       </div>
//     </div>
//   );
// };

// export default InterestGroup;


import React, { useEffect, useState } from 'react';
import Header from '../../components/Header';
import { useGroupStore } from '../../context/useGroupStore';
import GroupList from './GroupList';
import GroupPagination from './GroupPagination';
import './InterestGroup.css';
import axios from 'axios';

const InterestGroup = () => {
  const { fetchGroupList } = useGroupStore();

  const [showModal, setShowModal] = useState(false);
  const [groupName, setGroupName] = useState('');
  const [groupDescription, setGroupDescription] = useState('');

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

  const handleCreateGroup = async () => {
    try {
      // ✅ 修改请求体字段名，使用驼峰命名法
      const res = await axios.post('http://localhost:3011/echo/groups/createGroup', {
        userId: 1,                 // 改为驼峰命名 userId
        groupName: groupName,      // 改为驼峰命名 groupName
        description: groupDescription,
        // 移除time字段，使用后端生成的时间
        memberCount: 1,            // 添加初始成员数
        category: '默认分类',
        coverImage: 'https://picsum.photos/300/200',  // 改为驼峰命名 coverImage
      });

      if (res.status === 200 && res.data.status === 'success') {
        alert('小组创建成功');
        setShowModal(false);
        setGroupName('');
        setGroupDescription('');
        fetchGroupList(); // 刷新列表
      } else {
        // 显示后端返回的详细错误信息
        alert('创建失败: ' + res.data.message);
      }
    } catch (error) {
      // 处理网络错误或其他异常
      alert('创建失败，请检查网络连接或输入内容');
      console.error('创建小组错误:', error);
    }
  };

  return (
    <div className="interest-group-container">
      <Header />
      <div className="interest-group-card">
        <button className="create-group-btn" onClick={() => setShowModal(true)}>
          创建小组
        </button>

        {showModal && (
          <div className="modal-overlay">
            <div className="modal-content">
              <h2>创建新小组</h2>
              <input
                type="text"
                placeholder="小组名称"
                value={groupName}
                onChange={(e) => setGroupName(e.target.value)}
              />
              <textarea
                placeholder="小组简介"
                value={groupDescription}
                onChange={(e) => setGroupDescription(e.target.value)}
              />
              <div className="modal-buttons">
                <button onClick={handleCreateGroup}>确定</button>
                <button onClick={() => setShowModal(false)}>取消</button>
              </div>
            </div>
          </div>
        )}

        <GroupList />
        <GroupPagination />
      </div>
    </div>
  );
};

export default InterestGroup;