'use client';

import BasicTable from '@/components/ui/basic-table';
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 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 useDebounce from '@/shared/hooks/useDebounce';
import { useCallback, useEffect, useState } from 'react';
import { loanApplicationsColumn, TLoanApplicationsTable } from './components/loan-applications-table/columns';
import { getLoanApplicationsData } from './components/loan-applications-table/table.data.service';
import TableSection from '@/shared/components/table-section';
import FilterDateGroup from '@/shared/components/advanced-filter/filter-date-group';
import FilterStatusBadge from '@/shared/components/advanced-filter/filter-status-badge';
import { statusOptions } from '@/shared/constants';
import Link from 'next/link';
import {
	TApplicationSubmitSchema,
	TStoredApplicationData,
} from './pages/add-loan-application/components/application-submit/schema/application-submit.schema';
import { loadFormData, STORAGE_KEYS } from '@/utils/form-storage';

type TLoanApplicationsPageProps = {};

const LoanApplicationsPage = ({}: TLoanApplicationsPageProps) => {
	const [showFilter, setShowFilter] = useState(false);
	const [searchValue, setSearchValue] = useState<string>('');
	const [selectedRow, setSelectedRow] = useState<any[]>([]);
	const [originalData, setOriginalData] = useState<TLoanApplicationsTable[]>([]);
	const [filterValues, setFilterValues] = useState<AdvancedDateFilterValues | null>(null);

	const debouncedSearchValue: string = useDebounce(searchValue);

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

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

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

	const handleClearFilters = useCallback(() => {
		setFilterValues(null);
		setSearchValue('');
	}, []);

	const onSubmit = useCallback((values: AdvancedDateFilterValues) => {
		setFilterValues(values);
		console.log('Filter values:', values);
	}, []);

	// Funcion to filter data based on search and advanced filters
	const filterData = useCallback(
		(data: TLoanApplicationsTable[], filters: AdvancedDateFilterValues | null, searchTerm: string): TLoanApplicationsTable[] => {
			let filteredData = [...data];

			// Filter by search term
			if (searchTerm) {
				filteredData = filteredData.filter(
					(item) =>
						item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
						item.business_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
						item.id_number.toLowerCase().includes(searchTerm.toLowerCase())
				);
			}

			// Filter by advanced filters
			if (filters) {
				// Filter by status
				if (filters.status && filters.status.length > 0) {
					filteredData = filteredData.filter((item) => filters.status!.includes(item.application_status as any));
				}

				// Filter by date
				if (filters.dateRange?.from || filters.dateRange?.to) {
					filteredData = filteredData.filter((item) => {
						if (!item.created_at) return false;

						const itemDate = new Date(item.created_at);
						const fromDate = filters.dateRange?.from;
						const toDate = filters.dateRange?.to;

						if (fromDate && itemDate < fromDate) return false;
						if (toDate && itemDate > toDate) return false;

						return true;
					});
				}

				// Filter by (i-score)
				// if (filters.amount !== null && filters.amount !== undefined) {
				// 	filteredData = filteredData.filter(item => {
				// 		// يمكنك تخصيص هذا حسب البيانات المتاحة
				// 		const iScore = parseInt(item.i_score) || 0;
				// 		return iScore >= filters.amount!;
				// 	});
				// }
			}

			return filteredData;
		},
		[]
	);

	// Apply filters on data
	const filteredData = filterData(originalData, filterValues, debouncedSearchValue);

	//** Fake data */
	const [data, setData] = useState<TLoanApplicationsTable[]>([]);

	useEffect(() => {
		const savedData = loadFormData<TStoredApplicationData[]>(STORAGE_KEYS.LOAN_APPLICATION_DATA, []);
		// setLocalStorageData(savedData);
		const mappedData: TLoanApplicationsTable[] =
			savedData?.map((item) => ({
				id: item?.id?.toString() || '',
				name: item?.personal_identification_details.full_name,
				id_number: item?.personal_identification_details.national_id,
				channel: item?.financial_profile.mobile_wallet_usage.wallet_type || '',
				i_score: item?.decision_engine_score?.toString() || '',
				business_name: item?.business_name || '-',
				business_type: item?.business_type || '-',
				application_status: item?.application_status || '',
				created_at: item?.created_at || '',
			})) || [];
		const fetchData = async () => {
			const result = await getLoanApplicationsData();
			const allData = [...result, ...mappedData];
			setOriginalData(allData);
			setData(allData);
		};
		fetchData();
	}, []);

	// Updated data based on filters and search
	useEffect(() => {
		const filtered = filterData(originalData, filterValues, debouncedSearchValue);
		setData(filtered);
	}, [originalData, filterValues, debouncedSearchValue, filterData]);

	return (
		<div className={cn('flex flex-col gap-10')}>
			<div className='d-header'>
				<PageTitle>Loan Applications</PageTitle>
				<DashboardActionButton activeBtn={true} onClick={() => {}}>
					<Link href='/dashboard/micro-finance/loan-applications/add-loan-application'>+ Add Application</Link>
				</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 Name, Business, or ID Number' />
					</div>
					<div className='flex items-center col-span-12 gap-8 md:col-span-3 lg:col-span-3'>
						<DeleteSelectedRows selectedRow={selectedRow} deleteMutation={() => {}} />
						<ShowFilterButton showFilter={showFilter} onClick={handleShowFilter} />
					</div>
					{showFilter && (
						<div className='col-span-12'>
							<AdvancedDateFilter onSubmit={onSubmit} onReset={handleClearFilters}>
								<FilterDateGroup title='Date Range' fieldName='dateRange' />
								<FilterStatusBadge status={statusOptions} />
							</AdvancedDateFilter>
						</div>
					)}
				</div>
				<BasicTable
					data={data}
					isLoading={false}
					error={''}
					columns={loanApplicationsColumn}
					page={1}
					pageCount={1}
					onPageChange={() => {}}
					onRowSelectStateChange={setSelectedRow}
					selectedRows={selectedRow}
					headerLabels={['Name', 'ID Number', 'Phone Number', 'I-Score', 'Business Name']}
					variant='dashboard'
				/>
			</TableSection>
		</div>
	);
};

export default LoanApplicationsPage;