class BaseApp:
    """
    A base class for creating application components with common CRUD operations.

    This class provides a template for building application components that interact
    with database tables and handle basic Create, Read, Update, Delete (CRUD) operations.
    It includes methods for registering routes, rendering items, and performing various
    database operations.

    The class is designed to be flexible and extensible, allowing subclasses to override
    or extend its functionality as needed for specific application components.
    """

    def __init__(self, name, table, toggle_field=None, sort_field=None, sort_dict=None):
        self.name = name
        self.table = table
        self.toggle_field = toggle_field
        self.sort_field = sort_field
        self.sort_dict = sort_dict or {'id': 'id', sort_field: sort_field}

    def register_routes(self, rt):
        # Register routes: create, read, update, delete, toggle, and sort
        rt(f'/{self.name}', methods=['POST'])(self.insert_item)
        rt(f'/{self.name}/', methods=['POST'])(self.update_item)  # Changed to POST
        rt(f'/{self.name}/delete/', methods=['DELETE'])(self.delete_item)
        rt(f'/{self.name}/toggle/', methods=['POST'])(self.toggle_item)
        rt(f'/{self.name}_sort', methods=['POST'])(self.sort_items)

    def get_action_url(self, action, item_id):
        """
        Generate a URL for a specific action on an item.

        Args:
            action (str): The action method (e.g., 'delete', 'toggle').
            item_id (int): The ID of the item.

        Returns:
            str: The constructed URL.
        """
        return f"/{self.name}/{action}/{item_id}"

    def render_item(self, item):
        # A wrapper function currently serving as a passthrough for item rendering.
        # This method is part of the system's "styling" mechanism, transforming
        # dataclasses into HTML or other instructions for display or HTMX operations.
        # Subclasses are expected to override this method with context-aware implementations.
        return item

    async def delete_item(self, request, item_id: int):
        """
        Delete an item from the table.

        Args:
            request: The incoming request object.
            item_id (int): The ID of the item to delete.

        Returns:
            str: An empty string indicating successful deletion.
        """
        try:
            logger.debug(f"Attempting to delete item ID: {item_id}")
            self.table.delete(item_id)
            prompt = f"Item {item_id} deleted. Brief, sassy reaction."
            await chatq(prompt)
            logger.info(f"Deleted item ID: {item_id}")
            return ''
        except Exception as e:
            logger.error(f"Error deleting item: {str(e)}")
            return f"Error deleting item: {str(e)}", 500

    async def toggle_item(self, request, item_id: int):
        """
        Toggle a boolean field of an item.

        Args:
            request: The incoming request object.
            item_id (int): The ID of the item to toggle.

        Returns:
            dict: The rendered updated item.
        """
        try:
            logger.debug(f"Toggling {self.toggle_field} for item ID: {item_id}")
            item = self.table[item_id]
            current_status = getattr(item, self.toggle_field)
            setattr(item, self.toggle_field, not current_status)
            updated_item = self.table.update(item)
            logger.info(f"Toggled {self.toggle_field} for item ID {item_id} to {getattr(updated_item, self.toggle_field)}")

            prompt = f"Item {item_id} toggled. Brief, sassy reaction."
            await chatq(prompt)

            return self.render_item(updated_item)  # Use the subclass's render_item method
        except Exception as e:
            logger.error(f"Error toggling item: {str(e)}")
            return f"Error toggling item: {str(e)}", 500

    async def sort_items(self, request):
        """
        Update the order of items based on the received values.
        """
        logger.debug(f"Received request to sort {self.name}.")
        try:
            values = await request.form()  # Get form data from request
            items = json.loads(values.get('items', '[]'))  # Decode JSON string to list
            logger.debug(f"Parsed items: {items}")
            for item in items:
                logger.debug(f"Updating item: {item}")
                update_dict = {self.sort_field: int(item['priority'])}  # Use priority
                self.table.update(id=int(item['id']), **update_dict)  # Update table entry
            logger.info(f"{self.name.capitalize()} order updated successfully")

            prompt = f"The {self.name} list was reordered. Make a brief, witty remark about sorting or prioritizing. Keep it under 20 words."
            await chatq(prompt)

            return ''
        except json.JSONDecodeError as e:
            logger.error(f"JSON decode error: {str(e)}")
            return "Invalid data format", 400
        except Exception as e:
            logger.error(f"Error updating {self.name} order: {str(e)}")
            return str(e), 500

    async def insert_item(self, request):
        """
        Create a new item in the table.
        """
        try:
            form = await request.form()
            new_item_data = self.prepare_insert_data(form)
            if not new_item_data:  # If prepare_insert_data returns empty string or empty dict
                return ''  # Return empty string, which won't be rendered in the DOM
            new_item = await self.create_item(**new_item_data)
            return self.render_item(new_item)
        except Exception as e:
            logger.error(f"Error inserting {self.name}: {str(e)}")
            return str(e), 500

    async def update_item(self, request, item_id: int):
        """
        Update an existing item in the table.
        """
        try:
            form = await request.form()
            update_data = self.prepare_update_data(form)
            if not update_data:  # If prepare_update_data returns empty string or empty dict
                return ''  # Return empty string, which won't be rendered in the DOM
            item = self.table[item_id]
            for key, value in update_data.items():
                setattr(item, key, value)
            updated_item = self.table.update(item)
            logger.info(f"Updated {self.name} item {item_id}")
            return self.render_item(updated_item)
        except Exception as e:
            logger.error(f"Error updating {self.name} {item_id}: {str(e)}")
            return str(e), 500

    def prepare_insert_data(self, form):
        """
        Prepare data for insertion. To be overridden by subclasses.
        """
        raise NotImplementedError("Subclasses must implement prepare_insert_data")

    def prepare_update_data(self, form):
        """
        Prepare data for update. To be overridden by subclasses.
        """
        raise NotImplementedError("Subclasses must implement prepare_update_data")

    async def create_item(self, **kwargs):
        """
        Create a new item in the table.

        Args:
            **kwargs: The fields and values for the new item.

        Returns:
            The newly created item.
        """
        try:
            logger.debug(f"Creating new {self.name} with data: {kwargs}")
            new_item = self.table.insert(kwargs)
            logger.info(f"Created new {self.name}: {new_item}")
            return new_item
        except Exception as e:
            logger.error(f"Error creating {self.name}: {str(e)}")
            raise e

class TodoApp(BaseApp):
    def __init__(self, table):
        # Extract the name from the table object
        super().__init__(
            name=table.name,
            table=table,
            toggle_field='done',
            sort_field='priority'
        )

    def render_item(self, todo):
        return render_todo(todo)

    def prepare_insert_data(self, form):
        title = form.get('title', '').strip()
        if not title:
            return ''  # Return empty string instead of raising an exception
        current_profile_id = db.get("last_profile_id", 1)
        max_priority = max((t.priority or 0 for t in self.table()), default=-1) + 1
        return {
            "title": title,
            "done": False,
            "priority": max_priority,
            "profile_id": current_profile_id,
        }

    def prepare_update_data(self, form):
        title = form.get('title', '').strip()
        if not title:
            return ''  # Return empty string instead of raising an exception
        return {
            "title": title,
            "done": form.get('done', '').lower() == 'true',
        }


class ProfileApp(BaseApp):
    def __init__(self, table):
        super().__init__(
            name=table.name,
            table=table,
            toggle_field='active',
            sort_field='priority'
        )

    def render_item(self, profile):
        return render_profile(profile)

    def prepare_insert_data(self, form):
        profile_name = form.get('profile_name', '').strip()
        if not profile_name:
            return ''  # Return empty string instead of raising an exception
        max_priority = max((p.priority or 0 for p in self.table()), default=-1) + 1
        return {
            "name": profile_name,
            "address": form.get('profile_address', '').strip(),
            "code": form.get('profile_code', '').strip(),
            "active": True,
            "priority": max_priority,
        }

    def prepare_update_data(self, form):
        profile_name = form.get('profile_name', '').strip()
        if not profile_name:
            return ''  # Return empty string instead of raising an exception
        return {
            "name": profile_name,
            "address": form.get('profile_address', '').strip(),
            "code": form.get('profile_code', '').strip(),
            "active": form.get('active', '').lower() == 'true',
        }

class DictLikeDB:
    """
    A robust wrapper for dictionary-like persistent storage.

    This class provides a familiar dict-like interface to interact with
    various types of key-value stores, including databases and file systems.
    It emphasizes the power and flexibility of key-value pairs as a
    fundamental data structure in programming and system design.

    Key features:
    1. Persistence: Data survives beyond program execution.
    2. Dict-like API: Familiar Python dictionary operations.
    3. Adaptability: Can wrap different storage backends.
    4. Logging: Built-in logging for debugging and monitoring.

    By abstracting the underlying storage mechanism, this class allows
    for easy swapping of backends without changing the client code.
    This demonstrates the power of Python's duck typing and the
    universality of the key-value paradigm across different storage solutions.
    """

    def __init__(self, store, Store):
        self.store = store
        self.Store = Store

    def __getitem__(self, key):
        """Retrieve an item from the store by key."""
        try:
            value = self.store[key].value
            logger.debug(f"Retrieved from DB: {key} = {value}")
            return value
        except NotFoundError:
            logger.error(f"Key not found: {key}")
            raise KeyError(key)

    def __setitem__(self, key, value):
        """Set an item in the store by key."""
        try:
            self.store.update({"key": key, "value": value})
            logger.info(f"Updated persistence store: {key} = {value}")
        except NotFoundError:
            self.store.insert({"key": key, "value": value})
            logger.info(f"Inserted new item in persistence store: {key} = {value}")

    def __delitem__(self, key):
        """Delete an item from the store by key."""
        try:
            self.store.delete(key)
            logger.warning(f"Deleted key from persistence store: {key}")
        except NotFoundError:
            logger.error(f"Attempted to delete non-existent key: {key}")
            raise KeyError(key)

    def __contains__(self, key):
        """Check if a key exists in the store."""
        exists = key in self.store
        logger.debug(f"Key '{key}' exists: {exists}")
        return exists

    def __iter__(self):
        """Iterate over the keys in the store."""
        for item in self.store():
            yield item.key

    def items(self):
        """Return key-value pairs in the store."""
        for item in self.store():
            yield item.key, item.value

    def keys(self):
        """Return a list of keys in the store."""
        return list(self)

    def values(self):
        """Return values in the store."""
        for item in self.store():
            yield item.value

    def get(self, key, default=None):
        """Get an item from the store, returning default if not found."""
        try:
            return self[key]
        except KeyError:
            logger.debug(f"Key '{key}' not found. Returning default.")
            return default

class DOMSkeletonMiddleware(BaseHTTPMiddleware):
    async def dispatch(self, request, call_next):
        # Log the incoming HTTP request
        endpoint = request.url.path
        method = request.method
        f = Figlet(font='slant')
        figlet_text = f.renderText(f"{endpoint} {method}")
        print(figlet_text)
        logger.info(f"HTTP Request: {method} {endpoint}")

        # Call the next middleware or request handler
        response = await call_next(request)

        # Print a rich table of the db key/value pairs
        table = Table(title="Database Contents")
        table.add_column("Key", style="cyan")
        table.add_column("Value", style="magenta")
        for key, value in db.items():
            table.add_row(key, str(value))
        console = Console()
        table.columns[1].style = "white"
        console.print(table)

        return response

def custom_404_handler(request, exc):
    """
    Custom 404 page handler.

    Args:
        request: The request that caused the 404 error.
        exc: The exception that was raised.

    Returns:
        HTML: An HTML response for the 404 error.
    """
    return Html(
        Head(
            Title("404 - Page Not Found"),
            Style("""
                body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
                h1 { color: #e74c3c; }
                a { color: #3498db; text-decoration: none; }
            """)
        ),
        Body(
            H1("404 - Page Not Found"),
            P(f"Sorry, the page '{request.url.path}' you're looking for doesn't exist."),
            A("Go back to home", href="/")
        )
    )

app, rt, (store, Store), (tasks, Task), (customers, Customer) = fast_app(
    "data/data.db",
    ws_hdr=True,
    live=True,
    hdrs=(
        SortableJSWithUpdate('.sortable'),
        Script(type='module')
    ),
    store={
        "key": str,
        "value": str,
        "pk": "key"
    },
    task={ 
        "id": int,
        "title": str,
        "done": bool,
        "priority": int,
        "profile_id": int,
        "pk": "id"
    },
    customer={
        "id": int,
        "name": str,
        "address": str,
        "code": str,
        "active": bool,
        "priority": int,
        "pk": "id"
    },
)

class BaseApp:
    def __init__(self, name, table, toggle_field=None, sort_field=None, sort_dict=None):
        self.name = name
        self.table = table
        self.toggle_field = toggle_field
        self.sort_field = sort_field
        self.sort_dict = sort_dict or {'id': 'id', sort_field: sort_field}

    def register_routes(self, rt):
        # Register routes: create, read, update, delete, toggle, and sort
        rt(f'/{self.name}', methods=['POST'])(self.insert_item)
        rt(f'/{self.name}/', methods=['POST'])(self.update_item)  # Changed to POST
        rt(f'/{self.name}/delete/', methods=['DELETE'])(self.delete_item)
        rt(f'/{self.name}/toggle/', methods=['POST'])(self.toggle_item)
        rt(f'/{self.name}_sort', methods=['POST'])(self.sort_items)

    # ... [Other methods like insert_item, update_item, delete_item, toggle_item, sort_items, render_item]

class TodoApp(BaseApp):
    def __init__(self, table):
        super().__init__(
            name=table.name,
            table=table,
            toggle_field='done',
            sort_field='priority'
        )

    def render_item(self, todo):
        return render_todo(todo)

    def prepare_insert_data(self, form):
        title = form.get('title', '').strip()
        if not title:
            return ''  # Return empty string instead of raising an exception
        current_profile_id = db.get("last_profile_id", 1)
        max_priority = max((t.priority or 0 for t in self.table()), default=-1) + 1
        return {
            "title": title,
            "done": False,
            "priority": max_priority,
            "profile_id": current_profile_id,
        }

    def prepare_update_data(self, form):
        title = form.get('title', '').strip()
        if not title:
            return ''  # Return empty string instead of raising an exception
        return {
            "title": title,
            "done": form.get('done', '').lower() == 'true',
        }

class ProfileApp(BaseApp):
    def __init__(self, table):
        super().__init__(
            name=table.name,
            table=table,
            toggle_field='active',
            sort_field='priority'
        )

    def render_item(self, profile):
        return render_profile(profile)

    def prepare_insert_data(self, form):
        profile_name = form.get('profile_name', '').strip()
        if not profile_name:
            return ''  # Return empty string instead of raising an exception
        max_priority = max((p.priority or 0 for p in self.table()), default=-1) + 1
        return {
            "name": profile_name,
            "address": form.get('profile_address', '').strip(),
            "code": form.get('profile_code', '').strip(),
            "active": True,
            "priority": max_priority,
        }

    def prepare_update_data(self, form):
        profile_name = form.get('profile_name', '').strip()
        if not profile_name:
            return ''  # Return empty string instead of raising an exception
        return {
            "name": profile_name,
            "address": form.get('profile_address', '').strip(),
            "code": form.get('profile_code', '').strip(),
            "active": form.get('active', '').lower() == 'true',
        }

class DictLikeDB:
    def __init__(self, store, Store):
        self.store = store
        self.Store = Store

    def __getitem__(self, key):
        try:
            value = self.store[key].value
            logger.debug(f"Retrieved from DB: {key} = {value}")
            return value
        except NotFoundError:
            logger.error(f"Key not found: {key}")
            raise KeyError(key)

    def __setitem__(self, key, value):
        try:
            self.store.update({"key": key, "value": value})
            logger.info(f"Updated persistence store: {key} = {value}")
        except NotFoundError:
            self.store.insert({"key": key, "value": value})
            logger.info(f"Inserted new item in persistence store: {key} = {value}")

    def __delitem__(self, key):
        try:
            self.store.delete(key)
            logger.warning(f"Deleted key from persistence store: {key}")
        except NotFoundError:
            logger.error(f"Attempted to delete non-existent key: {key}")
            raise KeyError(key)

    def __contains__(self, key):
        exists = key in self.store
        logger.debug(f"Key '{key}' exists: {exists}")
        return exists

    def __iter__(self):
        for item in self.store():
            yield item.key

    def items(self):
        for item in self.store():
            yield item.key, item.value

    def keys(self):
        return list(self)

    def values(self):
        for item in self.store():
            yield item.value

    def get(self, key, default=None):
        try:
            return self[key]
        except KeyError:
            logger.debug(f"Key '{key}' not found. Returning default.")
            return default

db = DictLikeDB(store, Store)

@app.ws('/ws', conn=on_conn, disconn=on_disconn)
async def ws(msg: str):
    """Handle incoming WebSocket messages."""
    # Process message and generate response
    # Stream response back to users

class DOMSkeletonMiddleware(BaseHTTPMiddleware):
    async def dispatch(self, request, call_next):
        # Log the incoming HTTP request
        endpoint = request.url.path
        method = request.method
        figlet_text = Figlet(font='slant').renderText(f"{endpoint} {method}")
        print(figlet_text)
        logger.info(f"HTTP Request: {method} {endpoint}")

        # Call the next middleware or request handler
        response = await call_next(request)

        # Print a rich table of the db key/value pairs
        table = Table(title="Database Contents")
        table.add_column("Key", style="cyan")
        table.add_column("Value", style="magenta")
        for key, value in db.items():
            table.add_row(key, str(value))
        console = Console()
        table.columns[1].style = "white"
        console.print(table)

        return response

app.add_exception_handler(404, custom_404_handler)

notes = Note  # Assuming Note is defined in fast_app

# Define the Note table structure within fast_app
app, rt, (store, Store), (tasks, Task), (customers, Customer), (notes, Note) = fast_app(
    "data/data.db",
    # ... existing parameters
    note={
        "id": int,
        "title": str,
        "content": str,
        "done": bool,
        "priority": int,
        "profile_id": int,
        "pk": "id"
    },
)

class NotesApp(BaseApp):
    def __init__(self, table):
        super().__init__(
            name=table.name,
            table=table,
            toggle_field='done',
            sort_field='priority'
        )

    def render_item(self, note):
        return render_note(note)

    def prepare_insert_data(self, form):
        title = form.get('title', '').strip()
        content = form.get('content', '').strip()
        if not title or not content:
            return ''  # Return empty string to prevent insertion
        current_profile_id = db.get("last_profile_id", 1)
        max_priority = max((n.priority or 0 for n in self.table()), default=-1) + 1
        return {
            "title": title,
            "content": content,
            "done": False,
            "priority": max_priority,
            "profile_id": current_profile_id,
        }

    def prepare_update_data(self, form):
        title = form.get('title', '').strip()
        content = form.get('content', '').strip()
        if not title or not content:
            return ''  # Return empty string to prevent update
        return {
            "title": title,
            "content": content,
            "done": form.get('done', '').lower() == 'true',
        }

def render_note(note):
    """
    Render a note item as an HTML list item with interactive elements.
    
    Args:
        note: The note object containing attributes like id, title, content, done, and priority.
    
    Returns:
        Li: An HTML list item representing the interactive note component.
    """
    # Implement rendering logic similar to render_todo or render_profile
    # Include elements like checkbox, delete button, title link, and update form
    pass  # Replace with actual implementation

notes_app = NotesApp(table=notes)
notes_app.register_routes(rt)

# Add the new app to the navigation menu items
MENU_ITEMS.append(notes_app.name)

@rt('/')
@rt(f'/{todo_app.name}')
@rt(f'/{profile_app.name}')
@rt(f'/{notes_app.name}')  # Add this line
def get(request):
    # Existing logic
    if menux == profile_app.name:
        response = get_profiles_content()
    elif menux == notes_app.name:
        response = get_notes_content()  # Implement this function
    else:
        # Existing logic for Todo and other apps
        pass
    # ...

def get_notes_content():
    """
    Retrieve and display the list of notes.
    
    Returns:
        Container: An HTML container with the notes list and chat interface.
    """
    # Implement logic similar to get_profiles_content
    pass  # Replace with actual implementation

# For NotesApp
notes = Note

# When initializing DictLikeDB or other configurations
db = DictLikeDB(store, Store)

app, rt, (store, Store), (tasks, Task), (customers, Customer) = fast_app(
    # parameters
)

app, rt, (store, Store), (tasks, Task), (customers, Customer), (notes, Note) = fast_app(
    "data/data.db",
    # ... existing parameters
    note={
        "id": int,
        "title": str,
        "content": str,
        "done": bool,
        "priority": int,
        "profile_id": int,
        "pk": "id"
    },
)

todo_app = TodoApp(table=tasks)
profile_app = ProfileApp(table=customers)

app, rt, (store, Store), (tasks, Task), (customers, Customer), (notes, Note) = fast_app(
    "data/data.db",
    ws_hdr=True,
    live=True,
    hdrs=(
        SortableJSWithUpdate('.sortable'),
        Script(type='module')
    ),
    store={
        "key": str,
        "value": str,
        "pk": "key"
    },
    task={ 
        "id": int,
        "title": str,
        "done": bool,
        "priority": int,
        "profile_id": int,
        "pk": "id"
    },
    customer={
        "id": int,
        "name": str,
        "address": str,
        "code": str,
        "active": bool,
        "priority": int,
        "pk": "id"
    },
    note={  # New table definition
        "id": int,
        "title": str,
        "content": str,
        "done": bool,
        "priority": int,
        "profile_id": int,
        "pk": "id"
    },
)

class NotesApp(BaseApp):
    def __init__(self, table):
        super().__init__(
            name=table.name,  # 'notes'
            table=table,
            toggle_field='done',
            sort_field='priority'
        )

    def render_item(self, note):
        return render_note(note)  # Implement this function as shown earlier

    def prepare_insert_data(self, form):
        title = form.get('title', '').strip()
        content = form.get('content', '').strip()
        if not title or not content:
            return ''  # Prevent insertion if data is incomplete
        current_profile_id = db.get("last_profile_id", 1)
        max_priority = max((n.priority or 0 for n in self.table()), default=-1) + 1
        return {
            "title": title,
            "content": content,
            "done": False,
            "priority": max_priority,
            "profile_id": current_profile_id,
        }

    def prepare_update_data(self, form):
        title = form.get('title', '').strip()
        content = form.get('content', '').strip()
        if not title or not content:
            return ''  # Prevent update if data is incomplete
        return {
            "title": title,
            "content": content,
            "done": form.get('done', '').lower() == 'true',
        }

def render_note(note):
    """
    Render a note item as an HTML list item with interactive elements.
    
    Args:
        note: The note object containing attributes like id, title, content, done, and priority.
    
    Returns:
        Li: An HTML list item representing the interactive note component.
    """
    delete_url = notes_app.get_action_url('delete', note.id)
    toggle_url = notes_app.get_action_url('toggle', note.id)

    nid = f'note-{note.id}'  # Unique ID for the note item
    checkbox = Input(
        type="checkbox",
        name="done" if note.done else None,
        checked=note.done,
        hx_post=toggle_url,
        hx_swap="outerHTML",
        hx_target=f"#{nid}",
    )

    delete = A(
        '🗑',
        hx_delete=delete_url,
        hx_swap='outerHTML',
        hx_target=f"#{nid}",
        style="cursor: pointer; display: inline;",
        cls="delete-icon"
    )

    title_link = A(
        note.title,
        href="#",
        cls="note-title",
        style="text-decoration: none; color: inherit;",
        onclick=(
            "let updateForm = this.nextElementSibling; "
            "let checkbox = this.parentNode.querySelector('input[type=checkbox]'); "
            "let deleteIcon = this.parentNode.querySelector('.delete-icon'); "
            "if (updateForm.style.visibility === 'hidden' || updateForm.style.visibility === '') { "
            "    updateForm.style.visibility = 'visible'; "
            "    updateForm.style.height = 'auto'; "
            "    checkbox.style.display = 'none'; "
            "    deleteIcon.style.display = 'none'; "
            "    this.remove(); "
            "    const inputField = document.getElementById('note_title_" + str(note.id) + "'); "
            "    inputField.focus(); "
            "    inputField.setSelectionRange(inputField.value.length, inputField.value.length); "
            "} else { "
            "    updateForm.style.visibility = 'hidden'; "
            "    updateForm.style.height = '0'; "
            "    checkbox.style.display = 'inline'; "
            "    deleteIcon.style.display = 'inline'; "
            "    this.style.visibility = 'visible'; "
            "}"
        )
    )

    update_form = Form(
        Div(
            Input(
                type="text",
                id=f"note_title_{note.id}",
                value=note.title,
                name="title",
                style="flex: 1; padding-right: 10px; margin-bottom: 0px;"
            ),
            Input(
                type="text",
                id=f"note_content_{note.id}",
                value=note.content,
                name="content",
                style="flex: 2; padding-right: 10px; margin-bottom: 0px;"
            ),
            style="display: flex; align-items: center;"
        ),
        style="visibility: hidden; height: 0; overflow: hidden;",
        hx_post=f"/{notes_app.name}/{note.id}",
        hx_target=f"#{nid}",
        hx_swap="outerHTML",
    )

    return Li(
        delete,
        checkbox,
        title_link,
        update_form,
        id=nid,
        cls='done' if note.done else '',
        style="list-style-type: none;",
        data_id=note.id,
        data_priority=note.priority
    )

notes_app = NotesApp(table=notes)
notes_app.register_routes(rt)

# Add 'notes' to the navigation menu
MENU_ITEMS.append(notes_app.name)

@rt('/')
@rt(f'/{todo_app.name}')
@rt(f'/{profile_app.name}')
@rt(f'/{notes_app.name}')  # Register the new app's route
def get(request):
    path = request.url.path.strip('/')
    logger.debug(f"Received request for path: {path}")

    menux = "home" if not path else path
    fig(f"app: {menux}")
    logger.info(f"Selected explore item: {menux}")
    db["last_app_choice"] = menux
    db["last_visited_url"] = request.url.path

    current_profile_id = db.get("last_profile_id")
    if current_profile_id:
        logger.debug(f"Current profile ID: {current_profile_id}")
        todos.xtra(profile_id=current_profile_id)
    else:
        logger.warning("No current profile ID found. Using default filtering.")
        todos.xtra(profile_id=None)

    if menux == profile_app.name:
        response = get_profiles_content()
    elif menux == notes_app.name:
        response = get_notes_content()  # Implement this function similar to get_profiles_content
    else:
        # Existing TodoApp view handling
        is_todo_view = (menux == todo_app.name)
        todo_items = sorted(todos(), key=lambda x: x.priority)
        logger.info(f"Fetched {len(todo_items)} todo items for profile ID {current_profile_id}.")

        response = Container(
            nav_group,
            Grid(
                Div(
                    Card(
                        H2(f"{pluralize(menux, singular=True)} {LIST_SUFFIX}"),
                        Ul(*[render_todo(todo) for todo in todo_items],
                           id='todo-list',
                           cls='sortable',
                           style="padding-left: 0;"),
                        header=Form(
                            Group(
                                Input(
                                    placeholder=f'Add new {todo_app.name.capitalize()}',
                                    id='title',
                                    name='title',
                                    autofocus=True,
                                ),
                                Button("Add", type="submit"),
                            ),
                            hx_post=f"/{todo_app.name}",
                            hx_swap="beforeend",
                            hx_target="#todo-list",
                        ),
                    ) if is_todo_view else Card(
                        H2(f"{pluralize(menux, singular=True)}"),
                        P("This is a placeholder for the selected application."),
                    ),
                    id="content-container",
                ),
                Div(
                    Card(
                        H2(f"{APP_NAME} Chatbot"),
                        Div(
                            id='msg-list',
                            cls='overflow-auto',
                            style='height: 40vh;',
                        ),
                        footer=Form(
                            mk_chat_input_group(),
                        ),
                    ),
                ),
                cls="grid",
                style=(
                    "display: grid; "
                    "gap: 20px; "
                    f"grid-template-columns: {GRID_LAYOUT}; "
                ),
            ),
            Div(
                A(
                    f"Poke {APP_NAME} Chatbot",
                    hx_post="/poke",
                    hx_target="#msg-list",
                    hx_swap="innerHTML",
                    cls="button",
                ),
                style=(
                    "bottom: 20px; "
                    "position: fixed; "
                    "right: 20px; "
                    "z-index: 1000; "
                ),
            ),
            Script("""
                document.addEventListener('htmx:afterSwap', function(event) {
                    if (event.target.id === 'todo-list' && event.detail.successful) {
                        const form = document.querySelector('form[hx-target="#todo-list"]');
                        if (form) {
                            form.reset();
                        }
                    }
                });
            """)
        )

    logger.debug("Returning response for main GET request.")
    last_profile_name = get_profile_name()
    return Titled(
        f"{APP_NAME} / {pluralize(last_profile_name, singular=True)} / {pluralize(menux, singular=True)}",
        response,
        hx_ext='ws',
        ws_connect='/ws',
        data_theme="dark",
    )

def get_notes_content():
    """
    Retrieve and display the list of notes.

    Returns:
        Container: An HTML container with the notes list and chat interface.
    """
    logger.debug(f"Retrieving {notes_app.name.lower()} for display.")
    nav_group = create_nav_menu()

    all_notes = notes()
    logger.debug("Initial note state:")
    for note in all_notes:
        logger.debug(f"Note {note.id}: title = {note.title}, priority = {note.priority}")

    ordered_notes = sorted(all_notes, key=lambda p: p.priority if p.priority is not None else float('inf'))

    logger.debug("Ordered note list:")
    for note in ordered_notes:
        logger.debug(f"Note {note.id}: title = {note.title}, priority = {note.priority}")

    return Container(
        nav_group,
        Grid(
            Div(
                Card(
                    H2(f"{notes_app.name.capitalize()} {LIST_SUFFIX}"),
                    Ul(*[render_note(note) for note in ordered_notes],
                       id='note-list',
                       cls='sortable',
                       style="padding-left: 0;"),
                    footer=Form(
                        Group(
                            Input(placeholder=f"{notes_app.name.capitalize()} Title", name="title", id="note-title-input"),
                            Input(placeholder="Content", name="content", id="note-content-input"),
                            Button("Add", type="submit", id="add-note-button"),
                        ),
                        hx_post=f"/{notes_app.name}",
                        hx_target="#note-list",
                        hx_swap="beforeend",
                        hx_swap_oob="true",
                    ),
                ),
                id="content-container",
            ),
            Div(
                Card(
                    H2(f"{APP_NAME} Chatbot"),
                    Div(
                        id='msg-list',
                        cls='overflow-auto',
                        style='height: 40vh;',
                    ),
                    footer=Form(
                        mk_chat_input_group(),
                    ),
                ),
            ),
            cls="grid",
            style=(
                "display: grid; "
                "gap: 20px; "
                f"grid-template-columns: {GRID_LAYOUT}; "
            ),
        ),
        Script("""
            document.addEventListener('htmx:afterSwap', function(event) {
                if (event.target.id === 'note-list' && event.detail.successful) {
                    const form = document.getElementById('add-note-button').closest('form');
                    form.reset();
                }
            });
        """)
    )

# Add the new app's route
for item in MENU_ITEMS:
    app.add_route(f'/{item}', get)

class CustomerTasksReportApp:
    """
    A Single Page Application (SPA) for reporting customers and their associated tasks.

    This class leverages the existing TodoApp and ProfileApp to aggregate data and generate
    comprehensive reports. It provides an interactive interface where users can trigger
    long-running events, receive humorous feedback from the chatbot, and access generated reports.
    """

    def __init__(self, tasks_table, customers_table, rt):
        """
        Initialize the CustomerTasksReportApp.

        Args:
            tasks_table: The tasks table handle from TodoApp.
            customers_table: The customers table handle from ProfileApp.
            rt: The routing function to register endpoints.
        """
        self.tasks = tasks_table
        self.customers = customers_table
        self.rt = rt
        self.register_routes()

    def register_routes(self):
        """
        Register the routes specific to the CustomerTasksReportApp.

        This includes the main report page and endpoints for handling long-running events.
        """
        self.rt('/reports/customers', methods=['GET'])(self.get_report_page)
        self.rt('/reports/customers/generate/{customer_id}', methods=['POST'])(self.generate_report)

    async def get_report_page(self, request):
        """
        Serve the main report page listing customers and their tasks.

        Args:
            request: The incoming HTTP request.

        Returns:
            HTML: The rendered report page.
        """
        logger.debug("Serving CustomerTasksReportApp main page.")
        nav = create_nav_menu()

        # Fetch all active customers
        active_customers = self.customers("active=?", (True,), order_by='priority')
        logger.info(f"Fetched {len(active_customers)} active customers.")

        # Aggregate tasks for each customer
        customer_tasks = {}
        for customer in active_customers:
            tasks = self.tasks("profile_id=?", (customer.id,), order_by='priority')
            customer_tasks[customer] = tasks
            logger.debug(f"Customer {customer.name} has {len(tasks)} tasks.")

        # Render the report
        report_content = Container(
            nav,
            H2("Customer Tasks Report"),
            Ul(
                *[
                    render_customer_with_tasks(customer, tasks)
                    for customer, tasks in customer_tasks.items()
                ],
                style="padding-left: 0;",
            ),
            Div(
                id="report-section",
                style="margin-top: 20px;",
            ),
            cls="container",
        )

        return Titled(
            "Customer Tasks Report",
            report_content,
            data_theme="dark",
        )

    async def generate_report(self, request, customer_id: int):
        """
        Handle the generation of a project plan for a specific customer.

        This simulates a long-running process, interacts with the chatbot to provide humorous feedback,
        and finally offers a link to the generated report.

        Args:
            request: The incoming HTTP request.
            customer_id (int): The ID of the customer for whom to generate the report.

        Returns:
            HTML: The updated report section with the generated report link.
        """
        logger.debug(f"Initiating report generation for customer ID: {customer_id}")

        # Validate customer existence
        try:
            customer = self.customers[customer_id]
            logger.info(f"Generating report for customer: {customer.name}")
        except NotFoundError:
            logger.error(f"Customer ID {customer_id} not found.")
            return Html(
                Body(
                    P("Customer not found."),
                )
            )

        # Simulate long-running event
        await chatq(f"Generating project plan for {customer.name}. Please wait...")

        # Simulate delay
        await asyncio.sleep(5)  # Simulate a 5-second long task

        # Interact with the chatbot for humorous feedback
        await chatq("Finally! Here it is...")

        # Simulate report generation and provide a link
        report_link = f"/reports/generated/{customer_id}/project_plan.pdf"

        # Update the UI with the generated report link
        return Div(
            A(
                "Download Project Plan",
                href=report_link,
                target="_blank",
                cls="button",
                style="margin-top: 10px;"
            )
        )

def render_customer_with_tasks(customer, tasks):
    """
    Render a customer with their associated tasks and a report generation button.

    Args:
        customer: The customer object.
        tasks: A list of task objects associated with the customer.

    Returns:
        Li: An HTML list item representing the customer and their tasks.
    """
    customer_id = customer.id
    customer_name = customer.name
    tasks_list = Ul(
        *[render_task(task) for task in tasks],
        style="padding-left: 20px;",
    )

    # Button to generate report
    generate_button = Button(
        "Generate Project Plan",
        type="button",
        hx_post=f"/reports/customers/generate/{customer_id}",
        hx_target=f"#report-section",
        hx_swap="outerHTML",
        cls="button",
        style="margin-left: 10px;"
    )

    return Li(
        Div(
            Span(customer_name, style="font-weight: bold;"),
            generate_button,
            style="display: flex; align-items: center;"
        ),
        tasks_list,
        style="list-style-type: none; margin-bottom: 15px;",
    )

def render_task(task):
    """
    Render a single task item.

    Args:
        task: The task object.

    Returns:
        Li: An HTML list item representing the task.
    """
    return Li(
        f"- {task.title}",
        cls='done' if task.done else '',
        style="list-style-type: disc;"
    )

# Instantiate the CustomerTasksReportApp with existing tasks and customers tables
customer_tasks_report_app = CustomerTasksReportApp(
    tasks_table=tasks,
    customers_table=customers,
    rt=rt
)

# Add 'Customer Tasks Report' to the navigation menu
MENU_ITEMS.append('customer_tasks_report')

# Update the navigation menu creation function to include the new app
def create_nav_menu():
    """
    Create the navigation menu with app, profile, and action dropdowns.
    
    Returns:
        Div: An HTML div containing the navigation menu.
    """
    # Existing implementation...

    # Add the Customer Tasks Report to the MENU_ITEMS list if not already present
    if 'customer_tasks_report' not in MENU_ITEMS:
        MENU_ITEMS.append('customer_tasks_report')

    # ... Rest of the navigation menu creation logic

async def chatq(message: str):
    """
    Queue a message for the chat stream.

    Args:
        message (str): The message to queue for streaming.
    """
    asyncio.create_task(stream_chat(message))
    logger.debug(f"Message queued for chat: {message}")

async def stream_chat(prompt: str, quick: bool = False):
    """
    Generate and stream an AI response to all connected users.

    Args:
        prompt (str): The prompt to send to the AI model.
        quick (bool): If True, send the entire response at once.

    Returns:
        None
    """
    logger.debug(f"Streaming chat response for prompt: {prompt}")

    # Generate the AI response using the selected model
    response = await run_in_threadpool(
        chat_with_ollama,
        model,
        [{"role": "user", "content": prompt}],
    )

    if quick:
        for u in users.values():
            await u(
                Div(
                    response,
                    id='msg-list',
                    cls='fade-in',
                    style=MATRIX_STYLE,
                )
            )
    else:
        # Stream the response word by word
        words = response.split()
        for i in range(len(words)):
            partial_response = " ".join(words[: i + 1])
            for u in users.values():
                await u(
                    Div(
                        partial_response,
                        id='msg-list',
                        cls='fade-in',
                        style=MATRIX_STYLE,
                        _=f"this.scrollIntoView({{behavior: 'smooth'}});",
                    )
                )
            await asyncio.sleep(TYPING_DELAY)
    logger.debug("Completed streaming chat response.")