'use client';
import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import ButtonBack from '@/shared/components/button-back';
// import DashboardActionButton from '@/shared/components/dashboard-action-button';
import RangeStepper from '@/shared/components/range-stepper';
import ErrorIcon from '@/shared/icons/erroricon.svg';
import SelectOption from '@/shared/components/select-option';
import { Button } from '@/components/ui/button';
import { toast } from 'sonner';
import { TDecisionEngineTable } from '@/components/dashboard/micro-finance/pages/decision-engine/components/columns';
import InputField from '@/shared/components/input-field';

const SelectedDecisionPage = () => {
	const params = useParams<{ id: string }>();
	const id = params?.id;

	const [minAge, setMinAge] = useState(21);
	const [maxAge, setMaxAge] = useState(60);
	const [name, setName] = useState('');
	const [operationalDuration, setOperationalDuration] = useState(2);
	const [minCreditScore, setMinCreditScore] = useState(600);
	const [maxInstallmentsDelay, setMaxInstallmentsDelay] = useState(0);
	const [minActiveLoans, setMinActiveLoans] = useState(1);
	const [maxActiveLoans, setMaxActiveLoans] = useState(5);
	const [installmentsDelayPeriod, setInstallmentsDelayPeriod] = useState<string>('');

	// Load data from localStorage on mount
	useEffect(() => {
		if (!id) return;
		const saved = JSON.parse(localStorage.getItem(`decision-engine`) ?? '[]');
		const current = saved.find((engine: TDecisionEngineTable) => engine.id === id);
		if (current) {
			try {
				setMinAge(current.minAge ?? 21);
				setMaxAge(current.maxAge ?? 60);
				setName(current.name ?? '');
				setOperationalDuration(current.operationalDuration ?? 2);
				setMinCreditScore(current.minCreditScore ?? 600);
				setMaxInstallmentsDelay(current.maxInstallmentsDelay ?? 0);
				setMinActiveLoans(current.minActiveLoans ?? 1);
				setMaxActiveLoans(current.maxActiveLoans ?? 5);
				setInstallmentsDelayPeriod(current.installmentsDelayPeriod ?? '');
			} catch (error) {
				console.error(error);
			}
		}
	}, [id]);

	// Save handler
	const handleSave = (successMessage = 'Saved!') => {
		if (!id) return;
		const savedArray = JSON.parse(localStorage.getItem('decision-engine') ?? '[]');
		const filteredArray = savedArray.filter((engine: TDecisionEngineTable) => engine.id !== id);
		localStorage.setItem(
			`decision-engine`,
			JSON.stringify([
				...filteredArray,
				{
					id,
					name,
					minAge,
					maxAge,
					operationalDuration,
					minCreditScore,
					maxInstallmentsDelay,
					minActiveLoans,
					maxActiveLoans,
					installmentsDelayPeriod,
					created_at: `${new Date(Number(id)).toLocaleDateString()} ${new Date(Number(id)).toLocaleTimeString()}`,
					updated_at: `${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}`,
					status: 'active',
				},
			])
		);
		toast.success(successMessage);
	};

	// Save & Continue Editing handler
	const handleSaveContinue = () => {
		handleSave('Saved & continue editing!');
	};

	// Discard changes handler
	const handleDiscard = () => {
		if (!id) return;
		localStorage.removeItem(`decision-engine-${id}`);
		setMinAge(50);
		setMaxAge(70);
		setOperationalDuration(12);
		setMinCreditScore(600);
		setMaxInstallmentsDelay(0);
		setMinActiveLoans(1);
		setMaxActiveLoans(5);
		setInstallmentsDelayPeriod('');
		toast('Changes discarded.');
	};

	return (
		<div className='flex flex-col h-full max-h-screen'>
			<div className='flex-1 overflow-y-auto'>
				<div className='flex flex-col gap-10'>
					<div className='d-header'>
						<ButtonBack label={id}></ButtonBack>
						{/* <DashboardActionButton
							activeBtn={true}
							onClick={() => {
								redirect('/dashboard/micro-finance/decision-engine');
							}}>
							History
						</DashboardActionButton> */}
					</div>
					{/* Decision Enigine Info */}
					<div className='flex flex-col gap-10 border-b border-[#E9E9E9] pb-10'>
						<h2 className='text-lg font-semibold'>Decision Engine Info</h2>
						<div className='flex flex-col gap-5 mb-4'>
							<div className='flex items-end gap-4'>
								<InputField label='Name' value={name} onChange={(e) => setName(e.target.value)} placeholder='Enter decision engine name' />
							</div>
						</div>
					</div>
					<div className='flex flex-col gap-10 border-b border-[#E9E9E9] pb-10'>
						<h2 className='text-lg font-semibold'>Borrower Eligibility</h2>
						<div className='flex flex-col gap-5 mb-4'>
							<div className='flex items-end gap-4'>
								<div className='flex flex-col gap-4'>
									<span className='text-sm text-black'>Minimum Age</span>
									<RangeStepper value={minAge} onChange={setMinAge} step={1} disableDecrement={false} disableIncrement={false} />
								</div>
								<span className='mx-2 text-gray-500'>To</span>
								<div className='flex flex-col gap-4'>
									<span className='text-sm text-black'>Maximum Age</span>
									<RangeStepper value={maxAge} onChange={setMaxAge} step={1} disableDecrement={false} disableIncrement={false} />
								</div>
							</div>
						</div>
					</div>
					{/* Business Eligibility */}
					<div className='flex flex-col gap-3 border-b border-[#E9E9E9] pb-10'>
						<h2 className='text-lg font-semibold pb-7'>Business Eligibility</h2>
						<span className='text-sm text-black'>Operational Duration</span>
						<div className='flex items-center gap-6'>
							<RangeStepper
								value={operationalDuration}
								onChange={setOperationalDuration}
								step={1}
								minLimit={0}
								maxLimit={120}
								disableDecrement={false}
								disableIncrement={false}
								unitLabel='Years'
							/>
							<div className='h-[30px] bg-[#F3F3F3] flex items-center px-2'>
								<span>Before</span>
							</div>
							<div className='flex justify-between border-[1.5px] border-[#E2E8F0] rounded-sm w-[200px] h-[49px] px-4 py-2 items-center'>
								<span className='text-sm text-[#333333]'>
									{' '}
									{new Date().toLocaleDateString('en-GB', {
										day: '2-digit',
										month: 'short',
										year: 'numeric',
									})}
								</span>
								<div className='h-[30px] bg-[#F3F3F3] flex items-center px-2'>
									<span>Today</span>
								</div>
							</div>
						</div>
						<div className='flex items-center gap-2'>
							<ErrorIcon />
							<span className='text-md text-[#333333]'>Business must be operating for at least one year from today.</span>
						</div>
					</div>
					{/* Credit Eligibility */}
					<div>
						<h2 className='pb-10 text-lg font-semibold'>Credit Eligibility</h2>
						<div className='grid grid-cols-[40%_60%] pb-10'>
							<div className='flex flex-col gap-3'>
								<span className='text-sm text-black'>Minimum Credit Score</span>
								<RangeStepper
									value={minCreditScore}
									onChange={setMinCreditScore}
									step={1}
									minLimit={300}
									maxLimit={850}
									disableDecrement={false}
									disableIncrement={false}
								/>
							</div>
							<div className='flex flex-col gap-3'>
								<span className='text-sm text-black'>Maximum Installments Delay Period</span>
								<div className='flex items-center gap-6'>
									<RangeStepper
										value={maxInstallmentsDelay}
										onChange={setMaxInstallmentsDelay}
										step={1}
										minLimit={0}
										maxLimit={12}
										disableDecrement={false}
										disableIncrement={false}
										unitLabel='Days'
									/>
									<div className='h-[30px] bg-[#F3F3F3] flex items-center px-2'>
										<span>In</span>
									</div>
									<SelectOption
										style='h-[35px]! cursor-pointer'
										value={installmentsDelayPeriod}
										setValue={setInstallmentsDelayPeriod}
										list={[
											{ label: 'Last 6 Months', value: 'last_6_months' },
											{ label: 'Last Year', value: 'last_year' },
										]}
										placeholder={'Select Option'}
									/>
								</div>
							</div>
						</div>
					</div>
					{/* Active Loans Number */}
					<div className='flex flex-col gap-10 pb-10'>
						<h2 className='text-lg font-semibold'>Active Loans Number</h2>
						<div className='flex flex-col gap-5 mb-4'>
							<div className='flex items-end gap-4'>
								<div className='flex flex-col gap-4'>
									<span className='text-sm text-black'>Minimum</span>
									<RangeStepper value={minActiveLoans} onChange={setMinActiveLoans} step={1} disableDecrement={false} disableIncrement={false} />
								</div>
								<span className='mx-2 text-gray-500'>To</span>
								<div className='flex flex-col gap-4'>
									<span className='text-sm text-black'>Maximum</span>
									<RangeStepper value={maxActiveLoans} onChange={setMaxActiveLoans} step={1} disableDecrement={false} disableIncrement={false} />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			{/* Footer always visible at the bottom of this screen */}
			<div className='h-[52px] bg-white flex items-center justify-end gap-4 px-8'>
				<Button onClick={handleSaveContinue} variant={'outlineColor'} size={'default'} className='w-[268px] h-[48px] cursor-pointer'>
					Save & Continue Editing
				</Button>
				<Button onClick={handleDiscard} variant={'outlineColor'} size={'default'} className='w-[268px] h-[48px] cursor-pointer'>
					Discard changes
				</Button>
				<Button onClick={() => handleSave()} size={'default'} className='w-[203px] h-[48px] cursor-pointer' variant={'main'}>
					Save
				</Button>
			</div>
		</div>
	);
};

export default SelectedDecisionPage;