import moment from 'moment';
import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { PATHS } from '@/shared/constants/paths';
import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation';
import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter';
import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box';
import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';

const requestStatusBtnGroup = [
  { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
  { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
  { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
  { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }
];

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


  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
  const [listItems, setListItems] = useState({});
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>('nictest001m');
  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
  const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
  const [minAmount, setMinAmount] = useState<number | string>();
  const [maxAmount, setMaxAmount] = useState<number | string>();


  useSetHeaderTitle('KEY-IN 결제');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);

  const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
  const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();

  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
  };

  const onClickToDownloadExcel = () => {
    // downloadExcel({
    //   mid,
    //   fromDate: '',
    //   toDate: '',
    //   paymentStatus: '',
    //   minAmount: 0,
    //   maxAmount: 0
    // }).then((rs) => {

    // });
  };

  const onClickToSort = (sort: SortByKeys) => {
    setSortBy(sort);
    // TODO : callList 구현
  };

  const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
    setTransactionStatus(val);
    // TODO : callList 구현
  };

  const onClickToNavigation = () => {
    navigate(PATHS.additionalService.keyInPayment.request)
  }

  useEffect(() => {
    // TODO : callList();
  }, []);

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <section className="summary-section">
              <div className="credit-controls">
                <div>
                  <input
                    className="credit-period"
                    type="text"
                    value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
                    readOnly={true}
                  />
                  <button
                    className="filter-btn"
                    aria-label="필터"
                  >
                    <img
                      src={IMAGE_ROOT + '/ico_setting.svg'}
                      alt="검색옵션"
                      onClick={() => onClickToOpenFilter()}
                    />
                  </button>
                </div>
                <button
                  className="download-btn"
                  aria-label="다운로드"
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
                    alt="다운로드"
                    onClick={() => onClickToDownloadExcel()}
                  />
                </button>
              </div>
            </section>

            <div className="filter-section">
              <SortOptionsBox
                sortBy={sortBy}
                onClickToSort={onClickToSort}
              ></SortOptionsBox>
              <div className="excrow">
                <div className="full-menu-keywords no-padding">
                  {
                    requestStatusBtnGroup.map((value, index) => (
                      <span
                        key={`key-service-code=${index}`}
                        className={`keyword-tag ${(transactionStatus === value.value) ? 'active' : ''}`}
                        onClick={() => onClickToTransactionStatus(value.value)}
                      >{value.name}</span>
                    ))
                  }
                </div>
              </div>
            </div>

            <section className="transaction-list">
              <div className="date-group">
                <div className="date-header">2025.06.08(일)</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">김*환(7000)</div>
                    <div className="transaction-details">
                      <span>20:00ㅣ승인</span>
                    </div>
                  </div>
                  <div className="transaction-amount">5,254,000원</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">최*길(7000)</div>
                    <div className="transaction-details">
                      <span>08:35ㅣ승인</span>
                    </div>
                  </div>
                  <div className="transaction-amount">23,845,000원</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">김*환(7000)</div>
                    <div className="transaction-details">
                      <span>20:00ㅣ승인</span>
                    </div>
                  </div>
                  <div className="transaction-amount">5,254,000원</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">김*환(7000)</div>
                    <div className="transaction-details">
                      <span>20:00ㅣ후취소</span>
                    </div>
                  </div>
                  <div className="transaction-amount">5,254,000원</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">최*길(7000)</div>
                    <div className="transaction-details">
                      <span>20:00ㅣ후취소</span>
                    </div>
                  </div>
                  <div className="transaction-amount">23,845,000원</div>
                </div>
              </div>
            </section>
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={() => onClickToNavigation()}
              >결제 신청</button>
            </div>
            <KeyInPaymentFilter
              filterOn={filterOn}
              setFilterOn={setFilterOn}
              mid={mid}
              startDate={startDate}
              endDate={endDate}
              transactionStatus={transactionStatus}
              minAmount={minAmount}
              maxAmount={maxAmount}
              setMid={setMid}
              setStartDate={setStartDate}
              setEndDate={setEndDate}
              setTransactionStatus={setTransactionStatus}
              setMinAmount={setMinAmount}
              setMaxAmount={setMaxAmount}
            ></KeyInPaymentFilter>
          </div>
        </div>
      </main>
    </>
  );
};