import React, { useState } from 'react';
import './App.css';
import './PublishPage.css';

const PublishPage = () => {
  const [formData, setFormData] = useState({
    type: '',
    torrentFile: '',
    title: '',
    subtitle: ''
  });
  const [subType, setSubType] = useState('');

  const typeOptions = {
    '电影': ['大陆', '港台', '欧美', '日韩'],
    '剧集': ['国产电视剧', '港剧', '欧美剧', '日韩剧'],
    '音乐': ['古典音乐', '流行音乐', '摇滚', '电子音乐', '说唱'],
    '动漫': ['国创', '日漫', '欧美动漫', '韩漫'],
    '游戏': ['PC', '主机', '移动', '掌机', '视频'],
    '体育': ['篮球', '足球', '羽毛球', '排球', '电竞'],
    '资料': ['出版物', '学习教程', '素材模板', '演讲交流', '日常娱乐'],
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file && file.name.split('.').pop() !== 'torrent') {
      alert('仅能上传.torrent类型文件');
      e.target.value = null; // Clear the input
    } else {
      setFormData({ ...formData, torrentFile: file });
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 假设userid和tag可以从表单或用户信息中获取，这里用示例数据
    const userid = '550e8400-e29b-41d4-a716-446655440000';
    const tag = formData.type ? formData.type : '高清';
    if (!formData.torrentFile) {
      alert('请上传.torrent文件');
      return;
    }
    const data = new FormData();
    data.append('userid', userid);
    data.append('title', formData.title);
    data.append('tag', subType);
    data.append('file', formData.torrentFile);
    data.append('subtitle', formData.subtitle);
    // data.append('subtype', subType);
    // console.log(data.get('tag'));

    try {
      const response = await fetch('http://192.168.5.9:8080/api/save-torrent', {
        method: 'POST',
        body: data,
      });
      if (response.ok) {
        alert('上传成功！');
      } else {
        alert('上传失败');
      }
    } catch (err) {
      alert('网络错误');
    }
  };

  return (
    <div className="publish-page">
      <h1 className="page-title">发布种子</h1>
      <form onSubmit={handleSubmit} className="publish-form">
        <div className="form-row">
          <label htmlFor="type">类型</label>
          <select name="type" id="type" value={formData.type} onChange={e => { handleChange(e); setSubType(''); }} required>
            <option value="">请选择类型</option>
            <option value="电影">电影</option>
            <option value="剧集">剧集</option>
            <option value="音乐">音乐</option>
            <option value="动漫">动漫</option>
            <option value="游戏">游戏</option>
            <option value="体育">体育</option>
            <option value="资料">资料</option>
          </select>
        </div>
        {formData.type && typeOptions[formData.type] && (
          <div className="form-row">
            <label htmlFor="subtype">具体类型</label>
            <select name="subtype" id="subtype" value={subType} onChange={e => setSubType(e.target.value)} required>
              <option value="">请选择具体类型</option>
              {typeOptions[formData.type].map(opt => (
                <option key={opt} value={opt}>{opt}</option>
              ))}
            </select>
          </div>
        )}

        <div className="form-row">
          <label htmlFor="torrentFile">种子文件</label>
          <input
            type="file"
            id="torrentFile"
            name="torrentFile"
            onChange={handleFileChange}
            required
          />
          <span style={{ fontSize: '12px', color: '#666' }}>需上传.torrent类型文件</span>
        </div>

        <div className="form-row">
          <label htmlFor="title">标题</label>
          <input
            type="text"
            id="title"
            name="title"
            value={formData.title}
            onChange={handleChange}
            required
          />
        </div>

        <div className="form-row">
          <label htmlFor="subtitle">副标题</label>
          <input
            type="text"
            id="subtitle"
            name="subtitle"
            value={formData.subtitle}
            onChange={handleChange}
          />
        </div>

        <div className="form-row submit-row">
          <button type="submit" className="submit-button">提交</button>
        </div>
      </form>
    </div>
  );
};

export default PublishPage;