/**
 * Sync Banner Demo Page
 * 
 * Standalone page to preview the current sync banner with simulated states
 * Toggle between below-header and bottom-fixed positioning
 */

import { useState, useEffect } from 'react';
import SyncingBanner from '../templates/SyncingBanner';
import TopNav from '../parts/TopNav';

const SyncBannerDemo = () => {
	const [position, setPosition] = useState('bottom'); // 'bottom' or 'belowHeader'
	const [syncState, setSyncState] = useState('preparing');
	const [progress, setProgress] = useState(0);

	// Mock options
	const mockOptions = {
		"general-settings": {
			"project-show": "yes",
			"project-name-plural": "Projects",
			"employee-show": "yes",
			"employee-name-plural": "Employees",
			"text-assets-show": "yes",
			"text-assets-name-plural": "Text Assets"
		}
	};

	// Generate mock sync data based on current state
	const getMockSyncData = () => {
		switch (syncState) {
			case 'preparing':
				return {
					is_initiating: true,
					current_sync_context: {
						type: 'preparing',
						name: 'Preparing sync',
						is_manual_full_sync: false
					},
					totals: {},
					progress: {}
				};

			case 'preparingFull':
				return {
					is_initiating: true,
					current_sync_context: {
						type: 'preparing',
						name: 'Preparing full sync',
						is_manual_full_sync: true
					},
					totals: {},
					progress: {}
				};

			case 'syncingProjects':
				return {
					is_initiating: false,
					current_sync_context: {
						type: 'projects',
						name: 'Projects'
					},
					totals: {
						projects: 50,
						employees: 0,
						text_assets: 0
					},
					progress: {
						projects: Math.floor(progress * 50 / 100),
						employees: 0,
						text_assets: 0
					},
					total_available: {
						projects: 120,
						employees: 45,
						text_assets: 200
					}
				};

			case 'syncingEmployees':
				return {
					is_initiating: false,
					current_sync_context: {
						type: 'employees',
						name: 'Employees'
					},
					totals: {
						projects: 50,
						employees: 25,
						text_assets: 0
					},
					progress: {
						projects: 50,
						employees: Math.floor(progress * 25 / 100),
						text_assets: 0
					},
					total_available: {
						projects: 120,
						employees: 45,
						text_assets: 200
					}
				};

			case 'syncingTextAssets':
				return {
					is_initiating: false,
					current_sync_context: {
						type: 'text_assets',
						name: 'Text Assets'
					},
					totals: {
						projects: 50,
						employees: 25,
						text_assets: 80
					},
					progress: {
						projects: 50,
						employees: 25,
						text_assets: Math.floor(progress * 80 / 100)
					},
					total_available: {
						projects: 120,
						employees: 45,
						text_assets: 200
					}
				};

			case 'maintenance':
				return {
					is_initiating: false,
					current_sync_context: {
						type: 'maintenance',
						name: 'Maintenance sync',
						detail: 'Checking for orphaned content'
					},
					totals: {},
					progress: {}
				};

			case 'complete':
				return {
					is_initiating: false,
					current_sync_context: {
						type: 'none',
						name: 'Complete'
					},
					totals: {
						projects: 0,
						employees: 0,
						text_assets: 0
					},
					progress: {
						projects: 0,
						employees: 0,
						text_assets: 0
					},
					total_available: {
						projects: 120,
						employees: 45,
						text_assets: 200
					}
				};

			default:
				return null;
		}
	};

	// Auto-progress simulation
	useEffect(() => {
		if (['syncingProjects', 'syncingEmployees', 'syncingTextAssets'].includes(syncState)) {
			const interval = setInterval(() => {
				setProgress(prev => {
					if (prev >= 100) {
						clearInterval(interval);
						return 100;
					}
					return prev + 2;
				});
			}, 100);

			return () => clearInterval(interval);
		}
	}, [syncState]);

	// Mock navigation for TopNav
	const mockNavigation = [
		{ name: 'Dashboard', href: '#' },
		{ name: 'General Settings', href: '#' },
		{ name: 'Data Options', href: '#' },
		{ name: 'Sync Logs', href: '#' }
	];

	const syncData = getMockSyncData();

	return (
		<div className="min-h-screen" style={{ backgroundColor: 'var(--oa-bg-secondary)' }}>
			{/* Demo Controls */}
			<div className="bg-gray-900 text-white p-6 space-y-6">
				<div>
					<h1 className="text-2xl font-bold mb-2">Sync Banner Demo</h1>
					<p className="text-gray-300 text-sm">Preview the sync banner with different positions and states</p>
				</div>

				{/* Position Selector */}
				<div>
					<label className="block text-sm font-medium mb-2">Position:</label>
					<div className="flex gap-3">
						<button
							onClick={() => setPosition('belowHeader')}
							className={`px-4 py-2 rounded-lg font-medium transition-colors ${
								position === 'belowHeader'
									? 'bg-blue-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Below Header
						</button>
						<button
							onClick={() => setPosition('bottom')}
							className={`px-4 py-2 rounded-lg font-medium transition-colors ${
								position === 'bottom'
									? 'bg-blue-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Fixed Bottom
						</button>
					</div>
				</div>

				{/* State Selector */}
				<div>
					<label className="block text-sm font-medium mb-2">Simulate Sync State:</label>
					<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
						<button
							onClick={() => {
								setSyncState('preparing');
								setProgress(0);
							}}
							className={`px-3 py-2 rounded text-sm font-medium transition-colors ${
								syncState === 'preparing'
									? 'bg-blue-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Preparing
						</button>
						<button
							onClick={() => {
								setSyncState('preparingFull');
								setProgress(0);
							}}
							className={`px-3 py-2 rounded text-sm font-medium transition-colors ${
								syncState === 'preparingFull'
									? 'bg-blue-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Preparing Full
						</button>
						<button
							onClick={() => {
								setSyncState('syncingProjects');
								setProgress(0);
							}}
							className={`px-3 py-2 rounded text-sm font-medium transition-colors ${
								syncState === 'syncingProjects'
									? 'bg-blue-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Syncing Projects
						</button>
						<button
							onClick={() => {
								setSyncState('syncingEmployees');
								setProgress(0);
							}}
							className={`px-3 py-2 rounded text-sm font-medium transition-colors ${
								syncState === 'syncingEmployees'
									? 'bg-blue-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Syncing Employees
						</button>
						<button
							onClick={() => {
								setSyncState('syncingTextAssets');
								setProgress(0);
							}}
							className={`px-3 py-2 rounded text-sm font-medium transition-colors ${
								syncState === 'syncingTextAssets'
									? 'bg-blue-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Syncing Text Assets
						</button>
						<button
							onClick={() => {
								setSyncState('maintenance');
								setProgress(0);
							}}
							className={`px-3 py-2 rounded text-sm font-medium transition-colors ${
								syncState === 'maintenance'
									? 'bg-blue-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Maintenance
						</button>
						<button
							onClick={() => {
								setSyncState('complete');
								setProgress(100);
							}}
							className={`px-3 py-2 rounded text-sm font-medium transition-colors ${
								syncState === 'complete'
									? 'bg-green-600 text-white'
									: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
							}`}
						>
							Complete
						</button>
					</div>
				</div>

				{/* Progress Control */}
				{['syncingProjects', 'syncingEmployees', 'syncingTextAssets'].includes(syncState) && (
					<div>
						<label className="block text-sm font-medium mb-2">
							Manual Progress Control: {progress}%
						</label>
						<input
							type="range"
							min="0"
							max="100"
							value={progress}
							onChange={(e) => setProgress(parseInt(e.target.value))}
							className="w-full"
						/>
					</div>
				)}
			</div>

			{/* Preview Area */}
			<div className="relative">
				{/* Mock TopNav */}
				<TopNav navigation={mockNavigation} />

				{/* Show current banner with position prop */}
				{syncData && (
					<SyncingBanner 
						options={mockOptions}
						syncData={syncData}
						position={position}
					/>
				)}

				{/* Mock Page Content */}
				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
					<div className="bg-white rounded-lg shadow-sm p-8">
						<h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--oa-text-primary)' }}>
							Sample Page Content
						</h2>
						<p className="text-base mb-4" style={{ color: 'var(--oa-text-secondary)' }}>
							This is a preview of how the sync banner will look in your actual dashboard.
							Use the controls above to simulate different sync states and positions.
						</p>
						
						<div className="space-y-4 mt-8">
							<div className="h-4 bg-gray-200 rounded w-3/4"></div>
							<div className="h-4 bg-gray-200 rounded w-full"></div>
							<div className="h-4 bg-gray-200 rounded w-5/6"></div>
							<div className="h-4 bg-gray-200 rounded w-2/3"></div>
							<div className="h-4 bg-gray-200 rounded w-3/4"></div>
							<div className="h-4 bg-gray-200 rounded w-full"></div>
							<div className="h-4 bg-gray-200 rounded w-5/6"></div>
							<div className="h-4 bg-gray-200 rounded w-2/3"></div>
						</div>

						<div className="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
							<h3 className="font-semibold text-blue-900 mb-2">💡 Tips:</h3>
							<ul className="text-sm text-blue-800 space-y-1">
								<li>• <strong>Below Header:</strong> Slides down from below the navigation</li>
								<li>• <strong>Fixed Bottom:</strong> Stays at the bottom of the viewport</li>
								<li>• Try different sync states to see animations</li>
								<li>• Watch the progress bars animate in real-time</li>
								<li>• Scroll the page to see how each position behaves</li>
							</ul>
						</div>

						{/* Add more content to enable scrolling */}
						<div className="mt-8 space-y-4">
							{[...Array(10)].map((_, i) => (
								<div key={i} className="space-y-2">
									<div className="h-4 bg-gray-200 rounded w-3/4"></div>
									<div className="h-4 bg-gray-200 rounded w-full"></div>
									<div className="h-4 bg-gray-200 rounded w-5/6"></div>
								</div>
							))}
						</div>
					</div>
				</div>
			</div>
		</div>
	);
};

export default SyncBannerDemo;