/**
 * 모드팩 페이지 - 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 DUMMY_MODPACKS = [
  {
    id: 1,
    version: '1.2.0',
    name: '테스트 서버 모드팩',
    minecraftVersion: '1.21.1',
    modLoader: 'NeoForge',
    modLoaderVersion: '21.1.213',
    changelog: `### 새로운 기능
- Create 모드 추가
- JEI (Just Enough Items) 추가
- Jade 모드 추가

### 버그 수정
- 일부 텍스처 누락 문제 해결`,
    fileSize: 15728640, // 15MB
    downloadCount: 42,
    createdAt: '2024-12-20T10:30:00Z',
    contents: {
      mods: [
        { name: 'Create', version: '0.5.1' },
        { name: 'Just Enough Items', version: '15.2.0' },
        { name: 'Jade', version: '11.7.1' },
        { name: 'JourneyMap', version: '5.9.18' },
        { name: 'Sodium', version: '0.5.8' },
      ],
      resourcepacks: [
        { name: 'Faithful 32x', version: '1.21' },
      ],
      shaderpacks: [
        { name: 'Complementary Shaders', version: '5.2.1' },
        { name: 'BSL Shaders', version: '8.2.09' },
      ],
    },
  },
  {
    id: 2,
    version: '1.1.0',
    name: '테스트 서버 모드팩',
    minecraftVersion: '1.21.1',
    modLoader: 'NeoForge',
    modLoaderVersion: '21.1.200',
    changelog: `### 변경사항
- JourneyMap 추가
- Sodium 성능 모드 추가`,
    fileSize: 12582912, // 12MB
    downloadCount: 128,
    createdAt: '2024-12-15T14:00:00Z',
    contents: {
      mods: [
        { name: 'Just Enough Items', version: '15.1.0' },
        { name: 'JourneyMap', version: '5.9.17' },
        { name: 'Sodium', version: '0.5.7' },
      ],
      resourcepacks: [],
      shaderpacks: [],
    },
  },
  {
    id: 3,
    version: '1.0.0',
    name: '테스트 서버 모드팩',
    minecraftVersion: '1.21.1',
    modLoader: 'NeoForge',
    modLoaderVersion: '21.1.180',
    changelog: `### 최초 릴리즈
- 기본 모드 구성`,
    fileSize: 8388608, // 8MB
    downloadCount: 256,
    createdAt: '2024-12-01T09:00:00Z',
    contents: {
      mods: [
        { name: 'Just Enough Items', version: '15.0.0' },
      ],
      resourcepacks: [],
      shaderpacks: [],
    },
  },
];

// 파일 크기 포맷
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>
          
          {/* 다운로드 버튼 */}
          <button 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>
          </button>
        </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 = DUMMY_MODPACKS;

  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>
  );
}