'use client';
import { cn } from '@/lib/utils';
import AdvancedDateFilter from '@/shared/components/advanced-date-filter';
import { AdvancedDateFilterValues } from '@/shared/components/advanced-date-filter/schemas/advanced-date-filter.schema';
import FilterDateGroup from '@/shared/components/advanced-filter/filter-date-group';
import FilterStatusBadge from '@/shared/components/advanced-filter/filter-status-badge';
import DashboardActionButton from '@/shared/components/dashboard-action-button';
import DashboardSearchInput from '@/shared/components/dashboard-search-input/dashboard-search-input';
import DeleteSelectedRows from '@/shared/components/delete-selected-rows/delete-selected-rows';
import PageTitle from '@/shared/components/page-title/page-title';
import ShowFilterButton from '@/shared/components/show-filter-button/show-filter-button';
import TableSection from '@/shared/components/table-section';
import useDebounce from '@/shared/hooks/useDebounce';
import { statusOptionsDecisionEngine } from '@/shared/constants';
import { useCallback, useEffect, useState } from 'react';
import BasicTable from '@/components/ui/basic-table';
import { decisionEngineColumns, TDecisionEngineTable } from './components/columns';
import { useRouter } from 'next/navigation';

const DecisionEnginePage = () => {
	const [searchValue, setSearchValue] = useState<string>('');
	const [showFilter, setShowFilter] = useState(false);
	const [selectedRows, setSelectedRows] = useState<any[]>([]);
	const initialData: TDecisionEngineTable[] = JSON.parse(localStorage.getItem('decision-engine') ?? '[]');
	const [data, setData] = useState<TDecisionEngineTable[]>(initialData);
	// hooks
	const debouncedSearchValue: string = useDebounce(searchValue);
	const router = useRouter();

	// effects
	useEffect(() => {
		console.log('Searching for:', debouncedSearchValue);
	}, [debouncedSearchValue]);

	// handlers
	const handleSearchValue = useCallback((value: string) => {
		setSearchValue(value);
	}, []);

	const handleShowFilter = useCallback(() => {
		setShowFilter((prev) => !prev);
	}, []);

	// Helper: get date range
	const getDateRange = (dateRange: AdvancedDateFilterValues['dateRange']) => {
		const today = new Date();
		let from: number | null = null;
		let to: number | null = null;
		if (!dateRange) {
			return { from, to };
		}
		// Give priority to from/to date picker
		if (dateRange.from instanceof Date && dateRange.to instanceof Date) {
			from = new Date(dateRange.from.getFullYear(), dateRange.from.getMonth(), dateRange.from.getDate()).getTime();
			to = new Date(dateRange.to.getFullYear(), dateRange.to.getMonth(), dateRange.to.getDate(), 23, 59, 59, 999).getTime();
		} else {
			switch (dateRange.segment) {
				case 'today':
					from = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
					to = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999).getTime();
					break;
				case 'this_week':
					const firstDayOfWeek = new Date(today);
					firstDayOfWeek.setDate(today.getDate() - today.getDay());
					from = new Date(firstDayOfWeek.getFullYear(), firstDayOfWeek.getMonth(), firstDayOfWeek.getDate()).getTime();
					to = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999).getTime();
					break;
				case 'this_month':
					from = new Date(today.getFullYear(), today.getMonth(), 1).getTime();
					to = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999).getTime();
					break;
			}
		}
		return { from, to };
	};

	// Helper: filter data
	const filterData = (data: TDecisionEngineTable[], filters: AdvancedDateFilterValues, search: string) => {
		let result = [...data];

		// Date range filter
		if (filters.dateRange) {
			const { from, to } = getDateRange(filters.dateRange);
			if (from !== null && to !== null) {
				result = result.filter((row) => {
					// Ensure created_at is compared as a date at midnight
					const createdAtDate = new Date(row.created_at);
					const createdAt = new Date(createdAtDate.getFullYear(), createdAtDate.getMonth(), createdAtDate.getDate()).getTime();
					return createdAt >= from && createdAt <= to;
				});
			}
		}

		// Status filter
		const statusFilter = Array.isArray(filters.status) ? filters.status : [];
		if (statusFilter.length > 0) {
			result = result.filter((row) => statusFilter.includes(row.status as (typeof statusFilter)[number]));
		}

		// Search filter
		if (search.trim()) {
			result = result.filter((row) => row.name.toLowerCase().includes(search.trim().toLowerCase()));
		}

		return result;
	};

	const onSubmit = useCallback(
		(values: AdvancedDateFilterValues) => {
			console.log('Filter values:', values);
			setData(filterData(initialData, values, searchValue));
		},
		[searchValue, initialData]
	);
	return (
		<div className={cn('flex flex-col gap-10')}>
			<div className='d-header'>
				<PageTitle>Decision Engine</PageTitle>
				<DashboardActionButton activeBtn={true} onClick={() => router.push(`/dashboard/micro-finance/decision-engine/${new Date().getTime()}`)}>
					+ Add Model
				</DashboardActionButton>
			</div>
			<TableSection>
				<div className='gap-8 grid-container'>
					<div className='col-span-12 md:col-span-6 lg:col-span-4'>
						<DashboardSearchInput searchValue={searchValue} onChange={handleSearchValue} placeholder='Search by Email' />
					</div>
					<div className='flex items-center col-span-12 gap-8 md:col-span-3 lg:col-span-3'>
						<DeleteSelectedRows selectedRow={selectedRows} deleteMutation={() => {}} />
						<ShowFilterButton showFilter={showFilter} onClick={handleShowFilter} />
					</div>
					{showFilter && (
						<div className='col-span-12'>
							<AdvancedDateFilter onSubmit={onSubmit} onReset={() => setData(initialData)}>
								<FilterDateGroup title='Date Range' fieldName='dateRange' />
								<FilterStatusBadge status={statusOptionsDecisionEngine} />
							</AdvancedDateFilter>
						</div>
					)}
				</div>
				<BasicTable
					data={data}
					isLoading={false}
					error={''}
					columns={decisionEngineColumns}
					page={1}
					pageCount={1}
					onPageChange={() => {}}
					onRowClick={(row) => {
						if (row?.id) {
							router.push(`/dashboard/micro-finance/decision-engine/${row.id}`);
						}
					}}
					onRowSelectStateChange={setSelectedRows}
					selectedRows={selectedRows}
					headerLabels={['Id', 'Name', 'Status', 'Created At', 'Updated At']}
					variant='dashboard'
				/>
			</TableSection>
		</div>
	);
};

export default DecisionEnginePage;