import React, { useEffect, useRef, useState } from 'react';
import Autoplay from 'embla-carousel-autoplay';
import {
	Carousel,
	CarouselApi,
	CarouselContent,
	CarouselItem,
	CarouselNext,
	CarouselPrevious,
} from '@repo/ui/components/carousel';
import CarouselComponent from './CarouselComponent';


const LbbzPage: React.FC = () => {
	// const plugin = useRef(Autoplay({ delay: 1000, stopOnInteraction: true }));
	// const [currentIndex, setCurrentIndex] = useState(0);
	// const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
	// 模拟舆情数据
	const mockYuqingData = [
		{ id: 1, title: '开源舆情2025第2期', date: '20250113' },
		{ id: 2, title: '开源舆情2025第1期', date: '20250107' },
		{ id: 3, title: '开源舆情2024第52期', date: '20241220' },
		{ id: 4, title: '开源舆情2024第51期', date: '20241211' },
		{ id: 5, title: '开源舆情2024第50期', date: '20241127' },
		{ id: 6, title: '开源舆情2024第49期', date: '20241116' },
		{ id: 7, title: '开源舆情2024第48期', date: '20241020' },
		{ id: 8, title: '开源舆情2024第47期', date: '20241016' },
		{ id: 9, title: '开源舆情2025第2期', date: '20250113' },
		{ id: 10, title: '开源舆情2025第1期', date: '20250107' },
		{ id: 11, title: '开源舆情2024第52期', date: '20241220' },
		{ id: 12, title: '开源舆情2024第51期', date: '20241211' },
		{ id: 13, title: '开源舆情2024第50期', date: '20241127' },
		{ id: 14, title: '开源舆情2024第49期', date: '20241116' },
		{ id: 15, title: '开源舆情2024第48期', date: '20241020' },
		{ id: 16, title: '开源舆情2024第47期', date: '20241016' },
	];
	const carouselData1= [
		{
			id: 1,
			image: '/header.png',
			title: '军事风云第一期',
		},
		{
			id: 2,
			image: '/book1.png',
			title: '军事风云第二期  ',
		},
		{
			id: 3,
			image: '/book2.png',
			title: '军事风云第三期',
		},
		{
			id: 4,
			image: '/x1.png',
			title: '军事风云第三期',
		},
		{
			id: 5,
			image: '/x2.png',
			title: '军事风云第三期',
		},
	];

	// // 监听幻灯片变化
	// useEffect(() => {
	// 	if (!carouselAPI) return;

	// 	const updateCurrentIndex = () => {
	// 		setCurrentIndex(carouselAPI.selectedScrollSnap());
	// 	};

	// 	carouselAPI.on('select', updateCurrentIndex);

	// 	return () => {
	// 		carouselAPI.off('select', updateCurrentIndex);
	// 	};
	// }, [carouselAPI]);

	// 滚动到指定索引
			// const scrollToIndex = (index: number) => {
			// 	if (carouselAPI) {
			// 		carouselAPI.scrollTo(index);
			// 		setCurrentIndex(index); // 更新当前索引
	// 	}
	// };

	// 将数据分成两列
	const leftColumnData = mockYuqingData.slice(0, 8);
	const rightColumnData = mockYuqingData.slice(8, 16);

	return (
		<>
			<div className="h-[677px] w-[1514px] mx-auto relative">
				{/* 上部容器 */}
				<div className="h-[60px] w-full relative">
					<p className="h-full w-full text-4xl font-bold text-[#005d93] italic absolute left-0 mt-2">练兵备战</p>
				</div>

				{/* 下部容器 */}
				<div className="h-[607px] w-[1300px] bg-[#082b69] flex flex-col">
					{/* 上半部分 - 三个并排的容器 */}
					<div className="flex">
						<div className="h-[305px] w-[400px] ml-5 mt-5">
						<CarouselComponent carouselData={carouselData1} />

							<div className="h-[50px] w-[400px] text-white font-medium flex items-center justify-center text-3xl mt-3">
								军事风云
							</div>
						</div>
						<div className="h-[305px] w-[400px] ml-5 mt-5">
						<CarouselComponent carouselData={carouselData1} />
							<div className="h-[50px] w-[400px]   text-white font-medium flex items-center justify-center text-3xl mt-3">
								演训聚焦
							</div>
						</div>
						<div className="h-[305px] w-[400px] ml-5 mt-5">
							<div className="h-[255px] w-[400px] ">1</div>
							<div className="h-[50px] w-[400px]  text-white font-medium flex items-center justify-center text-3xl mt-3">
								开源舆情
							</div>
						</div>
					</div>

					{/* 下方新增的容器 */}
					<div className="h-[280px] w-[1280px]  ml-5 mt-8 flex">
						{/* 左侧 */}
						<div className="flex-1 mr-[-80px] ">
							{/* 环球IOS标题 */}
							<div className="text-white text-3xl  flex items-center ml-[10px]">
								<span
									style={{ writingMode: 'vertical-lr', textOrientation: 'mixed' }}
									className="text-white text-3xl mb-35"
								>
									环球70S
								</span>
							</div>
						</div>

						{/* 中间 -  */}
						<div className=" flex space-x-1 mb-8 ml-[100px]">
							<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
								<div
									className="h-[130px] w-[262px] bg-cover bg-center"
									style={{ backgroundImage: 'url(/header.png)' }}
								></div>
								<div className="p-3 text-center relative">
									<div className="absolute top-1 left-0 bg-red-500 text-white px-2 py-1 text-sm rounded-sm">
										2024年40期
									</div>
									<p className=" font-medium mt-8 ">巴格多格拉空军基地</p>
								</div>
							</div>

							{/* 宣布亚空军基地 */}
							<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
								<div
									className="h-[130px] w-[262px] bg-gray-400 bg-cover bg-center"
									style={{ backgroundImage: 'url(/header.png)' }}
								></div>
								<div className="p-3 text-center relative">
									<div className="absolute top-1 left-0 bg-blue-500 text-white px-2 py-1 text-sm rounded-sm">
										2024年39期
									</div>
									<p className="font-medium  mt-8">宣布亚空军基地</p>
								</div>
							</div>
						</div>

						{/* 右侧 - 形势战备 */}
						<div className="flex-1">
							{/* 形势战备标题 */}
							<div className="text-white text-3xl ml-[10px] h-full flex items-center">
								<span
									style={{ writingMode: 'vertical-lr', textOrientation: 'mixed' }}
									className="text-white text-3xl mb-35"
								>
									形势战备
								</span>
							</div>
						</div>

						{/* 右侧卡片区域 */}
						<div className="flex space-x-1 mb-8 mr-[100px] ml-[10px]">
							{/* 形势战备教育2024年第13期 */}
							<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
								<div
									className="h-[130px] w-[262px] bg-cover bg-center"
									style={{ backgroundImage: 'url(/header.png)' }}
								></div>
								<div className="p-3 text-center relative">
									<div className="absolute top-1 left-0 bg-orange-500 text-white px-2 py-1 text-sm rounded-sm">
										2024年第13期
									</div>
									<p className="text-gray-800 font-medium mt-8">形势战备教育2024年第13期</p>
								</div>
							</div>

							{/* 形势战备教育2024年第12期 */}
							<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1 mr-[20px]">
								<div
									className="h-[130px] w-[262px] bg-cover bg-center"
									style={{ backgroundImage: 'url(/header.png)' }}
								></div>
								<div className="p-3 text-center relative">
									<div className="absolute top-1 left-0 bg-green-600 text-white px-2 py-1 text-sm rounded-sm">
										2024年第12期
									</div>
									<p className="text-gray-800 font-medium mt-8">形势战备教育2024年第12期</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			{/* 舆情区域 - 两列布局 */}
			<div className="h-[335px] w-[705px] bg-[#ffffff] absolute right-35 transform translate-y-[-677px] p-6">
				<div className="flex h-full">
					{/* 左列 */}
					<div className="flex-1 pr-4">
						{leftColumnData.map((item) => (
							<div key={item.id} className="flex items-center justify-between py-1 mt-1">
								{/* 左侧钻石图标和标题 */}
								<div className="flex items-center flex-1">
									<div
										className="w-3 h-3 bg-black mr-2 flex-shrink-0"
										style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}
									></div>
									<p className="text-[16px] flex-1">{item.title}</p>
								</div>
								{/* 右侧日期 */}
								<span className="text-[14px]  ml-2">{item.date}</span>
							</div>
						))}
					</div>

					{/* 右列 */}
					<div className="flex-1 pl-4 ">
						{rightColumnData.map((item) => (
							<div key={item.id} className="flex items-center justify-between py-1 mt-1">
								{/* 左侧钻石图标和标题 */}
								<div className="flex items-center flex-1">
									<div
										className="w-3 h-3 bg-black mr-2 flex-shrink-0"
										style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}
									></div>
									<p className="text-[16px]  flex-1">{item.title}</p>
								</div>
								{/* 右侧日期 */}
								<span className="text-[14px]  ml-2">{item.date}</span>
							</div>
						))}
					</div>
				</div>
			</div>
		</>
	);
};

export default LbbzPage;