nice-app-web/src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx

import { useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
    useSetOnBack,
    useSetHeaderTitle,
    useSetHeaderType,
    useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { ExtendedPeriodBottomSheet } from '@/entities/additional-service/ui/link-payment/bottom-sheet/extended-period-bottom-sheet';
import { LinkBreakBottomSheet } from '@/entities/additional-service/ui/link-payment/bottom-sheet/link-break-bottom-sheet';
import { LinkPaymentApplySuccessPage } from './link-payment-separate-approval-success-page';
import { LinkPaymentApplyFailPage } from './link-payment-separate-approval-fail';

interface SeparateApprovalItem {
    tid: string;
    merchantId: string;
    amount: number;
    status: string;
    validityPeriod: string;
    approvalCount: number;
}

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

    const [selectedItems, setSelectedItems] = useState<string[]>([]);
    const [extendedPeriodBottomSheetOn, setExtendedPeriodBottomSheetOn] = useState<boolean>(false);
    const [linkBreakBottomSheetOn, setLinkBreakBottomSheetOn] = useState<boolean>(false);
    const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
    const [failPageOn, setFailPageOn] = useState<boolean>(false);
    const [resultMessage, setResultMessage] = useState<string>('');
    const [errorMessage, setErrorMessage] = useState<string>('');

    const [mainItem] = useState<SeparateApprovalItem>({
        tid: 'NLPDAR2025101315330',
        merchantId: '100,000',
        amount: 100000,
        status: '활성화',
        validityPeriod: '2025/10/13',
        approvalCount: 0
    });

    const [additionalItems] = useState<SeparateApprovalItem[]>([
        {
            tid: '',
            merchantId: '(NNN,NNN)',
            amount: 0,
            status: '(결제상태)',
            validityPeriod: 'YYYY/MM/DD',
            approvalCount: 0
        }
    ]);

    useSetHeaderTitle('분리승인 상세');
    useSetHeaderType(HeaderType.RightClose);
    useSetOnBack(() => {
        navigate(PATHS.additionalService.linkPayment.shippingHistory);
    });
    useSetFooterMode(false);

    const handleCheckboxChange = (tid: string) => {
        setSelectedItems(prev => {
            if (prev.includes(tid)) {
                return prev.filter(id => id !== tid);
            } else {
                return [...prev, tid];
            }
        });
    };

    const handleMainCheckboxChange = () => {
        const mainTid = mainItem.tid;
        setSelectedItems(prev => {
            if (prev.includes(mainTid)) {
                return prev.filter(id => id !== mainTid);
            } else {
                return [...prev, mainTid];
            }
        });
    };

    const handleAdditionalCheckboxChange = (index: number) => {
        const itemTid = `additional-${index}`;
        handleCheckboxChange(itemTid);
    };

    const onClickToValidityPeriod = () => {
        // 기간연장 바텀시트 열기
        setExtendedPeriodBottomSheetOn(true);
    };

    const onClickToSendLink = () => {
        // 링크중단 바텀시트 열기
        setLinkBreakBottomSheetOn(true);
    };

    const handleExtendPeriod = () => {
        // 바텀시트 닫기
        setExtendedPeriodBottomSheetOn(false);

        // 기간연장 API 호출 로직
        console.log('기간연장 실행', selectedItems);
        // TODO: 실제 API 호출
        const apiCallSuccess = true; // 임시로 성공으로 설정

        if (apiCallSuccess) {
            setResultMessage('기간이 성공적으로 연장되었습니다');
            setSuccessPageOn(true);
        } else {
            setErrorMessage('기간 연장에 실패했습니다');
            setFailPageOn(true);
        }
    };

    const handleLinkBreak = () => {
        // 바텀시트 닫기
        setLinkBreakBottomSheetOn(false);

        // 링크중단 API 호출 로직
        console.log('링크중단 실행', selectedItems);
        // TODO: 실제 API 호출
        const apiCallSuccess = true; // 임시로 성공으로 설정

        if (apiCallSuccess) {
            setResultMessage('링크가 성공적으로 중단되었습니다');
            setSuccessPageOn(true);
        } else {
            setErrorMessage('링크 중단에 실패했습니다');
            setFailPageOn(true);
        }
    };

    useEffect(() => {
        // API 호출하여 데이터 로드
        // const { mid, tid } = location.state || {};
    }, []);

    return (
        <>
            <main className="separate-approval-main">
                <div className="tab-content">
                    <div className="tab-pane sub active">
                        <div className="separate-approval-section">
                            <div className="approval-notice-box">
                                <p>※ 연장 기간: 최대 7일, 총 3번 연장 가능</p>
                                <p>※ 링크 중단: 유효기간 전, 결제를 마감하는 기능, 링크중단 시 원복 불가</p>
                            </div>

                            <div className="approval-cards-wrapper">
                                {/* Main Item */}
                                <div className={`approval-card ${selectedItems.includes(mainItem.tid) ? 'selected' : ''}`}>
                                <div className="card-header">
                                    <input
                                    type="checkbox"
                                    id={`checkbox-${mainItem.tid}`}
                                    name={`checkbox-${mainItem.tid}`}
                                    checked={selectedItems.includes(mainItem.tid)}
                                    onChange={handleMainCheckboxChange}
                                    className="card-checkbox"
                                />
                                    <span className="card-tag">[MAIN]</span>
                                    <span className="card-tid">{mainItem.tid}</span>
                                </div>
                                <div className="card-body">
                                    <ul className="info-list">
                                        <li>
                                            <span className="label">• 거래금액:</span>
                                            <span className="value">{mainItem.merchantId}</span>
                                        </li>
                                        <li>
                                            <span className="label">• 결제상태:</span>
                                            <span className="value">{mainItem.status}</span>
                                        </li>
                                        <li>
                                            <span className="label">• 유효기간:</span>
                                            <span className="value">{mainItem.validityPeriod}</span>
                                        </li>
                                        <li>
                                            <span className="label">• 연장횟수:</span>
                                            <span className="value">{mainItem.approvalCount}</span>
                                        </li>
                                    </ul>
                                </div>
                                <div className="card-footer">
                                    <div className="period-selector">
                                        <label>연장기간</label>
                                        <select>
                                            <option value="">미설정</option>
                                            <option value="1">1일</option>
                                            <option value="2">2일</option>
                                            <option value="3">3일</option>
                                            <option value="4">4일</option>
                                            <option value="5">5일</option>
                                            <option value="6">6일</option>
                                            <option value="7">7일</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            {/* Additional Items */}
                            {additionalItems.map((item, index) => (
                                <div key={index} className={`approval-card ${selectedItems.includes(`additional-${index}`) ? 'selected' : ''}`}>
                                    <input
                                        type="checkbox"
                                        checked={selectedItems.includes(`additional-${index}`)}
                                        onChange={() => handleAdditionalCheckboxChange(index)}
                                        className="card-checkbox"
                                    />
                                    <div className="card-header">
                                        <span className="card-tag">(유형)</span>
                                        <span className="card-tig">주문번호</span>
                                    </div>
                                    <div className="card-body">
                                        <ul className="info-list">
                                            <li>
                                                <span className="label">• 거래금액:</span>
                                                <span className="value">{item.merchantId}</span>
                                            </li>
                                            <li>
                                                <span className="label">• 결제상태:</span>
                                                <span className="value">{item.status}</span>
                                            </li>
                                            <li>
                                                <span className="label">• 유효기간:</span>
                                                <span className="value">{item.validityPeriod}</span>
                                            </li>
                                            <li>
                                                <span className="label">• 연장횟수:</span>
                                                <span className="value">(N)</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div className="card-footer">
                                        <div className="period-selector">
                                            <label>연장기간</label>
                                            <select>
                                                <option value="">미설정</option>
                                                <option value="1">1일</option>
                                                <option value="2">2일</option>
                                                <option value="3">3일</option>
                                                <option value="4">4일</option>
                                                <option value="5">5일</option>
                                                <option value="6">6일</option>
                                                <option value="7">7일</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            ))}
                            </div>
                        </div>

                        <div className="apply-row two-button">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={onClickToValidityPeriod}
                            >기간연장
                            </button>
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={onClickToSendLink}
                            >링크중단
                            </button>
                        </div>
                    </div>
                </div>
            </main>

            <ExtendedPeriodBottomSheet
                bottomSheetOn={extendedPeriodBottomSheetOn}
                setBottomSheetOn={setExtendedPeriodBottomSheetOn}
                extendPeriod={handleExtendPeriod}
            />

            <LinkBreakBottomSheet
                bottomSheetOn={linkBreakBottomSheetOn}
                setBottomSheetOn={setLinkBreakBottomSheetOn}
                linkBreak={handleLinkBreak}
            />

            <LinkPaymentApplySuccessPage
                pageOn={successPageOn}
                setPageOn={setSuccessPageOn}
                resultMessage={resultMessage}
            />

            <LinkPaymentApplyFailPage
                pageOn={failPageOn}
                setPageOn={setFailPageOn}
                errorMessage={errorMessage}
            />
        </>
    );
};