import type { IAuditLog } from '@rocket.chat/core-typings';
import { Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
import { GenericTable, GenericTableHeaderCell, GenericTableBody, GenericTableLoadingRow, GenericTableHeader } from '@rocket.chat/ui-client';
import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';

import AuditLogEntry from './AuditLogEntry';
import GenericNoResults from '../../../components/GenericNoResults';
import { createEndOfToday, createStartOfToday } from '../utils/dateRange';
import type { DateRange } from '../utils/dateRange';
import DateRangePicker from './forms/DateRangePicker';

const AuditLogTable = () => {
	const t = useTranslation();

	const [dateRange, setDateRange] = useState<DateRange>(() => ({
		start: createStartOfToday(),
		end: createEndOfToday(),
	}));

	const getAudits = useEndpoint('GET', '/v1/audit.auditions');

	const { data, isLoading, isSuccess } = useQuery({
		queryKey: ['audits', dateRange],

		queryFn: async (): Promise<IAuditLog[]> => {
			const { start, end } = dateRange;
			const { auditions } = await getAudits({
				startDate: (start ?? new Date(0)).toISOString(),
				endDate: (end ?? new Date()).toISOString(),
			});
			// the REST payload serializes Date fields to strings; deserialize back to Date so the entry
			// components can keep their IAuditLog (Date) typings instead of force-casting per row
			return auditions.map((audition): IAuditLog => ({
				...audition,
				ts: new Date(audition.ts),
				_updatedAt: new Date(audition._updatedAt),
				fields: {
					...audition.fields,
					startDate: audition.fields.startDate ? new Date(audition.fields.startDate) : undefined,
					endDate: audition.fields.endDate ? new Date(audition.fields.endDate) : undefined,
				},
			}));
		},
		meta: {
			apiErrorToastMessage: true,
		},
	});

	const headers = (
		<>
			<GenericTableHeaderCell>{t('User')}</GenericTableHeaderCell>
			<GenericTableHeaderCell>{t('Looked_for')}</GenericTableHeaderCell>
			<GenericTableHeaderCell>{t('When')}</GenericTableHeaderCell>
			<GenericTableHeaderCell width={80}>{t('Results')}</GenericTableHeaderCell>
			<GenericTableHeaderCell>{t('Filters_applied')}</GenericTableHeaderCell>
		</>
	);

	return (
		<>
			<Field alignSelf='stretch'>
				<FieldLabel>{t('Date')}</FieldLabel>
				<FieldRow>
					<DateRangePicker display='flex' flexGrow={1} value={dateRange} onChange={setDateRange} />
				</FieldRow>
			</Field>
			{isLoading && (
				<GenericTable>
					<GenericTableHeader>{headers}</GenericTableHeader>
					<GenericTableBody>
						<GenericTableLoadingRow cols={4} />
					</GenericTableBody>
				</GenericTable>
			)}
			{isSuccess && data.length === 0 && <GenericNoResults />}
			{isSuccess && data.length > 0 && (
				<GenericTable>
					<GenericTableHeader>{headers}</GenericTableHeader>
					<GenericTableBody>
						{data.map((auditLog) => (
							<AuditLogEntry key={auditLog._id} value={auditLog} />
						))}
					</GenericTableBody>
				</GenericTable>
			)}
		</>
	);
};

export default AuditLogTable;