'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 { Notice } from '@/app/admin/notices/mockData';

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

export default function AdminNoticeDetailPage() {
  const params = useParams();
  const router = useRouter();
  const [notice, setNotice] = useState<Notice | null>(null);
  const [attachments, setAttachments] = useState<Attachment[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

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

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

        // API 응답 데이터를 Notice 형식으로 변환
        const transformedNotice: Notice = {
          id: data.id || data.noticeId || 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 || '',
            size: att.size || att.fileSize || '',
            url: att.url || att.downloadUrl,
            fileKey: att.fileKey || att.key || att.fileId,
          })));
        } else if (transformedNotice.hasAttachment && data.attachment) {
          // 단일 첨부파일인 경우
          setAttachments([{
            name: data.attachment.name || 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 (!transformedNotice.title) {
          throw new Error('공지사항을 찾을 수 없습니다.');
        }

        setNotice(transformedNotice);
      } catch (err) {
        console.error('공지사항 조회 오류:', err);
        setError('공지사항을 불러오는 중 오류가 발생했습니다.');
      } finally {
        setLoading(false);
      }
    }

    fetchNotice();
  }, [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="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 || !notice || !notice.content || notice.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/notices"
                    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/notices"
                  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]">
                          {notice.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]">{notice.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]">
                              {notice.date.includes('T') 
                                ? new Date(notice.date).toISOString().split('T')[0]
                                : notice.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]">{notice.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]">
                      {notice.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={async () => {
                      if (!confirm('정말 삭제하시겠습니까?')) {
                        return;
                      }

                      if (!params?.id) {
                        alert('공지사항 ID를 찾을 수 없습니다.');
                        return;
                      }

                      try {
                        setIsDeleting(true);
                        await apiService.deleteNotice(params.id);
                        alert('공지사항이 삭제되었습니다.');
                        router.push('/admin/notices');
                      } catch (err) {
                        console.error('공지사항 삭제 오류:', err);
                        const errorMessage = err instanceof Error ? err.message : '공지사항 삭제에 실패했습니다.';
                        alert(errorMessage);
                      } finally {
                        setIsDeleting(false);
                      }
                    }}
                    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">
                      {isDeleting ? '삭제 중...' : '삭제'}
                    </span>
                  </button>
                  <button
                    type="button"
                    onClick={() => router.push(`/admin/notices/${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>
    </div>
  );
}

