'use client';

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

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

export default function ResourceDetailPage() {
  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);

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

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

  if (error || !resource) {
    return (
      <div className="w-full bg-white">
        <div className="flex justify-center">
          <div className="w-full max-w-[1440px]">
            <div className="h-[100px] flex items-center gap-3 px-8">
              <Link
                href="/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 px-8 pb-8">
              <p className="text-[16px] font-medium text-[#333c47]">
                {error || '학습 자료를 찾을 수 없습니다.'}
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const item = resource;

  return (
    <div className="w-full bg-white">
      <div className="flex justify-center">
        <div className="w-full max-w-[1440px]">
          {/* 상단 타이틀 */}
          <div className="h-[100px] flex items-center gap-3 px-8">
            <Link
              href="/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>

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

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

              {/* 본문 */}
              <div className="p-8">
                <div className="text-[15px] leading-normal text-[#333C47] space-y-2">
                  {item.content && item.content.length > 0 ? (
                    item.content.map((p, idx) => (
                      <p key={idx} className="m-0">
                        {p}
                      </p>
                    ))
                  ) : (
                    <p className="m-0 text-[#8C95A1]">내용이 없습니다.</p>
                  )}
                </div>
              </div>

              {/* 첨부 파일 */}
              {attachments.length > 0 && (
                <div className="p-8 pt-0">
                  <div className="mb-2 text-[15px] font-semibold text-[#6C7682]">
                    첨부 파일
                  </div>
                  {attachments.map((f, idx) => (
                    <div
                      key={idx}
                      className="bg-white border border-[#DEE1E6] h-[64px] rounded-[6px] flex items-center gap-3 px-[17px]"
                    >
                      <div className="text-[#8C95A1]">
                        <PaperClipSvg width={20} height={20} />
                      </div>
                      <div className="flex-1 flex items-center gap-2 min-w-0">
                        <span className="text-[15px] text-[#1B2027] truncate">
                          {f.name}
                        </span>
                        {f.size && (
                          <span className="text-[13px] text-[#8C95A1] whitespace-nowrap">
                            {f.size}
                          </span>
                        )}
                      </div>
                      <button
                        type="button"
                        onClick={() => handleDownload(f.fileKey, f.url, f.name)}
                        className="h-8 px-4 rounded-[6px] border border-[#8C95A1] text-[13px] text-[#4C5561] inline-flex items-center gap-1 hover:bg-[#F9FAFB] cursor-pointer"
                      >
                        <DownloadIcon width={16} height={16} className="text-[#4C5561]" />
                        다운로드
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}