'use client';

import { useEffect, useState } from 'react';
import { useParams, useRouter, useSearchParams } from 'next/navigation';
import AdminSidebar from '@/app/components/AdminSidebar';
import BackArrowSvg from '@/app/svgs/backarrow';
import DownloadIcon from '@/app/svgs/downloadicon';
import apiService from '@/app/lib/apiService';
import { getCourses } from '@/app/admin/courses/mockData';

type VideoFile = {
	id: string;
	fileName: string;
	fileSize: string;
	fileKey?: string;
	url?: string;
};

type VrFile = {
	id: string;
	fileName: string;
	fileSize: string;
	fileKey?: string;
	url?: string;
};

type QuizQuestion = {
	id: string;
	number: number;
	question: string;
	correctAnswer: string;
	wrongAnswer1: string;
	wrongAnswer2: string;
	wrongAnswer3: string;
};

type CourseDetail = {
	id: string;
	courseName: string; // 교육 과정명
	title: string; // 강좌명
	goal: string; // 학습 목표 (여러 줄)
	videoFiles: VideoFile[];
	vrFiles: VrFile[];
	quizData: QuizQuestion[];
	csvKey?: string;
	csvUrl?: string;
};

export default function AdminCourseDetailPage() {
	const params = useParams();
	const router = useRouter();
	const searchParams = useSearchParams();
	const [course, setCourse] = useState<CourseDetail | null>(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState<string | null>(null);
	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
	const [isDeleting, setIsDeleting] = useState(false);
	const [showToast, setShowToast] = useState(false);

	useEffect(() => {
		const fetchCourse = async () => {
			if (!params?.id) return;

			try {
				setLoading(true);
				setError(null);
				
				// sessionStorage에서 저장된 강좌 데이터 가져오기
				let data: any = null;
				const storedData = typeof window !== 'undefined' ? sessionStorage.getItem('selectedLecture') : null;
				
				if (storedData) {
					try {
						data = JSON.parse(storedData);
						// 사용 후 삭제
						sessionStorage.removeItem('selectedLecture');
					} catch (e) {
						console.error('저장된 데이터 파싱 실패:', e);
					}
				}
				
				// sessionStorage에 데이터가 없으면 강좌 리스트에서 찾기
				if (!data) {
					try {
						const response = await apiService.getLectures();
						const lectures = Array.isArray(response.data) 
							? response.data 
							: response.data?.items || response.data?.lectures || response.data?.data || [];
						
						data = lectures.find((l: any) => String(l.id || l.lectureId) === params.id);
					} catch (err) {
						console.error('강좌 리스트 조회 실패:', err);
					}
				}
				
				if (!data) {
					throw new Error('강좌를 찾을 수 없습니다.');
				}
				
				// 첨부파일 정보 구성 (나중에 videoFiles와 vrFiles 길이로 업데이트됨)
				// 이 부분은 videoFiles와 vrFiles가 구성된 후에 업데이트됩니다
				
				// 썸네일 이미지 가져오기
				let thumbnail = '/imgs/talk.png';
				if (data.imageKey) {
					try {
						const imageUrl = await apiService.getFile(data.imageKey);
						if (imageUrl) {
							thumbnail = imageUrl;
						}
					} catch (err) {
						console.error('이미지 로드 실패:', err);
					}
				}
				
				// 교육 과정명 가져오기 - AdminLessonsPage와 동일한 방식
				let courseName = '';
				const subjectId = data.subjectId || data.subject_id;
				if (subjectId) {
					try {
						const courses = await getCourses();
						const foundCourse = courses.find(course => course.id === String(subjectId));
						courseName = foundCourse?.courseName || '';
						
						// 교육과정명을 찾지 못한 경우 fallback
						if (!courseName) {
							courseName = data.subjectName || data.courseName || '';
						}
					} catch (err) {
						console.error('교육 과정명 조회 실패:', err);
						// 에러 발생 시 fallback
						courseName = data.subjectName || data.courseName || '';
					}
				}

				// 학습 목표를 여러 줄로 분리
				const goalLines = (data.objective || data.goal || '').split('\n').filter((line: string) => line.trim());

				// 비디오 파일 목록 구성 - fileKey 배열에서 파일 조회
				const videoFiles: VideoFile[] = [];
				
				// fileKey 배열 수집
				const videoFileKeys: string[] = [];
				
				// videoUrl이 배열인 경우 처리
				if (data.videoUrl && Array.isArray(data.videoUrl)) {
					// videoUrl 배열의 각 항목을 fileKey로 사용
					videoFileKeys.push(...data.videoUrl);
				} else if (data.videoKeys && Array.isArray(data.videoKeys)) {
					videoFileKeys.push(...data.videoKeys);
				} else if (data.videoFileKeys && Array.isArray(data.videoFileKeys)) {
					videoFileKeys.push(...data.videoFileKeys);
				} else if (data.videoFiles && Array.isArray(data.videoFiles)) {
					// videoFiles 배열에서 fileKey 추출
					data.videoFiles.forEach((vf: any) => {
						if (vf.fileKey || vf.key) {
							videoFileKeys.push(vf.fileKey || vf.key);
						}
					});
				} else if (data.videoKey) {
					// 단일 fileKey
					videoFileKeys.push(data.videoKey);
				} else if (data.videoUrl && typeof data.videoUrl === 'string') {
					// 단일 videoUrl을 fileKey로 사용 (하위 호환성)
					videoFileKeys.push(data.videoUrl);
				}
				
				// fileKey 배열이 있으면 각각에 대해 파일 조회 API 호출
				if (videoFileKeys.length > 0) {
					// fileKey와 fileName 매핑 생성
					const videoFileMap = new Map<string, string>();
					if (data.videoFiles && Array.isArray(data.videoFiles)) {
						data.videoFiles.forEach((vf: any) => {
							const key = vf.fileKey || vf.key;
							if (key && (vf.fileName || vf.name)) {
								videoFileMap.set(key, vf.fileName || vf.name);
							}
						});
					}
					
					const videoFilePromises = videoFileKeys.map(async (fileKey, index) => {
						try {
							// 먼저 data에서 파일명 정보 확인 (fileKey로 매핑된 파일명 우선)
							let fileName = videoFileMap.get(fileKey)
								|| data.videoFiles?.[index]?.fileName 
								|| data.videoFiles?.[index]?.name 
								|| data.videoFileName 
								|| `강좌영상_${index + 1}.mp4`;
							
							// 파일 정보 가져오기 (크기, 파일명 등)
							const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hrdi.coconutmeet.net';
							const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
							const fileUrl = `${baseURL}/api/files/${encodeURIComponent(fileKey)}`;
							
							const response = await fetch(fileUrl, {
								method: 'HEAD',
								headers: {
									...(token && { Authorization: `Bearer ${token}` }),
								},
							});
							
							let fileSize = '0 KB';
							
							if (response.ok) {
								// Content-Disposition 헤더에서 파일명 추출 (data에 없을 경우에만)
								if (!data.videoFiles?.[index]?.fileName && !data.videoFiles?.[index]?.name) {
									const contentDisposition = response.headers.get('Content-Disposition');
									if (contentDisposition) {
										const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
										if (fileNameMatch && fileNameMatch[1]) {
											fileName = decodeURIComponent(fileNameMatch[1].replace(/['"]/g, ''));
										}
									}
								}
								
								// Content-Length 헤더에서 파일 크기 추출
								const contentLength = response.headers.get('Content-Length');
								if (contentLength) {
									const sizeInBytes = parseInt(contentLength, 10);
									if (sizeInBytes > 0) {
										if (sizeInBytes < 1024) {
											fileSize = `${sizeInBytes} B`;
										} else if (sizeInBytes < 1024 * 1024) {
											fileSize = `${(sizeInBytes / 1024).toFixed(2)} KB`;
										} else {
											fileSize = `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
										}
									}
								}
								
								// 실제 파일 URL 가져오기
								const blobUrl = await apiService.getFile(fileKey);
								
								return {
									id: String(index + 1),
									fileName: fileName,
									fileSize: fileSize,
									fileKey: fileKey,
									url: blobUrl || undefined,
								};
							} else {
								// HEAD 요청 실패 시 파일명은 data에서 가져온 값 사용
								return {
									id: String(index + 1),
									fileName: fileName,
									fileSize: fileSize,
									fileKey: fileKey,
									url: undefined,
								};
							}
						} catch (err) {
							console.error(`비디오 파일 ${index + 1} 조회 실패:`, err);
							// 조회 실패해도 fileKey는 저장, 파일명은 data에서 가져온 값 사용
							const fallbackFileName = data.videoFiles?.[index]?.fileName 
								|| data.videoFiles?.[index]?.name 
								|| data.videoFileName 
								|| `강좌영상_${index + 1}.mp4`;
							
							return {
								id: String(index + 1),
								fileName: fallbackFileName,
								fileSize: '0 KB',
								fileKey: fileKey,
								url: undefined,
							};
						}
					});
					
					const resolvedVideoFiles = await Promise.all(videoFilePromises);
					videoFiles.push(...resolvedVideoFiles);
				}

				// VR 파일 목록 구성 - fileKey 배열에서 파일 조회
				const vrFiles: VrFile[] = [];
				
				// fileKey 배열 수집
				const vrFileKeys: string[] = [];
				
				// webglUrl이 배열인 경우 처리
				if (data.webglUrl && Array.isArray(data.webglUrl)) {
					// webglUrl 배열의 각 항목을 fileKey로 사용
					vrFileKeys.push(...data.webglUrl);
				} else if (data.vrUrl && Array.isArray(data.vrUrl)) {
					// vrUrl 배열의 각 항목을 fileKey로 사용
					vrFileKeys.push(...data.vrUrl);
				} else if (data.webglKeys && Array.isArray(data.webglKeys)) {
					vrFileKeys.push(...data.webglKeys);
				} else if (data.vrKeys && Array.isArray(data.vrKeys)) {
					vrFileKeys.push(...data.vrKeys);
				} else if (data.webglFileKeys && Array.isArray(data.webglFileKeys)) {
					vrFileKeys.push(...data.webglFileKeys);
				} else if (data.vrFileKeys && Array.isArray(data.vrFileKeys)) {
					vrFileKeys.push(...data.vrFileKeys);
				} else if (data.webglFiles && Array.isArray(data.webglFiles)) {
					// webglFiles 배열에서 fileKey 추출
					data.webglFiles.forEach((vf: any) => {
						if (vf.fileKey || vf.key) {
							vrFileKeys.push(vf.fileKey || vf.key);
						}
					});
				} else if (data.webglKey || data.vrKey) {
					// 단일 fileKey
					vrFileKeys.push(data.webglKey || data.vrKey);
				} else if (data.webglUrl && typeof data.webglUrl === 'string') {
					// 단일 webglUrl을 fileKey로 사용 (하위 호환성)
					vrFileKeys.push(data.webglUrl);
				} else if (data.vrUrl && typeof data.vrUrl === 'string') {
					// 단일 vrUrl을 fileKey로 사용 (하위 호환성)
					vrFileKeys.push(data.vrUrl);
				}
				
				// fileKey 배열이 있으면 각각에 대해 파일 조회 API 호출
				if (vrFileKeys.length > 0) {
					// fileKey와 fileName 매핑 생성
					const vrFileMap = new Map<string, string>();
					if (data.webglFiles && Array.isArray(data.webglFiles)) {
						data.webglFiles.forEach((vf: any) => {
							const key = vf.fileKey || vf.key;
							if (key && (vf.fileName || vf.name)) {
								vrFileMap.set(key, vf.fileName || vf.name);
							}
						});
					}
					
					const vrFilePromises = vrFileKeys.map(async (fileKey, index) => {
						try {
							// 먼저 data에서 파일명 정보 확인 (fileKey로 매핑된 파일명 우선)
							let fileName = vrFileMap.get(fileKey)
								|| data.webglFiles?.[index]?.fileName 
								|| data.webglFiles?.[index]?.name 
								|| data.vrFileName 
								|| data.webglFileName 
								|| `VR_콘텐츠_${index + 1}.zip`;
							
							// 파일 정보 가져오기 (크기, 파일명 등)
							const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hrdi.coconutmeet.net';
							const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
							const fileUrl = `${baseURL}/api/files/${encodeURIComponent(fileKey)}`;
							
							const response = await fetch(fileUrl, {
								method: 'HEAD',
								headers: {
									...(token && { Authorization: `Bearer ${token}` }),
								},
							});
							
							let fileSize = '0 KB';
							
							if (response.ok) {
								// Content-Disposition 헤더에서 파일명 추출 (data에 없을 경우에만)
								if (!data.webglFiles?.[index]?.fileName && !data.webglFiles?.[index]?.name) {
									const contentDisposition = response.headers.get('Content-Disposition');
									if (contentDisposition) {
										const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
										if (fileNameMatch && fileNameMatch[1]) {
											fileName = decodeURIComponent(fileNameMatch[1].replace(/['"]/g, ''));
										}
									}
								}
								
								// Content-Length 헤더에서 파일 크기 추출
								const contentLength = response.headers.get('Content-Length');
								if (contentLength) {
									const sizeInBytes = parseInt(contentLength, 10);
									if (sizeInBytes > 0) {
										if (sizeInBytes < 1024) {
											fileSize = `${sizeInBytes} B`;
										} else if (sizeInBytes < 1024 * 1024) {
											fileSize = `${(sizeInBytes / 1024).toFixed(2)} KB`;
										} else {
											fileSize = `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
										}
									}
								}
								
								// 실제 파일 URL 가져오기
								const blobUrl = await apiService.getFile(fileKey);
								
								return {
									id: String(index + 1),
									fileName: fileName,
									fileSize: fileSize,
									fileKey: fileKey,
									url: blobUrl || undefined,
								};
							} else {
								// HEAD 요청 실패 시 파일명은 data에서 가져온 값 사용
								return {
									id: String(index + 1),
									fileName: fileName,
									fileSize: fileSize,
									fileKey: fileKey,
									url: undefined,
								};
							}
						} catch (err) {
							console.error(`VR 파일 ${index + 1} 조회 실패:`, err);
							// 조회 실패해도 fileKey는 저장, 파일명은 data에서 가져온 값 사용
							const fallbackFileName = data.webglFiles?.[index]?.fileName 
								|| data.webglFiles?.[index]?.name 
								|| data.vrFileName 
								|| data.webglFileName 
								|| `VR_콘텐츠_${index + 1}.zip`;
							
							return {
								id: String(index + 1),
								fileName: fallbackFileName,
								fileSize: '0 KB',
								fileKey: fileKey,
								url: undefined,
							};
						}
					});
					
					const resolvedVrFiles = await Promise.all(vrFilePromises);
					vrFiles.push(...resolvedVrFiles);
				}

				// 퀴즈 데이터 구성 (CSV 파일이 있으면 파싱, 없으면 빈 배열)
				const quizData: QuizQuestion[] = [];
				if (data.csvKey || data.csvUrl || data.quizData) {
					// quizData가 이미 배열로 제공되는 경우
					if (data.quizData && Array.isArray(data.quizData)) {
						data.quizData.forEach((q: any, index: number) => {
							quizData.push({
								id: String(q.id || index + 1),
								number: q.number || index + 1,
								question: q.question || '',
								correctAnswer: q.correctAnswer || q.correct_answer || '',
								wrongAnswer1: q.wrongAnswer1 || q.wrong_answer1 || '',
								wrongAnswer2: q.wrongAnswer2 || q.wrong_answer2 || '',
								wrongAnswer3: q.wrongAnswer3 || q.wrong_answer3 || '',
							});
						});
					} else {
						// CSV 파일을 다운로드하고 파싱
						if (data.csvUrl || data.csvKey) {
							try {
								const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL || 'https://hrdi.coconutmeet.net';
								const token = typeof window !== 'undefined' ? localStorage.getItem('token') : null;
								
								let fileKey: string | null = null;
								
								// csvUrl에서 fileKey 추출
								if (data.csvUrl) {
									// 전체 URL인 경우 fileKey 추출
									if (data.csvUrl.startsWith('http://') || data.csvUrl.startsWith('https://')) {
										// URL에서 /api/files/ 이후 부분을 fileKey로 사용
										const filesIndex = data.csvUrl.indexOf('/api/files/');
										if (filesIndex !== -1) {
											const extractedKey = data.csvUrl.substring(filesIndex + '/api/files/'.length);
											// URL 디코딩
											fileKey = decodeURIComponent(extractedKey);
										} else {
											// URL에서 마지막 경로를 fileKey로 사용
											const urlParts = data.csvUrl.split('/');
											const lastPart = urlParts[urlParts.length - 1];
											if (lastPart) {
												fileKey = decodeURIComponent(lastPart);
											}
										}
									} else if (data.csvUrl.startsWith('csv/')) {
										// "csv/" 접두사 제거
										fileKey = data.csvUrl.substring(4);
									} else {
										// 그 외의 경우 fileKey로 사용
										fileKey = data.csvUrl;
									}
								} else if (data.csvKey) {
									// csvKey가 있으면 fileKey로 사용
									fileKey = data.csvKey;
								}
								
								if (!fileKey) {
									return; // fileKey가 없으면 종료
								}
								
								// /api/files/{fileKey} 형태로 요청
								const csvUrl = `${baseURL}/api/files/${encodeURIComponent(fileKey as string)}`;
								
								const csvResponse = await fetch(csvUrl, {
									method: 'GET',
									headers: {
										...(token && { Authorization: `Bearer ${token}` }),
									},
								});
								
								// 404 에러는 파일이 없는 것으로 간주하고 조용히 처리
								if (csvResponse.status === 404) {
									console.warn('CSV 파일을 찾을 수 없습니다:', data.csvUrl || data.csvKey);
								} else if (csvResponse.ok) {
									const csvText = await csvResponse.text();
									
									// CSV 파싱 함수
									const parseCsv = (csvText: string): string[][] => {
										const lines: string[][] = [];
										let currentLine: string[] = [];
										let currentField = '';
										let inQuotes = false;

										for (let i = 0; i < csvText.length; i++) {
											const char = csvText[i];
											const nextChar = csvText[i + 1];

											if (char === '"') {
												if (inQuotes && nextChar === '"') {
													currentField += '"';
													i++;
												} else {
													inQuotes = !inQuotes;
												}
											} else if (char === ',' && !inQuotes) {
												currentLine.push(currentField.trim());
												currentField = '';
											} else if ((char === '\n' || char === '\r') && !inQuotes) {
												if (char === '\r' && nextChar === '\n') {
													i++;
												}
												if (currentField || currentLine.length > 0) {
													currentLine.push(currentField.trim());
													lines.push(currentLine);
													currentLine = [];
													currentField = '';
												}
											} else {
												currentField += char;
											}
										}

										if (currentField || currentLine.length > 0) {
											currentLine.push(currentField.trim());
											lines.push(currentLine);
										}

									return lines;
								};

								const parsed = parseCsv(csvText);
								
								if (parsed.length > 0) {
									const rows = parsed.slice(1);
									
									rows.forEach((row, index) => {
										if (row.length >= 5) {
											quizData.push({
												id: String(index + 1),
												number: index + 1,
												question: row[0] || '',
												correctAnswer: row[1] || '',
												wrongAnswer1: row[2] || '',
												wrongAnswer2: row[3] || '',
												wrongAnswer3: row[4] || '',
											});
										}
									});
								}
								} else if (!csvResponse.ok) {
									console.error(`CSV 파일을 가져오는데 실패했습니다. (${csvResponse.status})`);
								}
							} catch (csvError) {
								console.error('CSV 파일 파싱 실패:', csvError);
							}
						}
					}
				}

				// API 응답 구조에 맞게 데이터 매핑
				const courseDetail: CourseDetail = {
					id: String(data.id || params.id),
					courseName: courseName || data.courseName || '교육 과정명',
					title: data.title || data.lectureName || '',
					goal: goalLines.length > 0 ? goalLines.join('\n') : (data.objective || data.goal || ''),
					videoFiles: videoFiles,
					vrFiles: vrFiles,
					quizData: quizData,
					csvKey: data.csvKey,
					csvUrl: data.csvUrl,
				};

				setCourse(courseDetail);
			} catch (err) {
				console.error('강좌 조회 실패:', err);
				setError(err instanceof Error ? err.message : '강좌를 불러오는데 실패했습니다.');
			} finally {
				setLoading(false);
			}
		};

		fetchCourse();
	}, [params?.id, searchParams]);
	
	// refresh 쿼리 파라미터가 있으면 URL에서 제거
	useEffect(() => {
		if (searchParams.get('refresh')) {
			router.replace(`/admin/lessons/${params.id}`);
		}
	}, [searchParams, params?.id, router]);

	// 토스트 자동 닫기
	useEffect(() => {
		if (showToast) {
			const timer = setTimeout(() => {
				setShowToast(false);
			}, 3000);
			return () => clearTimeout(timer);
		}
	}, [showToast]);

	if (loading) {
		return (
			<div className="min-h-screen flex flex-col bg-white">
				<div className="flex flex-1 min-h-0 justify-center">
					<div className="w-[1440px] flex min-h-0">
						<div className="flex">
							<AdminSidebar />
						</div>
						<main className="w-[1120px] bg-white">
							<div className="h-full flex flex-col px-8">
								<div className="h-[100px] flex items-center justify-between px-8">
									<div className="flex items-center gap-[12px]">
										<button
											type="button"
											onClick={() => router.push('/admin/lessons')}
											className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
											aria-label="뒤로가기"
										>
											<BackArrowSvg width={32} height={32} />
										</button>
										<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">강좌 상세</h1>
									</div>
								</div>
								<section className="px-8 pb-20">
									<div className="flex items-center justify-center py-20">
										<p className="text-[16px] text-[#8c95a1]">로딩 중...</p>
									</div>
								</section>
							</div>
						</main>
					</div>
				</div>
			</div>
		);
	}

	if (error || !course) {
		return (
			<div className="min-h-screen flex flex-col bg-white">
				<div className="flex flex-1 min-h-0 justify-center">
					<div className="w-[1440px] flex min-h-0">
						<div className="flex">
							<AdminSidebar />
						</div>
						<main className="w-[1120px] bg-white">
							<div className="h-full flex flex-col px-8">
								<div className="h-[100px] flex items-center justify-between px-8">
									<div className="flex items-center gap-[12px]">
										<button
											type="button"
											onClick={() => router.push('/admin/lessons')}
											className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
											aria-label="뒤로가기"
										>
											<BackArrowSvg width={32} height={32} />
										</button>
										<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">강좌 상세</h1>
									</div>
								</div>
								<section className="px-8 pb-20">
									<div className="flex flex-col items-center justify-center py-20">
										<p className="text-[16px] text-red-500 mb-4">{error || '강좌를 찾을 수 없습니다.'}</p>
										<button
											type="button"
											onClick={() => router.push('/admin/lessons')}
											className="px-4 py-2 rounded-[6px] bg-[#1f2b91] text-white text-[14px] font-medium"
										>
											강좌 목록으로 돌아가기
										</button>
									</div>
								</section>
							</div>
						</main>
					</div>
				</div>
			</div>
		);
	}

	const handleDownload = async (fileKey?: string, url?: string, fileName?: string) => {
		if (url) {
			// URL이 있으면 직접 다운로드
			const link = document.createElement('a');
			link.href = url;
			link.download = fileName || 'download';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		} else if (fileKey) {
			// fileKey가 있으면 API를 통해 다운로드
			try {
				const fileUrl = await apiService.getFile(fileKey);
				if (fileUrl) {
					const link = document.createElement('a');
					link.href = fileUrl;
					link.download = fileName || 'download';
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
				}
			} catch (err) {
				console.error('파일 다운로드 실패:', err);
				alert('파일 다운로드에 실패했습니다.');
			}
		}
	};

	const handleCsvDownload = async () => {
		if (!course) return;

		try {
			let fileKey: string | null = null;

			// csvUrl에서 fileKey 추출
			if (course.csvUrl) {
				// 전체 URL인 경우 fileKey 추출
				if (course.csvUrl.startsWith('http://') || course.csvUrl.startsWith('https://')) {
					// URL에서 /api/files/ 이후 부분을 fileKey로 사용
					const filesIndex = course.csvUrl.indexOf('/api/files/');
					if (filesIndex !== -1) {
						const extractedKey = course.csvUrl.substring(filesIndex + '/api/files/'.length);
						// URL 디코딩
						fileKey = decodeURIComponent(extractedKey);
					} else {
						// URL에서 마지막 경로를 fileKey로 사용
						const urlParts = course.csvUrl.split('/');
						const lastPart = urlParts[urlParts.length - 1];
						if (lastPart) {
							fileKey = decodeURIComponent(lastPart);
						}
					}
				} else if (course.csvUrl.startsWith('csv/')) {
					// "csv/" 접두사 제거
					fileKey = course.csvUrl.substring(4);
				} else {
					// 그 외의 경우 fileKey로 사용
					fileKey = course.csvUrl;
				}
			} else if (course.csvKey) {
				// csvKey가 있으면 fileKey로 사용
				fileKey = course.csvKey;
			}

			if (!fileKey) {
				alert('CSV 파일을 찾을 수 없습니다.');
				return;
			}

			// CSV 파일 다운로드
			const fileName = `${course.title || 'quiz'}_문제.csv`;
			await handleDownload(fileKey, undefined, fileName);
		} catch (err) {
			console.error('CSV 파일 다운로드 실패:', err);
			alert('CSV 파일 다운로드에 실패했습니다.');
		}
	};

	const handleDeleteClick = () => {
		setIsDeleteModalOpen(true);
	};

	const handleDeleteCancel = () => {
		setIsDeleteModalOpen(false);
	};

	const handleDeleteConfirm = async () => {
		if (!params?.id || isDeleting) return;

		setIsDeleting(true);
		try {
			const response = await apiService.deleteLecture(params.id as string);
			// 응답 메시지 확인
			if (response.data?.message === '삭제 완료') {
				// 토스트 팝업 표시
				setShowToast(true);
				// 강좌 목록으로 이동
				router.push('/admin/lessons');
			} else {
				// 예상치 못한 응답
				alert('강좌 삭제에 실패했습니다.');
				setIsDeleting(false);
			}
		} catch (err) {
			console.error('강좌 삭제 실패:', err);
			alert('강좌 삭제에 실패했습니다.');
			setIsDeleting(false);
		}
	};

	const goalLines = course.goal.split('\n').filter(line => line.trim());

	return (
		<div className="min-h-screen flex flex-col bg-white">
			<div className="flex flex-1 min-h-0 justify-center">
				<div className="w-[1440px] flex min-h-0">
					{/* 사이드바 */}
					<div className="flex">
						<AdminSidebar />
					</div>
					{/* 메인 콘텐츠 */}
					<main className="w-[1120px] bg-white">
						<div className="h-full flex flex-col">
							{/* 헤더 */}
							<div className="h-[100px] flex items-center px-8">
								<div className="flex items-center gap-[12px]">
									<button
										type="button"
										onClick={() => router.push('/admin/lessons')}
										className="flex items-center justify-center size-[32px] cursor-pointer hover:opacity-80"
										aria-label="뒤로가기"
									>
										<BackArrowSvg width={32} height={32} />
									</button>
									<h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
										강좌 상세
									</h1>
								</div>
							</div>

							{/* 콘텐츠 */}
							<div className="flex flex-col gap-[40px] pb-20 pt-6 px-8">
								{/* 강좌 정보 섹션 */}
								<div className="flex flex-col gap-[8px]">
									<div className="flex flex-col gap-[8px]">
										<p className="text-[18px] font-bold leading-[1.5] text-[#333c47]">강좌 정보</p>
									</div>
									<div className="flex flex-col gap-[24px]">
										{/* 교육 과정명 */}
										<div className="flex flex-col gap-[4px]">
											<div className="w-[96px]">
												<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">교육 과정명</p>
											</div>
											<div>
												<p className="text-[16px] font-normal leading-[1.5] text-[#333c47]">{course.courseName}</p>
											</div>
										</div>

										{/* 강좌명 */}
										<div className="flex flex-col gap-[4px]">
											<div className="w-[96px]">
												<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">강좌명</p>
											</div>
											<div>
												<p className="text-[16px] font-normal leading-[1.5] text-[#333c47]">{course.title}</p>
											</div>
										</div>

										{/* 학습 목표 */}
										<div className="flex flex-col gap-[4px]">
											<div className="w-[96px]">
												<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">학습 목표</p>
											</div>
											<div className="flex flex-col">
												{goalLines.map((line, index) => (
													<p key={index} className="text-[16px] font-normal leading-[1.5] text-[#333c47] mb-0">
														{line}
													</p>
												))}
											</div>
										</div>
									</div>
								</div>

								{/* 파일 첨부 섹션 */}
								<div className="flex flex-col gap-[8px]">
									<p className="text-[18px] font-bold leading-[1.5] text-[#1b2027]">파일 첨부</p>
									
									<div className="flex flex-col gap-[40px]">
										{/* 강좌 영상 */}
										<div className="flex flex-col gap-[8px]">
											<div className="flex gap-[12px] h-[32px] items-center">
												<div className="flex gap-[8px] items-center">
													<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">강좌 영상</p>
												</div>
											</div>
											<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
												{course.videoFiles.length > 0 ? (
													<div className="flex flex-col py-[12px]">
														{course.videoFiles.map((video) => (
															<div
																key={video.id}
																className="bg-white border border-[#dee1e6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] mx-[12px] mb-[8px] last:mb-0"
															>
																<div className="size-[24px] shrink-0">
																	<img src="/imgs/play.svg" alt="" className="size-full" />
																</div>
																<div className="flex-1 flex items-center gap-[8px] min-w-0">
																	<p className="text-[15px] font-normal leading-[1.5] text-[#1b2027] truncate">
																		{video.fileName}
																	</p>
																	<p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] shrink-0">
																		{video.fileSize}
																	</p>
																</div>
																<button
																	type="button"
																	onClick={() => handleDownload(video.fileKey, video.url, video.fileName)}
																	className="bg-white border border-[#8c95a1] h-[32px] rounded-[6px] px-4 flex items-center justify-center gap-[4px] shrink-0"
																>
																	<DownloadIcon className="size-[16px] text-[#4c5561]" />
																	<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
																</button>
															</div>
														))}
													</div>
												) : (
													<div className="h-[64px] flex items-center justify-center">
														<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
															등록된 강좌 영상이 없습니다.
														</p>
													</div>
												)}
											</div>
										</div>

										{/* VR 콘텐츠 */}
										<div className="flex flex-col gap-[8px]">
											<div className="flex gap-[12px] h-[32px] items-center">
												<div className="flex gap-[8px] items-center">
													<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">VR 콘텐츠</p>
												</div>
											</div>
											<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
												{course.vrFiles.length > 0 ? (
													<div className="flex flex-col py-[12px]">
														{course.vrFiles.map((vr) => (
															<div
																key={vr.id}
																className="bg-white border border-[#dee1e6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] mx-[12px] mb-[8px] last:mb-0"
															>
																<div className="size-[24px] shrink-0">
																	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																		<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="#4c5561" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
																		<path d="M14 2V8H20" stroke="#4c5561" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
																	</svg>
																</div>
																<div className="flex-1 flex items-center gap-[8px] min-w-0">
																	<p className="text-[15px] font-normal leading-[1.5] text-[#1b2027] truncate">
																		{vr.fileName}
																	</p>
																	<p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] shrink-0">
																		{vr.fileSize}
																	</p>
																</div>
																<button
																	type="button"
																	onClick={() => handleDownload(vr.fileKey, vr.url, vr.fileName)}
																	className="bg-white border border-[#8c95a1] h-[32px] rounded-[6px] px-4 flex items-center justify-center gap-[4px] shrink-0"
																>
																	<DownloadIcon className="size-[16px] text-[#4c5561]" />
																	<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
																</button>
															</div>
														))}
													</div>
												) : (
													<div className="h-[64px] flex items-center justify-center">
														<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
															등록된 VR 콘텐츠가 없습니다.
														</p>
													</div>
												)}
											</div>
										</div>

										{/* 학습 평가 문제 */}
										<div className="flex flex-col gap-[8px]">
											<div className="flex gap-[12px] h-[32px] items-center justify-between">
												<div className="flex gap-[8px] items-center">
													<p className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">학습 평가 문제</p>
												</div>
												{course.quizData.length > 0 && (
													<button
														type="button"
														onClick={handleCsvDownload}
														className="bg-white border border-[#8c95a1] h-[32px] rounded-[6px] px-4 flex items-center justify-center gap-[4px]"
													>
														<DownloadIcon className="size-[16px] text-[#4c5561]" />
														<p className="text-[13px] font-medium leading-[1.4] text-[#4c5561]">다운로드</p>
													</button>
												)}
											</div>
											<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
												{course.quizData.length > 0 ? (
													<div className="flex flex-col">
														<div className="m-[24px] border border-[#dee1e6] border-solid relative bg-white max-h-[400px] overflow-y-auto csv-table-scroll">
															<div className="content-stretch flex flex-col items-start justify-center relative size-full">
																{/* 테이블 헤더 */}
																<div className="bg-[#f1f8ff] content-stretch flex h-[48px] items-center overflow-clip shrink-0 w-full sticky top-0 z-10">
																	<div className="w-[48px] border-r border-[#dee1e6] flex items-center justify-center px-2 py-3 shrink-0">
																		<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">번호</p>
																	</div>
																	<div className="flex-1 border-r border-[#dee1e6] flex items-center px-2 py-3 shrink-0">
																		<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">문제</p>
																	</div>
																	<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3 shrink-0">
																		<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">정답</p>
																	</div>
																	<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3 shrink-0">
																		<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">오답1</p>
																	</div>
																	<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3 shrink-0">
																		<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">오답2</p>
																	</div>
																	<div className="w-[140px] flex items-center px-2 py-3 shrink-0">
																		<p className="text-[14px] font-semibold leading-[1.5] text-[#4c5561]">오답3</p>
																	</div>
																</div>
																{/* 테이블 행 */}
																{course.quizData.map((quiz) => (
																	<div key={quiz.id} className="border-t border-[#dee1e6] h-[48px] flex relative shrink-0 w-full">
																		<div className="content-stretch flex h-[48px] items-start overflow-clip relative rounded-[inherit] w-full">
																			<div className="w-[48px] border-r border-[#dee1e6] flex items-center justify-center px-2 py-3 shrink-0">
																				<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027]">{quiz.number}</p>
																			</div>
																			<div className="flex-1 border-r border-[#dee1e6] flex items-center px-2 py-3 shrink-0">
																				<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.question}</p>
																			</div>
																			<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3 shrink-0">
																				<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.correctAnswer}</p>
																			</div>
																			<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3 shrink-0">
																				<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.wrongAnswer1}</p>
																			</div>
																			<div className="w-[140px] border-r border-[#dee1e6] flex items-center px-2 py-3 shrink-0">
																				<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.wrongAnswer2}</p>
																			</div>
																			<div className="w-[140px] flex items-center px-2 py-3 shrink-0">
																				<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] truncate">{quiz.wrongAnswer3}</p>
																			</div>
																		</div>
																	</div>
																))}
															</div>
														</div>
													</div>
												) : (
													<div className="h-[64px] flex items-center justify-center">
														<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
															등록된 학습 평가 문제가 없습니다.
														</p>
													</div>
												)}
											</div>
										</div>
									</div>
								</div>

								{/* Footer 버튼 */}
								<div className="flex gap-[12px] items-center justify-end">
									<button
										type="button"
										onClick={handleDeleteClick}
										className="bg-[#fef2f2] h-[48px] rounded-[10px] px-2 flex items-center justify-center min-w-[80px] cursor-pointer hover:bg-[#fae6e6] transition-colors"
									>
										<p className="text-[16px] font-semibold leading-[1.5] text-[#f64c4c]">삭제</p>
									</button>
									<button
										type="button"
										onClick={async () => {
											// 현재 강좌 데이터를 sessionStorage에 저장
											if (course && params?.id) {
												try {
													// API에서 원본 강좌 데이터 가져오기
													const response = await apiService.getLectures();
													const lectures = Array.isArray(response.data) 
														? response.data 
														: response.data?.items || response.data?.lectures || response.data?.data || [];
													const lectureData = lectures.find((l: any) => String(l.id || l.lectureId) === params.id);
													
													if (lectureData) {
														// sessionStorage에 원본 데이터 저장
														sessionStorage.setItem('selectedLecture', JSON.stringify(lectureData));
													}
													router.push(`/admin/lessons/${params.id}/edit`);
												} catch (error) {
													console.error('강좌 데이터 가져오기 실패:', error);
													// 실패해도 수정 페이지로 이동
													router.push(`/admin/lessons/${params.id}/edit`);
												}
											}
										}}
										className="bg-[#f1f3f5] h-[48px] rounded-[10px] px-4 flex items-center justify-center min-w-[114px] cursor-pointer hover:bg-[#e5e7eb] transition-colors"
									>
										<p className="text-[16px] font-semibold leading-normal text-normal">수정하기</p>
									</button>
								</div>
							</div>
						</div>
					</main>
				</div>
			</div>

		{/* 삭제 확인 모달 */}
		{isDeleteModalOpen && (
			<div className="fixed inset-0 z-[60] flex items-center justify-center">
				<div 
					className="absolute inset-0 bg-black/40"
					onClick={handleDeleteCancel}
					aria-hidden="true"
				/>
				<div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[500px]">
					<div className="flex flex-col gap-[16px] items-start justify-center w-full">
						<div className="flex gap-[8px] items-start w-full">
							<p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
								강좌를 삭제하시겠습니까?
							</p>
						</div>
						<div className="flex gap-[8px] items-start w-full">
							<div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
								<p className="mb-0">삭제 버튼을 누르면 강좌 정보가 삭제됩니다.</p>
								<p>정말 삭제하시겠습니까?</p>
							</div>
						</div>
					</div>
					<div className="flex gap-[8px] items-center justify-end shrink-0">
						<button
							type="button"
							onClick={handleDeleteCancel}
							className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors"
						>
							<p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
								취소
							</p>
						</button>
						<button
							type="button"
							onClick={handleDeleteConfirm}
							disabled={isDeleting}
							className="bg-[#f64c4c] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e63939] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
						>
							<p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
								{isDeleting ? '삭제 중...' : '삭제'}
							</p>
						</button>
					</div>
				</div>
			</div>
		)}

		{/* 삭제 완료 토스트 */}
		{showToast && (
			<div className="fixed right-[60px] bottom-[60px] z-50">
				<div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
					<div className="relative shrink-0 w-[16.667px] h-[16.667px]">
						<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
							<circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
							<path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
						</svg>
					</div>
					<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
						강좌가 삭제되었습니다.
					</p>
				</div>
			</div>
		)}
	</div>
	);
}

