import reflex as rx
from ..state.auth import AuthState

def setup_step(title: str, children: list):
    return rx.vstack(
        rx.heading(title, size="6", margin_bottom="4"),
        *children,
        width="100%",
        max_width="500px",
        spacing="4",
        align_items="start"
    )

def setup_page():
    return rx.center(
        rx.card(
            rx.vstack(
                rx.heading("Welcome to Obsidian Automator", size="8", color="var(--accent-9)"),
                rx.text("Let's secure your agent and configure your vault.", color="gray.11", margin_bottom="6"),
                
                rx.separator(margin_bottom="6"),

                rx.text("Create Admin Account", weight="bold"),
                rx.input(placeholder="Username", value=AuthState.username, on_change=AuthState.set_username, width="100%"),
                rx.input(placeholder="Password", type="password", value=AuthState.password, on_change=AuthState.set_password, width="100%"),
                rx.input(placeholder="Confirm Password", type="password", value=AuthState.confirm_password, on_change=AuthState.set_confirm_password, width="100%"),
                
                rx.separator(margin_y="4"),
                
                rx.text("Agent Configuration", weight="bold"),
                rx.input(placeholder="Gemini API Key", value=AuthState.setup_api_key, on_change=AuthState.set_setup_api_key, width="100%", type="password"),
                rx.input(placeholder="Vault Input Path", value=AuthState.setup_input_folder, on_change=AuthState.set_setup_input_folder, width="100%"),
                rx.text_area(placeholder="Vault Philosophy (e.g. Zettelkasten rules)", value=AuthState.setup_philosophy, on_change=AuthState.set_setup_philosophy, width="100%", height="100px"),
                
                rx.button("Complete Setup", size="4", width="100%", on_click=AuthState.create_admin_account, margin_top="4"),
                
                padding="8",
            ),
            size="4",
            width="600px"
        ),
        height="100vh",
        bg="var(--gray-2)"
    )