'use client';

import { useRouter } from 'next/navigation';
import PaperClipSvg from '../svgs/paperclipsvg';
import { MOCK_NOTICES } from '../admin/notices/mockData';

export default function NoticesPage() {
  const router = useRouter();
  
  // 날짜 내림차순 정렬 (최신 날짜가 먼저)
  const rows = [...MOCK_NOTICES].sort((a, b) => b.date.localeCompare(a.date));

  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 px-8">
            <h1 className="m-0 text-[24px] font-bold leading-[1.5] text-[#1B2027]">
              공지사항
            </h1>
          </div>

          {/* 본문 영역 */}
          <section className="px-8 pb-8">
            {/* 총 건수 */}
            <div className="h-10 flex items-center">
              <p className="m-0 text-[15px] font-medium leading-[1.5] text-[#333C47]">
                총 <span className="text-[#384FBF]">{rows.length}</span>건
              </p>
            </div>

            {/* 표 */}
            <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
              {/* 헤더 */}
              <div className="grid grid-cols-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
                <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
                  번호
                </div>
                <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
                  제목
                </div>
                <div className="flex items-center px-4 border-r border-[#DEE1E6]">
                  게시일
                </div>
                <div className="flex items-center px-4 border-r border-[#DEE1E6]">
                  조회수
                </div>
                <div className="flex items-center px-4">작성자</div>
              </div>

              {/* 바디 */}
              <div>
                {rows.map((r, index) => {
                  // 번호는 정렬된 목록에서의 순서
                  const noticeNumber = rows.length - index;
                  return (
                    <div
                      key={r.id}
                      role="button"
                      tabIndex={0}
                      onClick={() => router.push(`/notices/${r.id}`)}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                          e.preventDefault();
                          router.push(`/notices/${r.id}`);
                        }
                      }}
                      className={[
                        'grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer',
                      ].join(' ')}
                    >
                      <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
                        {noticeNumber}
                      </div>
                    <div
                      className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
                      title={r.title}
                    >
                      {r.title}
                      {r.hasAttachment && (
                        <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
                      )}
                    </div>
                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
                      {r.date}
                    </div>
                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
                      {r.views.toLocaleString()}
                    </div>
                    <div className="flex items-center px-4">{r.writer}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}