import moment from 'moment';
import { PATHS } from '@/shared/constants/paths';
import { useEffect, useState } from 'react';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType } from '@/entities/common/model/types';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-filter';
import { ProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
import {
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';


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

  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [mid, setMid] = useState<string>('nictest001m');
  const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ALL)
  const [searchKeyword, setSearchKeyword] = useState<string>('');
  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
  const [bank, setBank] = useState<string>('');
  const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);

  useSetHeaderTitle('계좌성명조회');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(true);

  const { mutateAsync: downloadExcel } = useDownloadExcelMutation();

  const transactionData = [
    {
      id: '1',
      accountNumber: '10002464******',
      time: '20:00',
      bank: '우리은행',
      status: 'success',
      statusColor: 'blue',
      className: 'approved'
    },
    {
      id: '2',
      accountNumber: '10002464******',
      time: '20:00',
      details: '결제완료ㅣ결제성공ㅣ호전환',
      status: 'success',
      statusColor: 'gray',
      className: 'refund'
    },
    {
      id: '3',
      accountNumber: '10002464******',
      time: '20:00',
      details: '결제완료ㅣ결제성공ㅣ호전환',
      status: 'success',
      statusColor: 'blue',
      className: 'approved'
    },
    {
      id: '4',
      accountNumber: '10002464******',
      time: '20:00',
      details: '미결제ㅣ취소완료ㅣSMS',
      status: 'success',
      statusColor: 'gray',
      className: 'refund'
    },
    {
      id: '5',
      accountNumber: '10002464******',
      time: '20:00',
      details: '미결제ㅣ기간만료ㅣSMS',
      status: 'fail',
      statusColor: 'blue',
      className: 'approved'
    }
  ];

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

  const onClickToDownloadExcel = () => {
    // tid??? 확인 필요
    downloadExcel({
      // tid: tid
    }).then((rs) => {

    });
  };

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

  const onClickToGoDetail = (tid?: string) => {
    navigate(PATHS.additionalService.accountHolderSearch.detail);
  };

  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="2025.06.01 ~ 2025.06.30"
                    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="다운로드"
                  />
                </button>
              </div>
            </section>

            <section className="filter-section">
              <div className="sort-options">
                <button className="sort-btn active">최신순</button>
                <span className="sort-divider">|</span>
                <button className="sort-btn">고액순</button>
              </div>
              <div className="excrow">
                <div className="full-menu-keywords no-padding">
                  <span className="keyword-tag active">전체</span>
                  <span className="keyword-tag">성공</span>
                  <span className="keyword-tag">실패</span>
                </div>
              </div>
            </section>

            <section className="transaction-list">
              <div className="date-group">
                <div className="date-header">25.06.08(일)</div>
                {transactionData.map((item) => (
                  <div
                    key={item.id}
                    className={`transaction-item ${item.className}`}
                    onClick={() => onClickToGoDetail(item.id)}
                  >
                    <div className="transaction-status">
                      <div className={`status-dot ${item.statusColor}`}></div>
                    </div>
                    <div className="transaction-content">
                      <div className="transaction-title">{item.accountNumber}</div>
                      <div className="transaction-details">
                        <span>
                          {item.time}ㅣ{item.bank || item.details}
                        </span>
                      </div>
                    </div>
                    <div className={`status-label ${item.status}`}>
                      {item.status === 'success' ? '성공' : '실패'}
                    </div>
                  </div>
                ))}
              </div>
            </section>
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
                onClick={() => onClickToNavigation()}
              >조회 신청</button>
            </div>
          </div>
        </div>
      </main>
      <AccountHolderSearchFilter
        filterOn={filterOn}
        setFilterOn={setFilterOn}
        mid={mid}
        searchType={searchType}
        searchKeyword={searchKeyword}
        startDate={startDate}
        endDate={endDate}
        bank={bank}
        processResult={processResult}
        setMid={setMid}
        setSearchType={setSearchType}
        setSearchKeyword={setSearchKeyword}
        setStartDate={setStartDate}
        setEndDate={setEndDate}
        setBank={setBank}
        setProcessResult={setProcessResult}
      ></AccountHolderSearchFilter>
    </>
  );
};