from nicegui import ui
from config.config import load_config
from ui.core.state import app_state
from ui.core.task_runner import run_task, select_folder

# 导入业务函数
from utils.generate_utils import (
    generate_template,
    generate_comment_all,
    batch_convert_folder,
    generate_report,
    generate_zodiac,
    generate_signature,
)
from utils.file_utils import initialize_project, open_folder

config = load_config("config.toml")


def create_header():
    with ui.header().classes("app-header items-center justify-between shadow-md"):
        # 左侧：图标和标题
        with ui.row().classes("items-center gap-2"):
            ui.image("/assets/icon.ico").classes("w-8 h-8").props("fit=contain")
            ui.label("尚城幼儿园成长报告助手").classes("text-xl font-bold")

        # 右侧：署名 + 配置按钮
        with ui.row().classes("items-center gap-4"):
            ui.label("By 寒寒 | 这里的每一份评语都充满爱意").classes(
                "text-xs opacity-90"
            )
            # 添加配置按钮
            ui.button(
                icon="settings", on_click=lambda: ui.navigate.to("/config")
            ).props("flat round color=white").tooltip("系统配置")


def create_home_page():
    # 1. 引入外部 CSS
    ui.add_head_html('<link href="/assets/style.css" rel="stylesheet" />')

    create_header()

    # 主容器
    with ui.column().classes("w-full max-w-4xl mx-auto p-4 gap-4 thin-scrollbar"):

        # === 进度条区域 ===
        with ui.card().classes("func-card"):
            app_state.progress_label = ui.label("⛳ 任务进度: 待命").classes(
                "font-bold text-gray-700 mb-1"
            )
            # 使用 NiceGUI 原生属性配合 CSS 类
            app_state.progress_bar = ui.linear_progress(
                value=0, show_value=False
            ).classes("h-4 rounded")
            app_state.progress_bar.props("color=positive")  # 使用 Quasar 颜色变量

        # === 核心功能区 ===
        with ui.card().classes("func-card card-core"):
            ui.label("🛠️ 核心功能").classes("section-title text-green")

            with ui.grid(columns=3).classes("w-full gap-3"):
                # 辅助函数：快速创建按钮
                def func_btn(text, icon, func):
                    ui.button(text, on_click=lambda: run_task(func)).props(
                        f"outline"
                    ).classes("w-full")

                func_btn("📁 生成图片路径", "image", generate_template)
                func_btn("🤖 生成评语 (AI)", "smart_toy", generate_comment_all)
                func_btn("📊 生成报告 (PPT)", "analytics", generate_report)

                # 特殊处理带参数的
                async def run_convert():
                    await run_task(batch_convert_folder, config.get("output_folder"))

                ui.button("📑 格式转换 (PDF)", on_click=run_convert).props("outline")
                func_btn("🐂 生肖转化 (生日)", "pets", generate_zodiac)
                func_btn("💴 园长一键签名", "refresh", generate_signature)

        # === 下方双栏布局 ===
        # 数据管理
        with ui.card().classes("func-card card-data"):
            ui.label("⚙️ 系统操作").classes("section-title text-blue")

            def stop_now():
                if app_state.is_running:
                    app_state.stop_event.set()
                    ui.notify("发送停止信号...", type="warning")

            with ui.row().classes("w-full"):
                ui.button(
                    "📦 打开输出文件夹",
                    on_click=lambda: open_folder(config.get("output_folder")),
                ).props(f"outline")
                ui.button(
                    "📤 打开数据文件夹",
                    on_click=lambda: open_folder(config.get("data_folder")),
                ).props(f"outline")
                ui.button("⛔ 停止", on_click=stop_now).props("color=negative").classes(
                    "flex-1"
                )

        # === 日志区 ===
        with ui.card().classes("func-card card-logging"):
            with ui.expansion("📝 系统实时日志", value=True).classes(
                "w-full bg-white shadow-sm rounded"
            ):
                app_state.log_element = ui.log(max_lines=200).classes(
                    "w-full h-40 font-mono text-xs bg-gray-100 p-2"
                )