Cmdk::Root(label: 'Command Menu', loop: @loop, vim_bindings: @vim_bindings,
           disable_pointer_selection: @disable_pointer_selection, should_filter: @should_filter,
           class: 'cmdk-vercel w-160 max-w-full') do
  Cmdk::Input(placeholder: @placeholder)
  Cmdk::List() do
    Cmdk::Empty() { 'No results found.' }

    Cmdk::Group(heading: 'Suggestions') do
      Cmdk::Item(value: 'Linear', keywords: %w[issue tracker]) { item('📐', 'Linear') }
      Cmdk::Item(value: 'Figma', keywords: %w[design]) { item('🎨', 'Figma') }
      Cmdk::Item(value: 'Slack', keywords: %w[chat team]) { item('💬', 'Slack') }
      Cmdk::Item(value: 'YouTube', keywords: %w[video]) { item('📺', 'YouTube') }
      Cmdk::Item(value: 'Raycast', keywords: %w[launcher]) { item('🚀', 'Raycast') }
    end

    Cmdk::Separator()

    Cmdk::Group(heading: 'Settings') do
      Cmdk::Item(value: 'Change Theme', keywords: %w[appearance]) { item('🌗', 'Change Theme') }
      Cmdk::Item(value: 'Admin Settings', disabled: true) { item('🔒', 'Admin Settings (disabled)') }
    end
  end
end

def initialize(placeholder: 'What do you need?', loop: true, vim_bindings: true,
               disable_pointer_selection: false, should_filter: true)
  @placeholder = placeholder
  @loop = loop
  @vim_bindings = vim_bindings
  @disable_pointer_selection = disable_pointer_selection
  @should_filter = should_filter
end
def item(icon, text)
  span(class: 'text-base', aria_hidden: 'true') { icon }
  span { text }
end

Cmdk::Root(label: 'Fruits', class: 'cmdk-vercel w-160 max-w-full') do
  Cmdk::Input(placeholder: 'Search fruit...')
  Cmdk::List() do
    Cmdk::Empty() { 'No results found.' }
    %w[Apple Banana Cherry Grape Orange Peach].each do |fruit|
      Cmdk::Item() { fruit } # value inferred from text content
    end
  end
end

Cmdk::Root(label: 'Force mount', class: 'cmdk-vercel w-160 max-w-full') do
  Cmdk::Input(placeholder: "Type 'zzz': Help stays visible")
  Cmdk::List() do
    Cmdk::Empty() { 'No results found.' }
    Cmdk::Group(heading: 'Results') do
      Cmdk::Item() { 'Open Project' }
      Cmdk::Item() { 'Close Project' }
    end
    Cmdk::Group(heading: 'Always here', force_mount: true) do
      Cmdk::Item(value: 'Help') { '❓ Help (force mounted)' }
    end
    Cmdk::Separator(always_render: true)
    Cmdk::Item(value: 'Quit', force_mount: true) { '🚪 Quit (force mounted)' }
  end
end

div(class: 'flex w-160 max-w-full flex-col gap-3') do
  div(class: 'flex flex-wrap items-center gap-x-2 gap-y-1 text-xs demo-hint') do
    plain 'Type'
    code(class: 'demo-chip') { '/' }
    plain 'to pick a scope, Enter to pin it as a pill, Backspace on empty input to leave. '
    plain 'Typing it out ('
    code(class: 'demo-chip') { '/fruits ' }
    plain ') works too.'
  end

  Cmdk::Root(label: 'Scoped search', scopes: %w[fruits doc], class: 'cmdk-vercel w-full') do
    div(class: 'cmdk-search-row') do
      Cmdk::Input(placeholder: "Search, or type '/' for scopes…")
    end
    Cmdk::List() do
      Cmdk::Empty() { 'No results found.' }
      Cmdk::Group(heading: 'Jump to') do
        Cmdk::Item(value: 'fruits', enters_scope: 'fruits', keywords: %w[apple banana orange]) { '🍎 Search fruits…' }
        Cmdk::Item(value: 'doc', enters_scope: 'doc', keywords: %w[files pages]) { '📄 Search documents…' }
      end
      Cmdk::Group(heading: 'Actions') do
        Cmdk::Item() { '➕ New Issue' }
        Cmdk::Item() { '🔍 Search Everything' }
      end
      Cmdk::Group(heading: 'Fruits', scope: 'fruits', scope_only: true) do
        Cmdk::Item() { '🍎 Apple' }
        Cmdk::Item() { '🍌 Banana' }
        Cmdk::Item() { '🍊 Orange' }
      end
      Cmdk::Group(heading: 'Documents', scope: 'doc') do
        Cmdk::Item() { '📄 README' }
        Cmdk::Item() { '📄 Architecture Notes' }
      end
    end
  end

  script { raw safe(<<~JS) }
    document.addEventListener('cmdk-scope-change', (e) => {
      // In a real app this is where you would kick off a server-backed
      // search, e.g. frame.src = `/search/fruits?q=${e.detail.query}`
      console.log('cmdk-scope-change', e.detail)
    })
  JS
end

Cmdk::Root(label: 'Command Menu', loop: true, class: "#{@theme} w-160 max-w-full") do
  Cmdk::Input(placeholder: 'Search for apps and commands...')
  Cmdk::List() do
    Cmdk::Empty() { 'No results found.' }

    Cmdk::Group(heading: 'Suggestions') do
      Cmdk::Item(value: 'Linear', hint: 'Open Application', kbd: '↵') do
        item('📐', 'Linear')
      end
      Cmdk::Item(value: 'Figma', hint: 'Open in New Tab', kbd: '⌘ ↵') do
        item('🎨', 'Figma')
        span(class: 'cmdk-raycast-meta ml-auto text-xs text-neutral-400') { 'Application' }
      end
      Cmdk::Item(value: 'Slack', hint: 'Open Application', kbd: '↵') do
        item('💬', 'Slack')
      end
    end

    Cmdk::Separator()

    Cmdk::Group(heading: 'Commands') do
      Cmdk::Item(value: 'Clipboard History', hint: 'Paste Latest', kbd: '⌘ V') do
        item('📋', 'Clipboard History')
      end
      Cmdk::Item(value: 'Search Emoji', hint: 'Insert Emoji', kbd: '↵') do
        item('😀', 'Search Emoji')
      end
      Cmdk::Item(value: 'Calculator') { item('🧮', 'Calculator (no hint)') }
    end
  end

  Cmdk::Footer() do
    span(aria_hidden: 'true') { '🚀' }
    div('cmdk-footer-hint' => '')
  end
end

def initialize(theme:)
  @theme = theme
end
def item(icon, text)
  span(class: 'text-base', aria_hidden: 'true') { icon }
  span { text }
end

/* ── Raycast ────────────────────────────────────────────────────────────
     Token overrides + the structural bits that differ from the default. */

  .cmdk-raycast[cmdk-root] {
    --cmdk-bg: light-dark(#fdfcfd, #1c1c1f);
    --cmdk-fg: light-dark(#282a30, #ededef);
    --cmdk-muted: light-dark(#6f7177, #8a8f98);
    --cmdk-border: light-dark(#e4e2e4, #2e2e32);
    --cmdk-accent: light-dark(#ededee, #2c2c30);
    --cmdk-accent-fg: light-dark(#282a30, #ededef);
    --cmdk-pill: light-dark(#ededee, #2c2c30);
    --cmdk-pill-fg: light-dark(#282a30, #ededef);
    --cmdk-shadow: 0 16px 70px rgb(0 0 0 / 20%);
    padding: 8px 0 48px; /* bottom inset hosts the absolute footer */
    position: relative;
  }

  .cmdk-raycast[cmdk-root] kbd {
    background: light-dark(#f0f0f1, #2e2e32);
    color: light-dark(#6f7177, #a0a0a8);
    min-width: 20px;
    height: 20px;
    border-radius: 4px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  .cmdk-raycast[cmdk-root] [cmdk-input] {
    font-size: 15px;
    padding: 8px 16px;
  }

  .cmdk-raycast[cmdk-root] .cmdk-search-row {
    gap: 8px;
    padding: 0 16px;
  }

  .cmdk-raycast[cmdk-root] .cmdk-search-row [cmdk-input] {
    padding: 8px 0;
  }

  .cmdk-raycast[cmdk-root] [cmdk-list] {
    padding: 8px;
    height: min(330px, calc(var(--cmdk-list-height) + 16px));
    scroll-padding-block-end: 8px;
  }

  .cmdk-raycast[cmdk-root] [cmdk-item] {
    padding: 0 8px;
  }

  .cmdk-raycast[cmdk-root] [cmdk-item] + [cmdk-item] {
    margin-top: 4px;
  }

  .cmdk-raycast[cmdk-root] .cmdk-raycast-meta {
    margin-left: auto;
    color: var(--cmdk-muted);
    font-size: 13px;
  }

  .cmdk-raycast[cmdk-root] [cmdk-group-heading] {
    padding: 8px;
  }

  .cmdk-raycast[cmdk-root] [cmdk-empty] {
    height: 64px;
    white-space: pre-wrap;
  }

  /* Footer is pinned to the bottom inset rather than flowing after the list. */
  .cmdk-raycast[cmdk-root] [cmdk-footer] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 8px;
    background: var(--cmdk-bg);
    border-radius: 0 0 var(--cmdk-radius) var(--cmdk-radius);
    font-size: 13px;
  }

  .cmdk-raycast[cmdk-root] [cmdk-footer-hint] {
    gap: 4px;
    color: var(--cmdk-fg);
  }

  .cmdk-raycast[cmdk-root] [cmdk-scope-pill] {
    height: 24px;
    gap: 6px;
    padding: 0 9px;
    font-size: 13px;
  }

Cmdk::Root(label: 'Loading', class: 'cmdk-vercel w-160 max-w-full') do
  Cmdk::Input(placeholder: 'Fetching results...')
  Cmdk::List() do
    Cmdk::Loading(progress: @progress) { 'Hang on, loading results…' }
  end
end

def initialize(progress: 50)
  @progress = progress
end

Cmdk::Root(label: 'Empty', class: 'cmdk-vercel w-160 max-w-full') do
  Cmdk::Input(placeholder: 'No items were rendered at all')
  Cmdk::List() do
    Cmdk::Empty() { 'No results found.' }
  end
end

div(class: 'flex w-160 max-w-full flex-col gap-4', data: { events_demo: '' }) do
  render Menu.new
  pre(data: { events_log: '' }, class: 'demo-panel h-32 overflow-y-auto p-3 text-xs')
  script { raw safe(<<~JS) }
    const scope = document.currentScript.closest('[data-events-demo]')
    const log = scope.querySelector('[data-events-log]')
    const root = scope.querySelector('[cmdk-root]')
    for (const type of ['cmdk-item-select', 'cmdk-value-change', 'cmdk-search-change']) {
      root.addEventListener(type, (e) => {
        log.textContent = `${type.padEnd(18)} ${JSON.stringify(e.detail)}\\n` + log.textContent
      })
    }
  JS
end

div(data: { controller: 'palette' }, class: 'flex w-160 max-w-full flex-col gap-4') do
  Cmdk::Root(label: 'Stimulus', loop: true, class: 'cmdk-vercel w-full') do
    Cmdk::Input(placeholder: 'Wired with a Stimulus controller…')
    Cmdk::List() do
      Cmdk::Empty() { 'No results found.' }
      Cmdk::Group(heading: 'Suggestions') do
        Cmdk::Item(value: 'Linear') { '📐 Linear' }
        Cmdk::Item(value: 'Figma') { '🎨 Figma' }
        Cmdk::Item(value: 'Slack') { '💬 Slack' }
      end
    end
  end
  pre(data: { palette_log: '' }, class: 'demo-panel h-32 overflow-y-auto p-3 text-xs')
end

import { Application } from '@hotwired/stimulus'
import CmdkController from 'cmdk_controller'

// Extend the gem's base controller and override only the hooks you need.
class PaletteController extends CmdkController {
  itemSelected(event) { this.log(`selected     ${event.detail.value}`) }
  valueChanged(event)  { this.log(`highlighted  ${event.detail.value}`) }
  searchChanged(event) { this.log(`search       ${JSON.stringify(event.detail)}`) }

  log(line) {
    const out = this.element.querySelector('[data-palette-log]')
    out.textContent = line + '\n' + out.textContent
  }
}

Application.start().register('palette', PaletteController)

Cmdk::Root(label: 'Terminal', loop: true, class: 'cmdk-terminal w-160 max-w-full') do
  Cmdk::Input(placeholder: 'type a command_')
  Cmdk::List() do
    Cmdk::Empty() { 'command not found' }
    Cmdk::Group(heading: 'processes') do
      Cmdk::Item(value: 'deploy production', hint: 'execute', kbd: '⏎') { plain 'bin/deploy --production' }
      Cmdk::Item(value: 'tail logs', hint: 'execute', kbd: '⏎') { plain 'tail -f log/production.log' }
      Cmdk::Item(value: 'rails console', hint: 'execute', kbd: '⏎') { plain 'bin/rails console' }
      Cmdk::Item(value: 'run tests', hint: 'execute', kbd: '⏎') { plain 'bundle exec rake test' }
    end
    Cmdk::Separator()
    Cmdk::Group(heading: 'danger zone') do
      Cmdk::Item(value: 'drop database', disabled: true) { plain 'bin/rails db:drop' }
    end
  end
  Cmdk::Footer() do
    span { 'guest@phlex-cmdk' }
    div('cmdk-footer-hint' => '')
  end
end

/* >>> cmdk-terminal */
/* A CRT terminal theme, written from scratch against the cmdk attribute
   contract: phosphor green, scanlines, inverted selection, blinking caret. */
.cmdk-terminal[cmdk-root] {
  position: relative;
  overflow: hidden;
  padding: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: #04100a;
  border: 1px solid #14532d;
  border-radius: 6px;
  color: #4ade80;
  box-shadow:
    0 0 50px rgb(74 222 128 / 0.18),
    inset 0 0 90px rgb(74 222 128 / 0.05);
}

.cmdk-terminal[cmdk-root]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
}

.cmdk-terminal [cmdk-input] {
  width: 100%;
  border: none;
  border-bottom: 1px dashed #14532d;
  outline: none;
  /* The › prompt is drawn in CSS so it shows on any terminal-themed menu,
     not only the one example that wrapped the input in markup. */
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") no-repeat 9px 50%;
  background-size: 13px;
  padding: 10px 8px 12px 30px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #bbf7d0;
  caret-color: #4ade80;
}

.cmdk-terminal [cmdk-input]::placeholder {
  color: rgb(74 222 128 / 0.35);
}

.cmdk-terminal [cmdk-list] {
  height: min(330px, calc(var(--cmdk-list-height) + 6px));
  max-height: 330px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: height 100ms ease;
  padding-top: 6px;
}

.cmdk-terminal [cmdk-group-heading] {
  padding: 12px 8px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgb(74 222 128 / 0.5);
  user-select: none;
}

.cmdk-terminal [cmdk-group-heading]::before {
  content: '# ';
}

.cmdk-terminal [cmdk-item] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px;
  font-size: 14px;
  color: #86efac;
  cursor: pointer;
  user-select: none;
}

.cmdk-terminal [cmdk-item]::before {
  content: '❯';
  flex: none;
  width: 14px;
  text-align: center;
  color: #4ade80;
  opacity: 0; /* the marker column reserves space; only the selected row shows it */
}

.cmdk-terminal [cmdk-item][data-selected='true'] {
  background: rgb(74 222 128 / 0.14);
  color: #dcfce7;
  text-shadow: 0 0 10px rgb(74 222 128 / 0.55);
}

.cmdk-terminal [cmdk-item][data-selected='true']::before {
  opacity: 1;
}

.cmdk-terminal [cmdk-item][data-disabled='true'] {
  color: rgb(74 222 128 / 0.3);
  cursor: not-allowed;
  text-decoration: line-through;
}

.cmdk-terminal [cmdk-separator] {
  height: 0;
  border-top: 1px dashed #14532d;
  margin: 8px;
}

.cmdk-terminal [cmdk-empty] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 13px;
  color: rgb(74 222 128 / 0.45);
}

.cmdk-terminal [cmdk-empty]::before {
  content: 'sh: ';
}

.cmdk-terminal [cmdk-footer] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px -8px -8px;
  padding: 8px 16px;
  border-top: 1px dashed #14532d;
  font-size: 12px;
  color: rgb(74 222 128 / 0.55);
}

.cmdk-terminal [cmdk-footer-hint] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: #86efac;
}

.cmdk-terminal [cmdk-footer-hint] kbd {
  padding: 1px 6px;
  font: inherit;
  font-size: 11px;
  border: 1px solid #14532d;
  border-radius: 3px;
  background: rgb(74 222 128 / 0.08);
  color: #4ade80;
}

.cmdk-terminal [cmdk-footer-hint][data-empty] {
  display: none;
}

Cmdk::Root(label: 'Brutal Menu', loop: true, class: <<~CLASSES.split.join(' ')) do
  w-160 max-w-full border-4 border-black bg-amber-50 p-3
  shadow-[10px_10px_0_rgb(0,0,0)]
CLASSES
  Cmdk::Input(placeholder: 'TYPE SOMETHING LOUD', class: <<~CLASSES.split.join(' '))
    w-full border-4 border-black bg-white px-3 py-2 text-base font-extrabold uppercase
    tracking-wide text-black outline-none placeholder:text-neutral-400
    focus:bg-yellow-200 focus:shadow-[4px_4px_0_rgb(0,0,0)]
  CLASSES
  Cmdk::List(class: 'h-[min(360px,calc(var(--cmdk-list-height)+16px))] max-h-[360px] overflow-y-auto overscroll-contain pt-3 pb-1 transition-[height] duration-100') do
    Cmdk::Empty(class: 'mx-1 flex h-16 items-center justify-center border-4 border-dashed border-black text-sm font-black uppercase text-black') do
      plain 'absolutely nothing'
    end
    Cmdk::Group(heading: 'loud actions', class: group_classes) do
      Cmdk::Item(value: 'Ship It', hint: 'No Regrets', kbd: '↵', class: item_classes) { entry('🚢', 'Ship It') }
      Cmdk::Item(value: 'Make It Pop', hint: 'More Contrast', kbd: '↵', class: item_classes) { entry('🎨', 'Make It Pop') }
      Cmdk::Item(value: 'Big Red Button', hint: 'Press It', kbd: '↵', class: item_classes) { entry('🔴', 'Big Red Button') }
    end
    Cmdk::Separator(class: 'mx-1 my-3 h-1 bg-black')
    Cmdk::Group(heading: 'regrets', class: group_classes) do
      Cmdk::Item(value: 'Undo Everything', disabled: true, class: item_classes) { entry('↩️', 'Undo Everything') }
    end
  end
  Cmdk::Footer(class: '-m-3 mt-3 flex items-center gap-2 border-t-4 border-black bg-fuchsia-300 px-4 py-2 text-xs font-black uppercase text-black') do
    span { 'brutal.exe' }
    div('cmdk-footer-hint' => '', class: <<~CLASSES.split.join(' '))
      ml-auto flex items-center gap-2 data-empty:hidden
      [&_kbd]:border-2 [&_kbd]:border-black [&_kbd]:bg-white [&_kbd]:px-1.5
      [&_kbd]:shadow-[2px_2px_0_rgb(0,0,0)]
    CLASSES
  end
end

def group_classes
  <<~CLASSES.split.join(' ')
    [&_[cmdk-group-heading]]:m-2 [&_[cmdk-group-heading]]:inline-block
    [&_[cmdk-group-heading]]:-rotate-2 [&_[cmdk-group-heading]]:bg-black
    [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-0.5
    [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-black
    [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest
    [&_[cmdk-group-heading]]:text-amber-50
  CLASSES
end
def item_classes
  <<~CLASSES.split.join(' ')
    mx-1 mb-2 flex min-h-11 cursor-pointer items-center gap-2 border-2 border-black bg-white
    px-3 text-sm font-bold text-black select-none shadow-[4px_4px_0_rgb(0,0,0)]
    transition-[transform,box-shadow,background-color] duration-75
    data-[selected=true]:translate-x-[2px] data-[selected=true]:translate-y-[2px]
    data-[selected=true]:bg-yellow-300 data-[selected=true]:shadow-[2px_2px_0_rgb(0,0,0)]
    data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-200
    data-[disabled=true]:text-neutral-500 data-[disabled=true]:shadow-none
    data-[disabled=true]:line-through
  CLASSES
end
def entry(icon, text)
  span(class: 'text-base', aria_hidden: 'true') { icon }
  span { text }
end