import type React from 'react';
import { useContext, useDeferredValue, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

import InsightsHeader from '../../../Components/Layout/Header/InsightsHeader';
import CashFlowTitle from '../../../Components/Layout/Side/Components/CashFlowTitle';
import environment from '../../../Environments/environment';
import CashFlowPerspectiveContextProvider from '../../../Store/CashFlowAnalysis/CashFlowPerspective/CashFlowPerspective-context';
import type { GlobalStateModel } from '../../../Store/global/GlobalState-context';
import { GlobalStateContext } from '../../../Store/global/GlobalState-context';
import CashFlowFooter from '../CashFlowSummary/Components/CashFlowFooter';
import CashFlowFinancialReturnsTable from './Components/CashFlowFinancialReturnsTable';
import styles from './FinancialReturns.module.scss';
import ToolsTitleNavigation from '../../ToolsNavigation/ToolsTitleNavigation/ToolsTitleNavigation';
import ToolsIntroAccordion from '../../ToolsNavigation/ToolsIntroAccordion/ToolsIntroAccordion';
import ToolsBottomNavigation from '../../ToolsNavigation/ToolsBottomNavigation/ToolsBottomNavigation';

const FinancialReturns: React.FC<{ print?: boolean }> = ({
	print
}: {
	print?: boolean;
}): JSX.Element => {
	const { cashFundingMeters, workingCapitalMetric, cashFlowSummary } = environment.frontendRoutes;
	const navigate = useNavigate();
	const firstFinancial = useDeferredValue(
		JSON.parse(localStorage.getItem('first-financial') as string)
	);
	const secondFinancial = useDeferredValue(
		JSON.parse(localStorage.getItem('second-financial') as string)
	);
	const thirdFinancial = useDeferredValue(
		JSON.parse(localStorage.getItem('third-financial') as string)
	);
	const [linkTitle, setLinkTitle] = useState<
		'View cash funding metrics' | 'To cash funding metrics'
	>('To cash funding metrics');
	const globalContext: GlobalStateModel = useContext<GlobalStateModel>(GlobalStateContext);
	const accordionContent = `
							<p class="subtitle">What is this for?</p>
							Track how efficiently your business turns capital and assets into profit — based on cash performance, not just accounting profit.

							<p class="subtitle">What will I get?</p>
							<ul>
								<li>
									ROIC, ROA, ROE
								</li>
								<li>Net Operating Assets view</li>
								<li>Year-on-year return comparisons</li>
							</ul>
							<p class="subtitle">How do I start?</p>
							Check ROIC first → See how profit and asset changes drive it → Use ROE and asset turnover for the full picture.`;

	useEffect(() => {
		window.scrollTo(0, 0);
		if (globalContext.companyPlan === 1) {
			setLinkTitle('To cash funding metrics');
		} else {
			setLinkTitle('View cash funding metrics');
		}
		if (
			(!firstFinancial || !secondFinancial || !thirdFinancial) &&
			globalContext.companyPlan !== 3
		) {
			navigate(cashFlowSummary);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	return (
		<div className={styles.container}>
			<CashFlowPerspectiveContextProvider>
				<div className={styles.container__body}>
					{!print && <InsightsHeader numberOfButtons={3} title="Cash Flow Analytics" />}
					<div className={styles.container__body__main}>
						{!print && (
							<ToolsTitleNavigation
								stepNumber={4}
								maxSteps={5}
								title="Returns Analysis"
								prevAction={{
									title: 'Back to Working Capital Analysis',
									link: workingCapitalMetric
								}}
								introText="Is your capital working hard enough?"
							/>
						)}
						{!print && (
							<ToolsIntroAccordion
								content={accordionContent}
								ctaTitle="Explore returns on capital"
							/>
						)}
						{/* <CashFlowTitle
							className={styles.container__body__main__paragraph}
							title="Your Returns from a cash flow perspective"
						/> */}
						{/* <p>{Wording.financialReturnsSubText}</p> */}
						<CashFlowFinancialReturnsTable print={print} />
						{!print && (
							// <CashFlowFooter
							// 	backTo={workingCapitalMetric}
							// 	buttonClassName={styles.footerContainer__button}
							// 	buttonHelpText=""
							// 	buttonText={linkTitle}
							// 	classNameBtnHelperText={styles.footerContainer__buttonTextHelper}
							// 	container={styles.footerContainer}
							// 	linkText="Back to cash flow working capital"
							// 	linkTo={cashFundingMeters}
							// 	svgClassName={styles.footerContainer__svg}
							// />
							<ToolsBottomNavigation
								stepNumber={4}
								maxSteps={5}
								prevAction={{
									title: 'Back to Working Capital Analysis',
									link: workingCapitalMetric
								}}
								nextAction={{
									title: 'Next: Funding Overview',
									link: cashFundingMeters
								}}
							/>
						)}
					</div>
				</div>
			</CashFlowPerspectiveContextProvider>
		</div>
	);
};

export default FinancialReturns;