carrotskin/src/components/profile/UploadSkinModal.tsx

'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { XMarkIcon, CloudArrowUpIcon } from '@heroicons/react/24/outline';
import { messageManager } from '@/components/MessageNotification';

interface UploadSkinModalProps {
  isOpen: boolean;
  onClose: () => void;
  onUpload: (file: File, data: {
    name: string;
    description: string;
    type: 'SKIN' | 'CAPE';
    is_public: boolean;
    is_slim: boolean;
  }) => Promise<void>;
  isUploading?: boolean;
  uploadProgress?: number;
}

export default function UploadSkinModal({
  isOpen,
  onClose,
  onUpload,
  isUploading = false,
  uploadProgress = 0
}: UploadSkinModalProps) {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [skinData, setSkinData] = useState({
    name: '',
    description: '',
    type: 'SKIN' as 'SKIN' | 'CAPE',
    is_public: false,
    is_slim: false
  });

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  const handleSubmit = async () => {
    if (!selectedFile || !skinData.name.trim()) {
      messageManager.warning('请选择皮肤文件并输入皮肤名称', { duration: 3000 });
      return;
    }
    
    await onUpload(selectedFile, skinData);
    // 重置表单
    setSelectedFile(null);
    setSkinData({
      name: '',
      description: '',
      type: 'SKIN',
      is_public: false,
      is_slim: false
    });
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
        >
          <motion.div
            initial={{ scale: 0.9, y: 20 }}
            animate={{ scale: 1, y: 0 }}
            exit={{ scale: 0.9, y: 20 }}
            className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto"
          >
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold text-gray-900 dark:text-white">上传皮肤</h3>
              <button
                onClick={onClose}
                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
              >
                <XMarkIcon className="w-6 h-6" />
              </button>
            </div>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  皮肤文件
                </label>
                <div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-6 text-center hover:border-orange-500 transition-colors">
                  <CloudArrowUpIcon className="w-12 h-12 text-gray-400 mx-auto mb-2" />
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                    点击选择文件或拖拽到此处
                  </p>
                  <input
                    type="file"
                    accept=".png"
                    onChange={handleFileSelect}
                    className="hidden"
                    id="skin-upload"
                  />
                  <label
                    htmlFor="skin-upload"
                    className="cursor-pointer bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-lg hover:from-orange-600 hover:to-amber-600 transition-all"
                  >
                    选择文件
                  </label>
                  {selectedFile && (
                    <p className="text-sm text-green-600 dark:text-green-400 mt-2">
                      已选择: {selectedFile.name}
                    </p>
                  )}
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  皮肤名称
                </label>
                <input
                  type="text"
                  value={skinData.name}
                  onChange={(e) => setSkinData(prev => ({ ...prev, name: e.target.value }))}
                  className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                  placeholder="请输入皮肤名称"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  描述
                </label>
                <textarea
                  value={skinData.description}
                  onChange={(e) => setSkinData(prev => ({ ...prev, description: e.target.value }))}
                  className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent"
                  placeholder="请输入皮肤描述（可选）"
                  rows={3}
                />
              </div>
              
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      checked={skinData.is_public}
                      onChange={(e) => setSkinData(prev => ({ ...prev, is_public: e.target.checked }))}
                      className="w-4 h-4 text-orange-500 rounded focus:ring-orange-500"
                    />
                    <span className="text-sm text-gray-700 dark:text-gray-300">公开</span>
                  </label>
                </div>
                <div>
                  <label className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      checked={skinData.is_slim}
                      onChange={(e) => setSkinData(prev => ({ ...prev, is_slim: e.target.checked }))}
                      className="w-4 h-4 text-orange-500 rounded focus:ring-orange-500"
                    />
                    <span className="text-sm text-gray-700 dark:text-gray-300">细臂模型</span>
                  </label>
                </div>
              </div>
              
              {isUploading && (
                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                  <div 
                    className="bg-gradient-to-r from-orange-500 to-amber-500 h-2 rounded-full transition-all duration-300"
                    style={{ width: `${uploadProgress}%` }}
                  />
                </div>
              )}
              
              <div className="flex space-x-3">
                <button
                  onClick={onClose}
                  className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                >
                  取消
                </button>
                <button
                  onClick={handleSubmit}
                  disabled={!selectedFile || !skinData.name.trim() || isUploading}
                  className="flex-1 px-4 py-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-xl hover:from-orange-600 hover:to-amber-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                >
                  {isUploading ? `上传中... ${uploadProgress}%` : '上传'}
                </button>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}