// // import React, { useState, useEffect } from 'react';
// // import axios from 'axios';

// // function UploadTorrent() {
// //   const [title, setTitle] = useState('');
// //   const [description, setDescription] = useState('');
// //   const [categoryId, setCategoryId] = useState('');
// //   const [dpi, setDpi] = useState('');  // 可选字段
// //   const [caption, setCaption] = useState('');  // 可选字段
// //   const [file, setFile] = useState(null);
// //   const [categories, setCategories] = useState([]);
// //   const [showSuccess, setShowSuccess] = useState(false);

// //   useEffect(() => {
// //     axios.get('http://localhost:8080/categories')
// //       .then(res => setCategories(res.data))
// //       .catch(err => console.error('加载分类失败', err));
// //   }, []);

// //   const handleSubmit = async (e) => {
// //     e.preventDefault();
// //     if (!file) {
// //       alert('请选择一个 .torrent 文件');
// //       return;
// //     }

// //     if (!categoryId) {
// //       alert('请选择分类');
// //       return;
// //     }

// //     const formData = new FormData();
// //     formData.append('file', file);
// //     formData.append('title', title);
// //     formData.append('description', description);
// //     formData.append('categoryId', categoryId);
// //     if (dpi) formData.append('dpi', dpi);  // 只有当 dpi 有值时才添加
// //     if (caption) formData.append('caption', caption);  // 只有当 caption 有值时才添加

// //     try {
// //       await axios.post('http://localhost:8080/torrent/upload', formData, {
// //         headers: { 'Content-Type': 'multipart/form-data' },
// //         responseType: 'blob', // 关键：指定响应类型为 blob
// //       });
     
// //       // 创建下载链接
// //       const url = window.URL.createObjectURL(new Blob([response.data]));
// //       const link = document.createElement('a');
// //       link.href = url;
// //       link.setAttribute('download', file.name); // 使用原文件名
// //       document.body.appendChild(link);
// //       link.click();
// //       link.remove();
// //       // 清空表单
// //       setShowSuccess(true);
// //       setTitle('');
// //       setDescription('');
// //       setCategoryId('');
// //       setDpi('');
// //       setCaption('');
// //       setFile(null);
// //     } catch (err) {
// //       console.error('上传失败', err.response?.data || err.message);
// //       alert(err.response?.data || '上传失败，请检查后端是否启动');
// //     }
// //   };

// //   return (
// //     <div className="max-w-xl mx-auto mt-10 p-6 bg-white shadow rounded">
// //       <h2 className="text-2xl font-bold mb-4">上传种子</h2>
// //       <form onSubmit={handleSubmit} className="space-y-4">
// //         <input type="file" accept=".torrent" onChange={(e) => setFile(e.target.files[0])} />
// //         <input
// //           type="text"
// //           placeholder="标题"
// //           value={title}
// //           onChange={(e) => setTitle(e.target.value)}
// //           className="w-full p-2 border rounded"
// //           required
// //         />
// //         <textarea
// //           placeholder="描述"
// //           value={description}
// //           onChange={(e) => setDescription(e.target.value)}
// //           className="w-full p-2 border rounded"
// //         />
// //         <select
// //           value={categoryId}
// //           onChange={(e) => setCategoryId(e.target.value)}
// //           className="w-full p-2 border rounded"
// //           required
// //         >
// //           <option value="">请选择分类</option>
// //           {categories.map(cat => (
// //             <option key={cat.categoryid} value={cat.categoryid}>{cat.category_name}</option>
// //           ))}
// //         </select>
// //         <input
// //           type="text"
// //           placeholder="DPI（可选）"
// //           value={dpi}
// //           onChange={(e) => setDpi(e.target.value)}
// //           className="w-full p-2 border rounded"
// //         />
// //         <input
// //           type="text"
// //           placeholder="字幕（可选）"
// //           value={caption}
// //           onChange={(e) => setCaption(e.target.value)}
// //           className="w-full p-2 border rounded"
// //         />
// //         <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
// //           上传
// //         </button>
// //       </form>

// //       {showSuccess && (
// //         <div className="mt-4 p-3 bg-green-100 text-green-800 border border-green-300 rounded">
// //           上传成功！
// //         </div>
// //       )}
// //     </div>
// //   );
// // }

// // export default UploadTorrent;
// import React, { useState, useEffect } from 'react';;
// import axios from 'axios';

// function UploadTorrent() {
//   const [title, setTitle] = useState('');
//   const [description, setDescription] = useState('');
//   const [categoryId, setCategoryId] = useState('');
//   const [dpi, setDpi] = useState('');
//   const [caption, setCaption] = useState('');
//   const [file, setFile] = useState(null);
//   const [categories, setCategories] = useState([]);
//   const [showSuccess, setShowSuccess] = useState(false);

//   useEffect(() => {
//     axios.get('http://localhost:8080/categories')
//       .then(res => setCategories(res.data))
//       .catch(err => console.error('加载分类失败', err));
//   }, []);

//   const handleSubmit = async (e) => {
//     e.preventDefault();
//     if (!file) {
//       alert('请选择一个 .torrent 文件');
//       return;
//     }

//     if (!categoryId) {
//       alert('请选择分类');
//       return;
//     }

//     const formData = new FormData();
//     formData.append('file', file);
//     formData.append('title', title);
//     formData.append('description', description);
//     formData.append('categoryId', categoryId);
//     if (dpi) formData.append('dpi', dpi);
//     if (caption) formData.append('caption', caption);

//     try {
//       // 发送上传请求
//       const response = await axios.post('http://localhost:8080/torrent/upload', formData, {
//         headers: { 'Content-Type': 'multipart/form-data' },
//         responseType: 'blob', // 关键：指定响应类型为 blob
//       });

//       // 创建下载链接
//       const url = window.URL.createObjectURL(new Blob([response.data]));
//       const link = document.createElement('a');
//       link.href = url;
//       link.setAttribute('download', file.name); // 使用原文件名
//       document.body.appendChild(link);
//       link.click();
//       link.remove();

//       // 显示成功提示
//       setShowSuccess(true);
//       setTitle('');
//       setDescription('');
//       setCategoryId('');
//       setDpi('');
//       setCaption('');
//       setFile(null);
//     } catch (err) {
//       console.error('上传失败', err.response?.data || err.message);
//       alert(err.response?.data || '上传失败，请检查后端是否启动');
//     }
//   };

//   return (
//     <div className="max-w-xl mx-auto mt-10 p-6 bg-white shadow rounded">
//       <h2 className="text-2xl font-bold mb-4">上传种子</h2>
//       <form onSubmit={handleSubmit} className="space-y-4">
//         <input type="file" accept=".torrent" onChange={(e) => setFile(e.target.files[0])} />
//         <input
//           type="text"
//           placeholder="标题"
//           value={title}
//           onChange={(e) => setTitle(e.target.value)}
//           className="w-full p-2 border rounded"
//           required
//         />
//         <textarea
//           placeholder="描述"
//           value={description}
//           onChange={(e) => setDescription(e.target.value)}
//           className="w-full p-2 border rounded"
//         />
//         <select
//           value={categoryId}
//           onChange={(e) => setCategoryId(e.target.value)}
//           className="w-full p-2 border rounded"
//           required
//         >
//           <option value="">请选择分类</option>
//           {categories.map(cat => (
//             <option key={cat.categoryid} value={cat.categoryid}>{cat.category_name}</option>
//           ))}
//         </select>
//         <input
//           type="text"
//           placeholder="DPI（可选）"
//           value={dpi}
//           onChange={(e) => setDpi(e.target.value)}
//           className="w-full p-2 border rounded"
//         />
//         <input
//           type="text"
//           placeholder="字幕/说明（可选）"
//           value={caption}
//           onChange={(e) => setCaption(e.target.value)}
//           className="w-full p-2 border rounded"
//         />
//         <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
//           上传
//         </button>
//       </form>

//       {showSuccess && (
//         <div className="mt-4 p-3 bg-green-100 text-green-800 border border-green-300 rounded">
//           上传成功！
//         </div>
//       )}
//     </div>
//   );
// }

// export default UploadTorrent;
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UploadTorrent() {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [categoryId, setCategoryId] = useState('');
  const [file, setFile] = useState(null);
  const [categories, setCategories] = useState([]);
  const [showSuccess, setShowSuccess] = useState(false);
  
  // 通用参数
  const [dpi, setDpi] = useState('');
  const [caption, setCaption] = useState('');
  const [region, setRegion] = useState('');
  const [year, setYear] = useState('');
  const [genre, setGenre] = useState('');
  const [format, setFormat] = useState('');
  const [resolution, setResolution] = useState('');
  
  // 特殊参数
  const [codecFormat, setCodecFormat] = useState('');
  const [platform, setPlatform] = useState('');
  const [language, setLanguage] = useState('');
  const [eventType, setEventType] = useState('');
  const [source, setSource] = useState('');
  const [style, setStyle] = useState('');
  const [dataType, setdataType] = useState('');
  const [isMainland, setIsMainland] = useState(false);

  // 根据分类显示不同的表单字段
  const [showMovieFields, setShowMovieFields] = useState(false);
  const [showMusicFields, setShowMusicFields] = useState(false);
  const [showGameFields, setShowGameFields] = useState(false);
  const [showTvFields, setShowTvFields] = useState(false);
  const [showAnimeFields, setShowAnimeFields] = useState(false);
  const [showlearningFields, setShowlearningFields] = useState(false);
  const [showsoftwareFields, setShowsoftwareFields] = useState(false);
  const [showvarietyFields, setShowvarietyFields] = useState(false);
  const [showsportsFields, setShowsportsFields] = useState(false);
  const [showdocFields, setShowdocFields] = useState(false);
  const [showotherFields, setShowotherFields] = useState(false);
  // 其他分类字段...
  // 编码格式选项
  const codecFormats = [
    { value: 'H.264', label: 'H.264' },
    { value: 'H.265', label: 'H.265' },
    { value: 'AV1', label: 'AV1' },
    { value: 'VP9', label: 'VP9' },
    { value: 'VC1', label: 'VC1' },
    { value: 'X264', label: 'X264' },
  ];
  const regions = [
    { value: '大陆', label: '大陆' },
    { value: '港台', label: '港台' },
    { value: '欧美', label: '欧美' },
    { value: '日韩', label: '日韩' },
    { value: '其他', label: '其他' },
  ];
  const genres = [
    { value: '动作', label: '动作' },
    { value: '喜剧', label: '喜剧' },
    { value: '爱情', label: '爱情' },
    { value: '科幻', label: '科幻' },
    { value: '恐怖', label: '恐怖' },
    { value: '动作', label: '动作' },
    { value: '冒险', label: '冒险' },
    { value: '历史', label: '历史' },
    { value: '悬疑', label: '悬疑' },
    { value: '其他', label: '其他' },
  ];
  const resolutions = [
    { value: '720p', label: '720p' },
    { value: '1080p', label: '1080p' },
    { value: '2K', label: '2K' },
    { value: '4K', label: '4K' },
    { value: '8K', label: '8K' },
    { value: '其他', label: '其他' },
  ];


  const eventTypes = [
    { value: '足球', label: '足球' },
    { value: '篮球', label: '篮球' },
    { value: '网球', label: '网球' },
    { value: '乒乓球', label: '乒乓球' },
    { value: '羽毛球', label: '羽毛球' },
  ]
  const styles = [
    { value: '大陆综艺', label: '大陆综艺' },
    { value: '日韩综艺', label: '日韩综艺' },
    { value: '欧美综艺', label: '欧美综艺' },
    { value: '其他', label: '其他' },
  ]
  const platforms = [
    { value: 'PC', label: 'PC' },
    { value: 'PS5', label: 'PS5' },
    { value: 'Xbox', label: 'Xbox' },
    { value: 'Switch', label: 'Switch' },
    { value: '手机', label: '手机' },
    { value: '其他', label: '其他' },
  ]
  const gamegenres = [
    { value: '角色扮演', label: '角色扮演' },
    { value: '射击', label: '射击' },
    { value: '冒险', label: '冒险' },
    { value: '策略', label: '策略' },
    { value: '体育', label: '体育' },
    { value: '桌面游戏', label: '桌面游戏'},
    { value: '其他', label: '其他' },
  ]
  const dataTypes = [
    { value: '压缩包', label: '压缩包' },
    { value: '补丁', label: '补丁' },
    { value: '安装包', label: '安装包' },
    { value: 'nds', label: 'nds' },
    { value: '其他', label: '其他' },
  ]
  const languages = [
    { value: '中文', label: '中文' },
    { value: '英文', label: '英文' },
    { value: '日文', label: '日文' },
    { value: '其他', label: '其他' },
  ]
  const musicgenres = [
    { value: '专辑', label: '专辑' },
    { value: '单曲', label: '单曲' },
    { value: 'EP', label: 'EP' },
    { value: '现场', label: '现场' },
    { value: '其他', label: '其他' },
  ]
  const musicstyles = [
    { value: '流行', label: '流行' },
    { value: '摇滚', label: '摇滚' },
    { value: '电子', label: '电子' },
    { value: '古典', label: '古典' },
    { value: '爵士', label: '爵士' },
    { value: '民谣', label: '民谣' },
    { value: '说唱', label: '说唱' },
    { value: '其他', label: '其他' },
  ]
  const musicformats = [
    { value: 'MP3', label: 'MP3' },
    { value: 'FLAC', label: 'FLAC' },
    { value: 'WAV', label: 'WAV' },
    { value: 'AAC', label: 'AAC' },
    { value: 'OGG', label: 'OGG' },
    { value: '其他', label: '其他' },
  ]
  const anigenres = [
    { value: '新番连载', label: '新番连载' },
    { value: '剧场版', label: '剧场版' },
    { value: 'OVA', label: 'OVA' },
    { value: '完结动漫', label: '完结动漫' },
    { value: '其他', label: '其他' },
  ]
  const animeformats = [
    { value: 'ZIP', label: 'ZIP' },
    { value: 'RAR', label: 'RAR' },
    { value: '7Z', label: '7Z' },
    { value: 'MKV', label: 'MKV' },
    { value: 'MP4', label: 'MP4' },
    { value: '其他', label: '其他' },
  ]
  const varietygenres = [
    { value: '真人秀', label: '真人秀' },
    { value: '选秀', label: '选秀' },
    { value: '访谈', label: '访谈' },
    { value: '游戏', label: '游戏' },
    { value: '音乐', label: '音乐' },
    { value: '其他', label: '其他' },
  ]
  const sportsgenres = [
    { value: '足球', label: '足球' },
    { value: '篮球', label: '篮球' },
    { value: '网球', label: '网球' },
    { value: '乒乓球', label: '乒乓球' },
    { value: '羽毛球', label: '羽毛球' },
    { value: '其他', label: '其他' },
  ]
  const softwaregenres = [
    { value: '系统软件', label: '系统软件' },
    { value: '应用软件', label: '应用软件' },
    { value: '游戏软件', label: '游戏软件' },
    { value: '驱动程序', label: '驱动程序' },
    { value: '办公软件', label: '办公软件' },
    { value: '其他', label: '其他' },
  ]
  const softwareplatforms = [
    { value: 'Windows', label: 'Windows' },
    { value: 'Mac', label: 'Mac' },
    { value: 'Linux', label: 'Linux' },
    { value: 'Android', label: 'Android' },
    { value: 'iOS', label: 'iOS' },
    { value: '其他', label: '其他' },
  ]
  const softwareformats = [
    { value: 'EXE', label: 'EXE' }, 
    { value: 'DMG', label: 'DMG' },
    { value: '光盘镜像', label: '光盘镜像' },
    { value: 'APK', label: 'APK' },
    { value: 'IPA', label: 'IPA' },
    { value: '其他', label: '其他' },
  ]
  const learninggenres = [
    { value: '计算机', label: '计算机' },
    { value: '软件', label: '软件' },
    { value: '人文', label: '人文' },
    { value: '外语', label: '外语' },
    { value: '理工类', label: '理工类' },
    { value: '其他', label: '其他' },
  ]
  const learningformats = [
    { value: 'PDF', label: 'PDF' },
    { value: 'EPUB', label: 'EPUB' },
    { value: '视频', label: '视频' },
    { value: '音频', label: '音频' },
    { value: 'PPT', label: 'PPT' },
    { value: '其他', label: '其他' },
  ]
  const sourceTypes = [
    { value: 'CCTV', label: 'CCTV' },
    { value: '卫视', label: '卫视' },
    { value: '国家地理', label: '国家地理' },
    { value: 'BBC', label: 'BBC' },
    { value: 'Discovery', label: 'Discovery' },
    { value: '其他', label: '其他' },
  ]
  const othergenres = [
    { value: '电子书', label: '电子书' },
    { value: '视频', label: '视频' },
    { value: 'MP3', label: 'MP3' },
    { value: '图片', label: '图片' },
    { value: '其他', label: '其他' },
  ]
  useEffect(() => {
    axios.get('http://localhost:8080/categories')
      .then(res => setCategories(res.data))
      .catch(err => console.error('加载分类失败', err));
  }, []);

  // 根据选择的分类显示不同的表单字段
  useEffect(() => {
    setShowMovieFields(categoryId === '1');
    setShowMusicFields(categoryId === '3');
    setShowGameFields(categoryId === '5');
    setShowTvFields(categoryId === '2');
    setShowAnimeFields(categoryId === '4');
    setShowlearningFields(categoryId === '9');
    setShowsoftwareFields(categoryId === '8');
    setShowvarietyFields(categoryId === '6');
    setShowsportsFields(categoryId === '7');
    setShowdocFields(categoryId === '10');
    setShowotherFields(categoryId === '11');
    // 其他分类...
  }, [categoryId]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!file) {
      alert('请选择一个 .torrent 文件');
      return;
    }

    if (!categoryId) {
      alert('请选择分类');
      return;
    }

    const formData = new FormData();
    formData.append('file', file);
    formData.append('title', title);
    formData.append('description', description);
    formData.append('categoryId', categoryId);
    
    // 通用参数
    if (dpi) formData.append('dpi', dpi);
    if (caption) formData.append('caption', caption);
    if (region) formData.append('region', region);
    if (year) formData.append('year', year);
    if (genre) formData.append('genre', genre);
    if (format) formData.append('format', format);
    if (resolution) formData.append('resolution', resolution);
    
    // 特殊参数
    if (codecFormat) formData.append('codecFormat', codecFormat);
    if (platform) formData.append('platform', platform);
    if (language) formData.append('language', language);
    if (eventType) formData.append('eventType', eventType);
    if (source) formData.append('source', source);
    if (style) formData.append('style', style);
    if (dataType) formData.append('dataType', dataType);
    formData.append('isMainland', isMainland.toString());

    try {
      const response = await axios.post('http://localhost:8080/torrent/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
        responseType: 'blob',
      });

      // 创建下载链接
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', file.name);
      document.body.appendChild(link);
      link.click();
      link.remove();

      // 显示成功提示
      setShowSuccess(true);
      // 清空表单
      setTitle('');
      setDescription('');
      setCategoryId('');
      setFile(null);
      // 清空其他字段...
    } catch (err) {
      console.error('上传失败', err.response?.data || err.message);
      alert(err.response?.data || '上传失败，请检查后端是否启动');
    }
  };

  return (
    <div className="max-w-xl mx-auto mt-10 p-6 bg-white shadow rounded">
      <h2 className="text-2xl font-bold mb-4">上传种子</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block mb-1">种子文件 (.torrent)</label>
          <input 
            type="file" 
            accept=".torrent" 
            onChange={(e) => setFile(e.target.files[0])} 
            className="w-full p-2 border rounded"
            required
          />
        </div>

        <div>
          <label className="block mb-1">标题</label>
          <input
            type="text"
            placeholder="标题"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="w-full p-2 border rounded"
            required
          />
        </div>

        <div>
          <label className="block mb-1">描述</label>
          <textarea
            placeholder="描述"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="w-full p-2 border rounded"
          />
        </div>

        <div>
          <label className="block mb-1">分类</label>
          <select
            value={categoryId}
            onChange={(e) => setCategoryId(e.target.value)}
            className="w-full p-2 border rounded"
            required
          >
            <option value="">请选择分类</option>
            {categories.map(cat => (
              <option key={cat.categoryid} value={cat.categoryid}>{cat.category_name}</option>
            ))}
          </select>
        </div>

        {/* <div>
          <label className="block mb-1">DPI（可选）</label>
          <input
            type="text"
            placeholder="DPI"
            value={dpi}
            onChange={(e) => setDpi(e.target.value)}
            className="w-full p-2 border rounded"
          />
        </div>

        <div>
          <label className="block mb-1">字幕/说明（可选）</label>
          <input
            type="text"
            placeholder="字幕/说明"
            value={caption}
            onChange={(e) => setCaption(e.target.value)}
            className="w-full p-2 border rounded"
          />
        </div> */}

        {/* 电影相关字段 */}
        {showMovieFields && (
        <>
        <div>
          <label className="block mb-1">字幕/说明</label>
          <input
            type="text"
            placeholder="字幕/说明"
            value={caption}
            onChange={(e) => setCaption(e.target.value)}
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1">地区</label>
          <select
            value={region}
            onChange={(e) => setRegion(e.target.value)}
            className="w-full p-2 border rounded"
          >
            <option value="">请选择地区</option>
            {regions.map((regions) => (
              <option key={regions.value} value={regions.value}>
                {regions.label}
              </option>
            ))}
          </select>
        </div>
          {/* <input
            type="text"
            placeholder="region"
            value={region}
            onChange={(e) => setRegion(e.target.value)}
            className="w-full p-2 border rounded"
          />
        </div> */}

        <div>
          <label className="block mb-1">年份</label>
          <input
            type="text"
            placeholder="年份"
            value={year}
            onChange={(e) => setYear(e.target.value)}
            className="w-full p-2 border rounded"
          />
        </div>
        <div>
          <label className="block mb-1">类型</label>
          {/* <input
            type="text"
            placeholder="类型"
            value={genre}
            onChange={(e) => setGenre(e.target.value)}
            className="w-full p-2 border rounded"
          /> */}
          <select
              value={genre}
              onChange={(e) => setGenre(e.target.value)}
              className="w-full p-2 border rounded"
             >
              <option value="">请选择类型</option>
                {genres.map((format) => (
               <option key={format.value} value={format.value}>
                {format.label}
               </option>
                ))}
               </select>
        </div>
            {/* <div>
              <label className="block mb-1">编码格式</label>
              <input
                type="text"
                placeholder="如 H.264, H.265"
                value={codecFormat}
                onChange={(e) => setCodecFormat(e.target.value)}
                className="w-full p-2 border rounded"
              />
            </div> */}
            <div>
           <label className="block mb-1">编码格式</label>
            <select
              value={codecFormat}
              onChange={(e) => setCodecFormat(e.target.value)}
              className="w-full p-2 border rounded"
             >
              <option value="">请选择编码格式</option>
                {codecFormats.map((format) => (
               <option key={format.value} value={format.value}>
                {format.label}
               </option>
                ))}
               </select>
            </div>
            <div>
              <label className="block mb-1">分辨率</label>
              <select
                value={resolution}
                onChange={(e) => setResolution(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择分辨率</option>
                {resolutions.map((resolution) => (
                  <option key={resolution.value} value={resolution.value}>
                    {resolution.label}
                  </option>
                ))}
              </select>
{/*               
              <input
                type="text"
                placeholder="如 1080p, 4K"
                value={resolution}
                onChange={(e) => setResolution(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}
        {/*剧集相关字段 */}
        {showTvFields && (
          <>
            <div>
              <label className="block mb-1">地区</label>
              <select
                value={region}
                onChange={(e) => setRegion(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择地区</option>
                {regions.map((regions) => (
                  <option key={regions.value} value={regions.value}>
                    {regions.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如 中国, 美国"
                value={region}
                onChange={(e) => setRegion(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
            <label className="block mb-1">格式</label>
            <select
              value={format}
              onChange={(e) => setFormat(e.target.value)}
              className="w-full p-2 border rounded"       
            >
              <option value="">请选择格式</option>
              {resolutions.map((format) => (
                <option key={format.value} value={format.value}>
                  {format.label}
                </option>
              ))}
            </select>
{/*         <input
              type="text"
              placeholder="如1080P, 4K"
              value={format}
              onChange={(e) => setFormat(e.target.value)}
              className="w-full p-2 border rounded"
            /> */}
          </div>
          <div>
          <label className="block mb-1">类型</label>
          <select
            value={genre}
            onChange={(e) => setGenre(e.target.value)}
            className="w-full p-2 border rounded"
          >
            <option value="">请选择类型</option>
            {genres.map((genre) => (
              <option key={genre.value} value={genre.value}>
                {genre.label}
              </option>
            ))}
          </select>
{/*       <input
            type="text"
            placeholder="类型"
            value={genre}
            onChange={(e) => setGenre(e.target.value)}
            className="w-full p-2 border rounded"
          /> */}
        </div>
       </>
        )}

        {/* 游戏相关字段 */}
        {showGameFields && (
          <>
            <div>
              <label className="block mb-1">平台</label>
              <select
                value={platform}
                onChange={(e) => setPlatform(e.target.value)} 
                className="w-full p-2 border rounded" 
              >
                <option value="">请选择平台</option>
                {platforms.map((platform) => (
                  <option key={platform.value} value={platform.value}>
                    {platform.label}
                  </option>
                ))}
              </select>
              {/* <input
              <input
                type="text"
                placeholder="如 PC, PS5"
                value={platform}
                onChange={(e) => setPlatform(e.target.value)}
                className="w-full p-2 border rounded"
              />*/}
            </div>
             <div>
          <label className="block mb-1">类型</label>
          <select
            value={genre}
            onChange={(e) => setGenre(e.target.value)}
            className="w-full p-2 border rounded"
          >
            <option value="">请选择类型</option>  
            {gamegenres.map((genre) => (
              <option key={genre.value} value={genre.value}>
                {genre.label}
              </option>
            ))}
          </select>
          {/* <input
            type="text"
            placeholder="类型"
            value={genre}
            onChange={(e) => setGenre(e.target.value)}
            className="w-full p-2 border rounded"
          /> */}
        </div>
            <div>
              <label className="block mb-1">语言</label>
              <select
                value={language}
                onChange={(e) => setLanguage(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择语言</option>
                {languages.map((language) => (
                  <option key={language.value} value={language.value}>
                    {language.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如 中文, 英文"
                value={language}
                onChange={(e) => setLanguage(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
             <div>
              <label className="block mb-1">数据类型</label>
              <select
                value={dataType}
                onChange={(e) => setdataType(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择数据类型</option>
                {dataTypes.map((dataType) => (
                  <option key={dataType.value} value={dataType.value}>
                    {dataType.label}
                  </option>
                ))}
              </select>
{/*             <input
                type="text"
                placeholder="如压缩包，补丁"
                value={dataType}
                onChange={(e) => setdataType(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}

        {/* 综艺相关字段 */}
        {showvarietyFields && (
          <>
          <div>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={isMainland}
                onChange={(e) => setIsMainland(e.target.checked)}
                className="mr-2"
              />
              是否大陆综艺
            </label>
          </div>
          <div>
          <label className="block mb-1">类型</label>
          <select
            value={style}
            onChange={(e) => setStyle(e.target.value)}
            className="w-full p-2 border rounded"
          >
            <option value="">请选择类型</option>
            {varietygenres.map((style) => (
              <option key={style.value} value={style.value}>
                {style.label}
              </option>
            ))}
          </select>
          {/* <input
            type="text"
            placeholder="类型"
            value={genre}
            onChange={(e) => setGenre(e.target.value)}
            className="w-full p-2 border rounded"
          /> */}
        </div>
          <div>
            <label className="block mb-1">格式</label>
            <select
              value={format}
              onChange={(e) => setFormat(e.target.value)}
              className="w-full p-2 border rounded"
            >
              <option value="">请选择格式</option>
              {resolutions.map((format) => (
                <option key={format.value} value={format.value}>
                  {format.label}
                </option>
              ))}
            </select>
            {/* <input
              type="text"
              placeholder="如1080P, 4K"
              value={format}
              onChange={(e) => setFormat(e.target.value)}
              className="w-full p-2 border rounded"
            /> */}
          </div>
          </>
        )}
        {/* 动漫相关字段 */}
        {showAnimeFields && (
          <>
            <div>
              <label className="block mb-1">类型</label>
              <select
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择类型</option>
                {anigenres.map((genre) => (
                  <option key={genre.value} value={genre.value}>
                    {genre.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如治愈, 热血"
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">格式</label>
              <select
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择格式</option>
                {animeformats.map((format) => (
                  <option key={format.value} value={format.value}>
                    {format.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如1080P, 4K"
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">分辨率</label>
              <select
                value={resolution}
                onChange={(e) => setResolution(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择分辨率</option>
                {resolutions.map((resolution) => (
                  <option key={resolution.value} value={resolution.value}>
                    {resolution.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如 1080p, 4K"
                value={resolution}
                onChange={(e) => setResolution(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}
        {/* 学习相关字段 */}
        {showlearningFields && (
          <>
            <div>
              <label className="block mb-1">类型</label>
              <select
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择类型</option>
                {learninggenres.map((genre) => (
                  <option key={genre.value} value={genre.value}>
                    {genre.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如 课程, 讲座"
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
           <div>
              <label className="block mb-1">格式</label>
              <select
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择格式</option>
                {learningformats.map((format) => (
                  <option key={format.value} value={format.value}>
                    {format.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如1080P, 4K"
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}
        {/* 软件相关字段 */}
        {showsoftwareFields && (
          <>
            <div>
              <label className="block mb-1">平台</label>
              <select
                value={platform}
                onChange={(e) => setPlatform(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择平台</option>
                {softwareplatforms.map((platform) => (
                  <option key={platform.value} value={platform.value}>
                    {platform.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如 Windows, Mac"
                value={platform}
                onChange={(e) => setPlatform(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
             <div>
              <label className="block mb-1">类型</label>
              <select
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择类型</option>
                {softwaregenres.map((genre) => (
                  <option key={genre.value} value={genre.value}>
                    {genre.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如 学习，办公"
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">格式</label>
              <select
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择格式</option>
                {softwareformats.map((format) => (
                  <option key={format.value} value={format.value}>
                    {format.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如 ZIP, EXE"
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}
        {/* 体育相关字段 */}
        {showsportsFields && (
          <>
            <div>
              <label className="block mb-1">类型</label>
              <select
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择类型</option>
                {sportsgenres.map((genre) => (
                  <option key={genre.value} value={genre.value}>
                    {genre.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如 比赛, 训练"
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">格式</label>
              <select
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择格式</option>
                {resolutions.map((format) => (
                  <option key={format.value} value={format.value}>
                    {format.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如1080P, 4K"
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">赛事类型</label>
              <select
                value={eventType}
                onChange={(e) => setEventType(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择赛事类型</option>
                {eventTypes.map((eventType) => (
                  <option key={eventType.value} value={eventType.value}>
                    {eventType.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如足球、篮球"
                value={eventType}
                onChange={(e) => setEventType(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}
        {/* 纪录片相关字段 */}
        {showdocFields && (
          <>
            <div>
              <label className="block mb-1">年份</label>
              <input
                type="text"
                placeholder="如 1999, 2020"
                value={year}
                onChange={(e) => setYear(e.target.value)}
                className="w-full p-2 border rounded"
              />
            </div>
            <div>
              <label className="block mb-1">视频源</label>
              <select
                value={source}
                onChange={(e) => setSource(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择视频源</option>
                {sourceTypes.map((source) => (
                  <option key={source.value} value={source.value}>
                    {source.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如BlibliBili, YouTube"
                value={source}
                onChange={(e) => setSource(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">格式</label>
              <select
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择格式</option>
                {resolutions.map((format) => (
                  <option key={format.value} value={format.value}>
                    {format.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如1080P, 4K"
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}
        {/*音乐相关字段 */}
        {showMusicFields && (
          <>
            <div>
              <label className="block mb-1">类型</label>
              <select
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择类型</option>
                {musicgenres.map((genre) => (
                  <option key={genre.value} value={genre.value}>
                    {genre.label}
                  </option>
                ))}
              </select>
{/*               
              <input
                type="text"
                placeholder="如专辑、单曲"
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">地区</label>
              <select
                value={region}
                onChange={(e) => setRegion(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择地区</option>
                {regions.map((regions) => (
                  <option key={regions.value} value={regions.value}>
                    {regions.label}
                  </option>
                ))}
              </select>
{/*           <input
                type="text"
                placeholder="如 中国, 美国"
                value={region}
                onChange={(e) => setRegion(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">风格</label>
              <select
                value={style}
                onChange={(e) => setStyle(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择风格</option>
                {musicstyles.map((style) => (
                  <option key={style.value} value={style.value}>
                    {style.label}
                  </option>
                ))}
                </select>
              {/* <input
                type="text"
                placeholder="如流行、摇滚"
                value={style}
                onChange={(e) => setStyle(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
            <div>
              <label className="block mb-1">格式</label>
              <select
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择格式</option>
                {musicformats.map((format) => (
                  <option key={format.value} value={format.value}>
                    {format.label}
                  </option>
                ))}
              </select>
{/*           <input
                type="text"
                placeholder="如MP3, FLAC"
                value={format}
                onChange={(e) => setFormat(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}
        {/* 其他分类字段 */}
        {showotherFields && (
          <>
            <div>
              <label className="block mb-1">类型</label>
              <select
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              >
                <option value="">请选择类型</option>
                {othergenres.map((genre) => (
                  <option key={genre.value} value={genre.value}>
                    {genre.label}
                  </option>
                ))}
              </select>
              {/* <input
                type="text"
                placeholder="如视频、音频"
                value={genre}
                onChange={(e) => setGenre(e.target.value)}
                className="w-full p-2 border rounded"
              /> */}
            </div>
          </>
        )}

        {/* 其他分类字段... */}
        {/* 提交按钮 */}

        <button 
          type="submit" 
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
        >
          上传
        </button>
      </form>

      {showSuccess && (
        <div className="mt-4 p-3 bg-green-100 text-green-800 border border-green-300 rounded">
          上传成功！
        </div>
      )}
    </div>
  );
}

export default UploadTorrent;