/**
 * MOCKUP #2: Below Nav Sync Banner
 * 
 * This version slides down from below the TopNav:
 * - Slim banner with glassmorphic effect
 * - Slides in/out smoothly
 * - Full width but contained within max-w-7xl
 * - Shows detailed progress with visual hierarchy
 * - Feels integrated but distinct from nav
 * 
 * Usage: Place this component right after TopNav in the layout
 */

import { useEffect, useState } from 'react';
import syncingImg from "../../../assets/syncing.svg";

const SyncingBannerBelowNav = ({ options, syncData }) => {
	const [isVisible, setIsVisible] = useState(false);

	// Check which content types are enabled
	const isProjectsEnabled = options["general-settings"]["project-show"] === "yes";
	const isEmployeesEnabled = options["general-settings"]["employee-show"] === "yes";
	const isTextAssetsEnabled = options["general-settings"]["text-assets-show"] === "yes";

	// Get current sync context
	const currentContext = syncData?.current_sync_context;
	const currentType = currentContext?.type;
	const currentName = currentContext?.name;

	// Check if current type is actually enabled
	const isCurrentTypeEnabled = (
		(currentType === 'projects' && isProjectsEnabled) ||
		(currentType === 'employees' && isEmployeesEnabled) ||
		(currentType === 'text_assets' && isTextAssetsEnabled) ||
		(currentType === 'maintenance') ||
		(currentType === 'none') ||
		(currentType === 'preparing')
	);

	// Generate context-aware status text
	let mainText = "Syncing with OpenAsset...";
	let detailText = "";

	if (syncData?.is_initiating) {
		const isManualFullSync = syncData?.current_sync_context?.is_manual_full_sync;
		if (isManualFullSync) {
			mainText = "Preparing full sync...";
			detailText = "Processing all data...";
		} else {
			mainText = "Preparing sync...";
			detailText = "Analyzing what needs updating...";
		}
	} else if (currentType === 'preparing') {
		const isManualFullSync = syncData?.current_sync_context?.is_manual_full_sync;
		mainText = currentName || "Preparing sync";
		if (isManualFullSync) {
			detailText = "Preparing to sync all data regardless of timestamps...";
		} else {
			detailText = "Initializing sync process...";
		}
	} else if (currentType === 'maintenance') {
		mainText = currentName || "Periodic maintenance sync";
		const currentDetail = syncData?.current_sync_context?.detail;
		if (currentDetail) {
			detailText = currentDetail;
		} else {
			detailText = "Checking for orphaned content and ensuring data integrity";
		}
	} else if (currentType === 'none') {
		mainText = "All up to date";
		const totalItemsAvailable = (syncData?.total_available?.projects || 0) + 
									(syncData?.total_available?.employees || 0) + 
									(syncData?.total_available?.text_assets || 0);
		if (totalItemsAvailable > 0) {
			detailText = `${totalItemsAvailable} items checked, all current`;
		} else {
			detailText = `No items to check`;
		}
	} else if (currentType && isCurrentTypeEnabled && syncData?.totals?.[currentType] > 0) {
		const currentProgress = syncData?.progress?.[currentType] ?? 0;
		const currentTotal = syncData?.totals?.[currentType] ?? 0;
		const currentTotalAvailable = syncData?.total_available?.[currentType] ?? 0;
		
		if (currentTotal > 0) {
			const percentage = Math.round((currentProgress / currentTotal) * 100);
			
			let displayName = currentName;
			if (currentType === 'projects') {
				displayName = options["general-settings"]["project-name-plural"] || "Projects";
			} else if (currentType === 'employees') {
				displayName = options["general-settings"]["employee-name-plural"] || "Employees";
			} else if (currentType === 'text_assets') {
				displayName = options["general-settings"]["text-assets-name-plural"] || "Text Assets";
			}
			
			mainText = `Processing ${currentProgress} of ${currentTotal} ${displayName}`;
			
			if (currentTotalAvailable > currentTotal) {
				detailText = `${currentTotalAvailable} total available, ${currentTotal} updated`;
			}
		}
	}

	// Determine if we should show as actively processing
	const isActivelyProcessing = syncData?.is_initiating || 
		currentType === 'preparing' ||
		currentType === 'maintenance' ||
		(syncData?.totals && Object.values(syncData.totals).some(count => count > 0));

	// Calculate overall progress percentage
	let overallProgress = 0;
	if (!syncData?.is_initiating && currentType && syncData?.totals?.[currentType] > 0) {
		overallProgress = ((syncData?.progress?.[currentType] ?? 0) / syncData.totals[currentType]) * 100;
	}

	// Show/hide with animation
	useEffect(() => {
		if (isActivelyProcessing || currentType === 'none') {
			setIsVisible(true);
		} else {
			// Delay hiding to show completion state
			const timer = setTimeout(() => setIsVisible(false), 3000);
			return () => clearTimeout(timer);
		}
	}, [isActivelyProcessing, currentType]);

	return (
		<div 
			className="fixed left-0 right-0 z-40 overflow-hidden transition-all duration-500 ease-out"
			style={{
				top: '96px', // 32px WP admin bar + 64px teal nav
				maxHeight: isVisible ? '200px' : '0',
				opacity: isVisible ? 1 : 0,
				transform: isVisible ? 'translateY(0)' : 'translateY(-20px)',
			}}
		>
			{/* Glassmorphic banner */}
			<div 
				className="relative backdrop-blur-md border-b"
			style={{
				background: isActivelyProcessing 
					? 'linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(30, 64, 175, 0.12) 100%)'
					: 'linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.12) 100%)',
				borderColor: isActivelyProcessing 
					? 'rgba(37, 99, 235, 0.2)' 
					: 'rgba(16, 185, 129, 0.2)',
			}}
			>
			{/* Animated gradient border top */}
			{isActivelyProcessing && (
				<div 
					className="absolute top-0 left-0 right-0 h-0.5"
					style={{
						background: 'linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.8), transparent)',
						animation: 'slideGradient 2s infinite',
					}}
				/>
			)}

				<div className="max-w-7xl px-4 sm:px-6 lg:px-8">
					<div className="py-4">
						<div className="flex items-start gap-4">
							{/* Status Icon */}
							<div className="flex-shrink-0">
								{isActivelyProcessing ? (
									<div className="relative">
										<img
											src={syncingImg}
											alt='Syncing'
											className='w-6 h-6 animate-spin'
											style={{ filter: 'brightness(0) saturate(100%) invert(42%) sepia(13%) saturate(1844%) hue-rotate(131deg) brightness(94%) contrast(88%)' }}
										/>
										{/* Pulse ring */}
										<div 
											className="absolute inset-0 rounded-full"
											style={{
												border: '2px solid rgba(37, 99, 235, 0.3)',
												animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
											}}
										/>
									</div>
								) : (
									<div className="relative">
										<svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
											<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
										</svg>
										{/* Success pop animation */}
										<div 
											className="absolute inset-0 rounded-full bg-green-200"
											style={{
												animation: 'successPop 0.6s ease-out',
											}}
										/>
									</div>
								)}
							</div>

							{/* Main Content */}
							<div className="flex-grow min-w-0">
								<div className="flex items-center gap-3">
									<h3 
										className="font-semibold text-sm"
										style={{ color: 'var(--oa-text-primary)' }}
									>
										{mainText}
									</h3>
									
									{/* Progress badge */}
									{!syncData?.is_initiating && currentType && syncData?.totals?.[currentType] > 0 && (
										<span 
											className="px-2 py-0.5 rounded-full text-xs font-semibold"
											style={{
												backgroundColor: 'rgba(37, 99, 235, 0.1)',
												color: '#2563eb',
											}}
										>
											{Math.round(overallProgress)}%
										</span>
									)}
								</div>
								
								{/* Detail text */}
								{detailText && (
									<p 
										className="text-xs mt-1.5"
										style={{ color: 'var(--oa-text-tertiary)' }}
									>
										{detailText}
									</p>
								)}

								{/* Progress bar */}
								{!syncData?.is_initiating && currentType && syncData?.totals?.[currentType] > 0 && (
									<div className="mt-3 relative">
										<div 
											className="h-1.5 rounded-full overflow-hidden"
											style={{ backgroundColor: 'rgba(37, 99, 235, 0.1)' }}
										>
											<div 
												className="h-full rounded-full transition-all duration-300 ease-out relative overflow-hidden"
												style={{ 
													width: `${overallProgress}%`,
													background: 'linear-gradient(90deg, #2563eb 0%, #1e40af 100%)',
												}}
											>
												{/* Shimmer effect on progress bar */}
												<div 
													className="absolute inset-0"
													style={{
														background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)',
														animation: 'shimmer 1.5s infinite',
													}}
												/>
											</div>
										</div>
									</div>
								)}
							</div>
						</div>
					</div>
				</div>
			</div>

			{/* CSS Animations */}
			<style>{`
				@keyframes shimmer {
					0% { transform: translateX(-100%); }
					100% { transform: translateX(100%); }
				}
				
				@keyframes slideGradient {
					0% { transform: translateX(-100%); }
					100% { transform: translateX(100%); }
				}
				
				@keyframes pulse {
					0%, 100% {
						opacity: 1;
						transform: scale(1);
					}
					50% {
						opacity: 0.5;
						transform: scale(1.3);
					}
				}
				
				@keyframes successPop {
					0% {
						opacity: 0.8;
						transform: scale(0.8);
					}
					50% {
						opacity: 0.4;
						transform: scale(1.5);
					}
					100% {
						opacity: 0;
						transform: scale(2);
					}
				}
			`}</style>
		</div>
	);
};

export default SyncingBannerBelowNav;