import { FiFile, FiImage, FiMusic, FiFileText, FiDownload, FiX } from 'react-icons/fi';

export interface FileMetadata {
	type: 'audio' | 'image' | 'document' | 'spreadsheet' | 'other';
	mimeType: string;
	size: number;
	originalName: string;
	url: string;
	thumbnailUrl?: string;
}

export interface FilePreviewProps {
	file: FileMetadata;
	onRemove?: () => void;
	showRemove?: boolean;
	compact?: boolean;
}

export function FilePreview({ file, onRemove, showRemove = false, compact = false }: FilePreviewProps) {
	const formatFileSize = (bytes: number): string => {
		if (bytes < 1024) return `${bytes} B`;
		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
	};

	const getFileIcon = () => {
		switch (file.type) {
			case 'audio':
				return <FiMusic className='w-5 h-5' />;
			case 'image':
				return <FiImage className='w-5 h-5' />;
			case 'document':
				return <FiFileText className='w-5 h-5' />;
			case 'spreadsheet':
				return <FiFileText className='w-5 h-5' />;
			default:
				return <FiFile className='w-5 h-5' />;
		}
	};

	const handleDownload = () => {
		const link = document.createElement('a');
		link.href = file.url;
		link.download = file.originalName;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	};

	if (compact) {
		// Compact view with thumbnail for images
		if (file.type === 'image') {
			return (
				<div className='relative group'>
					<img
						src={file.thumbnailUrl || file.url}
						alt={file.originalName}
						className='w-20 h-20 rounded-lg border border-border object-cover cursor-pointer'
						onClick={() => window.open(file.url, '_blank')}
					/>
					{showRemove && onRemove && (
						<button
							onClick={onRemove}
							className='absolute -top-2 -right-2 p-1 bg-danger text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-md'
							aria-label='Remove file'
						>
							<FiX className='w-3 h-3' />
						</button>
					)}
				</div>
			);
		}

		return (
			<div className='flex items-center gap-2 p-2 bg-bg-card rounded-lg border border-border'>
				{getFileIcon()}
				<span className='text-sm text-text-primary truncate flex-1'>{file.originalName}</span>
				{showRemove && onRemove && (
					<button
						onClick={onRemove}
						className='p-1 hover:bg-bg-hover rounded transition-colors'
						aria-label='Remove file'
					>
						<FiX className='w-4 h-4 text-text-secondary' />
					</button>
				)}
			</div>
		);
	}

	return (
		<div className='relative group'>
			{file.type === 'image' ? (
				<div className='relative'>
					<img
						src={file.thumbnailUrl || file.url}
						alt={file.originalName}
						className='max-w-xs max-h-48 rounded-lg border border-border object-cover cursor-pointer hover:opacity-90 transition-opacity'
						onClick={() => window.open(file.url, '_blank')}
					/>
					{showRemove && onRemove && (
						<button
							onClick={onRemove}
							className='absolute top-2 right-2 p-1 bg-danger text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-md'
							aria-label='Remove file'
						>
							<FiX className='w-4 h-4' />
						</button>
					)}
				</div>
			) : file.type === 'audio' ? (
				<div className='p-4 bg-bg-card rounded-lg border border-border'>
					<div className='flex items-center gap-3'>
						<div className='p-2 bg-sidebar-bg rounded-lg text-sidebar-text'>{getFileIcon()}</div>
						<div className='flex-1 min-w-0'>
							<p className='text-sm font-medium text-text-primary truncate'>{file.originalName}</p>
							<p className='text-xs text-text-secondary'>{formatFileSize(file.size)}</p>
						</div>
						<audio controls className='flex-1 max-w-xs'>
							<source src={file.url} type={file.mimeType} />
						</audio>
						{showRemove && onRemove && (
							<button
								onClick={onRemove}
								className='p-2 hover:bg-bg-hover rounded transition-colors'
								aria-label='Remove file'
							>
								<FiX className='w-4 h-4 text-text-secondary' />
							</button>
						)}
					</div>
				</div>
			) : (
				<div className='flex items-center gap-3 p-3 bg-bg-card rounded-lg border border-border'>
					<div className='p-2 bg-sidebar-bg rounded-lg text-sidebar-text'>{getFileIcon()}</div>
					<div className='flex-1 min-w-0'>
						<p className='text-sm font-medium text-text-primary truncate'>{file.originalName}</p>
						<p className='text-xs text-text-secondary'>{formatFileSize(file.size)}</p>
					</div>
					<button
						onClick={handleDownload}
						className='p-2 hover:bg-bg-hover rounded transition-colors'
						aria-label='Download file'
					>
						<FiDownload className='w-4 h-4 text-text-secondary' />
					</button>
					{showRemove && onRemove && (
						<button
							onClick={onRemove}
							className='p-2 hover:bg-bg-hover rounded transition-colors'
							aria-label='Remove file'
						>
							<FiX className='w-4 h-4 text-text-secondary' />
						</button>
					)}
				</div>
			)}
		</div>
	);
}