/**
 * Sync Banner - Fixed Bottom
 * 
 * This banner slides up from the bottom of the page:
 * - Fixed positioning at bottom: 0
 * - Glassmorphic effect with teal brand colors
 * - Slides in/out smoothly
 * - Shows detailed progress with visual hierarchy
 * - Stays visible as user scrolls
 * 
 * Note: Old bottom-right toast version backed up as SyncingBanner_OLD_BACKUP.jsx
 */

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

const SyncingBanner = ({ options, syncData, position = 'belowHeader' }) => {
	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]);

	if (!isVisible && !isActivelyProcessing && currentType !== 'none') {
		return null;
	}

	// Position styles based on prop
	// WP admin bar (32px) + TopNav height (64px) + border (1px) = 97px
	const positionStyles = position === 'belowHeader' ? {
		top: '97px',
		left: '160px',
		right: '0',
		bottom: 'auto',
		transform: isVisible ? 'translateY(0)' : 'translateY(-100%)',
	} : {
		bottom: '0',
		left: '160px',
		right: '0',
		top: 'auto',
		transform: isVisible ? 'translateY(0)' : 'translateY(100%)',
	};

	return (
		<div 
			className="fixed z-50 overflow-hidden"
			style={{
				...positionStyles,
				marginTop: 0,
				maxHeight: isVisible ? '200px' : '0',
				opacity: isVisible ? 1 : 0,
				transition: 'all 500ms ease-out',
			}}
		>
			{/* Solid teal banner */}
			<div 
			className="relative border-b"
			style={{
				background: isActivelyProcessing 
					? '#dbeafe' // Light blue for active sync
					: '#e6f7f0', // Light green for success
				borderColor: isActivelyProcessing 
					? '#93c5fd' 
					: '#b3e6cc',
			}}
			>
				{/* 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 SyncingBanner;