'use client'

import { useQuery } from '@tanstack/react-query';
import { getUserFilesData } from '@/app/actions/fileEntity';
import { useEffect, useState, useRef } from 'react';
import { FileTypeIcon } from '@/app/components/FileTypeIcon';
import { convertBytes } from '@/app/lib/convertBytes';
import { useTranslations } from 'next-intl';
import { useClickOutside } from '@/app/hooks/useClickOutside';
import Link from 'next/link';

type FileItem = {
	id: string;
	fileName: string;
	fileType: string;
	size?: number | undefined;
	uploadDate?: number;
	protectStatus: string;
	supportId: number;
};

type ApiFile = {
	id: string;
	originalFileName: string;
	mimeType: string;
	fileSize: number;
	updatedAt: string;
	protectStatus: string;
	supportId: number;
};

type ApiResponse = {
	files?: ApiFile[];
};

export default function DashboardUserFiles() {
	const {
		data: tableData,
		isLoading,
		isError,
		error,
	} = useQuery<ApiResponse, Error, FileItem[], ['userFilesData', number, number]>({
		queryKey: ['userFilesData', 1, 5],
		queryFn: () => getUserFilesData(1, 5),

		select: (data: ApiResponse): FileItem[] => {
			if (!data?.files) return [];

			return data.files.map((item: ApiFile) => {
				const [datePart, timePart] = item.updatedAt.split(' ');
				const [day, month, year] = datePart.split('-').map(Number);
				const [hours, minutes, seconds] = timePart.split(':').map(Number);
				const newDate = new Date(year, month - 1, day, hours, minutes, seconds).getTime();

				return {
					id: item.id,
					fileName: item.originalFileName,
					fileType: item.mimeType.toLocaleLowerCase(),
					size: item.fileSize,
					uploadDate: newDate,
					protectStatus: item.protectStatus,
					supportId: item.supportId,
				};
			});
		},
	});

	const t = useTranslations('Global');
	const [openDropDownList, setOpenDropDownList] = useState(false);
	const dropDownList = useRef(null);
	useClickOutside(
		dropDownList,
		() => {
			setOpenDropDownList(false)
		},
		openDropDownList
	);

	const formatDate = (timestamp: number) => {
		const date = new Date(timestamp);
		const day = date.getDate().toString().padStart(2, '0');
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const year = date.getFullYear();

		return `${day}.${month}.${year}`;
	};

	return (
		<div className="content-section">
			<div className="section-header">
				<h3 className="section-title">Ваши файлы</h3>
				<div
					className="section-add-file btn view-all-link"
					onClick={() => {
						setOpenDropDownList(!openDropDownList);
					}}
					ref={dropDownList}
				>
					{t('add')}
					<div
						className={`section-drop-down-list ${openDropDownList ? 'opened' : ''}`}
					>
						<div
							className="flex flex-col text-center"
						>
							<Link href='/pages/marking-images'>
								{t('photo-marking')}
							</Link>
							<Link href='/pages/marking-video'>
								{t('video-marking')}
							</Link>
							<Link href='/pages/marking-audio'>
								{t('audio-marking')}
							</Link>
						</div>
					</div>
				</div>
			</div>

			<div className="user-files-list">

				{tableData?.length ? (
					tableData?.map((file) => {
						return (
							<div
								key={file.id}
								className="file-item"
							>
								<div className="file-icon">
									<FileTypeIcon type={file.fileType} />
								</div>
								<div className="file-info">
									<div className="file-name" title={file.fileName}>
										{file.fileName}
									</div>
									<div className="file-meta">
										{convertBytes(file.size ? file.size : 0)} • {formatDate(file.uploadDate ? file.uploadDate : 0)}
									</div>
								</div>
								<div className="file-badge protected">
									{file.protectStatus ? t(file.protectStatus) : t('error')}
								</div>
							</div>
						)
					})
				) : (
					<div>
						{t('there-are-no-files-yet')}
					</div>
				)}
			</div>
		</div>
	)
}