'use client'

import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from '@/shared/common/ui/dialog'
import { Button } from '@/shared/common/ui/button'
import { Input } from '@/shared/common/ui/input'
import { Label } from '@/shared/common/ui/label'
import { RadioGroup, RadioGroupItem } from '@/shared/common/ui/radio-group'
import { Checkbox } from '@/shared/common/ui/checkbox'
import { Download, FileText, FileSpreadsheet } from 'lucide-react'
import { cn } from '@/shared/lib/utils'

interface ExportModalProps {
	open: boolean
	onOpenChange: (open: boolean) => void
	onExport: (options: ExportOptions) => void
}

export interface ExportOptions {
	format: 'csv' | 'json' | 'xlsx'
	includeDetails: boolean
	dateRange: boolean
	fileName: string
}

export function ExportModal({
	open,
	onOpenChange,
	onExport,
}: ExportModalProps) {
	const { t } = useTranslation()
	const [options, setOptions] = useState<ExportOptions>({
		format: 'csv',
		includeDetails: true,
		dateRange: true,
		fileName: `activity-logs-${new Date().toISOString().split('T')[0]}`,
	})

	const surface = 'bg-white dark:bg-gray-900'
	const border = 'border-gray-200 dark:border-gray-800'
	const borderMuted = 'border-muted dark:border-gray-700'
	const textStrong = 'text-gray-900 dark:text-gray-100'
	const textMuted = 'text-gray-600 dark:text-gray-300'
	const textSubtle = 'text-gray-500 dark:text-gray-400'
	const primaryBorder = 'border-primary dark:border-primary-600'
	const hoverBg = 'hover:bg-accent dark:hover:bg-gray-800'
	const hoverText = 'hover:text-accent-foreground dark:hover:text-gray-100'
	const primaryBtn =
		'bg-primary dark:bg-primary-600 hover:bg-primary/90 dark:hover:bg-primary-500 text-white'

	const handleExport = () => {
		onExport(options)
		onOpenChange(false)
	}

	return (
		<Dialog open={open} onOpenChange={onOpenChange}>
			<DialogContent
				className={cn('sm:max-w-[500px]', surface, border, textStrong)}
			>
				<DialogHeader>
					<DialogTitle className={textStrong}>
						{t('auditLog.export.title')}
					</DialogTitle>
					<DialogDescription className={textMuted}>
						{t('auditLog.export.description')}
					</DialogDescription>
				</DialogHeader>

				<div className="space-y-6 py-4">
					<div className="space-y-2">
						<Label className={textStrong}>
							{t('auditLog.export.fileName')}
						</Label>
						<Input
							value={options.fileName}
							onChange={(e) =>
								setOptions({
									...options,
									fileName: e.target.value,
								})
							}
							placeholder={t('auditLog.export.fileNamePlaceholder')}
							className={cn(
								border,
								surface,
								textStrong,
								'placeholder:text-gray-400 dark:placeholder:text-gray-500',
							)}
						/>
					</div>

					<div className="space-y-4">
						<Label className={textStrong}>
							{t('auditLog.export.format')}
						</Label>
						<RadioGroup
							value={options.format}
							onValueChange={(value: 'csv' | 'json' | 'xlsx') =>
								setOptions({ ...options, format: value })
							}
							className="grid grid-cols-3 gap-4"
						>
							{[
								{
									value: 'csv',
									icon: FileText,
									label: t('auditLog.export.csv'),
								},
								{
									value: 'json',
									icon: FileText,
									label: t('auditLog.export.json'),
								},
								{
									value: 'xlsx',
									icon: FileSpreadsheet,
									label: t('auditLog.export.excel'),
								},
							].map(({ value, icon: Icon, label }) => (
								<div key={value}>
									<RadioGroupItem
										value={value}
										id={value}
										className="peer sr-only"
									/>
									<Label
										htmlFor={value}
										className={cn(
											'flex flex-col items-center justify-between rounded-md border-2 p-4 cursor-pointer transition-all',
											borderMuted,
											surface,
											hoverBg,
											hoverText,
											'peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary',
											options.format === value &&
											primaryBorder,
										)}
									>
										<Icon
											className={cn(
												'mb-3 h-6 w-6',
												textMuted,
											)}
										/>
										<span className={textStrong}>
											{label}
										</span>
									</Label>
								</div>
							))}
						</RadioGroup>
					</div>

					<div className="space-y-4">
						<div className="flex items-center space-x-2">
							<Checkbox
								id="includeDetails"
								checked={options.includeDetails}
								onCheckedChange={(checked) =>
									setOptions({
										...options,
										includeDetails: checked as boolean,
									})
								}
							/>
							<Label
								htmlFor="includeDetails"
								className={cn('cursor-pointer', textStrong)}
							>
								{t('auditLog.export.includeDetails')}
							</Label>
						</div>
						<div className="flex items-center space-x-2">
							<Checkbox
								id="dateRange"
								checked={options.dateRange}
								onCheckedChange={(checked) =>
									setOptions({
										...options,
										dateRange: checked as boolean,
									})
								}
							/>
							<Label
								htmlFor="dateRange"
								className={cn('cursor-pointer', textStrong)}
							>
								{t('auditLog.export.includeDateRange')}
							</Label>
						</div>
					</div>
				</div>

				<DialogFooter>
					<Button
						variant="outline"
						onClick={() => onOpenChange(false)}
						className={cn(border, surface, textStrong, hoverBg)}
					>
						{t('auditLog.export.cancel')}
					</Button>
					<Button onClick={handleExport} className={cn(primaryBtn)}>
						<Download className="mr-2 h-4 w-4" />
						{t('auditLog.export.export')}
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	)
}
