;; Events entry card components (all events / page summary)

(defcomp ~events-state-badge (&key cls label)
  (span :class (str "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium " cls) label))

(defcomp ~events-entry-title-linked (&key href name)
  (a :href href :class "hover:text-emerald-700"
    (h2 :class "text-lg font-semibold text-stone-900" name)))

(defcomp ~events-entry-title-plain (&key name)
  (h2 :class "text-lg font-semibold text-stone-900" name))

(defcomp ~events-entry-title-tile-linked (&key href name)
  (a :href href :class "hover:text-emerald-700"
    (h2 :class "text-base font-semibold text-stone-900 line-clamp-2" name)))

(defcomp ~events-entry-title-tile-plain (&key name)
  (h2 :class "text-base font-semibold text-stone-900 line-clamp-2" name))

(defcomp ~events-entry-page-badge (&key href title)
  (a :href href :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 hover:bg-amber-200" title))

(defcomp ~events-entry-cal-badge (&key name)
  (span :class "inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-700" name))

(defcomp ~events-entry-time-linked (&key href date-str)
  (<> (a :href href :class "hover:text-stone-700" date-str) " · "))

(defcomp ~events-entry-time-plain (&key date-str)
  (<> (span date-str) " · "))

(defcomp ~events-entry-cost (&key cost)
  (div :class "mt-1 text-sm font-medium text-green-600" cost))

(defcomp ~events-entry-card (&key title badges time-parts cost widget)
  (article :class "rounded-xl bg-white shadow-sm border border-stone-200 p-4"
    (div :class "flex flex-col sm:flex-row sm:items-start justify-between gap-3"
      (div :class "flex-1 min-w-0"
        title
        (div :class "flex flex-wrap items-center gap-1.5 mt-1" badges)
        (div :class "mt-1 text-sm text-stone-500" time-parts)
        cost)
      widget)))

(defcomp ~events-entry-card-tile (&key title badges time cost widget)
  (article :class "rounded-xl bg-white shadow-sm border border-stone-200 overflow-hidden"
    (div :class "p-3"
      title
      (div :class "flex flex-wrap items-center gap-1 mt-1" badges)
      (div :class "mt-1 text-xs text-stone-500" time)
      cost)
    widget))

(defcomp ~events-entry-tile-widget-wrapper (&key widget)
  (div :class "border-t border-stone-100 px-3 py-2" widget))

(defcomp ~events-entry-widget-wrapper (&key widget)
  (div :class "shrink-0" widget))

(defcomp ~events-date-separator (&key date-str)
  (div :class "pt-2 pb-1"
    (h3 :class "text-sm font-semibold text-stone-500 uppercase tracking-wide" date-str)))

(defcomp ~events-sentinel (&key page next-url)
  (div :id (str "sentinel-" page) :class "h-4 opacity-0 pointer-events-none"
       :sx-get next-url :sx-trigger "intersect once delay:250ms" :sx-swap "outerHTML"
       :role "status" :aria-hidden "true"
    (div :class "text-center text-xs text-stone-400" "loading...")))

(defcomp ~events-list-svg ()
  (svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none"
       :viewBox "0 0 24 24" :stroke "currentColor" :stroke-width "2"
    (path :stroke-linecap "round" :stroke-linejoin "round" :d "M4 6h16M4 12h16M4 18h16")))

(defcomp ~events-tile-svg ()
  (svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none"
       :viewBox "0 0 24 24" :stroke "currentColor" :stroke-width "2"
    (path :stroke-linecap "round" :stroke-linejoin "round"
          :d "M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z")))

(defcomp ~events-view-toggle (&key list-href tile-href hx-select list-active tile-active list-svg tile-svg)
  (div :class "hidden md:flex justify-end px-3 pt-3 gap-1"
    (a :href list-href :sx-get list-href :sx-target "#main-panel" :sx-select hx-select
       :sx-swap "outerHTML" :sx-push-url "true"
       :class (str "p-1.5 rounded " list-active) :title "List view"
       :_ "on click js localStorage.removeItem('events_view') end"
      list-svg)
    (a :href tile-href :sx-get tile-href :sx-target "#main-panel" :sx-select hx-select
       :sx-swap "outerHTML" :sx-push-url "true"
       :class (str "p-1.5 rounded " tile-active) :title "Tile view"
       :_ "on click js localStorage.setItem('events_view','tile') end"
      tile-svg)))

(defcomp ~events-grid (&key grid-cls cards)
  (div :class grid-cls cards))

(defcomp ~events-empty ()
  (div :class "px-3 py-12 text-center text-stone-400"
    (i :class "fa fa-calendar-xmark text-4xl mb-3" :aria-hidden "true")
    (p :class "text-lg" "No upcoming events")))

(defcomp ~events-main-panel-body (&key toggle body)
  (<> toggle body (div :class "pb-8")))