import { createFileRoute } from '@tanstack/react-router';
import {getAction} from '@/utils/api';
import {useQuery, useQueryClient} from '@tanstack/react-query';
import React, {useEffect} from 'react';
import {StoryBlockWrapper} from '@/components/Reporting/ReportWizard/Preview/StoryBlockWrapper';
import {useReportConfigStore} from '@/store/reports/useReportConfigStore';
import {useWizardStore} from '@/store/reports/useWizardStore';
import Icon from '@/utils/Icon';
import {useReportsStore} from '@/store/reports/useReportsStore';
import useShareableLinkStore from '@/store/useShareableLinkStore';
import {__} from '@wordpress/i18n';

export const Route = createFileRoute( '/story' )({
    component: Story,
    errorComponent: ({ error }) => (
        <div className="text-red-500 p-4">
            {error.message ||
                'An error occurred loading sources'}
        </div>
    )
});

function Story() {
    const [ isWizardLoaded, setIsWizardLoaded ] = React.useState( false );
    const isPdfMode = useShareableLinkStore( ( state ) => state.isPdfMode );
    const availableContent = useReportConfigStore( ( state ) => state.availableContent );
    const getStartDate = useWizardStore( ( state ) => state.getStartDate );
    const getEndDate = useWizardStore( ( state ) => state.getEndDate );
    const reportBlocks = useWizardStore( ( state ) => state.wizard.content );
    const [ errorMessage, setErrorMessage ] = React.useState( '' );
    const setReports = useReportsStore( ( state ) => state.setReports );
    const loadReportIntoWizard = useReportsStore( ( state ) => state.loadReportIntoWizard );
    const queryClient = useQueryClient();
    const getShareTokenFromUrl = () => {
        const urlParams = new URLSearchParams( window.location.search );
        return urlParams.get( 'burst_share_token' );
    };

    const getReportData = async() => {
        const token = getShareTokenFromUrl();
        return getAction( 'report-data', { token });
    };

    const { data: reportData, isFetching, isError } = useQuery({
        queryKey: [ 'report-data' ],
        queryFn: () => getReportData()
    });

    // Load report into store and wizard when report data is fetched
    useEffect( () => {
        if ( reportData?.report ) {

            // if there's no id, there is a permissions issue, or it is not enabled.
            if ( reportData?.report?.id ) {

                // Pre-populate the query cache with logo data resolved server-side.
                // On the story/frontend page, settings fields are empty for the burst_viewer
                // user (capability check in PHP), so getValue('logo_attachment_id') returns
                // undefined. We use a fixed sentinel ID as the linking key between
                // settings_fields and the attachment cache, so no real attachment ID is needed.
                if ( reportData.logo_url ) {
                    const STORY_LOGO_SENTINEL = 'story-logo';

                    // Make logo_attachment_id available to useSettingsData / getValue().
                    queryClient.setQueryData(
                        [ 'settings_fields' ],
                        ( oldData ) => {
                            const currentFields = Array.isArray( oldData ) ? oldData : [];
                            const alreadyPresent = currentFields.some( ( f ) => 'logo_attachment_id' === f.id );
                            if ( alreadyPresent ) {
                                return currentFields;
                            }
                            return [ ...currentFields, {id: 'logo_attachment_id', value: STORY_LOGO_SENTINEL} ];
                        }
                    );

                    // Pre-populate the resolved attachment URL so useAttachmentUrl skips wp.media.
                    queryClient.setQueryData(
                        [ 'attachment', STORY_LOGO_SENTINEL ],
                        {
                            attachmentUrl: reportData.logo_url,
                            attachment: null
                        }
                    );
                }

                // Store the report in the reports array
                setReports([ reportData.report ]);

                // Load it into the wizard
                loadReportIntoWizard( reportData.report.id, false );
            } else {
                setErrorMessage( 'The report could not load. Check if the report is enabled.' );
            }
            setIsWizardLoaded( true );
        }
    }, [ reportData?.report, setReports, loadReportIntoWizard, queryClient, reportData?.logo_url ]);


    useEffect( () => {
        const urlParams = new URLSearchParams( window.location.search );
        if ( '1' === urlParams.get( 'autoprint' ) ) {
            const timer = setTimeout( () => {
                window.print();
            }, 1000 );
            return () => clearTimeout( timer );
        }
    }, [ reportBlocks ]);

    if ( isFetching || isError || ! isWizardLoaded || ! reportData?.report || ! Array.isArray( reportBlocks ) || 0 === reportBlocks.length ) {
        return (
            <div className="col-span-12 flex justify-center items-center p-8">
                <Icon name="loading" color="gray" />
            </div>
        );
    }

    if ( 0 < errorMessage.length ) {
        return (
            <div className="col-span-12 flex justify-center items-center p-8">
                <div className="text-red-500 text-center">
                    {errorMessage}
                </div>
            </div>
        );
    }

    const handlePrintPdf = () => {
        window.print();
    };

    //exit if reportData not loaded yet.
    if ( ! reportData.report.id ) {
        return null;
    }

    return (
        <div className="col-span-12 flex flex-col">
            {isPdfMode && <div className="flex justify-end">
                <button onClick={handlePrintPdf} className=" print:hidden flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 hover:border-gray-400 text-gray-700 hover:text-gray-900 font-medium rounded-lg shadow-sm hover:shadow transition-all duration-200">
                    <Icon name="download" size={18} />
                    <span>{__( 'Download PDF', 'burst-statistics' )}</span>
                </button>
            </div>}
            {
                reportBlocks.map( ( block, index ) => {
                    const blockId = block.id;
                    const blockConfig = availableContent.find( item => item.id === blockId );

                    // Skip if block config or component not found
                    if ( ! blockConfig || ! blockConfig.component ) {
                        console.warn( `Block config not found for blockId: ${blockId}` );
                        return null;
                    }

                    const BlockComponent = blockConfig.component;
                    const componentProps = {
                        customFilters: block.filters ?? {},
                        reportBlockIndex: index,
                        startDate: getStartDate( index ),
                        endDate: getEndDate( index ),
                        ...( blockConfig?.blockProps || {}),
                        allowBlockFilters: false,
                        isReport: true
                    };
                        return (
                            <StoryBlockWrapper
                                reportBlockIndex={index}
                                key={`${blockId}-${index}`}
                            >
                                <BlockComponent {...componentProps} />
                            </StoryBlockWrapper>
                    );
                })
            }
        </div>
    );
}
