import PrgSection from './PrgSection'

type ProgressDetail = Record<string, any>

const pmChecked = (method: string | undefined, code: string) => {
  const m = method || 'transfer'
  if (code === 'transfer') return m === 'transfer' || m === '계좌'
  if (code === 'card') return m === 'card' || m === '카드'
  if (code === 'giro' || code === 'paper') return m === 'giro' || m === 'paper' || m === '지로'
  if (code === 'phone' || code === 'telephone') return m === 'phone' || m === 'telephone' || m === '전화납부'
  return false
}

/** 업무 진행 팝업 상단 read-only 섹션 */
export default function ReceptionProgressReadOnly({ data }: { data: ProgressDetail | null }) {
  if (!data) return null
  const customer = data.customer || {}
  const payment = data.payment || data.paymentCard || data.paymentTransfer || {}
  const product = data.product || {}
  const gift = data.gift || {}
  const reception = data.reception || data
  const paymentMethod = payment.method || reception.paymentMethod || reception.paymentType
  const productType = product.productType || reception.productType || 'e01'
  const ctype = customer.type || reception.customerType || 'public'
  const amount = Number(product.price ?? reception.amount ?? 0)

  return (
    <>
      <PrgSection title="영업점 정보">
        <table className="prg-table">
          <tbody>
            <tr>
              <th>영업점명</th>
              <td>{data.branchOfficeName || reception.branch || '-'}</td>
              <th>연락처</th>
              <td>{[data.branchPhone, data.branchTel, reception.branchPhone].filter(Boolean).join(', ') || '-'}</td>
            </tr>
          </tbody>
        </table>
      </PrgSection>

      <PrgSection title="고객정보">
        <div className="prg-inline" style={{ justifyContent: 'center', marginBottom: 8 }}>
          <label className="prg-chk"><input type="radio" readOnly checked={ctype === 'public'} /> 개인</label>
          <label className="prg-chk"><input type="radio" readOnly checked={ctype === 'company'} /> 사업자</label>
          <label className="prg-chk"><input type="radio" readOnly checked={ctype === 'foreigner'} /> 외국인</label>
        </div>
        <table className="prg-table">
          <tbody>
            <tr>
              <th>고객명</th>
              <td>{customer.name || reception.customerName || '-'}</td>
              <th>포스트잇</th>
              <td>{customer.postIt || reception.postIt || ''}</td>
            </tr>
            {(customer.postAdd || reception.postAdd) && (
              <tr>
                <th>추가메모</th>
                <td colSpan={3}>{customer.postAdd || reception.postAdd}</td>
              </tr>
            )}
            <tr>
              <th>식별번호</th>
              <td>{customer.ssid || reception.identifyNumber || ''}</td>
              <th>고객유형</th>
              <td>{ctype === 'company' ? '사업자' : ctype === 'foreigner' ? '외국인' : '개인'}</td>
            </tr>
            <tr>
              <th>휴대전화</th>
              <td>{customer.phone || reception.phone || '-'}</td>
              <th>유선전화</th>
              <td>{customer.tel || reception.tel || ''}</td>
            </tr>
            <tr>
              <th>이메일</th>
              <td colSpan={3}>{customer.email || reception.email || ''}</td>
            </tr>
            <tr>
              <th>주소</th>
              <td colSpan={3}>
                {[customer.zipcode || reception.zipcode ? `[${customer.zipcode || reception.zipcode}]` : '',
                  customer.address || reception.address,
                  customer.addressDetail || reception.addressDetail].filter(Boolean).join(' ') || '-'}
              </td>
            </tr>
            {(customer.sido || reception.region) && (
              <tr>
                <th>지역</th>
                <td colSpan={3}>{customer.sido || reception.region}</td>
              </tr>
            )}
          </tbody>
        </table>
      </PrgSection>

      <PrgSection title="결제납입정보">
        <table className="prg-table">
          <tbody>
            <tr>
              <th>결제방법</th>
              <td colSpan={3}>
                <label className="prg-chk"><input type="radio" readOnly checked={pmChecked(paymentMethod, 'transfer')} /> 자동이체</label>
                <label className="prg-chk"><input type="radio" readOnly checked={pmChecked(paymentMethod, 'card')} /> 카드</label>
                <label className="prg-chk"><input type="radio" readOnly checked={pmChecked(paymentMethod, 'giro')} /> 지로</label>
                <label className="prg-chk"><input type="radio" readOnly checked={pmChecked(paymentMethod, 'phone')} /> 전화번호요금통합</label>
              </td>
            </tr>
            {(payment.name || payment.bank || payment.cardCompany) && (
              <>
                <tr>
                  <th>납입자명</th>
                  <td>{payment.name || ''}</td>
                  <th>주민번호</th>
                  <td>{payment.ssid || ''}</td>
                </tr>
                {pmChecked(paymentMethod, 'card') ? (
                  <>
                    <tr>
                      <th>카드사</th>
                      <td>{payment.cardCompany || ''}</td>
                      <th>유효기간</th>
                      <td>{[payment.cardYear, payment.cardMonth].filter(Boolean).join('/')}</td>
                    </tr>
                    <tr>
                      <th>카드번호</th>
                      <td colSpan={3}>{payment.cardNumber || ''}</td>
                    </tr>
                  </>
                ) : pmChecked(paymentMethod, 'transfer') ? (
                  <tr>
                    <th>은행</th>
                    <td>{payment.bank || ''}</td>
                    <th>계좌번호</th>
                    <td>{payment.accountNumber || ''}</td>
                  </tr>
                ) : null}
              </>
            )}
          </tbody>
        </table>
      </PrgSection>

      <PrgSection title="상품 정보">
        <table className="prg-table">
          <tbody>
            <tr>
              <th>통신사</th>
              <td colSpan={3}>{data.ispName || reception.ispName || reception.carrier || '-'}</td>
            </tr>
            <tr>
              <th>상품종류</th>
              <td colSpan={3}>
                <label className="prg-chk"><input type="radio" readOnly checked={productType === 'e01' || (!productType && reception.productCategory === '인터넷')} /> 인터넷</label>
                <label className="prg-chk"><input type="radio" readOnly checked={productType === 'e02' || reception.productCategory === '전화'} /> 전화</label>
                <label className="prg-chk"><input type="radio" readOnly checked={productType === 'e03' || reception.productCategory === 'TV'} /> TV</label>
              </td>
            </tr>
            <tr>
              <th>{productType === 'e02' ? '전화' : productType === 'e03' ? 'TV' : '인터넷'}</th>
              <td colSpan={3} style={{ padding: 4 }}>
                <table className="prg-table" style={{ margin: 0 }}>
                  <tbody>
                    <tr>
                      <th>상품</th>
                      <td>{data.productName || product.productName || product.name || reception.productName || '-'}</td>
                    </tr>
                    <tr>
                      <th>약정</th>
                      <td>{data.agreementName || reception.agreementName || '-'}</td>
                    </tr>
                    <tr>
                      <th>이벤트</th>
                      <td>{(data.eventNames || []).join(', ') || '-'}</td>
                    </tr>
                    <tr>
                      <th>월사용요금</th>
                      <td>{amount.toLocaleString()} 원</td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <th>총 요금</th>
              <td colSpan={3}>{amount.toLocaleString()} 원</td>
            </tr>
            <tr>
              <th>할인혜택</th>
              <td colSpan={3}>-</td>
            </tr>
            <tr>
              <th>설치희망일자</th>
              <td>{reception.openDate || '-'}</td>
              <th>연락처</th>
              <td>{reception.progressStatus || '-'}</td>
            </tr>
          </tbody>
        </table>
      </PrgSection>

      {(gift.status || gift.category || reception.giftStatus) && (
        <PrgSection title="사은품 정보">
          <table className="prg-table">
            <tbody>
              <tr>
                <th>사은품분류</th>
                <td>{gift.category || reception.giftCategory || '-'}</td>
                <th>진행상황</th>
                <td>{gift.status || reception.giftStatus || '-'}</td>
              </tr>
              <tr>
                <th>지급처</th>
                <td>{gift.place || reception.giftPlace || '-'}</td>
                <th>지급일</th>
                <td>{gift.giftDate || reception.giftDate || '-'}</td>
              </tr>
            </tbody>
          </table>
        </PrgSection>
      )}

      {(data.etc?.memo || reception.memo) && (
        <PrgSection title="기타 정보">
          <table className="prg-table">
            <tbody>
              <tr>
                <th>메모</th>
                <td colSpan={3} style={{ whiteSpace: 'pre-wrap' }}>{data.etc?.memo || reception.memo}</td>
              </tr>
            </tbody>
          </table>
        </PrgSection>
      )}
    </>
  )
}
