# -*- coding: utf-8 -*-
"""
对话页面
"""
import reflex as rx

from application.components.conversation import (
    render_conversation_component,
    render_conversation_history_item,
    render_input_bar,
    render_create_conversation_component,
)
from application.state.conversation import ConversationState
from application.state.conversation_history_collapse import (
    ConversationHistoryCollapseState,
)


def render_conversation_page() -> rx.Component:
    """
    渲染对话页面：左侧为对话历史折叠面板，右侧为对话历史、运行历史、创建和输入等组件
    """
    # 对话历史折叠面板打开状态
    is_open = ConversationHistoryCollapseState.is_open

    return rx.box(
        rx.hstack(
            # 渲染对话历史
            rx.box(
                rx.vstack(
                    # 标题
                    rx.hstack(
                        rx.text(
                            "对话历史",
                            margin_bottom="8px",
                            font_size="var(--devui-font-size-lg)",
                            font_weight="700",
                            white_space="nowrap",
                        ),
                        display="flex",
                        align_items="center",
                        justify_content="space-between",
                    ),
                    # 渲染列表
                    rx.vstack(
                        rx.foreach(
                            ConversationState.get_conversation_history,
                            lambda item, _: render_conversation_history_item(
                                item[0], item[1]
                            ),
                        ),
                        flex="1",
                        margin_top="8px",
                        width="100%",
                        align_items="stretch",
                        overflow="hidden",  # 禁用滚动条
                    ),
                    display="flex",
                    flex_direction="column",
                    padding="12px",
                    height="100%",
                    background_color="#f9f9f9cc",
                    backdrop_filter="blur(50px)",  # 背景模糊
                    gap="12px",
                    color="var(--devui-text)",
                ),
                width=rx.cond(is_open, "25%", "0px"),
                min_width=rx.cond(is_open, "240px", "0px"),
                max_width=rx.cond(is_open, "380px", "0px"),
                height="100%",
                overflow="hidden",
                transition="all 0.3s ease-in-out",
            ),
            # 渲染对话区域
            rx.box(
                rx.vstack(
                    # 渲染运行历史
                    render_conversation_component(),
                    # 渲染创建对话按钮
                    render_create_conversation_component(),
                    # 渲染输入栏
                    render_input_bar(),
                    display="flex",
                    flex_flow="column",
                    width="100%",
                    height="100%",
                    gap="8px",
                    align_items="center",
                ),
                position="relative",
                display="flex",
                flex="1",
                width="0",
                height="100%",
                background="linear-gradient(180deg, #fffffff2, #f8fafff2 99%)",
            ),
            position="relative",
            display="flex",
            flex="1",
            height="100%",
            min_height="0",
            overflow="hidden",
            transition="all 0.3s ease-in-out",
        ),
        # 渲染打开/关闭对话历史折叠面板按钮
        rx.button(
            rx.cond(
                is_open,
                rx.icon(
                    "chevron-left",
                    width="16px",
                    height="16px",
                    color="var(--devui-icon-fill-weak)",
                ),
                rx.icon(
                    "chevron-right",
                    width="16px",
                    height="16px",
                    color="var(--devui-icon-fill-weak)",
                ),
            ),
            position="absolute",
            top="50%",
            left=rx.cond(is_open, "calc(clamp(240px, 25%, 380px) - 8px)", "0"),
            z_index=99,
            width="16px",
            height="40px",
            background="var(--devui-base-bg)",
            box_shadow="var(--mc-float-block-shadow)",
            border_radius=rx.cond(is_open, "6px", "0 6px 6px 0"),
            transition="all 0.3s ease-in-out",
            cursor="pointer",
            # 点击事件：打开/关闭对话历史折叠面板
            on_click=ConversationHistoryCollapseState.toggle,
        ),
        position="relative",
        width="100%",
        height="100%",
        border_radius="12px",
        overflow="hidden",  # 溢出隐藏
    )