import type { ReactNode } from 'react'
import { useChatInitStore } from '@/features/chat/stores/useChatInitStore'

// 협상 유의사항 및 서비스 이용 방법 안내 — 팝업 2종(자동 안내/메뉴 가이드)이 공유하는 본문.
// VAT/배송비 문구는 채팅 init 메타(useChatInitStore)를 읽어 상품별로 동적 표시한다.
// break-keep: 한국어 단어가 중간에서 잘려 줄바꿈되지 않도록 한다.
const textStyle = 'text-[17px] font-normal leading-[150%] tracking-[-0.34px] text-neutral-90 break-keep'

function Bullet({ children }: { children: ReactNode }) {
  return (
    <div className="flex items-start py-[6px]">
      <p className="ml-[8px] mr-[6px] flex-shrink-0">•</p>
      <div className={`${textStyle} flex-1`}>{children}</div>
    </div>
  )
}

export function GuideContent() {
  const { item_vat_yn, item_delivery_fee_yn } = useChatInitStore()
  // init 미로드/값 없음 → 보수적 기본값 (KT-NEGOWIZ 와 동일한 폴백 규칙)
  const vat = item_vat_yn || 'VAT별도'
  const deliveryFee = item_delivery_fee_yn || '배송비별도'

  return (
    <div className="flex w-full flex-col">
      <div className="headline-3 mb-10 break-keep text-center text-neutral-90">
        협상 유의 사항 및 서비스 이용 방법 안내
      </div>

      <div className="flex flex-col items-start">
        <div className={`${textStyle} mb-2`}>
          협상과 관련하여 다음 사항을 참고하여 견적에 참여해 주시기 바랍니다.
        </div>

        <Bullet>
          협상 개시는&nbsp;
          <span className="font-bold">Negosium 시스템의 협상 참여 버튼을 클릭하는 순간부터 시작</span>
          됩니다.
        </Bullet>

        <Bullet>
          부여된 협상 시간에&nbsp;
          <span className="font-bold">
            응찰하지 않는 경우, 협상 참여의사가 없는 것으로 간주하여 재견적으로 진행
          </span>
          될 수 있습니다.
        </Bullet>

        <Bullet>
          협상에 입력되는 모든 가격은&nbsp;
          <span className="font-bold text-negative">
            {vat} 및 {deliveryFee}
          </span>
          &nbsp;기준이며,&nbsp;
          <span className="font-bold">
            할인을 요청하는 경우 기존 공급가격에 할인율이 적용된 가격으로 환산
          </span>
          되어 제시됩니다.
        </Bullet>

        <Bullet>
          본 협상 결과에 대해서는 협상자와 협상대상자 간의 비밀 유지 조건으로 진행되고, 협상에서
          얻어진 결과나 내용에 대해서는 당사자를 제외하고 제 3자에 공유할 수 없으며, 비밀 유지를
          전제로 진행됩니다.
        </Bullet>

        <Bullet>
          협상이 종결되면 특별한 사유 없이 취소 변경이 불가하니, 신중하게 협상에 참여해 주시기
          바랍니다.
        </Bullet>

        <Bullet>안내된 사항 외 부분은 기존 견적 프로세스와 동일한 부분 유의 바랍니다.</Bullet>
      </div>
    </div>
  )
}

// 하단 문의 안내 박스
export function GuideContactBox() {
  return (
    <div className="flex w-full flex-col items-center gap-2 rounded-[16px] bg-neutral-10 p-6">
      <div className={`${textStyle} text-center`}>
        기타 협상과정에서 궁금한 사항이나 문의하실 사항은 아래의 연락처로 상담을 부탁드립니다.
      </div>
      {/* textStyle 의 font-normal 과 같은 요소에서 충돌하지 않도록 bold 는 별도 조합으로 준다 */}
      <div className="break-keep text-center text-[17px] font-bold leading-[150%] tracking-[-0.34px] text-neutral-90">
        헬프데스크 010-0000-0000, 이메일: o2odev@o2o.kr
      </div>
    </div>
  )
}