/* eslint-disable react/jsx-no-bind */
import type { ChangeEvent, FormEvent } from 'react';
import type React from 'react';
import { useContext, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';

import type { RootState } from '../../../ReduxState/store';
import type { FinancialsContextModel } from '../../../Store/Financials/financials-context';
import { FinancialsContext } from '../../../Store/Financials/financials-context';
import type { CompanyDbModel } from '../../Companies/Components/CompaniesComponents.helper';
import ArrowSvg from '../../Financials/Components/UI/ArrowSvg';
import styles from './MoneyForCeosTable.module.scss';
import getCompanyType from '../../../utils/getCompanyType';
import CustomWidthTooltip from '../../../Components/UI/CustomWidthTooltip/CustomWidthTooltip';
import determineQuickWins from './MoneyForCeosTable.helper';
import CustomWidthQuickWinTooltip from '../../../Components/UI/CustomWidthQuickWinTooltip/CustomWidthQuickWinTooltip';

type MoneyForCeosTableProps = {
	onUpdate?: (val: boolean) => void;
};

const MoneyForCeosTable: React.FC<MoneyForCeosTableProps> = ({
	onUpdate
}: MoneyForCeosTableProps): JSX.Element => {
	const minimumFractionDigits = 0;
	const maximumFractionDigits = 0;
	const financialsContext: FinancialsContextModel = useContext(FinancialsContext);
	const [priceIncrease, setPriceIncrease] = useState<number>(1);
	const [volumeIncrease, setVolumeIncrease] = useState<number>(1);
	const [cogs, setCogs] = useState<number>(1);
	const [overheadReduction, setOverheadReduction] = useState<number>(1);
	const [debtorsDayReduction, setDebtorsDayReduction] = useState<number>(1);
	const [reductionWipDays, setReductionWipDays] = useState<number>(1);
	const [increaseInCreditorsDays, setIncreaseInCreditorsDays] = useState<number>(1);
	const [increaseInDeferredRevenueDays, setIncreaseInDeferredRevenueDays] = useState<number>(1);
	const selectedCompany = useSelector(
		(state: RootState): CompanyDbModel | null => state.companies.selectedCompany
	);
	const currencyLabel = `${
		typeof selectedCompany?.currency_symbol === 'string'
			? 'GBP'
			: selectedCompany?.currency_symbol.value
	}`;

	function priceIncreaseHandler(event: ChangeEvent<HTMLInputElement>): void {
		setPriceIncrease(+event.target.value);
	}
	function volumeIncreaseHandler(event: ChangeEvent<HTMLInputElement>): void {
		setVolumeIncrease(+event.target.value);
	}
	function cogsHandler(event: ChangeEvent<HTMLInputElement>): void {
		setCogs(+event.target.value);
	}
	function overheadReductionHandler(event: ChangeEvent<HTMLInputElement>): void {
		setOverheadReduction(+event.target.value);
	}
	function debtorsReductionHandler(event: ChangeEvent<HTMLInputElement>): void {
		setDebtorsDayReduction(+event.target.value);
	}
	function reductionWipDaysHandler(event: ChangeEvent<HTMLInputElement>): void {
		setReductionWipDays(+event.target.value);
	}
	function increaseCreditorsDaysHandler(event: ChangeEvent<HTMLInputElement>): void {
		setIncreaseInCreditorsDays(+event.target.value);
	}
	function increaseInDeferredRevenueDaysHandler(event: ChangeEvent<HTMLInputElement>): void {
		setIncreaseInDeferredRevenueDays(+event.target.value);
	}
	const companyType = getCompanyType(selectedCompany);

	useEffect(() => {
		financialsContext.getAllStates(
			priceIncrease,
			volumeIncrease,
			cogs,
			overheadReduction,
			debtorsDayReduction,
			reductionWipDays,
			increaseInCreditorsDays,
			increaseInDeferredRevenueDays
		);
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [
		priceIncrease,
		volumeIncrease,
		cogs,
		overheadReduction,
		debtorsDayReduction,
		reductionWipDays,
		increaseInCreditorsDays
	]);

	function incrementHandler(event: FormEvent<Element>): void {
		if (onUpdate) onUpdate(true);
		const elementInput = event.currentTarget.parentElement?.firstChild as HTMLInputElement;
		switch (elementInput.id) {
			case 'priceIncrease':
				return setPriceIncrease((prevState) => +prevState + 1);
			case 'volumeIncrease':
				return setVolumeIncrease((prevState) => +prevState + 1);
			case 'cogsReduction':
				return setCogs((prevState) => +prevState + 1);
			case 'overheadReduction':
				return setOverheadReduction((prevState) => +prevState + 1);
			case 'debtorsDayReductions':
				return setDebtorsDayReduction((prevState) => +prevState + 1);
			case 'reductionInWipDays':
				return setReductionWipDays((prevState) => +prevState + 1);
			case 'increaseInCreditorsDays':
				return setIncreaseInCreditorsDays((prevState) => +prevState + 1);
			case 'increaseInDeferredRevenueDays':
				return setIncreaseInDeferredRevenueDays((prevState) => +prevState + 1);
			default:
				return (
					setVolumeIncrease(1),
					setPriceIncrease(1),
					setCogs(1),
					setIncreaseInCreditorsDays(1),
					setReductionWipDays(1),
					setOverheadReduction(1),
					setDebtorsDayReduction(1),
					setIncreaseInDeferredRevenueDays(1)
				);
		}
	}

	function decrementHandler(event: FormEvent<Element>): void {
		if (onUpdate) onUpdate(true);
		const elementInput = event.currentTarget.parentElement?.firstChild as HTMLInputElement;
		switch (elementInput.id) {
			case 'priceIncrease':
				// return setPriceIncrease((prevState) => (prevState >= 2 ? prevState - 1 : 0.0));
				return setPriceIncrease((prevState) => prevState - 1);
			case 'volumeIncrease':
				// return setVolumeIncrease((prevState) => (prevState >= 2 ? prevState - 1 : 0.0));
				return setVolumeIncrease((prevState) => prevState - 1);
			case 'cogsReduction':
				// return setCogs((prevState) => (prevState >= 2 ? prevState - 1 : 0.0));
				return setCogs((prevState) => prevState - 1);
			case 'overheadReduction':
				// return setOverheadReduction((prevState) => (prevState >= 2 ? prevState - 1 : 0.0));
				return setOverheadReduction((prevState) => prevState - 1);
			case 'debtorsDayReductions':
				// return setDebtorsDayReduction((prevState) => (prevState >= 2 ? prevState - 1 : 0.0));
				return setDebtorsDayReduction((prevState) => prevState - 1);
			case 'reductionInWipDays':
				// return setReductionWipDays((prevState) => (prevState >= 2 ? prevState - 1 : 0.0));
				return setReductionWipDays((prevState) => prevState - 1);
			case 'increaseInCreditorsDays':
				// return setIncreaseInCreditorsDays((prevState) => (prevState >= 2 ? prevState - 1 : 0.0));
				return setIncreaseInCreditorsDays((prevState) => prevState - 1);
			case 'increaseInDeferredRevenueDays':
				return setIncreaseInDeferredRevenueDays(
					(prevState) =>
						// prevState >= 2 ? prevState - 1 : 0.0
						prevState - 1
				);
			default:
				return (
					setPriceIncrease(0),
					setVolumeIncrease(0),
					setCogs(0),
					setOverheadReduction(0),
					setDebtorsDayReduction(0),
					setReductionWipDays(0),
					setIncreaseInCreditorsDays(0),
					setIncreaseInDeferredRevenueDays(0)
				);
		}
	}

	const topImpacts = determineQuickWins({
		priceIncrease: financialsContext.priceIncreaseNetCashFlow,
		volumeIncrease: financialsContext.volumeIncreaseCashFlow,
		cogsCashFlow: financialsContext.cogsCashFlow,
		overheadCashFlow: financialsContext.overheadCashFlow,
		debtorsDayCashFlow: financialsContext.debtorsDayCashFlow,
		reductionInWip: financialsContext.reductionInWip,
		increaseCreditorsDays: financialsContext.increaseCreditorsDays,
		increaseDeferredRevenueDays: financialsContext.increaseDeferredRevenueDays
	});

	return (
		<div id="moneyForCeosTable" className={styles.formContainer}>
			<div className={styles.tableTitle}>
				<p />
				<p>Net cash flow</p>
				<p>EBIT</p>
			</div>
			<div className={styles.tableHead}>
				<p>
					<b>Current position</b>
				</p>
				<p>
					<b>
						{financialsContext.netCashFlow.toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</b>
				</p>
				<p>
					<b>
						{financialsContext.ebit.toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</b>
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="priceIncrease">
					<CustomWidthTooltip title="Estimate the effect of price changes on cash flow and EBIT" />
					Price Increase
					{topImpacts.includes('priceIncrease') && (
						<CustomWidthQuickWinTooltip title="This lever delivers high impact on cash flow for small changes. Prioritise this for fast results." />
					)}
				</label>
				<div>
					<input
						className={styles.inputNumber}
						id="priceIncrease"
						onChange={priceIncreaseHandler}
						placeholder="0.00"
						step={0.1}
						type="number"
						value={priceIncrease}
					/>
					<ArrowSvg clickHandler={incrementHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={decrementHandler} svgClass={styles.arrowDown} />
					<small className={styles.percentageSign}>%</small>
				</div>
				<p className={styles.netCashFlow}>
					{financialsContext.priceIncreaseNetCashFlow.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
				<p className={styles.ebit}>
					{financialsContext.priceIncreaseEbit.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="volumeIncrease">
					<CustomWidthTooltip title="Increasing sales volume can grow revenue — but may also raise costs and affect cash flow timing." />
					Volume Increase
					{topImpacts.includes('volumeIncrease') && (
						<CustomWidthQuickWinTooltip title="This lever delivers high impact on cash flow for small changes. Prioritise this for fast results." />
					)}
				</label>
				<div>
					<input
						className={styles.inputNumber}
						id="volumeIncrease"
						onChange={volumeIncreaseHandler}
						placeholder="0.00"
						step={0.1}
						type="number"
						value={volumeIncrease}
					/>
					<ArrowSvg clickHandler={incrementHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={decrementHandler} svgClass={styles.arrowDown} />
					<small className={styles.percentageSign}>%</small>
				</div>
				<p className={styles.netCashFlow}>
					{financialsContext.volumeIncreaseCashFlow.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
				<p className={styles.ebit}>
					{financialsContext.volumeIncreaseEbit.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="cogsReduction">
					<CustomWidthTooltip title="Lowering cost of goods sold boosts margin and cash." />
					CoGS Reduction
					{topImpacts.includes('cogsCashFlow') && (
						<CustomWidthQuickWinTooltip title="This lever delivers high impact on cash flow for small changes. Prioritise this for fast results." />
					)}
				</label>
				<div>
					<input
						className={styles.inputNumber}
						id="cogsReduction"
						onChange={cogsHandler}
						placeholder="0.00"
						step={0.1}
						type="number"
						value={cogs}
					/>
					<ArrowSvg clickHandler={incrementHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={decrementHandler} svgClass={styles.arrowDown} />
					<small className={styles.percentageSign}>%</small>
				</div>
				<p className={styles.netCashFlow}>
					{financialsContext.cogsCashFlow.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
				<p className={styles.ebit}>
					{financialsContext.cogsEbit.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="overheadReduction">
					<CustomWidthTooltip title="Cutting overheads frees up cash and lifts profit — but be mindful not to reduce capacity for growth." />
					Overheads Reduction
					{topImpacts.includes('overheadCashFlow') && (
						<CustomWidthQuickWinTooltip title="This lever delivers high impact on cash flow for small changes. Prioritise this for fast results." />
					)}
				</label>
				<div>
					<input
						className={styles.inputNumber}
						id="overheadReduction"
						onChange={overheadReductionHandler}
						placeholder="0.00"
						step={0.1}
						type="number"
						value={overheadReduction}
					/>
					<ArrowSvg clickHandler={incrementHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={decrementHandler} svgClass={styles.arrowDown} />
					<small className={styles.percentageSign}>%</small>
				</div>
				<p className={styles.netCashFlow}>
					{financialsContext.overheadCashFlow.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
				<p className={styles.ebit}>
					{financialsContext.overheadEbit.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="debtorsDayReductions">
					<CustomWidthTooltip title="Getting paid faster puts cash flow in your hands sooner" />
					Debtors Days Reduction
					{topImpacts.includes('debtorsDayCashFlow') && (
						<CustomWidthQuickWinTooltip title="This lever delivers high impact on cash flow for small changes. Prioritise this for fast results." />
					)}
				</label>
				<div>
					<input
						className={styles.inputNumber}
						id="debtorsDayReductions"
						onChange={debtorsReductionHandler}
						placeholder="0.00"
						step={0.1}
						type="number"
						value={debtorsDayReduction}
					/>
					<ArrowSvg clickHandler={incrementHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={decrementHandler} svgClass={styles.arrowDown} />
					<small className={styles.percentageSign}>day</small>
				</div>
				<p className={styles.netCashFlow}>
					{financialsContext.debtorsDayCashFlow.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="reductionInWipDays">
					<CustomWidthTooltip title="Fewer work-in-progress days = faster conversion to cash" />
					{companyType === 'All Other' ? 'Reduction in Stock Days' : 'Reduction in WIP Days'}
					{topImpacts.includes('reductionInWip') && (
						<CustomWidthQuickWinTooltip title="This lever delivers high impact on cash flow for small changes. Prioritise this for fast results." />
					)}
				</label>
				<div>
					<input
						className={styles.inputNumber}
						id="reductionInWipDays"
						onChange={reductionWipDaysHandler}
						placeholder="0.00"
						step={0.1}
						type="number"
						value={reductionWipDays}
					/>
					<ArrowSvg clickHandler={incrementHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={decrementHandler} svgClass={styles.arrowDown} />
					<small className={styles.percentageSign}>day</small>
				</div>
				<p className={styles.netCashFlow}>
					{financialsContext.reductionInWip.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="increaseInCreditorsDays">
					<CustomWidthTooltip title="More creditor days improves short-term liquidity." />
					Increase in Creditors Days
					{topImpacts.includes('increaseCreditorsDays') && (
						<CustomWidthQuickWinTooltip title="This lever delivers high impact on cash flow for small changes. Prioritise this for fast results." />
					)}
				</label>
				<div>
					<input
						className={styles.inputNumber}
						id="increaseInCreditorsDays"
						onChange={increaseCreditorsDaysHandler}
						placeholder="0.00"
						step={0.1}
						type="number"
						value={increaseInCreditorsDays}
					/>
					<ArrowSvg clickHandler={incrementHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={decrementHandler} svgClass={styles.arrowDown} />
					<small className={styles.percentageSign}>day</small>
				</div>
				<p className={styles.netCashFlow}>
					{financialsContext.increaseCreditorsDays.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
			</div>
			<div className={styles.inputContainer}>
				<label className={styles.labelClass} htmlFor="increaseInDeferredRevenueDays">
					<CustomWidthTooltip title="Getting paid in advance improves cash flow, even if revenue is recognised later." />
					Increase in Deferred Revenue Days
					{topImpacts.includes('increaseDeferredRevenueDays') && (
						<CustomWidthQuickWinTooltip title="This lever delivers high impact on cash flow for small changes. Prioritise this for fast results." />
					)}
				</label>
				<div>
					<input
						className={styles.inputNumber}
						id="increaseInDeferredRevenueDays"
						onChange={increaseInDeferredRevenueDaysHandler}
						placeholder="0.00"
						step={0.1}
						type="number"
						value={increaseInDeferredRevenueDays
							.toFixed(0)
							.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')}
					/>
					<ArrowSvg clickHandler={incrementHandler} svgClass={styles.arrowUp} />
					<ArrowSvg clickHandler={decrementHandler} svgClass={styles.arrowDown} />
					<small className={styles.percentageSign}>day</small>
				</div>
				<p className={styles.netCashFlow}>
					{/* {financialsContext.increaseDeferredRevenueDays
						.toFixed(2)
						.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')} */}
					{financialsContext.increaseDeferredRevenueDays.toLocaleString('en-GB', {
						style: 'currency',
						currency: currencyLabel,
						minimumFractionDigits,
						maximumFractionDigits
					})}
				</p>
			</div>
			<div className={styles.tableFooter1}>
				<p>
					<b>Total Impact</b>
				</p>
				<p>
					<b>
						{financialsContext.netCashFlowSum.toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</b>
				</p>
				<p>
					<b>
						{financialsContext.ebitSum.toLocaleString('en-GB', {
							style: 'currency',
							currency: currencyLabel,
							minimumFractionDigits,
							maximumFractionDigits
						})}
					</b>
				</p>
			</div>
			<div className={styles.totalImpactTip}>
				💡 <b>Tip</b>: Use this insight to adjust your funding ask
			</div>
		</div>
	);
};

export default MoneyForCeosTable;