'use client';

import { useRouter } from 'next/navigation';
import PaperClipSvg from '../svgs/paperclipsvg';

type NoticeRow = {
  id: number;
  title: string;
  date: string;
  views: number;
  writer: string;
  hasAttachment?: boolean;
};

const rows: NoticeRow[] = [
  {
    id: 2,
    title: '공지사항 제목이 노출돼요',
    date: '2025-09-10',
    views: 1230,
    writer: '문지호',
  },
  {
    id: 1,
    title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
    date: '2025-06-28',
    views: 594,
    writer: '문지호',
    hasAttachment: true,
  },
];

export default function NoticesPage() {
  const router = useRouter();

  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) => (
                  <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]">
                      {r.id}
                    </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>
  );
}