minecraft-web/frontend/src/pages/Modpack.jsx

/**
 * 모드팩 페이지 - GitHub Release 스타일
 */
import React, { useState } from 'react';
import { Download, Package, ChevronDown, ChevronUp, Calendar, HardDrive, Gamepad2, Box, Image } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';


// 파일 크기 포맷
const formatFileSize = (bytes) => {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1073741824) return `${(bytes / 1048576).toFixed(1)} MB`;
  return `${(bytes / 1073741824).toFixed(2)} GB`;
};

// 날짜 포맷
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
};

// 모드팩 카드 컴포넌트
const ModpackCard = ({ modpack, isLatest }) => {
  const [showChangelog, setShowChangelog] = useState(isLatest);
  const [showContents, setShowContents] = useState(false);

  const totalMods = modpack.contents.mods.length;
  const totalResourcepacks = modpack.contents.resourcepacks.length;
  const totalShaderpacks = modpack.contents.shaderpacks.length;

  return (
    <div className={`bg-zinc-900 border rounded-2xl overflow-hidden ${isLatest ? 'border-mc-green' : 'border-zinc-800'}`}>
      {/* 헤더 */}
      <div className="p-5">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className={`p-2.5 rounded-xl ${isLatest ? 'bg-mc-green/20' : 'bg-zinc-800'}`}>
              <Package className={isLatest ? 'text-mc-green' : 'text-zinc-400'} size={24} />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-xl font-bold text-white">v{modpack.version}</h3>
                {isLatest && (
                  <span className="px-2 py-0.5 bg-mc-green/20 text-mc-green text-xs font-medium rounded-full">
                    최신
                  </span>
                )}
              </div>
              <p className="text-sm text-zinc-400 mt-0.5">{modpack.name}</p>
            </div>
          </div>
          
          {/* 다운로드 버튼 */}
          <a 
            href={`/api/modpacks/${modpack.id}/download`}
            className="flex items-center gap-2 px-4 py-2.5 bg-mc-green hover:bg-mc-green/80 text-white font-medium rounded-xl transition-colors"
          >
            <Download size={18} />
            <span>다운로드</span>
          </a>
        </div>

        {/* 메타 정보 */}
        <div className="flex flex-wrap gap-4 mt-4 text-sm text-zinc-400">
          <div className="flex items-center gap-1.5">
            <Gamepad2 size={14} />
            <span>MC {modpack.minecraftVersion}</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Box size={14} />
            <span>{modpack.modLoader} {modpack.modLoaderVersion}</span>
          </div>
          <div className="flex items-center gap-1.5">
            <HardDrive size={14} />
            <span>{formatFileSize(modpack.fileSize)}</span>
          </div>
          <div className="flex items-center gap-1.5">
            <Calendar size={14} />
            <span>{formatDate(modpack.createdAt)}</span>
          </div>
        </div>

        {/* 포함 콘텐츠 요약 */}
        <div className="flex gap-3 mt-4">
          {totalMods > 0 && (
            <span className="px-2.5 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-lg">
              모드 {totalMods}개
            </span>
          )}
          {totalResourcepacks > 0 && (
            <span className="px-2.5 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-lg">
              리소스팩 {totalResourcepacks}개
            </span>
          )}
          {totalShaderpacks > 0 && (
            <span className="px-2.5 py-1 bg-orange-500/20 text-orange-400 text-xs rounded-lg">
              셰이더 {totalShaderpacks}개
            </span>
          )}
        </div>
      </div>

      {/* 변경 로그 토글 */}
      <button 
        onClick={() => setShowChangelog(!showChangelog)}
        className="w-full flex items-center justify-between px-5 py-3 bg-zinc-800/50 hover:bg-zinc-800 text-zinc-400 text-sm transition-colors border-t border-zinc-800"
      >
        <span>변경 로그</span>
        {showChangelog ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
      </button>

      {/* 변경 로그 내용 */}
      <AnimatePresence>
        {showChangelog && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2, ease: 'easeInOut' }}
            className="overflow-hidden"
          >
            <div className="px-5 py-4 bg-zinc-800/30 border-t border-zinc-800">
              <div className="prose prose-sm prose-invert max-w-none">
                {modpack.changelog.split('\n').map((line, i) => {
                  if (line.startsWith('###')) {
                    return <h4 key={i} className="text-white font-semibold mt-3 mb-2 text-sm">{line.replace('### ', '')}</h4>;
                  }
                  if (line.startsWith('- ')) {
                    return <p key={i} className="text-zinc-400 text-sm my-1 pl-3">• {line.replace('- ', '')}</p>;
                  }
                  return null;
                })}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* 포함 콘텐츠 토글 */}
      <button 
        onClick={() => setShowContents(!showContents)}
        className="w-full flex items-center justify-between px-5 py-3 bg-zinc-800/50 hover:bg-zinc-800 text-zinc-400 text-sm transition-colors border-t border-zinc-800"
      >
        <span>포함된 콘텐츠</span>
        {showContents ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
      </button>

      {/* 포함 콘텐츠 내용 */}
      <AnimatePresence>
        {showContents && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2, ease: 'easeInOut' }}
            className="overflow-hidden"
          >
            <div className="px-5 py-4 bg-zinc-800/30 border-t border-zinc-800">
              {/* 모드 */}
              {modpack.contents.mods.length > 0 && (
                <div className="mb-4">
                  <h4 className="text-white font-medium text-sm mb-2 flex items-center gap-2">
                    <Box size={14} className="text-blue-400" />
                    모드
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    {modpack.contents.mods.map((mod, i) => (
                      <div key={i} className="flex items-center justify-between px-3 py-2 bg-zinc-800 rounded-lg">
                        <span className="text-zinc-300 text-sm">{mod.name}</span>
                        <span className="text-zinc-500 text-xs">{mod.version}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* 리소스팩 */}
              {modpack.contents.resourcepacks.length > 0 && (
                <div className="mb-4">
                  <h4 className="text-white font-medium text-sm mb-2 flex items-center gap-2">
                    <Image size={14} className="text-purple-400" />
                    리소스팩
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    {modpack.contents.resourcepacks.map((pack, i) => (
                      <div key={i} className="flex items-center justify-between px-3 py-2 bg-zinc-800 rounded-lg">
                        <span className="text-zinc-300 text-sm">{pack.name}</span>
                        <span className="text-zinc-500 text-xs">{pack.version}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* 셰이더 */}
              {modpack.contents.shaderpacks.length > 0 && (
                <div>
                  <h4 className="text-white font-medium text-sm mb-2 flex items-center gap-2">
                    <span className="text-orange-400">✨</span>
                    셰이더
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                    {modpack.contents.shaderpacks.map((shader, i) => (
                      <div key={i} className="flex items-center justify-between px-3 py-2 bg-zinc-800 rounded-lg">
                        <span className="text-zinc-300 text-sm">{shader.name}</span>
                        <span className="text-zinc-500 text-xs">{shader.version}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default function Modpack() {
  const [modpacks, setModpacks] = useState([]);
  const [loading, setLoading] = useState(true);

  // API에서 모드팩 목록 가져오기
  React.useEffect(() => {
    const fetchModpacks = async () => {
      try {
        const res = await fetch('/api/modpacks');
        const data = await res.json();
        // API 응답을 UI 형식에 맞게 변환
        const formatted = data.map(mp => ({
          id: mp.id,
          version: mp.version,
          name: mp.name,
          minecraftVersion: mp.minecraft_version,
          modLoader: mp.mod_loader,
          changelog: mp.changelog || '',
          fileSize: mp.file_size,
          createdAt: mp.created_at,
          contents: mp.contents || { mods: [], resourcepacks: [], shaderpacks: [] },
        }));
        setModpacks(formatted);
      } catch (error) {
        console.error('모드팩 목록 로드 실패:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchModpacks();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen bg-mc-dark p-4 sm:p-6 flex items-center justify-center">
        <div className="text-zinc-400">로딩 중...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-mc-dark p-4 sm:p-6">
      <div className="max-w-4xl mx-auto">
        {/* 헤더 */}
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-white flex items-center gap-3">
            <Package className="text-mc-green" />
            모드팩
          </h1>
          <p className="text-zinc-400 mt-1">서버 접속에 필요한 모드팩을 다운로드하세요</p>
        </div>

        {/* 모드팩 목록 */}
        <div className="space-y-4">
          {modpacks.map((modpack, index) => (
            <ModpackCard key={modpack.id} modpack={modpack} isLatest={index === 0} />
          ))}
        </div>

        {/* 빈 상태 (모드팩이 없을 때) */}
        {modpacks.length === 0 && (
          <div className="text-center py-16">
            <Package className="mx-auto text-zinc-600 mb-4" size={48} />
            <p className="text-zinc-400">등록된 모드팩이 없습니다</p>
          </div>
        )}
      </div>
    </div>
  );
}