"""Top-level Dash layout builder.

Assembles all component modules into the complete page layout.
Uses a flex layout with a draggable splitter between the left
sidebar and the main content area.
"""

from __future__ import annotations

from typing import Any

import dash_bootstrap_components as dbc
from dash import ClientsideFunction, clientside_callback, dcc, html

from impakt.web.components.channel_grid import build_channel_grid
from impakt.web.components.criteria import build_criteria_panel
from impakt.web.components.cursors import build_cursor_panel
from impakt.web.components.header import (
    build_header,
    build_open_test_modal,
    build_overlay_modal,
    build_test_info_panel,
)
from impakt.web.components.plot_grid import build_plot_grid
from impakt.web.components.report import build_report_panel
from impakt.web.components.transforms import build_transform_panel
from impakt.web.state import AppState


def build_layout(app_state: AppState, template_names: list[str] | None = None) -> html.Div:
    """Build the complete page layout from components."""

    return html.Div(
        [
            # --- Header ---
            build_header(app_state, template_names),
            # --- Modals ---
            build_open_test_modal(),
            build_overlay_modal(),
            # --- Test info bar ---
            html.Div(
                build_test_info_panel(app_state),
                className="px-3",
            ),
            # --- Main content: flex row with splitter ---
            html.Div(
                [
                    # === Left panel: Channels + Transforms ===
                    html.Div(
                        [
                            build_channel_grid(app_state),
                            html.Div(style={"height": "8px"}),
                            build_transform_panel(),
                        ],
                        id="left-panel",
                        style={
                            "width": "320px",
                            "minWidth": "200px",
                            "maxWidth": "600px",
                            "overflowY": "auto",
                            "flexShrink": "0",
                            "padding": "0 8px",
                        },
                    ),
                    # === Splitter handle ===
                    html.Div(
                        id="splitter-handle",
                        style={
                            "width": "6px",
                            "cursor": "col-resize",
                            "backgroundColor": "#e9ecef",
                            "flexShrink": "0",
                            "transition": "background-color 0.15s",
                            "position": "relative",
                            "zIndex": "10",
                        },
                        # The hover/active styling is in CSS
                    ),
                    # === Center + Right: fills remaining space ===
                    html.Div(
                        [
                            dbc.Row(
                                [
                                    # Center: Plot grid + Cursors
                                    dbc.Col(
                                        [
                                            build_plot_grid("1x1"),
                                            build_cursor_panel(),
                                        ],
                                        width=8,
                                    ),
                                    # Right: Criteria + Report
                                    dbc.Col(
                                        [
                                            build_criteria_panel(),
                                            build_report_panel(),
                                        ],
                                        width=4,
                                        style={
                                            "maxHeight": "calc(100vh - 160px)",
                                            "overflowY": "auto",
                                        },
                                    ),
                                ]
                            ),
                        ],
                        style={
                            "flex": "1",
                            "minWidth": "0",
                            "overflowX": "hidden",
                            "padding": "0 8px",
                        },
                    ),
                ],
                id="main-content",
                style={
                    "display": "flex",
                    "flexDirection": "row",
                    "height": "calc(100vh - 130px)",
                    "overflow": "hidden",
                },
            ),
            # --- Hidden stores ---
            dcc.Store(id="selected-channels-store", data=[]),
            dcc.Store(id="session-store", data={}),
            dcc.Store(id="page-refresh-trigger", data={}),
            dcc.Store(id="splitter-state", data={"width": 320}),
        ]
    )
