import type React from 'react';
// import { useContext, useDeferredValue, useEffect } from 'react';
import { 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 CashFlowMetricContextProvider from '../../../Store/CashFlowAnalysis/CashFlowMetric/CashFlowMetric-context';
// import type { GlobalStateModel } from '../../../Store/global/GlobalState-context';
// import { GlobalStateContext } from '../../../Store/global/GlobalState-context';
import CashFlowFooter from '../CashFlowSummary/Components/CashFlowFooter';
import Wording from '../CashFlowSummary/Components/CashFlowTitle.helper';
import styles from './CashFlowMetric.module.scss';
import CashFlowMetricChart from './Components/CashFlowMetricChart';
import CashFlowMetricChart2 from './Components/CashFlowMetricChart2';
import CashFlowMetricChart3 from './Components/CashFlowMetricChart3';
import CashFlowMetricTable from './Components/CashFlowMetricTable';
import CashFlowMetricTable2 from './Components/CashFlowMetricTable2';
import WorkingCapitalTimelineChart from '../../Dashboard/Components/WorkingCapacity/WorkingCapitalTimelineChart';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import type { RootState } from '../../../ReduxState/store';
import type { FinancialsModel } from '../../Financials/Components/FinancialsForm/FinancialsForm.helper';
import ToolsTitleNavigation from '../../ToolsNavigation/ToolsTitleNavigation/ToolsTitleNavigation';
import ToolsBottomNavigation from '../../ToolsNavigation/ToolsBottomNavigation/ToolsBottomNavigation';
import ToolsIntroAccordion from '../../ToolsNavigation/ToolsIntroAccordion/ToolsIntroAccordion';
import globalStyles from '../../../Components/GlobalStyles/globals.module.scss';

const CashFlowMetric: React.FC<{ print?: boolean }> = ({
	print
}: {
	print?: boolean;
}): JSX.Element => {
	const { moneyForGrowth, financialReturns, cashFlowPerspective } = environment.frontendRoutes;
	const navigate = useNavigate();
	const [showPage, setShowPage] = useState<boolean>(false);
	const selectedFinancials = useSelector(
		(state: RootState): FinancialsModel[] | null => state.financials.selectedFinancials
	);
	const accordionContent = `
							<p class="subtitle">What is this for?</p>
							See how efficiently your business manages cash tied up in debtors, stock, and creditors — and how that affects liquidity as you grow.

							<p class="subtitle">What will I get?</p>
							<ul>
								<li>
									Debtor Days, Stock Days, and Working Capital Days
								</li>
								<li>Clear changes across two periods</li>
								<li>Insight into how your cash cycle helps or hurts cash flow</li>
							</ul>
							<p class="subtitle">How do I start?</p>
							Look at changes in days → Spot where cash is stuck → Adjust processes to free up liquidity.`;

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

	return (
		<div className={styles.container}>
			<CashFlowMetricContextProvider>
				<div className={styles.container__body}>
					{!print && <InsightsHeader numberOfButtons={3} title="Cash Flow Analytics" />}
					<div className={styles.container__main}>
						{!print && (
							<ToolsTitleNavigation
								stepNumber={3}
								maxSteps={5}
								title="Working Capital Analysis"
								prevAction={{ title: 'Back to Profitability Trends', link: cashFlowPerspective }}
								introText="Where is cash tied up in operations?"
							/>
						)}
						{!print && (
							<ToolsIntroAccordion
								content={accordionContent}
								ctaTitle="See working capital metrics"
							/>
						)}
						{/* <CashFlowTitle
							className={styles.container__main__paragraph}
							title="Your Working Capital from a cash flow perspective"
						/> */}
						<div className="p-4" />
						{/* <h4>Working Capital Days</h4> */}
						{/* <CashFlowMetricChart /> */}
						<WorkingCapitalTimelineChart />
						<div className={print ? styles.chartContainer : ''}>
							<div className="mt-5">
								<h3 className={globalStyles.subtitle}>Gross Margin vs Working Capital</h3>
								<CashFlowMetricChart2 print={print} />
							</div>
							<div>
								<h3 className={globalStyles.subtitle}>Your Capital Signature</h3>
								<CashFlowMetricChart3 print={print} />
							</div>
						</div>
						<p style={{ textAlign: 'left' }}>{Wording.financialReturnsSubText}</p>
						<CashFlowMetricTable />
						<CashFlowMetricTable2 />
						{!print && (
							<div style={{ paddingBottom: '30px' }}>
								<ToolsBottomNavigation
									stepNumber={3}
									maxSteps={5}
									prevAction={{
										title: 'Back to Profitability Trends',
										link: cashFlowPerspective
									}}
									nextAction={{
										title: 'Next: Returns Analysis',
										link: financialReturns
									}}
								/>
							</div>
						)}
					</div>
				</div>
			</CashFlowMetricContextProvider>
		</div>
	);
};

export default CashFlowMetric;