import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { NavLink } from 'react-router-dom';
import { CalendarClock, Settings, LogOut } from 'lucide-react';
import { can } from '../types';
import { useFrameViewport } from '../hooks/useFrameViewport';
export function Layout({ user, children }) {
    useFrameViewport('desktop');
    async function logout() {
        await fetch('/hk-planner/api/auth/logout', { method: 'POST', credentials: 'include' });
        window.location.reload();
    }
    return (_jsxs("div", { style: { display: 'flex', height: '100dvh', overflow: 'hidden' }, children: [_jsxs("nav", { style: {
                    width: '200px', flexShrink: 0, background: 'var(--navy)',
                    display: 'flex', flexDirection: 'column', padding: '1rem 0',
                    borderRight: '1px solid var(--surface-2)',
                }, children: [_jsx("div", { style: { padding: '0 1rem 1rem', borderBottom: '1px solid var(--surface-2)' }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(CalendarClock, { size: 20, strokeWidth: 1.75, color: "#74c69d" }), _jsx("span", { style: { color: '#74c69d', fontWeight: 700, fontSize: '0.95rem' }, children: "HK Planner" })] }) }), _jsxs("div", { className: "nav-scroll", style: { flex: 1, padding: '0.5rem 0', overflowY: 'auto' }, children: [_jsx(NavItem, { to: "/planner", icon: CalendarClock, label: "Planner" }), can(user, 'settings') && _jsx(NavItem, { to: "/settings", icon: Settings, label: "Settings" })] }), _jsxs("div", { style: { padding: '0.75rem 1rem', borderTop: '1px solid var(--surface-2)' }, children: [_jsxs("div", { style: { marginBottom: '0.5rem' }, children: [_jsx("div", { style: { color: 'var(--text)', fontSize: '0.8rem', fontWeight: 600 }, children: user.name }), _jsx("div", { style: { color: 'var(--text-muted)', fontSize: '0.72rem' }, children: user.email })] }), _jsxs("button", { onClick: logout, style: {
                                    display: 'flex', alignItems: 'center', gap: '0.5rem',
                                    background: 'none', border: 'none', color: 'var(--text-muted)',
                                    fontSize: '0.8rem', padding: '0.375rem 0', width: '100%', cursor: 'pointer',
                                }, children: [_jsx(LogOut, { size: 14, strokeWidth: 1.75 }), "Sign out"] })] })] }), _jsx("main", { style: { flex: 1, overflow: 'auto', background: 'var(--body-bg)' }, children: children })] }));
}
function NavItem({ to, icon: Icon, label }) {
    return (_jsxs(NavLink, { to: to, style: ({ isActive }) => ({
            display: 'flex', alignItems: 'center', gap: '0.625rem',
            padding: '0.625rem 1rem', textDecoration: 'none',
            color: isActive ? '#74c69d' : 'var(--text)',
            background: isActive ? 'var(--surface)' : 'transparent',
            borderLeft: isActive ? '2px solid #74c69d' : '2px solid transparent',
            fontSize: '0.875rem', transition: 'background 0.15s',
        }), children: [_jsx(Icon, { size: 15, strokeWidth: 1.75 }), label] }));
}