import "deft/ui/protocols" as _           # load protocol specs
import "deft/ui/components/widget-base" as widget-base

deftype CounterWidget << UIWidget %{
    :count %{:type :number :default 0}   # inherits :id, :tab-index, etc.
}

# Constructor
def make-counter {||
    %CounterWidget{ :id "counter" :count 0 }
}

# Render — implements Drawable
defimpl CounterWidget Drawable {
    draw {|ctx bounds|
        @doc "Draw the counter value centered in bounds."
        draw/fill-bg $ctx %{ :r 20 :g 20 :b 30 }
        draw/text $ctx $bounds~x $bounds~y "Count: $self~count"
    |
    }
}

# Keyboard — implements Keyable
defimpl CounterWidget Keyable {
    on-key {|event bounds|
        match $event~key {
            "+"      => [assoc $self :count ($self~count + 1)]
            "-"      => [assoc $self :count ($self~count - 1)]
            "return" => [assoc $self :count 0]
            _        => nil                          # not handled — bubble
        |
    |
    }
}

# Make it focusable
defimpl CounterWidget Focusable {
    accepts-focus? {|| true }
    on-focus {|| nil }
    on-blur  {|| nil }
}

from "deft/ui/compose" import child, children
from "deft/ui/components/column" import column
from "deft/ui/components/row" import row
from "deft/ui/components/text-input" import text-input
from "deft/ui/components/button" import button

def make-search-bar {||
    set field
        [text-input --id "query" --placeholder "Search..." --flex 1]

    set go
        [button --text "Go" --on-click on-go]

    [column --direction :vertical]
    |> [children @{
         [row --gap 1 --min-height 1 --flex 0]
         |> [children @{ $field $go }] }]
}

[collapsible --id "adv"
             --title "Advanced options"
             --expanded $state~open
             --body-h 3                # expanded body height in rows
             --on-toggle on-section-toggle
             --children @{
                 [label --text "…"]
                 [text-input --id "adv-name" --placeholder "name"] }]

import "deft/ui/components/collapsible" as cl

defimpl MyPanel Panel {
    on-tick {| dt| [cl/tick $widget-state $dt] }   # true while sliding
}

# Theme-tracked — no colours passed
[dropdown --id "topic"
          --items $titles
          --selected $idx
          --open $open
          --on-toggle on-toggle
          --on-change on-change]

# Fixed-look — colours override the theme
[dropdown --id "topic"
          --items $titles
          --selected $idx
          --open $open
          --fg "#ffffff"
          --bg "#2a2a3a"
          --sel-bg "#3366cc"]

[dropdown --id "lang"
          --items @{ "Red" "Green" "Blue" }
          --selected 0
          --open false
          --on-toggle {|| ... }          # flip `open`, rebuild
          --on-change {| idx| ... }      # commit: act on items[idx]
          --list-width 40]

[dropdown --id "man"
          --items $_titles
          --selected $state~idx
          --open $state~open
          --filterable true
          --query $state~q
          --placeholder "Filter…"
          --on-query {| q| ... }         # store $state~q, rebuild
          --on-toggle {|| ... }
          --on-change {| idx| ... }]

def on-toggle {||
    set next-open (!$state~open)
    def state [merge $state %{ :open $next-open :query "" }]
    [rebuild-widget-tree]
    if $next-open { [tui/focus-widget "man-search"] }   # focus the field
}

def on-query {| q |
    def state [assoc $state :query $q]
    [rebuild-widget-tree]
    [tui/focus-widget "man-search"]                     # keep focus across rebuild
}

def on-change {| idx |
    def state [merge $state %{ :selected $idx :open false :query "" }]
    [rebuild-widget-tree]
}

import "deft/ui/components/dropdown" as dd

defimpl MyApp Keyable {
    on-key {| event |
        if ($event~type != :key-down) { return nil }
        if ($event~key == :escape) { [close-dropdown]; return $self }

        if $state~dropdown-open {
            set tree [deref $widget-state]
            set list [find-by-id $tree "my-dd-list"]
            if ![nil? $list] {
                set result [dd/nav-key $list $event~key]
                if [nth $result 0] {
                    set new-list [nth $result 1]
                    # Enter returns nil — on-change already rebuilt.
                    if ![nil? $new-list] {
                        set tree [replace-by-id $tree "my-dd-list" $new-list]
                        [reset! $widget-state $tree] }
                    return $self } } }
        nil } }

[select-list --items $items
             --selected $idx
             --on-key {| key idx| ... }    # fires on up/down/enter/click
             --on-change {| idx| ... }     # fires on enter / click
             --follow-selected true]

%{ :id "src"              # stable id for expansion/cursor state (recommended;
                          # falls back to a positional path like "0.2")
   :label "src"           # display text (required for map nodes)
   :children @{ ... }     # presence makes the node expandable
   :icon "▸"              # optional glyph before the label
   :fg "#..." :bg "#..." }  # optional per-node colours

import "deft/ui/components/tree" as tree-kit

def dir-nodes {| path |
    @doc "Map a directory listing to tree nodes; dirs recurse eagerly."
    set out @{}
    for e [unwrap [fs/list $path]] {
        set p [fs/join $path $e~name]
        if $e~is-dir {
            $out << %{ :id $p :label $e~name :children [dir-nodes $p] }
        } else {
            $out << %{ :id $p :label $e~name }
        }
    }
    $out
}

[tree-kit/tree --nodes [dir-nodes "."]
               --expanded %{ "src" true }
               --on-select {| info| ... }
               --on-toggle {| id open?| ... }]

def on-tree-toggle {| id open? |
    set exp [if $open? {[assoc $expanded $id true]} {[dissoc $expanded $id]}]
    def state [assoc $state :expanded $exp]
    [rebuild-widget-tree] }

defimpl MyColumn Container {
    children {||
        $self~children
    |
    }
}

tui/focus-widget "query"                      # set focus
tui/focused-widget-id                         # => "query" (or nil)
tui/cycle-focus :forward $tree                # Tab-style cycling
tui/clear-focus                               # drop focus

defimpl MyInput Drawable {
    draw {|ctx bounds focused|
        # ... draw the cursor if $focused is true ...
    |
    }
}

defprotocol Gridable %{
    row-count {}
    col-count {}
    cell {row col value opts^CellOpts}
}

defimpl MyData Gridable {
    row-count {|| $self~rows(len) }
    col-count {|| $self~cols(len) }
    cell {|row col value opts|
        # return a display value for (row, col)
    |
    }
}

defimpl MyWidget Keyable {
    on-key {|event bounds| ... }     # ✓ matches spec
    onkey  {|event bounds| ... }     # ⚠ warned — not in spec
}