/**
 * Layout shell on the ported design system: MainLayout + Sidebar (compound
 * menu) + Topbar (current section) + scrolling content column.
 */
import { __ } from '@wordpress/i18n';
import {
	HashRouter,
	Navigate,
	Route,
	Routes,
	useLocation,
	useNavigate,
} from 'react-router-dom';

import MainLayout from './ui/templates/MainLayout';
import { IconButton, InlineStack, Sidebar, Topbar } from './ui/molecules';
import { Text } from './ui/atoms';
import Toasts from './components/Toasts';
import { AppProvider } from './store/AppStore';

import Dashboard from './pages/dashboard/Dashboard';
import Connections from './pages/connections/Connections';
import Mappings from './pages/mappings/Mappings';
import FeedEditor from './pages/mappings/FeedEditor';
import Logs from './pages/logs/Logs';
import Settings from './pages/settings/Settings';
import Help from './pages/help/Help';

const NAV_ITEMS = [
	{
		to: '/dashboard',
		label: () => __( 'Dashboard', 'rewind-form-bridge-for-brevo' ),
		icon: 'home',
	},
	{
		to: '/connections',
		label: () => __( 'Connections', 'rewind-form-bridge-for-brevo' ),
		icon: 'cloud_done',
	},
	{
		to: '/mappings',
		label: () => __( 'Form Mappings', 'rewind-form-bridge-for-brevo' ),
		icon: 'automation',
	},
	{
		to: '/logs',
		label: () => __( 'Logs', 'rewind-form-bridge-for-brevo' ),
		icon: 'history',
	},
	{
		to: '/settings',
		label: () => __( 'Settings', 'rewind-form-bridge-for-brevo' ),
		icon: 'settings',
	},
	{
		to: '/help',
		label: () => __( 'Help', 'rewind-form-bridge-for-brevo' ),
		icon: 'contact_support',
	},
];

function Shell() {
	const { pathname } = useLocation();
	const navigate = useNavigate();

	const current =
		NAV_ITEMS.find( ( item ) => pathname.startsWith( item.to ) ) ||
		NAV_ITEMS[ 0 ];

	const topbarTitle = (
		<InlineStack gap={ 10 } blockAlign="center">
			<IconButton
				variant="outlined"
				rounded="md"
				color="gray-700"
				name={ current.icon }
			/>
			<Text color="gray-700" weight="medium">
				{ current.label() }
			</Text>
		</InlineStack>
	);

	return (
		<MainLayout className="rbfb-top-level-wrapper">
			<Sidebar localStorageKey="rbfb-sidebar-collapsed">
				<Sidebar.Menu>
					{ NAV_ITEMS.map( ( item ) => (
						<Sidebar.Item
							key={ item.to }
							title={ item.label() }
							icon={ item.icon }
							active={ pathname.startsWith( item.to ) }
							onClick={ () => navigate( item.to ) }
						/>
					) ) }
				</Sidebar.Menu>
			</Sidebar>

			<MainLayout.ContentWrapper>
				<Topbar leftContents={ [ topbarTitle ] } />

				<MainLayout.Content>
					<Routes>
						<Route
							path="/"
							element={ <Navigate to="/dashboard" replace /> }
						/>
						<Route path="/dashboard" element={ <Dashboard /> } />
						<Route
							path="/connections"
							element={ <Connections /> }
						/>
						<Route path="/mappings" element={ <Mappings /> } />
						<Route
							path="/mappings/new"
							element={ <FeedEditor /> }
						/>
						<Route
							path="/mappings/:id"
							element={ <FeedEditor /> }
						/>
						<Route path="/logs" element={ <Logs /> } />
						<Route path="/settings" element={ <Settings /> } />
						<Route path="/settings/:tab" element={ <Settings /> } />
						<Route path="/help" element={ <Help /> } />
						<Route
							path="*"
							element={ <Navigate to="/dashboard" replace /> }
						/>
					</Routes>
				</MainLayout.Content>

				<Toasts />
			</MainLayout.ContentWrapper>
		</MainLayout>
	);
}

export default function App() {
	return (
		<AppProvider>
			<HashRouter>
				<Shell />
			</HashRouter>
		</AppProvider>
	);
}
