'use client';

import { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import Link from 'next/link';
import AdminSidebar from '@/app/components/AdminSidebar';
import BackCircleSvg from '@/app/svgs/backcirclesvg';
import DownloadIcon from '@/app/svgs/downloadicon';
import PaperClipSvg from '@/app/svgs/paperclipsvg';
import apiService from '@/app/lib/apiService';
import type { Resource } from '@/app/admin/resources/mockData';
import NoticeDeleteModal from '@/app/admin/notices/NoticeDeleteModal';

type Attachment = {
  name: string;
  size: string;
  url?: string;
  fileKey?: string;
};

export default function AdminResourceDetailPage() {
  const params = useParams();
  const router = useRouter();
  const [resource, setResource] = useState<Resource | null>(null);
  const [attachments, setAttachments] = useState<Attachment[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [showToast, setShowToast] = useState(false);

  useEffect(() => {
    async function fetchResource() {
      if (!params?.id) return;

      try {
        setLoading(true);
        setError(null);
        
        const response = await apiService.getLibraryItem(params.id);
        const data = response.data;

        // API 응답 데이터를 Resource 형식으로 변환
        const transformedResource: Resource = {
          id: data.id || data.resourceId || Number(params.id),
          title: data.title || '',
          date: data.date || data.createdAt || data.createdDate || new Date().toISOString().split('T')[0],
          views: data.views || data.viewCount || 0,
          writer: data.writer || data.author || data.createdBy || '관리자',
          content: data.content 
            ? (Array.isArray(data.content) 
                ? data.content 
                : typeof data.content === 'string' 
                  ? data.content.split('\n').filter((line: string) => line.trim())
                  : [String(data.content)])
            : [],
          hasAttachment: data.hasAttachment || data.attachment || false,
        };

        // 첨부파일 정보 처리
        if (data.attachments && Array.isArray(data.attachments)) {
          setAttachments(data.attachments.map((att: any) => ({
            name: att.name || att.fileName || att.filename || '',
            size: att.size || att.fileSize || '',
            url: att.url || att.downloadUrl,
            fileKey: att.fileKey || att.key || att.fileId,
          })));
        } else if (transformedResource.hasAttachment && data.attachment) {
          // 단일 첨부파일인 경우
          setAttachments([{
            name: data.attachment.name || data.attachment.fileName || data.attachment.filename || '첨부파일',
            size: data.attachment.size || data.attachment.fileSize || '',
            url: data.attachment.url || data.attachment.downloadUrl,
            fileKey: data.attachment.fileKey || data.attachment.key || data.attachment.fileId,
          }]);
        }

        if (!transformedResource.title) {
          throw new Error('학습 자료를 찾을 수 없습니다.');
        }

        setResource(transformedResource);
      } catch (err) {
        console.error('학습 자료 조회 오류:', err);
        setError('학습 자료를 불러오는 중 오류가 발생했습니다.');
      } finally {
        setLoading(false);
      }
    }

    fetchResource();
  }, [params?.id]);

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

  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('파일 다운로드에 실패했습니다.');
      }
    }
  };

  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">
                <div className="h-[100px] flex items-center justify-center px-[32px]">
                  <p className="text-[16px] font-medium text-[#333c47]">로딩 중...</p>
                </div>
              </div>
            </main>
          </div>
        </div>
      </div>
    );
  }

  if (error || !resource || !resource.content || resource.content.length === 0) {
    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 gap-[10px] px-[32px]">
                  <Link
                    href="/admin/resources"
                    aria-label="뒤로 가기"
                    className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline"
                  >
                    <BackCircleSvg width={32} height={32} />
                  </Link>
                  <h1 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">
                    학습 자료 상세
                  </h1>
                </div>
                <div className="flex-1 flex items-center justify-center">
                  <p className="text-[16px] font-medium text-[#333c47]">
                    {error || '학습 자료를 찾을 수 없습니다.'}
                  </p>
                </div>
              </div>
            </main>
          </div>
        </div>
      </div>
    );
  }

  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 gap-[10px] px-[32px]">
                <Link
                  href="/admin/resources"
                  aria-label="뒤로 가기"
                  className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline shrink-0"
                >
                  <BackCircleSvg width={32} height={32} />
                </Link>
                <h1 className="m-0 text-[24px] font-bold leading-[1.5] text-[#1B2027]">
                  학습 자료 상세
                </h1>
              </div>

              {/* 카드 */}
              <section className="flex flex-col gap-[40px] px-[32px] py-[24px]">
                <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
                  {/* 헤더 */}
                  <div className="p-[32px]">
                    <div className="flex items-center justify-between">
                      <div className="flex flex-col gap-[8px]">
                        <h2 className="m-0 text-[20px] font-bold leading-[1.5] text-[#333C47]">
                          {resource.title}
                        </h2>
                        <div className="flex items-center gap-[16px] text-[13px] font-medium leading-[1.4]">
                          <div className="flex items-center gap-[8px]">
                            <span className="text-[#8C95A1]">작성자</span>
                            <span className="text-[#333C47]">{resource.writer}</span>
                          </div>
                          <div className="h-[16px] w-0 flex items-center justify-center">
                            <div className="h-0 w-[16px] border-t border-[#DEE1E6]" />
                          </div>
                          <div className="flex items-center gap-[8px]">
                            <span className="text-[#8C95A1]">게시일</span>
                            <span className="text-[#333C47]">
                              {resource.date.includes('T') 
                                ? new Date(resource.date).toISOString().split('T')[0]
                                : resource.date}
                            </span>
                          </div>
                          <div className="h-[16px] w-0 flex items-center justify-center">
                            <div className="h-0 w-[16px] border-t border-[#DEE1E6]" />
                          </div>
                          <div className="flex items-center gap-[8px]">
                            <span className="text-[#8C95A1]">조회수</span>
                            <span className="text-[#333C47]">{resource.views.toLocaleString()}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* 구분선 */}
                  <div className="h-px bg-[#DEE1E6] w-full" />

                  {/* 본문 및 첨부파일 */}
                  <div className="flex flex-col gap-[40px] p-[32px]">
                    {/* 본문 */}
                    <div className="text-[15px] font-normal leading-[1.5] text-[#333C47]">
                      {resource.content.map((p, idx) => (
                        <p key={idx} className="mb-0 leading-[1.5]">
                          {p}
                        </p>
                      ))}
                    </div>

                    {/* 첨부파일 섹션 */}
                    {attachments.length > 0 && (
                      <div className="flex flex-col gap-[24px] w-full">
                        <div className="flex flex-col gap-[8px] w-full">
                          <div className="flex items-center gap-[12px] h-[32px]">
                            <div className="flex items-center">
                              <p className="text-[15px] font-semibold leading-[1.5] text-[#6C7682] m-0">
                                첨부 파일
                              </p>
                            </div>
                          </div>
                          {attachments.map((attachment, idx) => (
                            <div
                              key={idx}
                              className="bg-white border border-[#DEE1E6] rounded-[6px] h-[64px] flex items-center gap-[12px] px-[17px] py-1 w-full"
                            >
                              <div className="size-[24px] shrink-0">
                                <PaperClipSvg width={24} height={24} className="text-[#333C47]" />
                              </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 m-0">
                                  {attachment.name}
                                </p>
                                <p className="text-[13px] font-normal leading-[1.4] text-[#8C95A1] shrink-0 m-0">
                                  {attachment.size}
                                </p>
                              </div>
                              <button
                                type="button"
                                onClick={() => handleDownload(attachment.fileKey, attachment.url, attachment.name)}
                                className="bg-white border border-[#8C95A1] rounded-[6px] h-[32px] flex items-center justify-center gap-[4px] px-[16px] py-[3px] shrink-0 hover:bg-[#F9FAFB] cursor-pointer"
                              >
                                <DownloadIcon width={16} height={16} className="text-[#4C5561]" />
                                <span className="text-[13px] font-medium leading-[1.4] text-[#4C5561]">
                                  다운로드
                                </span>
                              </button>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                {/* 버튼 영역 */}
                <div className="flex items-center justify-end gap-[12px]">
                  <button
                    type="button"
                    onClick={() => setIsDeleteModalOpen(true)}
                    disabled={isDeleting}
                    className="bg-[#FEF2F2] h-[48px] rounded-[10px] px-[8px] shrink-0 min-w-[80px] flex items-center justify-center hover:bg-[#FEE2E2] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    <span className="text-[16px] font-semibold leading-[1.5] text-[#F64C4C] text-center">
                      삭제
                    </span>
                  </button>
                  <button
                    type="button"
                    onClick={() => router.push(`/admin/resources/${params.id}/edit`)}
                    className="bg-[#F1F3F5] h-[48px] rounded-[10px] px-[16px] shrink-0 min-w-[90px] flex items-center justify-center hover:bg-[#E9ECEF] transition-colors"
                  >
                    <span className="text-[16px] font-semibold leading-[1.5] text-[#4C5561] text-center">
                      수정하기
                    </span>
                  </button>
                </div>
              </section>
            </div>
          </main>
        </div>
      </div>

      {/* 삭제 확인 모달 */}
      <NoticeDeleteModal
        open={isDeleteModalOpen}
        onClose={() => setIsDeleteModalOpen(false)}
        onConfirm={async () => {
          if (!params?.id) {
            alert('학습 자료 ID를 찾을 수 없습니다.');
            setIsDeleteModalOpen(false);
            return;
          }

          try {
            setIsDeleting(true);
            await apiService.deleteLibraryItem(params.id);
            setIsDeleteModalOpen(false);
            setShowToast(true);
            // 토스트 표시 후 목록 페이지로 이동
            setTimeout(() => {
              router.push('/admin/resources');
            }, 1500);
          } catch (err) {
            console.error('학습 자료 삭제 오류:', err);
            const errorMessage = err instanceof Error ? err.message : '학습 자료 삭제에 실패했습니다.';
            alert(errorMessage);
            setIsDeleteModalOpen(false);
          } finally {
            setIsDeleting(false);
          }
        }}
        isDeleting={isDeleting}
      />

      {/* 삭제 완료 토스트 */}
      {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>
  );
}