WebFTP/components/DownloadModal.tsx

import React, { useState, useEffect } from 'react';
import { Download, Server, Package } from 'lucide-react';
import { formatBytes } from '../utils/formatters';

interface DownloadModalProps {
    isOpen: boolean;
    onClose: () => void;
}

const DownloadModal: React.FC<DownloadModalProps> = ({ isOpen, onClose }) => {
    if (!isOpen) return null;

    const baseUrl = import.meta.env.BASE_URL;
    const [fileSizes, setFileSizes] = useState<{ [key: string]: string }>({});

    useEffect(() => {
        if (!isOpen) return;

        const fetchSize = async (filename: string) => {
            try {
                const response = await fetch(`${baseUrl}${filename}`, { method: 'HEAD' });
                const size = response.headers.get('Content-Length');
                if (size) {
                    setFileSizes(prev => ({ ...prev, [filename]: formatBytes(parseInt(size, 10)) }));
                }
            } catch (e) {
                console.error(`Failed to fetch size for ${filename}`, e);
            }
        };

        fetchSize('webftp.exe');
        fetchSize('webftp-backend.exe');
    }, [isOpen, baseUrl]);

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/20 backdrop-blur-sm animate-in fade-in duration-200">
            <div
                className="fixed inset-0"
                onClick={onClose}
            ></div>
            <div className="bg-white/90 backdrop-blur-md rounded-xl shadow-2xl border border-white/50 w-full max-w-md p-6 relative animate-in zoom-in-95 duration-200">

                <h2 className="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2">
                    <Download className="text-blue-600" />
                    다운로드 센터
                </h2>
                <p className="text-sm text-slate-500 mb-6">
                    사용 환경에 맞는 실행 파일을 선택하여 다운로드하세요.
                </p>

                <div className="space-y-4">
                    <a
                        href={`${baseUrl}webftp.exe`}
                        download="webftp.exe"
                        className="flex items-start gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:bg-blue-50 hover:border-blue-300 transition-all group shadow-sm hover:shadow-md"
                        onClick={onClose}
                    >
                        <div className="w-12 h-12 rounded-full bg-blue-100/50 flex items-center justify-center shrink-0 group-hover:bg-blue-200/50 transition-colors">
                            <Package className="text-blue-600 w-6 h-6" />
                        </div>
                        <div className="flex-1">
                            <div className="font-bold text-slate-800 mb-1 flex items-center justify-between">
                                WebFTP (권장)
                                WebFTP (권장)
                                <span className="flex gap-1">
                                    {fileSizes['webftp.exe'] && <span className="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded opacity-80">{fileSizes['webftp.exe']}</span>}
                                    <span className="text-[10px] font-bold bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">ALL-IN-ONE</span>
                                </span>
                            </div>
                            <p className="text-xs text-slate-500 leading-relaxed">
                                백엔드와 프론트엔드가 포함된 단일 실행 파일입니다. <br />
                                <span className="font-semibold text-slate-600">다운로드 후 바로 실행하여 사용하세요.</span>
                            </p>
                        </div>
                    </a>

                    <a
                        href={`${baseUrl}webftp-backend.exe`}
                        download="webftp-backend.exe"
                        className="flex items-start gap-4 p-4 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 hover:border-slate-300 transition-all group shadow-sm hover:shadow-md"
                        onClick={onClose}
                    >
                        <div className="w-12 h-12 rounded-full bg-slate-100/50 flex items-center justify-center shrink-0 group-hover:bg-slate-200/50 transition-colors">
                            <Server className="text-slate-600 w-6 h-6" />
                        </div>
                        <div className="flex-1">
                            <div className="font-bold text-slate-800 mb-1 flex items-center justify-between">
                                Backend Only
                                {fileSizes['webftp-backend.exe'] && <span className="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded opacity-80">{fileSizes['webftp-backend.exe']}</span>}
                            </div>
                            <p className="text-xs text-slate-500 leading-relaxed">
                                백엔드 서버 파일만 다운로드합니다. <br />
                                <span className="font-semibold text-slate-600">백엔드를 실행하시면 현재 사이트에서 백엔드가 자동 연결 됩니다</span>
                            </p>
                        </div>
                    </a>
                </div>

                <div className="mt-6 flex justify-end">
                    <button
                        onClick={onClose}
                        className="px-4 py-2 text-sm text-slate-600 hover:text-slate-900 font-medium transition-colors"
                    >
                        닫기
                    </button>
                </div>
            </div>
        </div>
    );
};

export default DownloadModal;