'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: '15%'}}/>
            </colgroup>
            <thead>
              <tr>
                <th>구분</th>
                <th>Depth</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="t-center">2024-09-05</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 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="t-center">2024-10-11</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="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="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="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="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="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="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="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="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="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="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="t-center">2024-10-14</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  )
}