mono/events/sx/tickets.sx

;; Events ticket components

(defcomp ~events-ticket-card (&key href entry-name type-name time-str cal-name badge code-prefix)
  (a :href href :class "block rounded-xl border border-stone-200 bg-white p-4 hover:shadow-md transition"
    (div :class "flex items-start justify-between gap-4"
      (div :class "flex-1 min-w-0"
        (div :class "font-semibold text-lg truncate" entry-name)
        (when type-name (div :class "text-sm text-stone-600 mt-0.5" type-name))
        (when time-str (div :class "text-sm text-stone-500 mt-1" time-str))
        (when cal-name (div :class "text-xs text-stone-400 mt-0.5" cal-name)))
      (div :class "flex flex-col items-end gap-1 flex-shrink-0"
        badge
        (span :class "text-xs text-stone-400 font-mono" (str code-prefix "..."))))))

(defcomp ~events-tickets-panel (&key list-container has-tickets cards)
  (section :id "tickets-list" :class list-container
    (h1 :class "text-2xl font-bold mb-6" "My Tickets")
    (if has-tickets
      (div :class "space-y-4" cards)
      (div :class "text-center py-12 text-stone-500"
        (i :class "fa fa-ticket text-4xl mb-4 block" :aria-hidden "true")
        (p :class "text-lg" "No tickets yet")
        (p :class "text-sm mt-1" "Tickets will appear here after you purchase them.")))))

(defcomp ~events-ticket-detail (&key list-container back-href header-bg entry-name badge
                                      type-name code time-date time-range cal-name
                                      type-desc checkin-str qr-script)
  (section :id "ticket-detail" :class (str list-container " max-w-lg mx-auto")
    (a :href back-href :class "inline-flex items-center gap-1 text-sm text-stone-500 hover:text-stone-700 mb-4"
      (i :class "fa fa-arrow-left" :aria-hidden "true") " Back to my tickets")
    (div :class "rounded-2xl border border-stone-200 bg-white overflow-hidden"
      (div :class (str "px-6 py-4 border-b border-stone-100 " header-bg)
        (div :class "flex items-center justify-between"
          (h1 :class "text-xl font-bold" entry-name)
          badge)
        (when type-name (div :class "text-sm text-stone-600 mt-1" type-name)))
      (div :class "px-6 py-8 flex flex-col items-center border-b border-stone-100"
        (div :id (str "ticket-qr-" code) :class "bg-white p-4 rounded-lg border border-stone-200")
        (p :class "text-xs text-stone-400 mt-3 font-mono select-all" code))
      (div :class "px-6 py-4 space-y-3"
        (when time-date (div :class "flex items-start gap-3"
          (i :class "fa fa-calendar text-stone-400 mt-0.5" :aria-hidden "true")
          (div (div :class "text-sm font-medium" time-date)
            (div :class "text-sm text-stone-500" time-range))))
        (when cal-name (div :class "flex items-start gap-3"
          (i :class "fa fa-map-pin text-stone-400 mt-0.5" :aria-hidden "true")
          (div :class "text-sm" cal-name)))
        (when type-desc (div :class "flex items-start gap-3"
          (i :class "fa fa-tag text-stone-400 mt-0.5" :aria-hidden "true")
          (div :class "text-sm" type-desc)))
        (when checkin-str (div :class "flex items-start gap-3"
          (i :class "fa fa-check-circle text-blue-500 mt-0.5" :aria-hidden "true")
          (div :class "text-sm text-blue-700" checkin-str)))))
    (script :src "https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js")
    (script qr-script)))

(defcomp ~events-ticket-admin-stat (&key border bg text-cls label-cls value label)
  (div :class (str "rounded-xl border " border " " bg " p-4 text-center")
    (div :class (str "text-2xl font-bold " text-cls) value)
    (div :class (str "text-xs " label-cls " uppercase tracking-wide") label)))

(defcomp ~events-ticket-admin-date (&key date-str)
  (div :class "text-xs text-stone-500" date-str))

(defcomp ~events-ticket-admin-checkin-form (&key checkin-url code csrf)
  (form :sx-post checkin-url :sx-target (str "#ticket-row-" code) :sx-swap "outerHTML"
    (input :type "hidden" :name "csrf_token" :value csrf)
    (button :type "submit" :class "px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition"
      (i :class "fa fa-check mr-1" :aria-hidden "true") "Check in")))

(defcomp ~events-ticket-admin-checked-in (&key time-str)
  (span :class "text-xs text-blue-600"
    (i :class "fa fa-check-circle" :aria-hidden "true") (str " " time-str)))

(defcomp ~events-ticket-admin-row (&key code code-short entry-name date type-name badge action)
  (tr :class "hover:bg-stone-50 transition" :id (str "ticket-row-" code)
    (td :class "px-4 py-3" (span :class "font-mono text-xs" code-short))
    (td :class "px-4 py-3" (div :class "font-medium" entry-name) date)
    (td :class "px-4 py-3 text-sm" type-name)
    (td :class "px-4 py-3" badge)
    (td :class "px-4 py-3" action)))

(defcomp ~events-ticket-admin-panel (&key list-container stats lookup-url has-tickets rows)
  (section :id "ticket-admin" :class list-container
    (h1 :class "text-2xl font-bold mb-6" "Ticket Admin")
    (div :class "grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8" stats)
    (div :class "rounded-xl border border-stone-200 bg-white p-6 mb-8"
      (h2 :class "text-lg font-semibold mb-4"
        (i :class "fa fa-qrcode mr-2" :aria-hidden "true") "Scan / Look Up Ticket")
      (div :class "flex gap-3 mb-4"
        (input :type "text" :id "ticket-code-input" :name "code"
               :placeholder "Enter or scan ticket code..."
               :class "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
               :sx-get lookup-url :sx-trigger "keyup changed delay:300ms"
               :sx-target "#lookup-result" :sx-include "this" :autofocus "true")
        (button :type "button"
                :class "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
                :onclick "document.getElementById('ticket-code-input').dispatchEvent(new Event('keyup'))"
          (i :class "fa fa-search" :aria-hidden "true")))
      (div :id "lookup-result"
        (div :class "text-sm text-stone-400 text-center py-4" "Enter a ticket code to look it up")))
    (div :class "rounded-xl border border-stone-200 bg-white overflow-hidden"
      (h2 :class "text-lg font-semibold px-6 py-4 border-b border-stone-100" "Recent Tickets")
      (if has-tickets
        (div :class "overflow-x-auto"
          (table :class "w-full text-sm"
            (thead :class "bg-stone-50"
              (tr (th :class "px-4 py-3 text-left font-medium text-stone-600" "Code")
                  (th :class "px-4 py-3 text-left font-medium text-stone-600" "Event")
                  (th :class "px-4 py-3 text-left font-medium text-stone-600" "Type")
                  (th :class "px-4 py-3 text-left font-medium text-stone-600" "State")
                  (th :class "px-4 py-3 text-left font-medium text-stone-600" "Actions")))
            (tbody :class "divide-y divide-stone-100" rows))
        (div :class "px-6 py-8 text-center text-stone-500" "No tickets yet"))))))

(defcomp ~events-checkin-error (&key message)
  (div :class "rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800"
    (i :class "fa fa-exclamation-circle mr-2" :aria-hidden "true") message))

(defcomp ~events-checkin-success-row (&key code code-short entry-name date type-name badge time-str)
  (tr :class "bg-blue-50" :id (str "ticket-row-" code)
    (td :class "px-4 py-3" (span :class "font-mono text-xs" code-short))
    (td :class "px-4 py-3" (div :class "font-medium" entry-name) date)
    (td :class "px-4 py-3 text-sm" type-name)
    (td :class "px-4 py-3" badge)
    (td :class "px-4 py-3"
      (span :class "text-xs text-blue-600"
        (i :class "fa fa-check-circle" :aria-hidden "true") (str " " time-str)))))

(defcomp ~events-lookup-error (&key message)
  (div :class "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800"
    (i :class "fa fa-exclamation-circle mr-2" :aria-hidden "true") message))

(defcomp ~events-lookup-info (&key entry-name)
  (div :class "font-semibold text-lg" entry-name))

(defcomp ~events-lookup-type (&key type-name)
  (div :class "text-sm text-stone-600" type-name))

(defcomp ~events-lookup-date (&key date-str)
  (div :class "text-sm text-stone-500 mt-1" date-str))

(defcomp ~events-lookup-cal (&key cal-name)
  (div :class "text-xs text-stone-400 mt-0.5" cal-name))

(defcomp ~events-lookup-status (&key badge code)
  (div :class "mt-2" badge (span :class "text-xs text-stone-400 ml-2 font-mono" code)))

(defcomp ~events-lookup-checkin-time (&key date-str)
  (div :class "text-xs text-blue-600 mt-1" (str "Checked in: " date-str)))

(defcomp ~events-lookup-checkin-btn (&key checkin-url code csrf)
  (form :sx-post checkin-url :sx-target (str "#checkin-action-" code) :sx-swap "innerHTML"
    (input :type "hidden" :name "csrf_token" :value csrf)
    (button :type "submit"
            :class "px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-semibold text-lg"
      (i :class "fa fa-check mr-2" :aria-hidden "true") "Check In")))

(defcomp ~events-lookup-checked-in ()
  (div :class "text-blue-600 text-center"
    (i :class "fa fa-check-circle text-3xl" :aria-hidden "true")
    (div :class "text-sm font-medium mt-1" "Checked In")))

(defcomp ~events-lookup-cancelled ()
  (div :class "text-red-600 text-center"
    (i :class "fa fa-times-circle text-3xl" :aria-hidden "true")
    (div :class "text-sm font-medium mt-1" "Cancelled")))

(defcomp ~events-lookup-card (&key info code action)
  (div :class "rounded-lg border border-stone-200 bg-stone-50 p-4"
    (div :class "flex items-start justify-between gap-4"
      (div :class "flex-1" info)
      (div :id (str "checkin-action-" code) action))))

(defcomp ~events-entry-tickets-admin-row (&key code code-short type-name badge action)
  (tr :class "hover:bg-stone-50" :id (str "entry-ticket-row-" code)
    (td :class "px-4 py-2 font-mono text-xs" code-short)
    (td :class "px-4 py-2" type-name)
    (td :class "px-4 py-2" badge)
    (td :class "px-4 py-2" action)))

(defcomp ~events-entry-tickets-admin-checkin (&key checkin-url code csrf)
  (form :sx-post checkin-url :sx-target (str "#entry-ticket-row-" code) :sx-swap "outerHTML"
    (input :type "hidden" :name "csrf_token" :value csrf)
    (button :type "submit" :class "px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
      "Check in")))

(defcomp ~events-entry-tickets-admin-table (&key rows)
  (div :class "overflow-x-auto rounded-xl border border-stone-200"
    (table :class "w-full text-sm"
      (thead :class "bg-stone-50"
        (tr (th :class "px-4 py-2 text-left font-medium text-stone-600" "Code")
            (th :class "px-4 py-2 text-left font-medium text-stone-600" "Type")
            (th :class "px-4 py-2 text-left font-medium text-stone-600" "State")
            (th :class "px-4 py-2 text-left font-medium text-stone-600" "Actions")))
      (tbody :class "divide-y divide-stone-100" rows))))

(defcomp ~events-entry-tickets-admin-empty ()
  (div :class "text-center py-6 text-stone-500 text-sm" "No tickets for this entry"))

(defcomp ~events-entry-tickets-admin-panel (&key entry-name count-label body)
  (div :class "space-y-4"
    (div :class "flex items-center justify-between"
      (h3 :class "text-lg font-semibold" (str "Tickets for: " entry-name))
      (span :class "text-sm text-stone-500" count-label))
    body))