"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import Header from '../components/Header';
import logo from '../logo.svg';

const imgLine2 = "http://localhost:3845/assets/6ee8cf4ebb6bc2adb14aab8c9940b3002c20af35.svg";
const imgFooterLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";

export default function AnnouncementPage() {
    const router = useRouter();
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [announcements, setAnnouncements] = useState<any[]>([]);

    useEffect(() => {
        // 로그인 상태 확인
        const loginStatus = localStorage.getItem('isLoggedIn') === 'true';
        setIsLoggedIn(loginStatus);
        setIsLoading(false);

        // TODO: DB에서 공지사항 목록 가져오기
        // const fetchAnnouncements = async () => {
        //   const response = await fetch('/api/announcements');
        //   const data = await response.json();
        //   setAnnouncements(data);
        // };
        // fetchAnnouncements();
    }, []);

    if (isLoading) {
        return null; // 로딩 중
    }

    // 로그인되지 않았으면 로그인 페이지로 리다이렉트
    if (!isLoggedIn) {
        router.push('/login');
        return null;
    }

    return (
        <div className="bg-white relative min-h-screen w-full">
            {/* 헤더 */}
            <Header activePage="announcement" />

            {/* 구분선 */}
            <div className="absolute h-0 left-1/2 top-[150px] translate-x-[-50%] w-[1920px]">
                <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
                    <img alt="" className="block max-w-none size-full" src={imgLine2} />
                </div>
            </div>

            {/* 페이지 제목 */}
            <p className="absolute font-bold leading-[normal] left-[calc(18.75%-11.44px)] not-italic text-[#515151] text-[24px] text-nowrap top-[239px] whitespace-pre">
                공지사항 ({announcements.length}건)
            </p>

            {/* 테이블 컨테이너 */}
            <div className="absolute content-stretch flex flex-col items-start left-[calc(18.75%-7.44px)] top-[344px] w-[1330px]">
                {/* 테이블 헤더 */}
                <div className="bg-[rgba(235,247,255,0.5)] content-stretch flex h-[41px] items-center relative shrink-0 w-full">
                    <div className="content-stretch flex items-center relative shrink-0 w-full">
                        <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                            <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                <p className="leading-[normal]">번호</p>
                            </div>
                        </div>
                        <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                            <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                <p className="leading-[normal]">제목</p>
                            </div>
                        </div>
                        <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                            <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                <p className="leading-[normal]">게시일</p>
                            </div>
                        </div>
                        <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                            <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                <p className="leading-[normal]">작성자</p>
                            </div>
                        </div>
                        <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                            <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                                <p className="leading-[normal]">조회수</p>
                            </div>
                        </div>
                    </div>
                </div>

                {/* 테이블 내용 */}
                {announcements.length > 0 ? (
                    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full">
                        {announcements.map((announcement) => (
                            <div key={announcement.id} className="content-stretch flex items-center relative shrink-0 w-full border-[0.5px] border-[#b9b9b9] border-solid">
                                <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px]">
                                        {announcement.id}
                                    </p>
                                </div>
                                <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px]">
                                        {announcement.title}
                                    </p>
                                </div>
                                <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px]">
                                        {announcement.createdAt ? new Date(announcement.createdAt).toLocaleDateString('ko-KR') : '-'}
                                    </p>
                                </div>
                                <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px]">
                                        {announcement.author || '-'}
                                    </p>
                                </div>
                                <div className="basis-0 border-[0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                                    <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px]">
                                        {announcement.views || 0}
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                ) : (
                    <div className="content-stretch flex items-center justify-center relative shrink-0 w-full py-[40px] border-[0.5px] border-[#b9b9b9] border-solid">
                        <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#b9b9b9] text-[18px]">
                            등록된 공지사항이 없습니다.
                        </p>
                    </div>
                )}
            </div>

            {/* 푸터 */}
            <footer className="absolute bg-[#f7f7f7] box-border content-stretch flex flex-col gap-[10px] h-[225px] items-start left-0 px-[243px] py-[39px] top-[855px] w-[1920px]">
                <div className="content-stretch flex gap-[49px] items-center relative shrink-0">
                    <div className="h-[74px] relative shrink-0 w-[72px]">
                        <Image
                            src={logo}
                            alt="로고"
                            className="w-full h-full object-contain"
                            width={72}
                            height={74}
                        />
                    </div>
                    <div className="content-stretch flex flex-col gap-[5px] items-start relative shrink-0 w-[479px]">
                        <div className="content-stretch flex gap-[27px] items-center relative shrink-0 w-full">
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    이용 약관
                                </p>
                            </div>
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    개인정보처리방침
                                </p>
                            </div>
                            <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
                                <p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre">
                                    고객센터
                                </p>
                            </div>
                        </div>
                        <div className="box-border content-stretch flex flex-col font-medium gap-[10px] items-center justify-center leading-[normal] not-italic p-[10px] relative shrink-0 text-[#515151] text-[16px]">
                            <p className="relative shrink-0 w-[400px]">
                                (12345) 서울특별시 광진구 구의동 123-12(구의타워1)
                            </p>
                            <p className="relative shrink-0 w-[400px]">
                                문의: 1234-1234 (평일 09:00 ~ 18:00)
                            </p>
                            <p className="relative shrink-0 w-[400px]">
                                이메일: qwer1234@go.or.kr
                            </p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
}

