/**
 * MOCKUP #1: Top Nav Integrated Sync Banner
 * 
 * This version transforms the TopNav itself during sync:
 * - Progress bar runs along the bottom edge of the nav
 * - Status text appears in the center of the nav
 * - Subtle color shift and glow effect during active sync
 * - Feels like a core system function, not a notification
 * 
 * Usage: Replace the current TopNav component or integrate this as a child
 */

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

const SyncingBannerTopNavIntegrated = ({ 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 shortText = "Syncing..."; // Shorter version for nav

	if (syncData?.is_initiating) {
		const isManualFullSync = syncData?.current_sync_context?.is_manual_full_sync;
		if (isManualFullSync) {
			mainText = "Preparing full sync...";
			shortText = "Preparing full sync...";
		} else {
			mainText = "Analyzing updates...";
			shortText = "Analyzing...";
		}
	} else if (currentType === 'preparing') {
		const isManualFullSync = syncData?.current_sync_context?.is_manual_full_sync;
		mainText = currentName || "Preparing sync";
		shortText = "Preparing...";
	} else if (currentType === 'maintenance') {
		mainText = "Maintenance sync";
		shortText = "Maintenance sync";
	} else if (currentType === 'none') {
		mainText = "All up to date";
		shortText = "Up to date";
	} else if (currentType && isCurrentTypeEnabled && syncData?.totals?.[currentType] > 0) {
		const currentProgress = syncData?.progress?.[currentType] ?? 0;
		const currentTotal = syncData?.totals?.[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 = `Syncing ${displayName}: ${currentProgress}/${currentTotal} (${percentage}%)`;
			shortText = `${displayName}: ${percentage}%`;
		}
	}

	// 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), 2000);
			return () => clearTimeout(timer);
		}
	}, [isActivelyProcessing, currentType]);

	if (!isVisible) return null;

	return (
		<>
			{/* Overlay bar that sits below the TopNav */}
			<div 
				className="relative overflow-hidden transition-all duration-300"
				style={{
					backgroundColor: isActivelyProcessing ? 'rgba(14, 94, 207, 0.95)' : 'rgba(16, 185, 129, 0.95)',
					borderBottom: '1px solid rgba(255, 255, 255, 0.2)',
				}}
			>
				{/* Animated gradient background for active sync */}
				{isActivelyProcessing && (
					<div 
						className="absolute inset-0 opacity-30"
						style={{
							background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)',
							animation: 'shimmer 2s infinite',
						}}
					/>
				)}

				{/* Content */}
				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
					<div className="flex items-center justify-center h-12 gap-3">
						{/* Icon */}
						{isActivelyProcessing ? (
							<img
								src={syncingImg}
								alt='Syncing'
								className='w-5 h-5 animate-spin brightness-0 invert'
							/>
						) : (
							<svg className="w-5 h-5 text-white" 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>
						)}
						
						{/* Status Text */}
						<div className="text-white">
							<span className="font-medium text-sm hidden md:inline">{mainText}</span>
							<span className="font-medium text-sm md:hidden">{shortText}</span>
						</div>

						{/* Progress percentage badge */}
						{!syncData?.is_initiating && currentType && syncData?.totals?.[currentType] > 0 && (
							<div className="bg-white/20 px-2 py-1 rounded-full text-xs font-semibold text-white">
								{Math.round(overallProgress)}%
							</div>
						)}
					</div>
				</div>

				{/* Progress bar at bottom edge */}
				{!syncData?.is_initiating && currentType && syncData?.totals?.[currentType] > 0 && (
					<div className="absolute bottom-0 left-0 right-0 h-1 bg-white/20">
						<div 
							className="h-full bg-white transition-all duration-300 ease-out"
							style={{ 
								width: `${overallProgress}%`,
								boxShadow: '0 0 10px rgba(255, 255, 255, 0.5)',
							}}
						/>
					</div>
				)}
			</div>

			{/* CSS Animation */}
			<style>{`
				@keyframes shimmer {
					0% { transform: translateX(-100%); }
					100% { transform: translateX(100%); }
				}
			`}</style>
		</>
	);
};

export default SyncingBannerTopNavIntegrated;