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

import InsightsHeader from '../../../Components/Layout/Header/InsightsHeader';
import environment from '../../../Environments/environment';
import type { RootState } from '../../../ReduxState/store';
import CashFlowProfitabilityProvider from '../../../Store/CashFlowAnalysis/CashFlowProfitability/CashFlowProfitability-context';
import type { FinancialsModel } from '../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import styles from '../CashFlowSummary/CashFlowSummary.module.scss';
import Wording from '../CashFlowSummary/Components/CashFlowTitle.helper';
import CashFlowPerspectiveCharts from './Components/CashFlowPerspectiveCharts';
import CashFlowPerspectiveTable from './Components/CashFlowPerspectiveTable';
import ToolsTitleNavigation from '../../ToolsNavigation/ToolsTitleNavigation/ToolsTitleNavigation';
import ToolsIntroAccordion from '../../ToolsNavigation/ToolsIntroAccordion/ToolsIntroAccordion';
import ToolsBottomNavigation from '../../ToolsNavigation/ToolsBottomNavigation/ToolsBottomNavigation';

const CashFlowPerspective: React.FC<{ print?: boolean }> = ({
	print
}: {
	print?: boolean;
}): JSX.Element => {
	const { workingCapitalMetric, cashFlowSummary } = environment.frontendRoutes;
	const navigate = useNavigate();
	const [showPage, setShowPage] = useState<boolean>(false);
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);

	const introContent = `
		<p class="subtitle">What is this for?</p>
		Quickly compare profitability across two periods to see what’s improving, what’s costing more, and how efficiently you’re turning revenue into profit.
		<p class="subtitle">What will I get?</p>
			<ul>
				<li>Key metrics like EBITDA and Net Profit, clearly bolded</li>
				<li>% change insights to spot trends fast</li>
				<li>A snapshot of margins, cost structure, and scalability (LER)</li>
			</ul>

		<p class="subtitle">How do I start?</p>
		Start with bolded metrics → Compare periods → Click View working capital metrics to see how profit links to cash.
	`;

	useEffect(() => {
		window.scrollTo(0, 0);
		if (selectedFinancials) {
			if (selectedFinancials?.length < 1) {
				navigate(cashFlowSummary);
			} else {
				setShowPage(true);
			}
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [selectedFinancials]);

	return (
		<div className={styles.container}>
			{showPage && (
				<CashFlowProfitabilityProvider>
					<div className={styles.body}>
						{!print && <InsightsHeader numberOfButtons={2} title="Cash Flow Analytics" />}
						<div className={styles.body__main}>
							<ToolsTitleNavigation
								stepNumber={2}
								maxSteps={5}
								title="Profitability Trends"
								prevAction={{ title: 'Back to Cash Flow Summary', link: cashFlowSummary }}
								introText="What’s driving your profit and margins?"
							/>
							<ToolsIntroAccordion content={introContent} ctaTitle="See profitability trends" />
							<CashFlowPerspectiveCharts print={print} />
							<p className={`${styles.titleExplainParagraph} ${print ? styles.print : ''}`}>
								{Wording.perspectiveSubTitle}
							</p>
							<CashFlowPerspectiveTable />
							{!print && (
								<ToolsBottomNavigation
									stepNumber={2}
									maxSteps={5}
									prevAction={{
										title: 'Back to Cash Flow Summary',
										link: cashFlowSummary
									}}
									nextAction={{
										title: 'Next: Working Capital Analysis',
										link: workingCapitalMetric
									}}
								/>
							)}
						</div>
					</div>
				</CashFlowProfitabilityProvider>
			)}
		</div>
	);
};

export default CashFlowPerspective;