/**
 * Main App Layout Component.
 *
 * Two-column layout with sidebar navigation and main content area.
 * Dashboard routes render full-bleed (no padding) for iframe content.
 *
 * @package Sideconvo
 */

import { useState } from '@wordpress/element';
import { useLocation } from 'react-router-dom';
import Sidebar from '../navigation/Sidebar';
import './app-layout.css';

interface AppLayoutProps {
	children: React.ReactNode;
}

/** Routes that render full-bleed platform iframes. */
const FULL_BLEED_ROUTES = ['/', '/knowledge', '/presentations', '/conversations', '/preferences', '/widget', '/playground'];

/**
 * AppLayout component.
 *
 * @param {AppLayoutProps} props Component props.
 * @return {JSX.Element} AppLayout component.
 */
export default function AppLayout({ children }: AppLayoutProps) {
	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
	const { pathname } = useLocation();

	const isFullBleed = FULL_BLEED_ROUTES.includes(pathname);

	const toggleSidebar = () => {
		setIsSidebarOpen(!isSidebarOpen);
	};

	const contentClass = isFullBleed
		? 'sideconvo-app-layout__content sideconvo-app-layout__content--full-bleed'
		: 'sideconvo-app-layout__content';

	return (
		<div className="sideconvo-app-layout">
			{/* Mobile hamburger button */}
			<button
				className="sideconvo-app-layout__hamburger"
				onClick={toggleSidebar}
				aria-label="Toggle navigation"
			>
				<span></span>
				<span></span>
				<span></span>
			</button>

			{/* Sidebar */}
			<aside className={`sideconvo-app-layout__sidebar ${isSidebarOpen ? 'sideconvo-app-layout__sidebar--open' : ''}`}>
				<Sidebar />
			</aside>

			{/* Mobile overlay */}
			{isSidebarOpen && (
				<div
					className="sideconvo-app-layout__overlay"
					onClick={toggleSidebar}
				/>
			)}

			{/* Main content area */}
			<main className={contentClass}>
				{children}
			</main>
		</div>
	);
}