import { useState } from 'react';
import { useTranslation } from 'react-i18next';
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/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 { t } = useTranslation();
  const { navigate } = useNavigate();

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

  useSetHeaderTitle(t('additionalService.settlementAgency.title'));
  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>{t('additionalService.settlementAgency.depositConfirmation')}</span>
                </button>
              </div>
            </div>

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

            <div className="pay-detail">
              <div className="detail-title">{t('additionalService.settlementAgency.settlementInfo')}</div>
              <ul className="kv-list">
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.settlementId')}</span>
                  <span className="v">AB25061012</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.settlementDate')}</span>
                  <span className="v">2025.06.08</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.settlementStatus')}</span>
                  <span className="v">동의완료</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.totalTransactionAmount')}</span>
                  <span className="v">105,000,000 원</span>
                </li>
                <li className="kv-row bolder">
                  <span className="k">{t('additionalService.settlementAgency.settlementAmount')}</span>
                  <span className="v">100,000,000원</span>
                </li>
              </ul>
              <div className="detail-divider"></div>
              <div className="detail-title">{t('additionalService.settlementAgency.settlementStoreInfo')}</div>
              <ul className="kv-list">
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.settlementStoreId')}</span>
                  <span className="v">BACK01</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.settlementStoreName')}</span>
                  <span className="v">뺵다방3</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.businessNumber')}</span>
                  <span className="v">123456789</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.feeInfo')}</span>
                  <span className="v">3%, 반올림</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.taxStatus')}</span>
                  <span className="v">과세, 반올림</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.bank')}</span>
                  <span className="v">기업</span>
                </li>
                <li className="kv-row">
                  <span className="k">{t('additionalService.settlementAgency.accountNumber')}</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"> {t('additionalService.settlementAgency.statusChangeHistory')}</span>
                <button>
                  <img
                    src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
                    alt={t('settlement.arrow')}
                  />
                </button>
              </div>
              <div className="sd-history">
                <div className="sd-history-item">
                  <div className="left">
                    <div className="name">{t('additionalService.settlementAgency.withdrawalFailed')}</div>
                    <div className="time">2025/04/15 10:00:00</div>
                  </div>
                  <div className="right">
                    <div className="reason">{t('additionalService.settlementAgency.reason')} : {t('additionalService.settlementAgency.accountError')}</div>
                  </div>
                </div>
                <div className="sd-history-item">
                  <div className="left">
                    <div className="name">{t('additionalService.settlementAgency.agreementCompleted')}</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">{t('additionalService.settlementAgency.agreementExpired')}</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() }
                >{t('additionalService.settlementAgency.agreeOrReject')}</button>
              </div>
            </div>
          </div>
        </div>
      </main>
      <SettlementAgencyBottomAgree
        bottomAgreeOn={ bottomAgreeOn }
        setBottomAgreeOn={ setBottomAgreeOn }
      ></SettlementAgencyBottomAgree>
    </>
  );
};