import { useEffect, useState, useCallback } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useLocation } from 'react-router';
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';
import { useExtensionLinkPaySeparateAction } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-separate-action-mutaion';
import { useExtensionLinkPaySeparateDetail } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-separate-detail-mutation';
import { ExtensionLinkPaySeparateDetailItem, LinkPaymentSeparateAction, LinkPaymentSeparateType } from '@/entities/additional-service/model/link-pay/types';
import { useStore } from '@/shared/model/store';
import moment from 'moment';

export const LinkPaymentSeparateApprovalPage = () => {
    const { navigate } = useNavigate();
    const location = useLocation();
    const userMid = useStore.getState().UserStore.mid;

    const { mid: stateMid, requestId } = location.state || {};
    const mid = stateMid || userMid;

    const [items, setItems] = useState<ExtensionLinkPaySeparateDetailItem[]>([]);
    const [selectedItems, setSelectedItems] = useState<string[]>([]);
    const [extendPeriods, setExtendPeriods] = useState<{ [key: string]: 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 [successCount, setSuccessCount] = useState<number>(0);
    const [failCount, setFailCount] = useState<number>(0);
    const [totalCount, setTotalCount] = useState<number>(0);

    const { mutateAsync: callItems } = useExtensionLinkPaySeparateDetail();
    const { mutateAsync: linkPaySeparateAction } = useExtensionLinkPaySeparateAction();

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

    const handleCheckboxChange = (subRequestId: string) => {
        setSelectedItems(prev => {
            // 현재 클릭한 item 찾기
            const target = items.find(i => i.subRequestId === subRequestId)
                || items.find((_, idx) => `item-${idx}` === subRequestId);
            if (!target) return prev;

            // 동일한 requestId를 가진 MAIN, SUB 그룹 가져오기
            const sameRequestIdItems = items.filter(i => i.requestId === target.requestId);
            const mainItem = sameRequestIdItems.find(i => i.type === LinkPaymentSeparateType.MAIN);
            // PENDING 상태인 SUB만 필터링
            const subItems = sameRequestIdItems.filter(i =>
                i.type === LinkPaymentSeparateType.SUB && i.paymentStatus === 'PENDING'
            );

            const mainId = mainItem?.subRequestId || (mainItem ? `item-${items.indexOf(mainItem)}` : '');
            const subIds = subItems.map(i => i.subRequestId || `item-${items.indexOf(i)}`);

            // -----------------------------
            // MAIN 클릭 시
            // -----------------------------
            if (target.type === LinkPaymentSeparateType.MAIN) {
                const isMainChecked = prev.includes(mainId);
                if (isMainChecked) {
                    // MAIN 해제 → PENDING인 SUB만 해제
                    return prev.filter(id => ![mainId, ...subIds].includes(id));
                } else {
                    // MAIN 체크 → PENDING인 SUB만 추가
                    return [...new Set([...prev, mainId, ...subIds])];
                }
            }

            // -----------------------------
            // SUB 클릭 시
            // -----------------------------
            const isChecked = prev.includes(subRequestId);
            let updated: string[] = [];

            if (isChecked) {
                // SUB 해제
                updated = prev.filter(id => id !== subRequestId);

                // 해제 후 남은 PENDING SUB 중 하나라도 빠져 있으면 MAIN도 해제
                const allPendingSubsChecked = subIds.every(id => updated.includes(id));
                if (!allPendingSubsChecked && mainId) {
                    updated = updated.filter(id => id !== mainId);
                }
            } else {
                // SUB 체크
                updated = [...prev, subRequestId];

                // 모든 PENDING SUB 체크되면 MAIN도 자동 체크
                const allPendingSubsChecked = subIds.every(id => updated.includes(id));
                if (allPendingSubsChecked && mainId) {
                    updated = [...new Set([...updated, mainId])];
                }
            }

            return updated;
        });
    };

    const handleExtendPeriodChange = (itemId: string, days: string) => {
        setExtendPeriods(prev => ({
            ...prev,
            [itemId]: days
        }));
    };

    // 각 SUB 항목이 연장기간 설정 가능한지 체크
    const canExtendPeriod = (item: ExtensionLinkPaySeparateDetailItem) => {
        const today = moment().format('YYYYMMDD');
        const paymentLimitDate = item.paymentLimitDate || '';
        const paymentLimitCount = item.paymentLimitCount || 0;

        // 연장횟수 < 3 이고 유효일자 >= 조회일자
        return paymentLimitCount < 3 && paymentLimitDate >= today;
    };

    // 각 SUB 항목이 링크중단 가능한지 체크
    const canLinkBreak = (item: ExtensionLinkPaySeparateDetailItem) => {
        const today = moment().format('YYYYMMDD');
        const paymentLimitDate = item.paymentLimitDate || '';

        // 유효일자 >= 조회일자
        return paymentLimitDate >= today;
    };

    const isExtendButtonEnabled = () => {
        // MAIN 제외, 체크된 SUB 중에서
        const checkedSubs = items.filter((i, index) => {
            const itemId = i.subRequestId || `item-${index}`;
            return i.type === LinkPaymentSeparateType.SUB &&
                   selectedItems.includes(itemId) &&
                   i.paymentStatus === 'PENDING';
        });

        // 체크된 SUB가 없으면 비활성화
        if (checkedSubs.length === 0) return false;

        // 모든 체크된 SUB가 연장 가능하고, 연장기간이 설정되어 있어야 함
        return checkedSubs.every((sub) => {
            const itemId = sub.subRequestId || `item-${items.indexOf(sub)}`;
            return canExtendPeriod(sub) && extendPeriods[itemId] && extendPeriods[itemId] !== '';
        });
    };

    const isLinkBreadkEnabled = () => {
        // MAIN 제외, 체크된 SUB 중에서
        const checkedSubs = items.filter((i, index) => {
            const itemId = i.subRequestId || `item-${index}`;
            return i.type === LinkPaymentSeparateType.SUB &&
                   selectedItems.includes(itemId) &&
                   i.paymentStatus === 'PENDING';
        });

        // 체크된 SUB가 없으면 비활성화
        if (checkedSubs.length === 0) return false;

        // 모든 체크된 SUB가 링크중단 가능해야 함
        return checkedSubs.every(sub => canLinkBreak(sub));
    }

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

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

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

        // 선택된 항목이 없으면 리턴
        if (selectedItems.length === 0) {
            setErrorMessage('선택된 항목이 없습니다.');
            setFailPageOn(true);
            return;
        }

        // MAIN을 제외한 선택된 SUB 항목들의 연장 기간이 설정되었는지 확인
        const selectedSubItems = selectedItems.filter(id => {
            const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === id);
            return item && item.type === LinkPaymentSeparateType.SUB;
        });

        const allHaveExtendPeriod = selectedSubItems.every(id => extendPeriods[id]);

        if (!allHaveExtendPeriod) {
            setErrorMessage('모든 선택된 항목의 연장 기간을 선택해주세요.');
            setFailPageOn(true);
            return;
        }

        // 첫 번째 선택된 SUB 항목의 연장 기간 사용 (모든 항목이 같은 기간으로 연장)
        const firstSelectedSubId = selectedSubItems[0] as string;
        const extendDays = extendPeriods[firstSelectedSubId] as string;

        // 연장 날짜 계산 (오늘 날짜 + 연장일수)
        const extendDate = moment().add(parseInt(extendDays), 'days').format('YYYYMMDD');

        // MAIN을 제외한 SUB 항목만 API 형식으로 변환
        const selectedItemsData = selectedSubItems.map(itemId => {
            const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === itemId);
            return {
                type: item?.type || '',
                subRequestId: item?.subRequestId || itemId
            };
        });

        // 기간연장 API 호출
        linkPaySeparateAction({
            mid: mid,
            action: LinkPaymentSeparateAction.EXTEND,
            reqId: requestId,
            selectedItems: selectedItemsData,
            extendDate: extendDate
        }).then((response) => {
            setSuccessCount(response.successCount);
            setFailCount(response.failCount);
            setTotalCount(response.totalCount);

            if (response.success) {
                setResultMessage(`전체요청 성공했습니다.`);
                setSuccessPageOn(true);
            } else {
                setResultMessage(`유효기간 연장에 실패했습니다. 개별 상태를 확인해주세요.`);
                setErrorMessage('');
                setFailPageOn(true);
            }
        }).catch((error) => {
            console.error('기간연장 실패:', error);
            setResultMessage('유효기간 연장에 실패했습니다.');
            setFailPageOn(true);
        });
    };

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

        // 선택된 항목이 없으면 리턴
        if (selectedItems.length === 0) {
            setErrorMessage('선택된 항목이 없습니다.');
            setFailPageOn(true);
            return;
        }

        // MAIN을 제외한 SUB 항목만 필터링
        const selectedSubItems = selectedItems.filter(id => {
            const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === id);
            return item && item.type === LinkPaymentSeparateType.SUB;
        });

        const selectedItemsData = selectedSubItems.map(itemId => {
            const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === itemId);
            return {
                type: item?.type || '',
                subRequestId: item?.subRequestId || itemId
            };
        });

        // 링크중단 API 호출
        linkPaySeparateAction({
            mid: mid,
            action: LinkPaymentSeparateAction.DEACTIVATE,
            reqId: requestId,
            selectedItems: selectedItemsData
        }).then((response) => {
            setSuccessCount(response.successCount);
            setFailCount(response.failCount);
            setTotalCount(response.totalCount);
            if (response.success) {
                setResultMessage(`전체요청 성공했습니다.`);
                setSuccessPageOn(true);
            } else {
                setResultMessage('링크중단 요청에 실패했습니다. 개별 상태를 확인해주세요.');
                setErrorMessage('');
                setFailPageOn(true);
            }
        }).catch((error) => {
            console.error('링크중단 실패:', error);
            setResultMessage('링크중단 요청에 실패했습니다.');
            setFailPageOn(true);
        });
    };

    // 데이터 새로고침 함수
    const refreshItems = useCallback(() => {
        if (requestId) {
            callItems({ reqId: requestId }).then((response) => {
                console.log('Separate Detail Response:', response);
                // type이 MAIN인 항목을 최상위로 정렬
                const sortedItems = [...(response.details || [])].sort((a, b) => {
                    if (a.type === LinkPaymentSeparateType.MAIN) return -1;
                    if (b.type === LinkPaymentSeparateType.MAIN) return 1;
                    return 0;
                });
                setItems(sortedItems);
                // 선택 항목과 연장 기간 초기화
                setSelectedItems([]);
                setExtendPeriods({});
            }).catch((error) => {
                console.error('Failed to load separate detail:', error);
            });
        }
    }, [requestId, callItems]);

    useEffect(() => {
        // API 호출하여 데이터 로드
        refreshItems();
    }, [refreshItems]);

    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">
                                {items.map((item, index) => {
                                    const itemId = item.subRequestId || `item-${index}`;
                                    const isDisabled = item.paymentStatus !== 'PENDING';
                                    return (
                                        <div key={itemId} className={`approval-card ${selectedItems.includes(itemId) ? 'selected' : ''} ${isDisabled ? 'disabled' : ''}`}>
                                            <div className="card-header">
                                                <input
                                                    type="checkbox"
                                                    id={`checkbox-${itemId}`}
                                                    name={`checkbox-${itemId}`}
                                                    checked={selectedItems.includes(itemId)}
                                                    onChange={() => handleCheckboxChange(itemId)}
                                                    className="card-checkbox"
                                                    disabled={item.paymentStatus !== 'PENDING'}
                                                />
                                                <span className="card-tag">[{item.type}]</span>
                                                <span className="card-tid">{item.moid}</span>
                                            </div>
                                            <div className="card-body">
                                                <ul className="info-list">
                                                    <li>
                                                        <span className="label">• 거래금액:</span>
                                                        <span className="value">{item.amount.toLocaleString()}</span>
                                                    </li>
                                                    <li>
                                                        <span className="label">• 결제상태:</span>
                                                        <span className="value">{item.paymentStatusName}</span>
                                                    </li>
                                                    {item.type !== LinkPaymentSeparateType.MAIN && (
                                                        <>
                                                            <li>
                                                                <span className="label">• 유효기간:</span>
                                                                <span className="value">
                                                                    {item.paymentLimitDate
                                                                        ? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD')
                                                                        : '-'
                                                                    }
                                                                </span>
                                                            </li>
                                                            <li>
                                                                <span className="label">• 연장횟수:</span>
                                                                <span className="value">{item.paymentLimitCount}</span>
                                                            </li>
                                                        </>
                                                    )}
                                                </ul>
                                            </div>
                                            <div className="card-footer">
                                                <div className="period-selector">
                                                    <label>연장기간</label>
                                                    <select
                                                        value={extendPeriods[itemId] || ''}
                                                        onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)}
                                                        disabled={item.type === LinkPaymentSeparateType.MAIN || item.paymentStatus !== "PENDING" || !canExtendPeriod(item)}
                                                    >
                                                        <option value="">
                                                            {item.type === LinkPaymentSeparateType.MAIN
                                                                ? '-'
                                                                : !canExtendPeriod(item)
                                                                ? '-'
                                                                : '미설정'}
                                                        </option>
                                                        {canExtendPeriod(item) && [1, 2, 3, 4, 5, 6, 7].map(days => {
                                                            const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD');
                                                            const targetDate = baseDate.clone().add(days, 'days').format('YYYY/MM/DD');
                                                            return <option key={days} value={days.toString()}>{targetDate}</option>;
                                                        })}
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>

                        <div className="apply-row two-button">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={onClickToValidityPeriod}
                                disabled={!isExtendButtonEnabled()}
                            >기간연장
                            </button>
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={onClickToSendLink}
                                disabled={!isLinkBreadkEnabled()}
                            >링크중단
                            </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}
                onClose={refreshItems}
            />

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