'use client'

import Answer from './Answer'
import { useInquiry } from '@/hooks/useInquiry'
import { useParams, useRouter } from 'next/navigation'
import { useSessionStore } from '@/store/session'

export default function Detail() {
  const params = useParams()
  const id = params.id

  const { inquiryDetail, downloadFile, commonCodeList } = useInquiry(Number(id), false)
  const router = useRouter()

  const { session } = useSessionStore()

  const isBuilderOrPartner = session?.role === 'Builder' || session?.role === 'Partner'

  return (
    <>
      <div className="inquiry-frame">
        <div className="inquiry-detail-wrap">
          <div className="inquiry-detail-badge">
            <div className={`badge ${inquiryDetail?.answerYn === 'Y' ? 'orange' : 'blue'} block`}>
              {inquiryDetail?.answerYn === 'Y' ? '回答完了' : '回答待ち'}
            </div>
          </div>
          <div className="inquiry-detail-data-table">
            <table className="sale-data-table">
              <colgroup>
                <col style={{ width: '80px' }} />
                <col />
              </colgroup>
              <tbody>
                <tr>
                  <th>登録日</th>
                  <td>{inquiryDetail?.regDt.split(' ')[0]}</td>
                </tr>
                <tr>
                  <th>顧客名</th>
                  <td>
                    {session?.userNm} {session?.builderNm ? `[${session?.builderNm}]` : ''}
                  </td>
                </tr>
                <tr>
                  <th>販売店</th>
                  <td>{isBuilderOrPartner ? '-' : inquiryDetail?.storeNm}</td>
                </tr>
                <tr>
                  <th>E-mail</th>
                  <td>{inquiryDetail?.regEmail ? inquiryDetail?.regEmail : '-'}</td>
                </tr>
                <tr>
                  <th>名前</th>
                  <td>{inquiryDetail?.regUserNm}</td>
                </tr>
                <tr>
                  <th>お問い合わせ</th>
                  <td>{inquiryDetail?.regUserTelNo ? inquiryDetail?.regUserTelNo : '-'}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="inquiry-detail-data">
            <div className="inquiry-detail-category">
              <span>{commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsLrgCd)?.name}</span>
              <span>{commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsMidCd)?.name}</span>
              <span>{commonCodeList.find((code) => code.code === inquiryDetail?.qnaClsSmlCd)?.name}</span>
            </div>
            <div className="inquiry-detail-tit">{inquiryDetail?.qstTitle}</div>
            <div className="inquiry-detail-txt">{inquiryDetail?.qstContents}</div>
          </div>
          <div className="file-list-wrap">
            <div className="file-list-tit">ファイル添付</div>
            <ul className="file-list">
              {inquiryDetail?.listFile?.map((file) => (
                <li className="file-item" key={file.fileNo}>
                  <button
                    className="file-item-bx"
                    onClick={() => {
                      downloadFile(Number(file.encodeFileNo), file.srcFileNm)
                    }}
                  >
                    <div className="file-item-name">{file.srcFileNm} </div>
                  </button>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {inquiryDetail?.answerYn === 'Y' && inquiryDetail && <Answer inquiryDetail={inquiryDetail} downloadFile={downloadFile} />}

        <div className="sale-edit-btn">
          <button className="btn-frame n-blue icon" onClick={() => router.push('/inquiry/list')}>
            リスト<i className="btn-arr"></i>
          </button>
        </div>
      </div>
    </>
  )
}