'use client'

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper/modules';
import Image from 'next/image';
import 'swiper/css';
import 'swiper/css/pagination';
import testImage from '@/app/src/image-preview.png'
import { useEffect, useRef } from 'react';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { useQuery } from '@tanstack/react-query';
import { getViolationFilesArray } from '@/app/actions/violationActions';

interface ViolationFile {
	createdAt: string;
	fileId: string;
	fileName: string;
	fileSize: number;
	latestViolationDate: string;
	mimeType: string;
	status: string;
	supportId: number;
	violationCount: number;
}

export default function ViolationsCarousel() {
	const {
		data: violationData,
		isLoading,
		isError,
		error,
	} = useQuery<ViolationFile[]>({
		queryKey: ['violationData'],
		queryFn: () => getViolationFilesArray(),

		select: (data) => {
			return data;
		},
		/* refetchInterval: 30000 */
	});
	const paginationRef = useRef(null);
	const t = useTranslations('Global');

	useEffect(() => {
		console.log(violationData);
	}, [violationData])

	return (
		<div className="content-section">
			<div className="section-header">
				<h3 className="section-title">{t('violation')}</h3>
				<Link
					href="violations"
					className="view-all-link"
				>
					Смотреть все
				</Link>
			</div>
			<div>
				{t('are-no-violations')}
			</div>
			<div className="violations-carousel">
				<Swiper
					spaceBetween={50}
					slidesPerView={1}
					modules={[Pagination, Autoplay]}
					pagination={{
						clickable: true,
						el: '.custon-swiper-pagination'
					}}
					loop={true}
					autoplay={{
						delay: 3000,
						disableOnInteraction: false,
					}}
				>
					{/* {violationData?.map(item => {
						return (
							<SwiperSlide>
								<div
									className="violation-slide"
								>

								</div>
							</SwiperSlide>
						)
					})} */}
{/* 					<SwiperSlide>
						<div className="violation-slide">
							<div className="violation-image-container">
								<Image src={testImage} alt="Preview" className="violation-image" />
								<div className="violation-badge">НАРУШЕНИЕ</div>
								<div className="violation-status-badge">ОБРАБОТАНО</div>
							</div>

							<div className="violation-content">
								<div className="violation-title-row">
									<div className="violation-filename">
										🖼️banner111.png</div>
									<div className="violation-type-badge photo">
										Фото
									</div>
								</div>

								<div className="violation-info-grid">
									<div className="violation-info-item">
										<div className="violation-info-label">
											🌍 Регион
										</div>
										<div className="violation-info-value">
											<span className="region-flag">🇺🇸</span>
											<span>США</span>
										</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📅 Обнаружено</div>
										<div className="violation-info-value">
											17.10.2025</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">🌐 Домен</div>
										<div className="violation-info-value">
											m.apkpure.com    </div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📊 Категория</div>
										<div className="violation-info-value">
											Единичное
										</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">📁 Тип</div>
										<div className="violation-info-value">
											Изображение</div>
									</div>

									<div className="violation-info-item">
										<div className="violation-info-label">⚡ Статус</div>
										<div className="violation-info-value">
											✅ Обработано</div>
									</div>
								</div>

								<div className="violation-actions-row">
									<button className="btn-visit-site">
										🔗 Перейти на сайт
									</button>
									<button className="violation-action">
										🚨 Открыть дело
									</button>
								</div>
							</div>
						</div>
					</SwiperSlide> */}
				</Swiper>
				<div
					className="flex justify-center mt-6"
				>
					<div
						ref={paginationRef}
						className="flex justify-center gap-2 custon-swiper-pagination"
					>
					</div>
				</div>
			</div>
		</div>
	)
}