library(shiny)
library(shidashi)

# ===========================================================================
# FILE STRUCTURE OVERVIEW
# ===========================================================================

ui_app_structure <- function() {
  fluidRow(
    column(
      width = 12L,
      h3("Application Structure", class = "shidashi-anchor"),
      tags$p(
        "A shidashi application follows a consistent folder structure. ",
        "The key directories are shown below."
      )
    ),
    column(
      width = 6L,
      card(
        title = "Root Directory",
        tags$pre(
          class = "bg-gray-90 pre-compact",
          tags$code(
'my-shidashi-app/
├── global.R         # Generated by shidashi::render()
├── server.R         # Main server entry point
├── ui.R             # Main UI entry point
├── index.html       # Landing page template
├── modules.yaml     # Module definitions
├── modules/         # Module folder
│   └── <module_id>/
├── R/               # Shared R code
├── views/           # HTML templates
└── www/             # Static assets'
          )
        )
      )
    ),
    column(
      width = 6L,
      card(
        title = "Key Files",
        tags$dl(
          tags$dt(tags$code("modules.yaml")),
          tags$dd("Defines sidebar menu structure, module order, and icons."),

          tags$dt(tags$code("global.R")),
          tags$dd("Auto-generated. Initializes app globals and loads modules."),

          tags$dt(tags$code("R/common.R")),
          tags$dd("Shared functions available to all modules."),

          tags$dt(tags$code("index.html")),
          tags$dd("Landing page template (rendered by whisker).")
        )
      )
    )
  )
}


# ===========================================================================
# MODULE STRUCTURE
# ===========================================================================

ui_module_structure <- function() {
  fluidRow(
    column(
      width = 12L,
      h3("Module Structure", class = "shidashi-anchor"),
      tags$p(
        "Each module is a self-contained unit with its own UI, server, and assets."
      )
    ),
    column(
      width = 6L,
      card(
        title = "Module Directory",
        tags$pre(
          class = "bg-gray-90 pre-compact",
          tags$code(
'modules/<module_id>/
├── module-ui.html   # Module UI (whisker template)
├── server.R         # Module server entry point
├── R/               # Module-specific R code
│   └── my-ui.R      # UI functions
├── agents.yaml      # (Optional) AI agent config
└── www/             # (Optional) Module assets'
          )
        )
      )
    ),
    column(
      width = 6L,
      card(
        title = "File Purposes",
        tags$dl(
          tags$dt(tags$code("module-ui.html")),
          tags$dd("HTML template using whisker syntax ({{ ... }})."),

          tags$dt(tags$code("server.R")),
          tags$dd("Defines the module server function. Must export a ",
                  tags$code("server(input, output, session, ...)"), " function."),

          tags$dt(tags$code("R/")),
          tags$dd("Place UI functions and server helpers here. Auto-loaded."),

          tags$dt(tags$code("agents.yaml")),
          tags$dd("Configures AI agent modes and available tools.")
        )
      )
    )
  )
}


# ===========================================================================
# MODULE UI TEMPLATE
# ===========================================================================

ui_module_template <- function() {
  fluidRow(
    column(
      width = 12L,
      h3("Module UI Template", class = "shidashi-anchor"),
      tags$p(
        "The ", tags$code("module-ui.html"), " file is a whisker template. ",
        "R expressions inside ", tags$code("{{ }}"), " are evaluated at render time."
      )
    ),
    column(
      width = 12L,
      card(
        title = "Example module-ui.html",
        tags$pre(
          class = "bg-gray-90 pre-compact",
          tags$code(
            class = "html",
'<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ module_title() }}</title>
  {{ shidashi::include_view("header.html") }}
</head>
<body class="{{ shidashi::guess_body_class(body_class()) }}">

<nav class="{{ paste(nav_class(), collapse = \' \') }}">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link fw-semibold">{{ module_title() }}</a>
    </li>
  </ul>
</nav>

<div class="container-fluid py-3">
  {{ my_ui_function() }}
</div>

{{ shidashi::module_drawer() }}
{{ shidashi::back_top_button("rocket") }}
{{ shidashi::include_view("footer.html") }}
</body>
</html>'
          )
        )
      )
    )
  )
}


# ===========================================================================
# SERVER PATTERN
# ===========================================================================

ui_server_pattern <- function() {
  fluidRow(
    column(
      width = 12L,
      h3("Server Pattern", class = "shidashi-anchor"),
      tags$p(
        "The server defines reactive logic. Place server functions in ",
        tags$code("R/"), " and call them from ", tags$code("server.R"), "."
      )
    ),
    column(
      width = 6L,
      card(
        title = "server.R",
        tags$pre(
          class = "bg-gray-90 pre-compact",
          tags$code(
            class = "r",
'library(shiny)
library(shidashi)

server <- function(input, output, session, ...) {
  # Call server functions defined in R/
  server_mymodule(input, output, session, ...)
}'
          )
        )
      )
    ),
    column(
      width = 6L,
      card(
        title = "R/mymodule-server.R",
        tags$pre(
          class = "bg-gray-90 pre-compact",
          tags$code(
            class = "r",
'server_mymodule <- function(input, output, session, ...) {
  # Register for theme changes
  event_data <- shidashi::register_session_events(session)

  output$my_plot <- renderPlot({
    theme <- shidashi::get_theme(event_data)
    par(bg = theme$background, fg = theme$foreground)
    plot(1:10, main = input$title)
  })
}'
          )
        )
      )
    )
  )
}


# ===========================================================================
# MODULES.YAML
# ===========================================================================

ui_modules_yaml <- function() {
  fluidRow(
    column(
      width = 12L,
      h3("modules.yaml Configuration", class = "shidashi-anchor"),
      tags$p(
        "The ", tags$code("modules.yaml"), " file controls the sidebar menu."
      )
    ),
    column(
      width = 6L,
      card(
        title = "Example Configuration",
        tags$pre(
          class = "bg-gray-90 pre-compact",
          tags$code(
            class = "yaml",
'# Dividers (horizontal lines in sidebar)
divider:
  Components:
    order: 20
  Settings:
    order: 50

# Collapsible groups
groups:
  Visualization:
    icon: "chart-bar"
    order: 25
    open: true

# Module entries
modules:
  dashboard:
    order: 1
    icon: "home"
    label: "Dashboard"
  plots:
    order: 26
    icon: "chart-line"
    label: "Plots"
    group: "Visualization"'
          )
        )
      )
    ),
    column(
      width = 6L,
      card(
        title = "Module Properties",
        tags$dl(
          tags$dt(tags$code("order")),
          tags$dd("Numeric order in sidebar. Lower = higher."),

          tags$dt(tags$code("icon")),
          tags$dd("FontAwesome icon name (without 'fa-' prefix)."),

          tags$dt(tags$code("label")),
          tags$dd("Display text in sidebar."),

          tags$dt(tags$code("group")),
          tags$dd("(Optional) Group name for collapsible section."),

          tags$dt(tags$code("disabled")),
          tags$dd("(Optional) Set to ", tags$code("true"), " to hide module.")
        )
      )
    )
  )
}


# ===========================================================================
# SERVER (empty for documentation module)
# ===========================================================================

server_filestructure <- function(input, output, session, ...) {
  # No server logic needed for this documentation module
}
