export interface Example {
  name: string;
  description: string;
  source: string;
}

export const EXAMPLES: Example[] = [
  {
    name: "Hello World",
    description: "Minimal page with a heading and text",
    source: `page "Hello" 50

  heading 1 "Welcome"
  text "This is your first page."

  spacer

  heading 2 "About"
  text "Built with the uFrame DSL."

  divider light

  link "Home" "/page/index.mu"`,
  },
  {
    name: "Node Dashboard",
    description: "System gauges, status indicators, and network info",
    source: `page "Node Status" 60

  box double "Relay Alpha-7"
    align center
    text "Reticulum Network Node"
    text "Online 14d 3h 22m"

  spacer

  heading 1 "Resources"

  row 2
    col 28
      gauge "CPU" 62 100 24 warn=75 crit=90
    col 28
      gauge "MEM" 84 100 24 warn=80 crit=95

  spacer

  heading 1 "Network"

  row 2
    col 30
      label "Peers" "7 / 12"
      label "Uptime" "14d 3h 22m"
    col 28
      status "East Relay" online
      status "South Bridge" online
      status "Node Gamma" degraded
      status "Hub North" offline

  divider heavy

  text "Press Ctrl+R to refresh"`,
  },
  {
    name: "Routing Table",
    description: "Box-drawn table with colored status indicators",
    source: `page "Routes" 60

  heading 1 "Routing Table"

  table "Active Routes"
    columns "Destination" 22 | "Hops" 6 | "RTT" 8 | "State" 12
    row "a7f2::relay-east" | "2" | "34ms" | "@color{0f0}{● alive}"
    row "c4e1::bridge-south" | "4" | "112ms" | "@color{0f0}{● alive}"
    row "01ab::node-gamma" | "7" | "580ms" | "@color{f00}{○ stale}"
    row "f390::hub-north" | "1" | "8ms" | "@color{0f0}{● alive}"

  spacer

  label "Total routes" "4"
  label "Average RTT" "183ms"

  divider light

  link "Refresh" "/page/routes.mu"`,
  },
  {
    name: "Nested Boxes",
    description: "Four box styles with nested content",
    source: `page "Box Styles" 50

  heading 1 "Box Styles"

  spacer

  box light "Light Border"
    text "Standard border style"
    text "Good for general content"

  spacer

  box heavy "Heavy Border"
    text "Thick borders for emphasis"
    text "Use for alerts or highlights"

  spacer

  box double "Double Border"
    text "Double-line borders"
    text "Great for titles and headers"

  spacer

  box rounded "Rounded Border"
    text "Soft corners"
    text "A more modern feel"

  spacer

  heading 2 "Nested"

  box double "Outer"
    text "This box contains another:"
    box light "Inner"
      text "Nested content here"`,
  },
  {
    name: "Data Visualization",
    description: "Gauges, sparklines, and status indicators",
    source: `page "Metrics" 60

  box heavy "System Metrics"
    align center
    text "Real-time monitoring dashboard"

  spacer

  heading 1 "CPU & Memory"

  gauge "CPU" 42 100 28
  gauge "GPU" 21 100 28
  gauge "MEM" 67 100 28 warn=80 crit=95
  gauge "SWP" 3 100 28

  spacer

  heading 1 "Network Traffic"

  sparkline "Inbound" "1,3,5,8,7,5,3,2,1,3,6,8,7,4" 20
  sparkline "Outbound" "2,2,3,5,8,7,5,3,2,1,1,3,5,8" 20

  spacer

  heading 1 "Services"

  row 2
    col 28
      status "NomadNet" online
      status "LXMF Router" online
      status "Sideband" online
    col 28
      status "Reticulum" online
      status "TCP Interface" degraded
      status "I2P Transport" offline

  divider heavy
  text "Last updated: just now"`,
  },
  {
    name: "Full Node Page",
    description: "Complete node page with all primitives",
    source: `page "Relay Alpha-7" 64

  box double "Relay Alpha-7"
    align center
    text "Reticulum Mesh Node"
    text "Sector 7 - Grid Reference 4E"

  spacer

  heading 1 "Resources"

  row 2
    col 30
      gauge "CPU" 62 100 26 warn=75 crit=90
      gauge "MEM" 84 100 26 warn=80 crit=95
    col 30
      gauge "DISK" 45 100 26 warn=85 crit=95
      gauge "NET" 23 100 26

  spacer

  heading 1 "Network"

  sparkline "Traffic IN" "1,4,6,8,7,5,3,2,3,5,7,8,6,4" 20
  sparkline "Traffic OUT" "2,3,5,7,8,6,4,3,4,6,8,7,5,3" 20

  spacer

  heading 1 "Routing"

  table "Active Routes"
    columns "Destination" 20 | "Hops" 6 | "RTT" 8 | "State" 10
    row "relay-east" | "2" | "34ms" | "@color{0f0}{● up}"
    row "bridge-south" | "4" | "112ms" | "@color{0f0}{● up}"
    row "node-gamma" | "7" | "580ms" | "@color{f00}{○ down}"
    row "hub-north" | "1" | "8ms" | "@color{0f0}{● up}"

  spacer

  heading 1 "Peers"

  row 2
    col 30
      status "East Relay" online
      status "South Bridge" online
      status "Backup Node" degraded
    col 30
      label "Active" "7 / 12"
      label "Uptime" "14d 3h"
      label "Version" "0.7.2"

  divider heavy

  row 2
    col 30
      link "Home" "/page/index.mu"
    col 30
      link "Settings" "/page/settings.mu"`,
  },
  {
    name: "Interactive Form",
    description: "Text fields, radio buttons, checkboxes, and submit",
    source: `page "Search" 56

  box rounded "Node Search"
    align center
    text "Find peers and pages on the mesh"

  spacer

  form "search"
    field "query" 30 "Enter search term..."
    radio "scope" "Local" | "Network" | "All"
    checkbox "cache" "Include cached results"
    spacer
    button "Search" "/page/search.mu"

  divider light

  heading 2 "Quick Actions"

  form "ping"
    field "target" 30 "Destination hash..."
    radio "mode" "Ping" | "Trace" | "Page"
    checkbox "verbose" "Verbose output"
    spacer
    button "Execute" "/page/action.mu"`,
  },
  {
    name: "Components",
    description: "Reusable component definitions with use std/dashboard",
    source: `page "Node Overview" 60

  use std/dashboard

  banner "Relay Alpha-7" "Reticulum Mesh Node"

  spacer

  resources 62 84

  spacer

  heading 2 "Peers"

  peer_status "East Relay" online
  peer_status "South Bridge" online
  peer_status "Node Gamma" degraded

  divider heavy
  link "Home" "/page/index.mu"`,
  },
  {
    name: "Navigation",
    description: "Horizontal bar + vertical sidebar navigation",
    source: `page "Dashboard" 64

  hnav bar
    item "Status" "/page/status.mu" active
    item "Peers" "/page/peers.mu"
    item "Files" "/page/files.mu"
    item "Config" "/page/config.mu"

  spacer

  row 1
    col 18
      vnav boxed
        heading "Network"
        item "Overview" "/page/overview.mu" active
        item "Peers" "/page/peers.mu"
        item "Routes" "/page/routes.mu"
        separator
        heading "Tools"
        item "Ping" "/page/ping.mu"
        item "Trace" "/page/trace.mu"
    col
      heading 1 "Overview"
      gauge "CPU" 62 100 28 warn=75 crit=90
      gauge "MEM" 84 100 28 warn=80 crit=95
      spacer
      status "East Relay" online
      status "South Bridge" online
      status "Node Gamma" degraded`,
  },
  {
    name: "Image Art",
    description: "Convert images to character art (upload an image first)",
    source: `page "Image Embedding" 60

  heading 1 "Image Embedding"
  text "Upload an image with the Image button above,"
  text "then use the image keyword to embed it."

  spacer

  box light "Syntax"
    text 'image "path.png" mode width'
    spacer
    label "mode" "braille | block | ascii | halfblock"
    label "width" "output width in characters"

  spacer

  heading 2 "Options"
  label "dither" "floyd | threshold | none"
  label "invert" "flip light and dark"
  label "align" "left | center | right"
  label "caption" "text below the image"

  spacer

  box rounded "Example"
    text 'image "logo.png" braille 30'
    text '  dither floyd'
    text '  align center'
    text '  caption "My logo"'`,
  },
  {
    name: "Big Title",
    description: "Large ASCII art text in block, thin, and pixel fonts",
    source: `page "Banner" 64

  bigtitle "RELAY" block
    align center
    color 0cf

  spacer

  text "@center{Alpha-7 — Reticulum Network Node}"

  spacer

  bigtitle "STATUS" thin
    align center

  spacer

  gauge "CPU" 62 100 28 warn=75 crit=90
  gauge "MEM" 84 100 28 warn=80 crit=95

  divider heavy

  bigtitle "OK" pixel
    align center
    color 0f0`,
  },
  {
    name: "Themed Page",
    description: "Same layout with different visual themes (try: nouveau, gothic, bamboo, circuit, brutalist)",
    source: `page "Node Status" 50
  theme nouveau

  box heavy "Relay Alpha-7"
    align center
    text "Reticulum Network Node"

  spacer

  heading 1 "Resources"

  gauge "CPU" 62 100 24 warn=75 crit=90
  gauge "MEM" 84 100 24 warn=80 crit=95

  spacer

  heading 2 "Peers"

  status "East Relay" online
  status "South Bridge" online
  status "Node Gamma" degraded

  divider heavy

  link "Home" "/page/index.mu"`,
  },
  {
    name: "Dynamic Dashboard",
    description: "Live data sources, conditionals, and cache control",
    source: `page "Live Status" 60
  cache 0

  source cpu_pct : shell "grep 'cpu ' /proc/stat | awk '{print int(($2+$4)*100/($2+$4+$5))}'"
  source mem_pct : shell "free | awk '/Mem/{print int($3/$2*100)}'"
  source uptime : shell "uptime -p"
  source timestamp : python "datetime.now().strftime('%H:%M:%S')"

  box double "Node Monitor"
    align center
    text "Live System Dashboard"
    text "Updated: $timestamp"

  spacer

  heading 1 "Resources"

  gauge "CPU" $cpu_pct 100 28 warn=75 crit=90
  gauge "MEM" $mem_pct 100 28 warn=80 crit=95

  spacer

  if $cpu_pct > 90
    box heavy "ALERT"
      color f00
      text "CPU critical! Immediate action required."
  elif $cpu_pct > 75
    text "@color{ff0}{Warning: CPU usage elevated}"

  spacer

  label "Uptime" "$uptime"

  divider heavy
  text "Press Ctrl+R to refresh"`,
  },
];
