import { useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment-detail-resend';
import { HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';

export const SmsPaymentNotificationPage = () => {
  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)

  useSetHeaderTitle('SMS 결제 통보');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(true);

  const onClickToShowDetail = () => {
    setBottomSmsPaymentDetailResendOn(true);
  };
  
  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <section className="summary-section no-border">
              <div className="credit-controls">
                <div>
                  <input 
                    className="credit-period"
                    type="text"
                    value="2025.06.01 ~ 2025.06.31"
                    readOnly={ true }
                  />
                  <button 
                    className="filter-btn"
                    aria-label="필터"
                  >
                    <img 
                      src={ IMAGE_ROOT + '/ico_setting.svg' }
                      alt="검색옵션"
                    />
                  </button>
                </div>
                <button 
                  className="download-btn"
                  aria-label="다운로드"
                >
                  <img 
                    src={ IMAGE_ROOT + '/ico_download.svg' }
                    alt="다운로드"
                  />
                </button>
              </div>
            </section>
            <section className="transaction-list">
              <div className="date-group">
                <div className="date-header">25.06.08(일)</div>
                <div 
                  className="transaction-item approved"
                  onClick={ () => onClickToShowDetail() }
                >
                  <div className="transaction-status">
                    <div className="status-dot blue"></div>
                  </div>
                  <div className="transaction-content">
                    <div className="transaction-title">김*환(7000)</div>
                    <div className="transaction-details">
                      <span>nictest01m</span>
                      <span className="separator">ㅣ</span>
                      <span>가상계좌 요청</span>
                    </div>
                  </div>
                  <div className="resend-label">재발송</div>
                </div>

                <div className="transaction-item refund">
                  <div className="transaction-status">
                    <div className="status-dot gray"></div>
                  </div>
                  <div className="transaction-content">
                    <div className="transaction-title">최*길(010333*****)</div>
                    <div className="transaction-details">
                      <span>nictest01m</span>
                      <span className="separator">ㅣ</span>
                      <span>가상계좌 요청+입금</span>
                    </div>
                  </div>
                  <div className="resend-label">재발송</div>
                </div>

                <div className="transaction-item approved">
                  <div className="transaction-status">
                    <div className="status-dot blue"></div>
                  </div>
                  <div className="transaction-content">
                    <div className="transaction-title">박*준(010333*****)</div>
                    <div className="transaction-details">
                      <span>nictest01m</span>
                      <span className="separator">ㅣ</span>
                      <span>가상계좌 요청+입금</span>
                    </div>
                  </div>
                  <div className="resend-label">재발송</div>
                </div>

                <div className="transaction-item refund">
                  <div className="transaction-status">
                    <div className="status-dot gray"></div>
                  </div>
                  <div className="transaction-content">
                    <div className="transaction-title">이*신(010333*****)</div>
                    <div className="transaction-details">
                      <span>nictest01m</span>
                      <span className="separator">ㅣ</span>
                      <span>가상계좌 요청</span>
                    </div>
                  </div>
                  <div className="resend-label">재발송</div>
                </div>

                <div className="transaction-item approved">
                    <div className="transaction-status">
                      <div className="status-dot blue"></div>
                    </div>
                    <div className="transaction-content">
                      <div className="transaction-title">김*환(010333*****)</div>
                      <div className="transaction-details">
                        <span>nictest01m</span>
                        <span className="separator">|</span>
                        <span>가상계좌 요청</span>
                      </div>
                    </div>
                    <div className="resend-label">재발송</div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </main>

      <SmsPaymentDetailResend
        bottomSmsPaymentDetailResendOn={ bottomSmsPaymentDetailResendOn }
        setBottomSmsPaymentDetailResendOn={ setBottomSmsPaymentDetailResendOn }
      ></SmsPaymentDetailResend>
    </>
  );
};