import { useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { SettlementAgencyBottomAgree } from '@/entities/additional-service/ui/settlement-agency-bottom-agree';
import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';

export const SettlementAgencyDetailPage = () => {
  const { navigate } = useNavigate();

  const [bottomAgreeOn, setBottomAgreeOn] = useState<boolean>(false);

  useSetHeaderTitle('정산대행');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.settlementAgency.manage);
  });
  
  const oncClickToOpenBottomAgree = () => {
    setBottomAgreeOn(true);
  };
  return (
    <>
      <main className="full-height">
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="pay-top">
              <div className="num-amount">
                <span className="amount">100,000,000원</span>
              </div>
              <div className="num-store">나이스테스트가맹점</div>
              <div className="num-day">2025.08.19</div>
              <div className="receipt-row">
                <button type="button" className="receipt-btn">
                  <span className="icon-24 download"></span>
                  <span>입금확인서</span>
                </button>
              </div>
            </div>

            <div className="detail-divider"></div>

            <div className="pay-detail">
              <div className="detail-title">정산 정보</div>
              <ul className="kv-list">
                <li className="kv-row">
                  <span className="k">정산ID</span>
                  <span className="v">AB25061012</span>
                </li>
                <li className="kv-row">
                  <span className="k">정산일</span>
                  <span className="v">2025.06.08</span>
                </li>
                <li className="kv-row">
                  <span className="k">정산 상태</span>
                  <span className="v">동의완료</span>
                </li>
                <li className="kv-row">
                  <span className="k">총 거래금액</span>
                  <span className="v">105,000,000 원</span>
                </li>
                <li className="kv-row bolder">
                  <span className="k">정산금액</span>
                  <span className="v">100,000,000원</span>
                </li>
              </ul>
              <div className="detail-divider"></div>
              <div className="detail-title">정산 매장 정보</div>
              <ul className="kv-list">
                <li className="kv-row">
                  <span className="k">정산매장 ID</span>
                  <span className="v">BACK01</span>
                </li>
                <li className="kv-row">
                  <span className="k">정산매장 명</span>
                  <span className="v">뺵다방3</span>
                </li>
                <li className="kv-row">
                  <span className="k">사업자 번호</span>
                  <span className="v">123456789</span>
                </li>
                <li className="kv-row">
                  <span className="k">수수료 정보</span>
                  <span className="v">3%, 반올림</span>
                </li>
                <li className="kv-row">
                  <span className="k">과세 여부</span>
                  <span className="v">과세, 반올림</span>
                </li>
                <li className="kv-row">
                  <span className="k">은행</span>
                  <span className="v">기업</span>
                </li>
                <li className="kv-row">
                  <span className="k">계좌번호</span>
                  <span className="v">110-12-12-11111</span>
                </li>
              </ul>
              <div className="detail-divider"></div>
              <div className="detail-title summary-amount divTop">
                <span className="amount-text states-17"> 상태 변경 이력</span>
                <button>
                  <img 
                    src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
                    alt="화살표"
                  />
                </button>
              </div>
              <div className="sd-history">
                <div className="sd-history-item">
                  <div className="left">
                    <div className="name">출금실패</div>
                    <div className="time">2025/04/15 10:00:00</div>
                  </div>
                  <div className="right">
                    <div className="reason">사유 : 지급 계좌오류</div>
                  </div>
                </div>
                <div className="sd-history-item">
                  <div className="left">
                    <div className="name">동의완료</div>
                    <div className="time">2025/04/10 10:00:00</div>
                  </div>
                  <div className="right">
                    <div className="reason">-</div>
                  </div>
                </div>
                <div className="sd-history-item">
                  <div className="left">
                    <div className="name">동의기한 초과</div>
                    <div className="time">2025/04/06 10:00:00</div>
                  </div>
                  <div className="right">
                    <div className="reason">-</div>
                  </div>
                </div>
              </div>
              <div className="apply-row">
                <button 
                  className="btn-50 btn-blue flex-1"
                  onClick={ () => oncClickToOpenBottomAgree() }
                >정산 동의/거절</button>
              </div>
            </div>
          </div>
        </div>
      </main>
      <SettlementAgencyBottomAgree
        bottomAgreeOn={ bottomAgreeOn }
        setBottomAgreeOn={ setBottomAgreeOn }
      ></SettlementAgencyBottomAgree>
    </>
  );
};