'use client'

import Link from 'next/link'
import { useEffect } from 'react'
import '@/styles/publishpage.scss'

export default function PublishPage() {
  useEffect(() => {
    const pageLength = document.querySelectorAll('.coding_stat_web').length

    const setCodingProcess = () => {
      let codingEndedWeb = 0

      document.querySelectorAll('.coding_stat_web').forEach((element) => {
        const codingStatWeb = element.textContent
        if (codingStatWeb === '완료') {
          codingEndedWeb += 1
          element.classList.add('final')
        }
      })

      const perCompleteWeb = parseInt((codingEndedWeb / pageLength) * 100)
      document.querySelector('.coding_summary_web').textContent = `진행률 [ ${codingEndedWeb} page / ${pageLength} page] ${perCompleteWeb}% 완료`
    }

    setCodingProcess()

    document.querySelectorAll('a').forEach((anchor) => {
      anchor.setAttribute('target', '_blank')
    })
  }, [])

  return (
    <>
      <div id="g_header">
        <h1>QCast Japanese</h1>
      </div>
      <div id="g_body">
        <div className="contents">
          <h3>Flie List</h3>
          <p className="guide_summary"></p>
          <ul className="mt-9">
            <li className="coding_summary_web"></li>
          </ul>
          <table className="guide_table">
            <colgroup>
              <col style={{ width: '15%' }} />
              <col style={{ width: '25%' }} />
              <col />
              <col style={{ width: '10%' }} />
              <col style={{ width: '10%' }} />
              <col style={{ width: '15%' }} />
            </colgroup>
            <thead>
              <tr>
                <th>구분</th>
                <th>Depth</th>
                <th>파일명</th>
                <th>퍼블리싱</th>
                <th>마크업 날짜</th>
                <th>비고</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="t-center">
                  <strong>공통</strong>
                </td>
                <td>
                  <strong className="title">Input 설정 모음</strong>
                </td>
                <td>
                  <Link href="/inputwrap" target="_blank">
                    inputwrap
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-09-05</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>셀렉트</strong>
                </td>
                <td>
                  <strong className="title">react-select</strong>
                </td>
                <td>
                  <Link href="/reactselect" target="_blank">
                    reactselect
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-09-05</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>React-Select</strong>
                </td>
                <td>
                  <strong className="title"></strong>
                </td>
                <td>
                  <Link href="/reactselect" target="_blank">
                    React-Select
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-17</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>그리드</strong>
                </td>
                <td>
                  <strong className="title"></strong>
                </td>
                <td>
                  <Link href="/grid" target="_blank">
                    Grid
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td></td>
                <td className="t-center">2024-09-05</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>CanvasPage</strong>
                </td>
                <td>
                  <strong className="title">
                    견적서 페이지 6탭 팝업 추가 및 퍼블 완 <br />
                    발전시뮬레이션 페이지 7탭 퍼블 완
                  </strong>
                </td>
                <td>
                  <Link href="/canvas" target="_blank">
                    CanvasPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>
                  <ul className='mb5'>
                    <li>2024-10-28</li>
                    <li>canvas-setting pop 수정</li>
                    <li>이미지 크기조절 pop 추가</li>
                  </ul>
                  <ul>
                    <li>2024-10-29</li>
                    <li>견적서 하단 테이블 변경</li>
                    <li>배치면 초기 설정 pop 이미지파일 업로드 추가</li>
                  </ul>
                </td>
                <td className="t-center">2024-10-28</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>MainPage</strong>
                </td>
                <td>
                  <strong className="title">메인</strong>
                </td>
                <td>
                  <Link href="/main" target="_blank">
                    MainPage
                  </Link>
                </td>
                <td className="coding_stat_web">
                  <span>비밀번호 변경 팝업 추가</span>
                </td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-10</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>MyProFilePage</strong>
                </td>
                <td>
                  <strong className="title">내정보 조회 팝업</strong>
                </td>
                <td>
                  <Link href="/myprofile" target="_blank">
                    MyProFile
                  </Link>
                </td>
                <td className="coding_stat_web">
                  <span></span>
                </td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-11</td>
              </tr>
              <tr>
                <td className="t-center" rowSpan={3}>
                  <strong>LoginPage</strong>
                </td>
                <td>
                  <strong className="title">로그인</strong>
                </td>
                <td>
                  <Link href="/login" target="_blank">
                    LoginPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-09-23</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">회원가입</strong>
                </td>
                <td>
                  <Link href="/login/signup" target="_blank">
                    SignUpPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-10</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">회원가입 완료</strong>
                </td>
                <td>
                  <Link href="/login/signupcomplete" target="_blank">
                    SignUpCompletePage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-10</td>
              </tr>
              <tr>
                <td className="t-center">
                  <strong>신규물건 등록</strong>
                </td>
                <td>
                  <strong className="title">신규물건 등록</strong>
                </td>
                <td>
                  <Link href="/management/newproduct" target="_blank">
                    NewProductPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-11</td>
              </tr>
              <tr>
                <td className="t-center" rowSpan={2}>
                  <strong>물품 및 도면 관리</strong>
                </td>
                <td>
                  <strong className="title">물건목록</strong>
                </td>
                <td>
                  <Link href="/management/productstate" target="_blank">
                    ProductStatePage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-09-24</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">물건정보</strong>
                </td>
                <td>
                  <Link href="/management/productinfo" target="_blank">
                    ProductInfoPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-11</td>
              </tr>
              <tr>
                <td className="t-center" rowSpan={3}>
                  <strong>커뮤니티</strong>
                </td>
                <td>
                  <strong className="title">공지사항</strong>
                </td>
                <td>
                  <Link href="/community/notice" target="_blank">
                    NoticePage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>2024-10-24</td>
                <td className="t-center">2024-10-14</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">FAQ</strong>
                </td>
                <td>
                  <Link href="/community/FAQ" target="_blank">
                    FAQPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'>2024-10-24</td>
                <td className="t-center">2024-10-14</td>
              </tr>
              <tr>
                <td>
                  <strong className="title">자료 다운로드</strong>
                </td>
                <td>
                  <Link href="/community/filedown" target="_blank">
                    FileDownPage
                  </Link>
                </td>
                <td className="coding_stat_web"></td>
                <td className='red al-c'></td>
                <td className="t-center">2024-10-14</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  )
}