<!-- src/routes/image-generate/+page.svelte -->

<script lang="ts">
	// [추가] onMount를 import
	import { onMount } from 'svelte';

	// --- 상태 변수 선언 ---
	let videoURL: string = '';
	let videoElement: HTMLVideoElement;
	let originalFileName: string = '';
	let message: string = '동영상 파일을 선택하세요.';

	// --- 시간 변수 (편집기용) ---
	let startTime: number = 0;
	let endTime: number = 0;
	let startTimeStr: string = '00:00:00.000';
	let endTimeStr: string = '00:00:00.000';
	let stopAtTime: number | null = null; // 미리보기 자동 정지를 위한 변수

	// --- [수정] 작업 진행 상태 변수 ---
	let isCuttingSegments: boolean = false;
	let isUploadingSegments: boolean = false;
	let isLoadingList: boolean = false; // [추가] DB 목록 로딩 상태
	let eventSource: EventSource | null = null; // 구간 자르기(Segments) 용

	// --- [추가] Crop 동영상 목록 ---
	interface CroppedVideo {
		Index: number;
		LocationFile: string;
		// (DB 스키마에 따라 다른 필드도 추가 가능)
	}
	let croppedVideos: CroppedVideo[] = [];
	let selectedVideoIndex: number | null = null;
	let selectedVideo: CroppedVideo | null = null;

	// --- [수정] TimeSegment 인터페이스 ---
	interface TimeSegment {
		id: number;
		start: number;
		end: number;
		resultURL?: string;
		isUploading?: boolean;
		isUploaded?: boolean;
		isCutting?: boolean;
		progress?: number;
        newIndex?: number;
        stage?: 'cut' | 'frames' | 'db_save' | 'done'; // [추가] 현재 작업 세부 단계
        progressStage2?: number; // [추가] 2단계: 프레임 추출 진행률 (0-100)
	}
	let segments: TimeSegment[] = [];
	let nextSegmentId = 0;

	// --- 시간 포맷 변환 헬퍼 함수 (유지) ---
	const formatTime = (timeInSeconds: number): string => {
		if (isNaN(timeInSeconds) || timeInSeconds < 0) return '00:00:00.000';
		const pad = (num: number, size: number) => num.toString().padStart(size, '0');
		const hours = Math.floor(timeInSeconds / 3600);
		const minutes = Math.floor((timeInSeconds % 3600) / 60);
		const seconds = Math.floor(timeInSeconds % 60);
		const milliseconds = Math.round((timeInSeconds - Math.floor(timeInSeconds)) * 1000);
		return `${pad(hours, 2)}:${pad(minutes, 2)}:${pad(seconds, 2)}.${pad(milliseconds, 3)}`;
	};

	const parseTime = (timeString: string): number => {
		const regex = /^(\d{2}):(\d{2}):(\d{2})\.(\d{3})$/;
		const match = timeString.match(regex);
		if (!match) return 0;
		const [, hours, minutes, seconds, milliseconds] = match.map(Number);
		return hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;
	};

	// --- [수정] 반응형 변수 및 로직 ---
	$: allProcessed = segments.length > 0 && segments.every((s) => s.resultURL);
	$: isLoading = isLoadingList || isCuttingSegments || isUploadingSegments; // [수정]
	$: segmentsReadyToUpload = segments.filter((s) => s.resultURL && !s.isUploaded).length > 0;
	$: startTime = parseTime(startTimeStr);
	$: endTime = parseTime(endTimeStr);

	// --- [삭제] uploadOriginalVideo, handleExecuteCrop, handleCancelCrop, handleFileSelect 함수 ---
	// 이 함수들은 모두 "1단계: video-crop" 페이지로 이동했으므로 삭제합니다.

	// --- [추가] DB에서 MovieType=1 목록을 불러오는 함수 ---
	async function loadCroppedVideos() {
		isLoadingList = true;
		message = 'Crop 동영상 목록을 불러오는 중...';
		try {
			// 이 API는 /api/get-cropped-videos/+server.ts를 호출합니다.
			const response = await fetch('/api/get-cropped-videos');
			if (!response.ok) throw new Error('목록 로드 실패');
			// DB 스키마의 대소문자(Index, LocationFile)를 정확히 맞춰야 합니다.
			croppedVideos = (await response.json()) as CroppedVideo[];
			message = '편집할 동영상을 선택하세요.';
		} catch (error) {
			message = 'Crop 동영상 목록을 불러오는 데 실패했습니다.';
			console.error(error);
		} finally {
			isLoadingList = false;
		}
	}

	// [추가] 페이지 로드 시 목록을 불러옵니다.
	onMount(() => {
		loadCroppedVideos();
	});

	// [추가] 드롭다운에서 동영상을 선택했을 때 호출되는 함수
	async function handleVideoSelect() {
        if (selectedVideoIndex === null) {
            videoURL = '';
            originalFileName = '';
            segments = [];
            return;
        }

        selectedVideo = croppedVideos.find((v) => v.Index === selectedVideoIndex) || null;

        if (selectedVideo) {
            const fileName = selectedVideo.LocationFile.split(path.sep).pop() || 'video.mp4';
            originalFileName = fileName;

            // ✅ Range 요청 대응 스트리밍 URL 생성
            // 캐시 방지용으로 timestamp 추가 (브라우저가 같은 Range 요청을 재사용하지 않게)
            videoURL = `/api/video-stream/${selectedVideo.Index}?t=${Date.now()}`;

            segments = [];
            message = `${fileName}이(가) 선택되었습니다. 편집할 구간을 추가하세요.`;
        }
    }

	// --- [수정] cutAllSegments 함수 ---
	const cutAllSegments = async () => {
		if (segments.length === 0) {
			message = '먼저 구간을 추가해주세요.';
			return;
		}
		if (!selectedVideo) {
			message = '동영상이 선택되지 않았습니다.';
			return;
		}

		isCuttingSegments = true;
		segments = segments.map((s) => ({ 
            ...s, 
            isCutting: true, 
            progress: 0, 
            progressStage2: 0, 
            stage: 'cut', // 'cut' 단계부터 시작
            resultURL: undefined,
            newIndex: undefined
        }));
		message = '서버에서 동영상 잘라내기 작업을 시작합니다...';

		const segmentsData = JSON.stringify(segments.map((s) => ({ id: s.id, start: s.start, end: s.end })));

		// [수정]
		// 1. crop 파라미터를 제거합니다. (이미 Crop된 영상을 편집하기 때문)
		// 2. selectedVideoIndex (TumerMovie의 Index)를 API로 넘겨줍니다.
		//    (서버가 어떤 파일을 잘라야 하는지 알아야 함)
		const url = `/api/cut-segments-progress?segments=${encodeURIComponent(
			segmentsData
		)}&videoIndex=${selectedVideo.Index}`; // <-- videoIndex 파라미터 추가

		eventSource = new EventSource(url); // ... (이하 eventSource 로직은 동일) ...

		eventSource.onmessage = (event) => {
			const data = JSON.parse(event.data);

			// [수정] 'progress' 메시지 (1단계 또는 2단계)
            if (data.type === 'progress') {
                segments = segments.map((s) => {
                    if (s.id !== data.segmentId) return s;
                    
                    if (data.stage === 'cut') {
                        message = `[${data.segmentId}번] 1/2. 동영상 자르는 중... ${data.progress.toFixed(0)}%`;
                        return { ...s, progress: data.progress, stage: 'cut' };
                    }
                    if (data.stage === 'frames') {
                        message = `[${data.segmentId}번] 2/2. 프레임 추출 중... ${data.progress.toFixed(0)}%`;
                        // 1단계가 100%가 아니더라도 2단계가 시작되면 1단계를 100%로 채워줌
                        return { ...s, progress: 100, progressStage2: data.progress, stage: 'frames' };
                    }
                    return s;
                });
            }

            // [추가] 2단계 또는 3단계(DB저장) 시작 신호
            if (data.type === 'progress_stage_start') {
                segments = segments.map((s) => {
                    if (s.id !== data.segmentId) return s;

                    if (data.stage === 'frames') {
                        message = `[${data.segmentId}번] 2/2. 프레임 추출 시작... (총 ${data.totalFrames}개)`;
                        return { ...s, stage: 'frames', progress: 100, progressStage2: 0 }; // 1단계(cut) 100% 완료
                    }
                    if (data.stage === 'db_save') {
                        message = `[${data.segmentId}번] 2/2. 프레임 DB 저장 중...`;
                        // 2단계(frames) 100% 완료, DB 저장 단계(시각적으로는 2단계 100% 유지)
                        return { ...s, stage: 'db_save', progressStage2: 100 }; 
                    }
                    return s;
                });
            }

            // [수정] 'done' 메시지 (모든 단계 완료)
            if (data.type === 'done') {
                segments = segments.map((s) =>
                    s.id === data.segmentId
                        ? {
                              ...s,
                              isCutting: false, // 작업 완료
                              progress: 100,
                              progressStage2: 100,
                              stage: 'done', // 완료 상태
                              resultURL: data.url,
                              newIndex: data.newIndex
                          }
                        : s
                );
            }

            if (data.type === 'all_complete') {
                message = '✅ 모든 구간 작업 완료!';
                isCuttingSegments = false;
                eventSource?.close();
                eventSource = null;
            }

            if (data.type === 'error') {
                console.error('Cutting Error:', data.error);
                message = `오류 발생: ${data.error}`;
                isCuttingSegments = false;
                // [수정] 오류 시 isCutting 플래그 해제
                segments = segments.map((s) => ({ ...s, isCutting: false, stage: undefined })); 
                eventSource?.close();
                eventSource = null;
            }
        };

        eventSource.onerror = (error) => {
            console.error('EventSource failed:', error);
            message = '오류: 서버와 연결이 끊어졌습니다.';
            isCuttingSegments = false;
            segments = segments.map((s) => ({ ...s, isCutting: false, stage: undefined }));
            if (eventSource) {
                eventSource.close();
                eventSource = null;
            }
        };
	};

	// --- uploadSegment, uploadAllSegments 함수 (유지) ---
	// ... (uploadSegment, uploadAllSegments 함수 코드는 원본과 동일) ...
	const uploadSegment = async (segmentId: number) => {
		const segment = segments.find((s) => s.id === segmentId);
		if (!segment || !segment.resultURL || segment.isUploading) return;
		segments = segments.map((s) => (s.id === segmentId ? { ...s, isUploading: true } : s));
		message = `[${segment.id}번] 구간 업로드 중...`;
		try {
			const response = await fetch(segment.resultURL);
			const videoBlob = await response.blob();
			const formData = new FormData();
			const baseName = originalFileName.split('.').slice(0, -1).join('.') || originalFileName;
			const fileName = `${baseName}_cut-${segment.id}-${segment.start.toFixed(
				0
			)}s-${segment.end.toFixed(0)}s.mp4`;
			formData.append('video', videoBlob, fileName);
			formData.append('originalFileName', originalFileName);
			
			// [수정] /api/upload-cut API에도 원본 비디오의 Index를 넘겨줍니다. (DB 저장용)
			formData.append('originalVideoIndex', selectedVideoIndex?.toString() || '');

			const uploadResponse = await fetch('/api/upload-cut', {
				method: 'POST',
				body: formData
			});
			if (!uploadResponse.ok) {
				throw new Error('서버 업로드 실패');
			}
			segments = segments.map((s) =>
				s.id === segmentId ? { ...s, isUploading: false, isUploaded: true } : s
			);
			message = `[${segment.id}번] 구간 업로드 성공!`;
		} catch (error) {
			console.error(`Segment ${segmentId} 업로드 오류:`, error);
			message = `[${segment.id}번] 구간 업로드 중 오류 발생.`;
			segments = segments.map((s) => (s.id === segmentId ? { ...s, isUploading: false } : s));
		}
	};

	const uploadAllSegments = async () => {
		const segmentsToUpload = segments.filter(
			(s) => s.resultURL && !s.isUploaded && !s.isUploading
		);
		if (segmentsToUpload.length === 0) {
			message = '업로드할 새로운 동영상이 없습니다.';
			return;
		}
		isUploadingSegments = true;
		message = `총 ${segmentsToUpload.length}개의 동영상 업로드를 시작합니다...`;
		for (const segment of segmentsToUpload) {
			await uploadSegment(segment.id);
		}
		isUploadingSegments = false;
		message = '모든 구간에 대한 업로드 작업이 완료되었습니다.';
	};

	// --- UI 헬퍼 함수들 (유지) ---
	// ... (setStartTime, setEndTime, addSegment, removeSegment, downloadAllSegments, previewSegment, handleTimeUpdate 함수 코드는 원본과 동일) ...
	const setStartTime = () => {
		if (videoElement) {
			startTimeStr = formatTime(videoElement.currentTime);
		}
	};
	const setEndTime = () => {
		if (videoElement) {
			endTimeStr = formatTime(videoElement.currentTime);
		}
	};

	const addSegment = () => {
		if (startTime >= endTime) {
			alert('시작 시간은 종료 시간보다 빨라야 합니다.');
			return;
		}
		segments = [
			...segments,
			{
				id: nextSegmentId++,
				start: startTime,
				end: endTime,
				isUploaded: false,
				isUploading: false,
				isCutting: false,
				progress: 0
			}
		];
	};

	const removeSegment = async (id: number) => {
        const segment = segments.find((s) => s.id === id);
        if (!segment) return;

        // Case 1: 아직 서버에 생성되지 않은 경우 (newIndex 없음)
        // -> UI에서만 즉시 제거
        if (!segment.newIndex) {
            segments = segments.filter((s) => s.id !== id);
            return;
        }

        // Case 2: 서버에 생성된 경우 (newIndex 있음)
        // -> 사용자 확인 후 API 호출
        const fileName = segment.resultURL?.split('/').pop() || '해당 동영상';
        if (
            !confirm(
                `[서버 영구 삭제] "${fileName}" (Index: ${segment.newIndex})을(를) 서버에서 영구적으로 삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없으며, 연관된 모든 프레임 이미지와 DB 데이터가 함께 삭제됩니다.`
            )
        ) {
            return; // 사용자가 '취소' 클릭
        }

        // 로딩 상태 UI (선택 사항)
        message = `[Index: ${segment.newIndex}] 삭제 요청 중...`;
        // segments = segments.map(s => s.id === id ? { ...s, isCutting: true, progress: 50 } : s); // 삭제 중임을 시각적으로 표시

        try {
            // [중요] 새로운 삭제 API 호출
            const response = await fetch(`/api/delete-cut-video?index=${segment.newIndex}`, {
                method: 'DELETE'
            });

            if (!response.ok) {
                const err = await response.json();
                throw new Error(err.message || '서버 삭제에 실패했습니다.');
            }

            // API 호출 성공 시 UI에서 제거
            segments = segments.filter((s) => s.id !== id);
            message = `[Index: ${segment.newIndex}] 성공적으로 삭제되었습니다.`;
        
        } catch (error: any) {
            console.error('Delete failed:', error);
            message = `[삭제 오류] ${error.message}`;
            // segments = segments.map(s => s.id === id ? { ...s, isCutting: false } : s); // 로딩 상태 해제
        }
    };

	const downloadAllSegments = () => {
		if (!allProcessed) return;
		segments.forEach((segment) => {
			if (segment.resultURL) {
				const link = document.createElement('a');
				link.href = segment.resultURL;
				const baseName =
					originalFileName.split('.').slice(0, -1).join('.') || originalFileName;
				const fileName = `${baseName}_cut-${segment.id}-${segment.start.toFixed(
					0
				)}s-${segment.end.toFixed(0)}s.mp4`;
				link.download = fileName;
				link.click();
			}
		});
	};

	const previewSegment = (segment: TimeSegment) => {
		if (!videoElement) return;

		videoElement.pause();
		stopAtTime = segment.end;
		videoElement.currentTime = segment.start;
		videoElement.play();
	};

	const handleTimeUpdate = () => {
		if (videoElement && stopAtTime !== null && videoElement.currentTime >= stopAtTime) {
			videoElement.pause();
			stopAtTime = null;
		}
	};

	// [추가] 경로 파싱을 위한 'path' 모듈 (브라우저용)
	// 'path-browserify'를 'npm install path-browserify'로 설치해야 할 수 있습니다.
	// 간단하게 string split으로 대체합니다.
	const path = {
		sep: '/',
		pop: (p: string) => p.split(path.sep).pop()
	};

    const getStageMessage = (segment: TimeSegment): string => {
        if (!segment.isCutting && segment.stage !== 'done') return '';
        
        switch(segment.stage) {
            case 'cut':
                return `1/2. 동영상 자르기...`;
            case 'frames':
                return `2/2. 프레임 추출 중...`;
            case 'db_save':
                return `2/2. DB 저장 중...`;
            case 'done':
                return `완료!`; // isCutting=false일 때 표시됨
            default:
                return `대기 중...`;
        }
    };
</script>

<main class="mx-auto max-w-screen-2xl p-4 sm:p-6 lg:p-8">
	<div class="text-center mb-8">
		<h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
			🎬 2단계: 동영상 구간 편집
		</h1>
	</div>

	<p class="p-4 mb-6 bg-blue-50 text-blue-700 border border-blue-200 rounded-lg text-center">
		{message}
	</p>

	<div class="flex flex-col lg:flex-row gap-6 items-start">
		<div class="w-full lg:w-1/2">
			<section class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">동영상 미리보기</h2>

                {#if videoURL}
                    {#key videoURL}
                        <video
                            bind:this={videoElement}
                            class="w-full rounded-lg bg-gray-100"
                            controls
                            autoplay
                            on:timeupdate={handleTimeUpdate}
                            src={videoURL}
                        >
                            브라우저가 비디오 태그를 지원하지 않습니다.
                        </video>
                    {/key}
                {:else}
                    <div class="aspect-video w-full flex items-center justify-center">
                        <p class="text-gray-500">동영상을 선택하세요.</p>
                    </div>
                {/if}
            </section>

		</div>

		<div class="w-full lg:w-1/4 flex flex-col gap-6">
			<section class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl p-6">
				<h2 class="text-xl font-semibold text-gray-800 mb-4">1. 동영상 파일 선택</h2>

				<select
					bind:value={selectedVideoIndex}
					on:change={handleVideoSelect}
					disabled={isLoading}
					class="w-full text-center cursor-pointer rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-50"
				>
					{#if isLoadingList}
						<option value={null} disabled>목록 로딩 중...</option>
					{:else if croppedVideos.length === 0}
						<option value={null} disabled>Crop된 동영상이 없습니다.</option>
					{:else}
						<option value={null} disabled selected>-- 동영상 선택 --</option>
						{#each croppedVideos as video (video.Index)}
							<option value={video.Index}>
								{path.pop(video.LocationFile)} (ID: {video.Index})
							</option>
						{/each}
					{/if}
				</select>

				</section>

			{#if videoURL}
				<section class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl p-6">
					<h3 class="text-lg font-semibold text-gray-800 mb-4">2. 구간 추가</h3>
					<div class="flex gap-2 mb-4">
						<button
							on:click={setStartTime}
							class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
							>시작 시간 설정</button
						>
						<button
							on:click={setEndTime}
							class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
							>종료 시간 설정</button
						>
					</div>
					<div class="space-y-2 mb-4">
						<div>
							<label for="startTime" class="block text-sm font-medium text-gray-700"
								>시작 시간 (HH:MM:SS.ms)</label
							>
							<input
								type="text"
								id="startTime"
								bind:value={startTimeStr}
								class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-1.5 font-mono"
								placeholder="00:00:00.000"
							/>
						</div>
						<div>
							<label for="endTime" class="block text-sm font-medium text-gray-700"
								>종료 시간 (HH:MM:SS.ms)</label
							>
							<input
								type="text"
								id="endTime"
								bind:value={endTimeStr}
								class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-1.5 font-mono"
								placeholder="00:00:00.000"
							/>
						</div>
					</div>
					<button
						on:click={addSegment}
						class="w-full rounded-md border border-transparent bg-green-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-green-700"
					>
						➕ 구간 추가하기
					</button>
				</section>
			{/if}
		</div>

		{#if videoURL}
			<div class="w-full lg:w-1/4">
				<section
					class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl p-6 flex flex-col h-full"
				>
					<h2 class="text-xl font-semibold text-gray-800 mb-4">
						3. 자르기 목록 ({segments.length}개)
					</h2>
					<div class="space-y-4 mb-6 flex-1 overflow-y-auto pr-2">
						{#each segments as segment (segment.id)}
							<div
								class="p-3 border rounded-lg flex items-center justify-between transition-colors"
								class:bg-green-50={segment.isUploaded}
								class:bg-blue-50={segment.isUploading}
								class:bg-indigo-50={segment.isCutting}
							>
								<div class="flex-1 overflow-hidden">
									<p
										class="font-medium text-gray-800 truncate cursor-pointer hover:text-indigo-600"
										on:click={() => previewSegment(segment)}
										title="클릭하여 구간 미리보기"
									>
										{formatTime(segment.start)} ~ {formatTime(segment.end)}
									</p>

									{#if segment.isCutting}
										<div class="mt-2 space-y-2">
                                            <p class="text-xs font-medium text-indigo-700">
                                                {getStageMessage(segment)}
                                            </p>
                                            
                                            <div>
                                                <progress
                                                    class="w-full h-2 rounded-full overflow-hidden"
                                                    max="100"
                                                    value={segment.progress || 0}
                                                ></progress>
                                                <p class="text-xs text-right font-mono text-gray-600">
                                                    {(segment.progress || 0).toFixed(0)}%
                                                </p>
                                            </div>
                                            
                                            {#if (segment.progress || 0) >= 100}
                                                <div class="mt-1">
                                                    <progress
                                                        class="w-full h-2 rounded-full overflow-hidden"
                                                        max="100"
                                                        value={segment.progressStage2 || 0}
                                                    ></progress>
                                                    <p class="text-xs text-right font-mono text-gray-600">
                                                        {(segment.progressStage2 || 0).toFixed(0)}%
                                                    </p>
                                                </div>
                                            {/if}
                                        </div>
									{:else if segment.resultURL}
										<div class="text-sm mt-1 flex items-center gap-4">
											<a
												href={segment.resultURL}
												download={`${
													originalFileName.split('.').slice(0, -1).join('.')
												}_cut-${segment.id}.mp4`}
												class="text-indigo-600 hover:underline">다운로드</a
											>

											{#if segment.isUploading}
												<span class="text-gray-500 animate-pulse">업로드 중...</span>
											{:else if segment.isUploaded}
												<span class="font-medium text-green-600">✓ 업로드 완료</span>
											{:else}
												<button
													on:click={() => uploadSegment(segment.id)}
													class="text-blue-600 hover:underline"
													disabled={isLoading}>업로드</button
												>
											{/if}
										</div>
									{/if}
								</div>
								<button
									on:click={() => removeSegment(segment.id)}
									class="text-red-500 hover:text-red-700 font-bold px-2 ml-2 self-start"
									>X</button
								>
							</div>
						{:else}
							<p class="text-gray-500 text-center py-4">추가된 구간이 없습니다.</p>
						{/each}
					</div>
					<div class="mt-auto grid grid-cols-1 md:grid-cols-3 gap-2">
						<button
							on:click={cutAllSegments}
							disabled={isLoading || segments.length === 0}
							class="w-full rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 disabled:opacity-50"
						>
							✂️ 전체 잘라내기
						</button>
						<button
							on:click={uploadAllSegments}
							disabled={isLoading || !segmentsReadyToUpload}
							class="w-full rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 disabled:opacity-50"
						>
							📤 전체 업로드
						</button>
						<button
							on:click={downloadAllSegments}
							disabled={isLoading || !allProcessed}
							class="w-full rounded-md border border-transparent bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-green-700 disabled:opacity-50"
						>
							📦 전체 다운로드
						</button>
					</div>
				</section>
			</div>
		{/if}
	</div>
</main>