// pages/newappeal/[appealtypes].js
import { JSONPath as jsonpath } from "jsonpath-plus";
import xpath from "xpath";
import { useMemo } from "react";
import { connect } from "react-redux";
import { useRouter } from "next/router";

import { wrapper } from "../../store/store";

import NewAppealPageShell from "../../components/newappeal/newAppealPageShell";
import NewAppealFlow from "../../components/newappeal/newAppealFlow";

import { loadNewAppealPage } from "../../lib/newappeal/loadNewAppealPage";
import { hydrateNewAppealStore } from "../../lib/newappeal/hydrateNewAppealStore";

let Home = (props) => {
    const { footerLinks } = props;

    const router = useRouter();
    const { appealtypes } = router.query;

    const formXML = props.formData?.formData;

    // Memoise XML parsing so it doesn't rerun on every render
    const { sectionCount } = useMemo(() => {
        if (!formXML) return { sectionCount: 0 };

        const parser = new DOMParser();
        const doc = parser.parseFromString(formXML, "text/xml");
        const count = xpath.select("/form/tabs/tab[*]", doc)?.length || 0;
        return { sectionCount: count };
    }, [formXML]);

    // Safely compute formTitle from appeal type options + apt
    const formTitle = useMemo(() => {
        const optionsStr = props.appealType?.appealTypeOptions?.value;
        const apt = router.query.apt;

        if (!optionsStr || !apt) return "New appeal";

        const selectedObj = jsonpath({
            path: "$..[?(@ && @.attributevalue=='" + apt + "')]",
            json: optionsStr,
            eval: true
        });

        const title = selectedObj?.[0]?.value;
        return title || "New appeal";
    }, [props.appealType?.appealTypeOptions?.value, router.query.apt]);

    const { onSubmit } = props;

    return (
        <NewAppealPageShell
            appealtypes={appealtypes}
            formTitle={formTitle}
            footerLinks={footerLinks}
            propsForFooter={props}
            propsForServiceBanner={props}
        >
            <NewAppealFlow
                formXML={formXML}
                sectionCount={sectionCount}
                currentSection={props.appealType?.currentSection}
                onSubmit={onSubmit}
                formTitle={formTitle}
                mandatoryFieldsData={props.formData?.mandatoryFieldsData}
                propsForChildren={props}
                docsOffline={props.docsOffline}
            />
        </NewAppealPageShell>
    );
};

export const getServerSideProps = wrapper.getServerSideProps(
    (store) => async (ctx) => {
        const result = await loadNewAppealPage(ctx);

        if (result?.redirect) {
            return { redirect: result.redirect };
        }

        // Hydrate Redux from one place
        hydrateNewAppealStore(store, ctx.query, result);

        return {
            props: {
                url: process.env.NEXTAUTH_URL,
                docsOffline: process.env.DOCAPI_OFFLINE || false
            }
        };
    }
);

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        form: state.form,
        accountDetails: state.accountDetails
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        // Keep as-is; you can clean these later once you confirm usage
        setFormTitle: (title) => {
            // dispatch(setAppealTypeTitle(title)); // optional later
        },
        setCaseReference: (refno) => {
            // dispatch(setCaseReferenceAction(refno)); // optional later
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);