'use client'

import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Input } from '@/shared/common/ui/input'
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from '@/shared/common/ui/select'
import { Button } from '@/shared/common/ui/button'
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from '@/shared/common/ui/popover'
import { Calendar } from '@/shared/common/ui/calendar'
import { Search, Filter, CalendarIcon, X } from 'lucide-react'
import { format } from 'date-fns'
import { cn } from '@/shared/lib/utils'

interface ActivityFiltersProps {
	searchQuery: string
	onSearchChange: (value: string) => void
	moduleFilter: string
	onModuleChange: (value: string) => void
	actionFilter: string
	onActionChange: (value: string) => void
	statusFilter: string
	onStatusChange: (value: string) => void
	dateRange: { from?: Date; to?: Date }
	onDateRangeChange: (range: { from?: Date; to?: Date }) => void
	modules: string[]
	actions: string[]
	onClearFilters: () => void
}

export function ActivityFilters({
	searchQuery,
	onSearchChange,
	moduleFilter,
	onModuleChange,
	actionFilter,
	onActionChange,
	statusFilter,
	onStatusChange,
	dateRange,
	onDateRangeChange,
	modules,
	actions,
	onClearFilters,
}: ActivityFiltersProps) {
	const { t } = useTranslation()
	const [datePickerOpen, setDatePickerOpen] = useState(false)

	const textStrong = 'text-gray-900 dark:text-gray-100'
	const textMuted = 'text-gray-500 dark:text-gray-400'
	const textSubtle = 'text-gray-400 dark:text-gray-500'
	const hoverText = 'hover:text-gray-700 dark:hover:text-gray-300'
	const border = 'border-gray-200 dark:border-gray-800'
	const surface = 'bg-white dark:bg-gray-900'
	const placeholder =
		'placeholder:text-gray-400 dark:placeholder:text-gray-500'

	const hasFilters =
		searchQuery ||
		moduleFilter !== 'all' ||
		actionFilter !== 'all' ||
		statusFilter !== 'all' ||
		dateRange.from ||
		dateRange.to

	return (
		<div className="space-y-4">
			<div className="flex items-center justify-between">
				<h3 className={cn('text-lg font-semibold', textStrong)}>
					{t('auditLog.filters.title')}
				</h3>
				{hasFilters && (
					<Button
						variant="ghost"
						size="sm"
						onClick={onClearFilters}
						className={cn(textMuted, hoverText)}
					>
						<X className="h-4 w-4 mr-1" />
						{t('auditLog.filters.clear')}
					</Button>
				)}
			</div>

			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
				<div className="relative">
					<Search
						className={cn(
							'absolute left-3 top-3 h-4 w-4',
							textSubtle,
						)}
					/>
					<Input
						placeholder={t('auditLog.filters.searchPlaceholder')}
						value={searchQuery}
						onChange={(e) => onSearchChange(e.target.value)}
						className={cn('pl-10', placeholder)}
					/>
				</div>

				<Select value={moduleFilter} onValueChange={onModuleChange}>
					<SelectTrigger className={cn(border, surface)}>
						<SelectValue placeholder={t('auditLog.filters.module')} />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="all">
							{t('auditLog.filters.allModules')}
						</SelectItem>
						{modules.map((module) => (
							<SelectItem key={module} value={module}>
								{t(`activityLogPage.modules.${module}`, {
									defaultValue: module,
								})}
							</SelectItem>
						))}
					</SelectContent>
				</Select>

				<Select value={actionFilter} onValueChange={onActionChange}>
					<SelectTrigger className={cn(border, surface)}>
						<SelectValue placeholder={t('auditLog.filters.action')} />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="all">
							{t('auditLog.filters.allActions')}
						</SelectItem>
						{actions.map((action) => (
							<SelectItem key={action} value={action}>
								{t(`activityLogPage.actions.${action}`, {
									defaultValue: action,
								})}
							</SelectItem>
						))}
					</SelectContent>
				</Select>

				<Select value={statusFilter} onValueChange={onStatusChange}>
					<SelectTrigger className={cn(border, surface)}>
						<SelectValue placeholder={t('auditLog.filters.status')} />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="all">
							{t('auditLog.filters.allStatuses')}
						</SelectItem>
						<SelectItem value="success">
							{t('auditLog.status.success')}
						</SelectItem>
						<SelectItem value="failure">
							{t('auditLog.status.failure')}
						</SelectItem>
						<SelectItem value="warning">
							{t('auditLog.status.warning')}
						</SelectItem>
						<SelectItem value="pending">
							{t('auditLog.status.pending')}
						</SelectItem>
					</SelectContent>
				</Select>
			</div>

			<div className="flex items-center gap-4">
				<Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
					<PopoverTrigger asChild>
						<Button
							variant="outline"
							className={cn(
								'w-full md:w-auto justify-start text-left font-normal',
								border,
								surface,
								textStrong,
							)}
						>
							<CalendarIcon
								className={cn('mr-2 h-4 w-4', textMuted)}
							/>
							{dateRange.from ? (
								dateRange.to ? (
									<>
										{format(dateRange.from, 'LLL dd, y')} -{' '}
										{format(dateRange.to, 'LLL dd, y')}
									</>
								) : (
									format(dateRange.from, 'LLL dd, y')
								)
							) : (
								<span className={textMuted}>
									{t('auditLog.filters.dateRange')}
								</span>
							)}
						</Button>
					</PopoverTrigger>
					<PopoverContent
						className={cn('w-auto p-0', border, surface)}
						align="start"
					>
						<Calendar
							initialFocus
							mode="range"
							defaultMonth={dateRange.from}
							selected={{
								from: dateRange.from,
								to: dateRange.to,
							}}
							onSelect={(range) => {
								onDateRangeChange({
									from: range?.from,
									to: range?.to,
								})
							}}
							numberOfMonths={2}
						/>
					</PopoverContent>
				</Popover>

				<Button
					variant="outline"
					onClick={() => {
						const today = new Date()
						const last7Days = new Date(today)
						last7Days.setDate(last7Days.getDate() - 7)

						onDateRangeChange({
							from: last7Days,
							to: today,
						})
					}}
					className={cn(border, surface, textStrong, hoverText)}
				>
					{t('auditLog.filters.last7Days')}
				</Button>

				<Button
					variant="outline"
					onClick={() => {
						const today = new Date()
						const last30Days = new Date(today)
						last30Days.setDate(last30Days.getDate() - 30)

						onDateRangeChange({
							from: last30Days,
							to: today,
						})
					}}
					className={cn(border, surface, textStrong, hoverText)}
				>
					{t('auditLog.filters.last30Days')}
				</Button>
			</div>
		</div>
	)
}
