/**
 * External dependencies.
 */
import { NavLink, useNavigate } from 'react-router-dom';
import classNames from 'clsx';
import { Loader2 } from 'lucide-react';
import { useSettingsDirty } from '../../context/SettingsDirtyContext';

/**
 * Internal dependencies.
 */
const pluginState = window.openAssetPluginState;

const TopNav = ({ navigation, onSave = null, onRun = null, isLoading = null }) => {
	const navigate = useNavigate();
	const { isDirty } = useSettingsDirty();

	const handleNavLinkClick = (event, href) => {
		if (isDirty) {
			event.preventDefault();
			const leave = window.confirm(
				'You have unsaved changes. Are you sure you want to leave?'
			);
			if (leave) {
				setTimeout(() => navigate(href), 0);
			}
		}
	};

	return (
		<div className="bg-white border-b border-oa-border-secondary sticky top-[32px] z-oa-fixed">
			<div className="max-w-7xl px-4 sm:px-6 lg:px-8">
				<div className="flex items-center justify-between h-16">
					{/* Logo */}
					<div className="flex items-center gap-8">
						<img
							src={pluginState.assetsURL + "/img/OpenAsset_logo.svg"}
							alt="OpenAsset"
							className="h-8"
						/>
						
						{/* Navigation */}
						{navigation && (
							<nav className="flex gap-6 h-16">
								{navigation.map((item) => (
									<NavLink
										key={item.name}
										to={item.href}
										onClick={(e) => handleNavLinkClick(e, item.href)}
										className={({ isActive }) =>
											classNames(
												'px-1 flex items-center text-oa-sm font-oa-medium transition-colors duration-oa-fast border-b-2 focus:outline-none focus:shadow-none',
												isActive
													? 'border-[#2563eb] text-oa-text-primary'
													: 'border-transparent text-oa-text-secondary hover:text-oa-text-primary hover:border-oa-border-secondary'
											)
										}
									>
										{item.name}
									</NavLink>
								))}
							</nav>
						)}
					</div>

					{/* Action Buttons */}
					{onSave && onRun && (
						<div className="flex gap-2">
							<button
								type="button"
								onClick={onSave}
								disabled={isLoading}
								className={classNames(
									'px-oa-lg py-oa-md text-oa-sm font-oa-semibold rounded-oa-md transition-colors duration-oa-fast',
									'bg-white text-oa-text-primary border border-oa-border-secondary',
									'hover:bg-oa-bg-secondary',
									'disabled:opacity-50 disabled:cursor-not-allowed',
									'flex items-center gap-2'
								)}
							>
								{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
								{isLoading ? 'Saving...' : 'Save'}
							</button>
							<button
								type="button"
								onClick={onRun}
								disabled={isLoading}
								className={classNames(
									'px-oa-lg py-oa-md text-oa-sm font-oa-semibold rounded-oa-md transition-colors duration-oa-fast',
									'bg-[#2563eb] text-white border border-[#2563eb]',
									'hover:bg-[#1d4ed8]',
									'disabled:opacity-50 disabled:cursor-not-allowed',
									'shadow-sm',
									'flex items-center gap-2'
								)}
							>
								{isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
								{isLoading ? 'Saving & Syncing...' : 'Save & Sync'}
							</button>
						</div>
					)}
				</div>
			</div>
		</div>
	);
};

export default TopNav;