// All base components
import { h, each, watch, when, mount, $, isFunc } from "sigpro";

// Helpers
const val = val => typeof val === "function" ? val() : val;
const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
const filterBy = (items, query, field = 'label', q = String(query).toLowerCase()) => !query ? val(items) : val(items).filter(item => String(item && typeof item === 'object' ? item[field] : item).toLowerCase().includes(q));
const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
export const hide = () => document.activeElement?.blur()

// Locales
export const i18n = {
  es: {
    close: "Cerrar",
    confirm: "Confirmar",
    cancel: "Cancelar",
    search: "Buscar...",
    loading: "Cargando...",
    nodata: "Sin datos"
  },
  en: {
    close: "Close",
    confirm: "Confirm",
    cancel: "Cancel",
    search: "Search...",
    loading: "Loading...",
    nodata: "No data"
  }
};

export const currentLocale = $("en");
export const Locale = t => currentLocale(t);
export const tt = t => () => i18n[currentLocale()][t] || t;

// Components
export const Accordion = (p) => {
  const name = p.name || rand('acc')
  return each(p.items, (it) => {
    return h('div', { class: cls('collapse', p.class) }, [
      h('input', { type: 'radio', name, checked: it.open || undefined }),
      it.title ? h('div', { class: cls("collapse-title", `${it.classTitle ?? ' font-semibold'}`) }, it.title) : null,
      it.content ? h('div', { class: cls("collapse-content text-sm", `${it.classContent ?? ' font-semibold'}`) }, it.content) : null,
    ]);
  });
}
export const Alert = (p, c) => h("div", { ...p, class: cls("alert", p.class) }, c);
export const Avatar = (p, c) => h("div", { class: "avatar" }, h('div', { class: p.class }, c));
export const AvatarGroup = (p, c) => h("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
  const query = $(val(value) || '')
  const filtered = $(() => filterBy(items, query()))

  const pick = (item) => {
    const display = getBy(item)
    const actual = typeof item === 'string' ? item : item.value
    query(display)
    if (isFunc(value)) value(actual)
    onselect?.(item)
    hide()
  }

  return Dropdown({ class: 'w-full' }, [
    h('div', { tabindex: '0', role: 'button', class: 'w-full' },
      Input({
        ...props,
        placeholder,
        value: query,
        left: h('span', { class: 'icon-[lucide--search]' }),
        oninput: (e) => {
          query(e.target.value)
          if (isFunc(value)) value(e.target.value)
        }
      })
    ),
    DropdownContent({ class: 'p-2 bg-base-100 rounded-box shadow-xl w-full max-h-60 overflow-y-auto border border-base-300 z-50' },
      h('ul', { class: 'menu flex-col flex-nowrap w-full p-0' }, [
        each(filtered, (item) =>
          h('li', {}, [
            h('a', {
              onmousedown: (e) => e.preventDefault(),
              onclick: () => pick(item)
            }, getBy(item))
          ]),
          (item) => getBy(item)
        ),
        () => filtered().length === 0
          ? h('li', { class: 'p-4 opacity-50 text-center' }, 'Sin resultados')
          : null
      ])
    )
  ])
}
export const Badge = (p, c) => h("span", { ...p, class: cls("badge", p.class) }, c);
export const Breadcrumbs = (p, c) => h("div", { ...p, class: cls("breadcrumbs", p.class) }, c);
export const Button = (p, c) => h("button", { ...p, class: cls("btn", p.class) }, c);
export const Calendar = (p) => {
  const internalDate = $(new Date())
  const hoverDate = $(null)
  const startHour = $(0)
  const endHour = $(0)
  const now = new Date()
  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
  const fmt = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
  const rangeMode = () => val(p.range) === true
  const current = () => val(p.value)
  const selectDate = (date) => {
    const s = fmt(date)
    const v = current()
    if (rangeMode()) {
      if (!v?.start || (v.start && v.end)) {
        p.onChange?.({ start: s, end: null, ...(p.hour && { startHour: startHour() }) })
      } else {
        const start = v.start
        const nv = s < start ? { start: s, end: start } : { start, end: s }
        if (p.hour) { nv.startHour = v.startHour ?? startHour(); nv.endHour = endHour() }
        p.onChange?.(nv)
      }
    } else {
      p.onChange?.(p.hour ? `${s}T${String(startHour()).padStart(2, '0')}:00:00` : s)
    }
  }
  const move = (m) => { const d = internalDate(); internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1)) }
  const moveYear = (y) => { const d = internalDate(); internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1)) }
  const HourSlider = ({ value: hVal, onChange: onH }) => h('div', { class: 'flex-1' }, [
    h('div', { class: 'flex gap-2 items-center' }, [
      h('input', { type: 'range', min: 0, max: 23, value: hVal, class: 'range range-xs flex-1', oninput: e => onH(+e.target.value) }),
      h('span', { class: 'text-sm font-mono min-w-[48px] text-center' }, () => String(val(hVal)).padStart(2, '0') + ':00')
    ])
  ])
  return h('div', {
    class: cls('p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none', p.class)
  }, [
    h('div', { class: 'flex justify-between items-center mb-4 gap-1' }, [
      h('div', { class: 'flex gap-0.5' }, [
        h('button', { type: 'button', class: 'btn btn-ghost btn-xs px-1', onclick: () => moveYear(-1) }, h('span', { class: 'icon-[lucide--chevrons-left]' })),
        h('button', { type: 'button', class: 'btn btn-ghost btn-xs px-1', onclick: () => move(-1) }, h('span', { class: 'icon-[lucide--chevron-left]' }))
      ]),
      h('span', { class: 'font-bold uppercase flex-1 text-center' }, () => internalDate().toLocaleString('es-ES', { month: 'short', year: 'numeric' })),
      h('div', { class: 'flex gap-0.5' }, [
        h('button', { type: 'button', class: 'btn btn-ghost btn-xs px-1', onclick: () => move(1) }, h('span', { class: 'icon-[lucide--chevron-right]' })),
        h('button', { type: 'button', class: 'btn btn-ghost btn-xs px-1', onclick: () => moveYear(1) }, h('span', { class: 'icon-[lucide--chevrons-right]' }))
      ])
    ]),
    h('div', { class: 'grid grid-cols-7 gap-1', onmouseleave: () => hoverDate(null) }, [
      ...['L', 'M', 'X', 'J', 'V', 'S', 'D'].map(d => h('div', { class: 'text-[10px] opacity-40 font-bold text-center' }, d)),
      () => {
        const d = internalDate(), y = d.getFullYear(), m = d.getMonth()
        const firstDay = new Date(y, m, 1).getDay()
        const offset = firstDay === 0 ? 6 : firstDay - 1
        const dim = new Date(y, m + 1, 0).getDate()
        const cells = []
        for (let i = 0; i < offset; i++) cells.push(h('div'))
        for (let i = 1; i <= dim; i++) {
          const date = new Date(y, m, i), ds = fmt(date)
          cells.push(h('button', {
            type: 'button',
            class: () => {
              const v = current(), h = hoverDate()
              const isStart = typeof v === 'string' ? v.split('T')[0] === ds : v?.start === ds
              const isEnd = v?.end === ds
              let inRange = false
              if (rangeMode() && v?.start) {
                const start = v.start
                if (!v.end && h) inRange = (ds > start && ds <= h) || (ds < start && ds >= h)
                else if (v.end) inRange = ds > start && ds < v.end
              }
              const base = 'btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative'
              const st = isStart || isEnd ? 'btn-primary z-10' : inRange ? 'bg-primary/20 border-none rounded-none' : 'btn-ghost'
              const today = ds === todayStr ? 'ring-1 ring-primary ring-inset font-black text-primary' : ''
              return cls(base, st, today)
            },
            onmouseenter: () => rangeMode() && hoverDate(ds),
            onclick: () => selectDate(date)
          }, i.toString()))
        }
        return cells
      }
    ]),
    p.hour ? h('div', { class: 'mt-3 pt-2 border-t border-base-300' },
      rangeMode()
        ? h('div', { class: 'flex gap-4' }, [HourSlider({ value: startHour, onChange: h => startHour(h) }), HourSlider({ value: endHour, onChange: h => endHour(h) })])
        : HourSlider({ value: startHour, onChange: h => startHour(h) })
    ) : null
  ])
}
export const Card = (p, c) => h('div', { ...p, class: cls('card', p.class) }, c);
export const CardTitle = (p, c) => h('div', { ...p, class: cls('card-title', p.class) }, c);
export const CardBody = (p, c) => h('div', { ...p, class: cls('card-body', p.class) }, c);
export const CardActions = (p, c) => h('div', { ...p, class: cls('card-actions', p.class) }, c);
export const Carousel = (p, c) => h("div", { ...p, class: cls("carousel", p.class) }, c);
export const CarouselItem = (p, c) => h("div", { ...p, class: cls("carousel-item", p.class) }, c);
export const Chat = (p, c) => h("div", { ...p, class: cls("chat", p.class) }, c);
export const ChatBubble = (p, c) => h("div", { ...p, class: cls("chat-bubble", p.class) }, c);
export const ChatFooter = (p, c) => h("div", { ...p, class: cls("chat-footer", p.class) }, c);
export const ChatHeader = (p, c) => h("div", { ...p, class: cls("chat-header", p.class) }, c);
export const ChatImage = (p, c) => h("div", { ...p, class: cls("chat-image avatar", p.class) }, h("div", { class: "w-10 rounded-full" }, typeof c === "string" ? h("img", { src: c, alt: "avatar" }) : c));
export const Checkbox = (p) => h("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) });
export const Colorpicker = (p) => {
  const current = () => val(p.value) || '#000000'
  return Dropdown({}, [
    DropdownButton({ class: 'btn' }, [
      h('div', { class: 'size-5 rounded-sm', style: () => `background-color: ${current()}` }),
      p.label && h('span', {}, p.label)
    ]),
    DropdownContent({ class: 'p-0' },
      ColorPalette({
        value: p.value, onchange: (c) => { isFunc(p.value) ? p.value(c) : p.onchange?.(c) }
      })
    )
  ])
}
export const ColorPalette = (p) => {
  const current = () => val(p.value) || '#000000'
  const palette = [
    '#000', '#1A1A1A', '#333', '#4D4D4D', '#666', '#808080', '#B3B3B3', '#FFF',
    '#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626', '#ef4444', '#f87171', '#fca5a5',
    '#431407', '#7c2d12', '#9a3412', '#c2410c', '#ea580c', '#f97316', '#fb923c', '#ffedd5',
    '#713f12', '#a16207', '#ca8a04', '#eab308', '#facc15', '#fde047', '#fef08a', '#fff9c4',
    '#064e3b', '#065f46', '#059669', '#10b981', '#34d399', '#4ade80', '#84cc16', '#d9f99d',
    '#082f49', '#075985', '#0284c7', '#0ea5e9', '#38bdf8', '#7dd3fc', '#22d3ee', '#cffafe',
    '#1e1b4b', '#312e81', '#4338ca', '#4f46e5', '#6366f1', '#818cf8', '#a5b4fc', '#e0e7ff',
    '#2e1065', '#4c1d95', '#6d28d9', '#7c3aed', '#8b5cf6', '#a855f7', '#d946ef', '#fae8ff'
  ]
  const pick = (c) => {
    isFunc(p.value) ? p.value(c) : p.onchange?.(c)
    hide()
  }

  return h('div', {
    class: cls('p-3 bg-base-100 rounded-box shadow w-64', p.class)
  }, h('div', { class: 'grid grid-cols-8 gap-1' },
    palette.map(c => h('button', {
      type: 'button',
      style: `background-color: ${c}`,
      class: () => {
        const act = current().toLowerCase() === c.toLowerCase()
        return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? 'ring-2 ring-offset-1 ring-primary z-10 scale-110' : ''}`
      },
      onclick: () => { pick(c) }
    }))
  ))
}
export const Datepicker = (p) => {
  const displayValue = $("")
  const rangeMode = () => val(p.range) === true

  watch(() => {
    const v = val(p.value)
    if (!v) return displayValue("")
    let text = ""
    if (typeof v === "string") {
      text = p.hour && v.includes("T") ? v.replace("T", " ") : v
    } else if (v.start && v.end) {
      const startStr = p.hour && v.startHour != null ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start
      const endStr = p.hour && v.endHour != null ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end
      text = `${startStr} - ${endStr}`
    } else if (v.start) {
      const startStr = p.hour && v.startHour != null ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start
      text = `${startStr}...`
    }
    displayValue(text)
  })

  const handleChange = (val) => {
    if (isFunc(p.value)) p.value(val)
    else p.onChange?.(val)
    if (!rangeMode() || val?.end != null) hide()
  }

  return Dropdown({ class: cls('w-full', p.class) }, [
    h('label', {
      tabindex: '0',
      role: 'button',
      class: 'input input-bordered flex items-center gap-2 cursor-pointer'
    }, [
      h('span', { class: 'icon-[lucide--calendar] shrink-0' }),
      h('span', {
        class: () => `grow text-left truncate ${!displayValue() ? 'opacity-50' : ''}`,
      }, () => displayValue() || p.placeholder || (rangeMode() ? 'Seleccionar rango...' : 'Seleccionar fecha...')),
      () => displayValue() ? h('button', {
        type: 'button',
        class: 'btn btn-ghost btn-xs btn-circle -mr-2',
        onmousedown: (e) => {
          e.preventDefault()
          e.stopPropagation()
          if (isFunc(p.value)) p.value(null)
          else p.onChange?.(null)
          displayValue("") // Forzar limpieza visual inmediata
        }
      }, h('span', { class: 'icon-[lucide--x] opacity-50' })) : null
    ]),
    DropdownContent({ class: 'p-0' },
      Calendar({
        value: p.value,
        range: rangeMode(),
        hour: p.hour,
        onChange: handleChange
      })
    )
  ])
}
export const Drawer = (p, c) => div({ ...p, class: cls('drawer', p.class) }, c)
export const DrawerToggle = (p) => input({ ...p, type: 'checkbox', class: 'drawer-toggle', checked: () => val(p.checked), onchange: (e) => isFunc(p.checked) && p.checked(e.target.checked) })
export const DrawerContent = (p, c) => div({ ...p, class: cls('drawer-content', p.class) }, c)
export const DrawerSide = (p, c) => div({ ...p, class: cls('drawer-side', p.class) }, c)
export const DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls('drawer-overlay', p.class) })
export const Divider = (p) => h("div", { ...p, class: cls("divider", p.class) });
export const Dropdown = (p, c) => (h('div', { ...p, class: cls('dropdown', p.class) }, c));
export const DropdownButton = (p, c) => (h('div', { ...p, tabindex: '0', role: 'button', class: cls('btn', p.class) }, c));
export const DropdownContent = (p, c) => (h('div', { ...p, tabindex: '0', class: cls('dropdown-content', p.class) }, c));
export const Fab = (p, c) => h("div", { class: "fab" }, [h('div', { tabindex: "0", role: "button", class: cls('btn', p.class) }, Icon(p.icon)), c]);
export const Fieldset = (p, c) => h("fieldset", { class: cls("fieldset", p.class) }, [h("legend", { class: "fieldset-legend" }, p.label), c])
export const Fileinput = (p) => {
  const files = $([])
  const drag = $(false)
  const error = $(null)
  const maxBytes = (p.max || 2) * 1024 * 1024
  const process = (fileList) => {
    const arr = Array.from(fileList)
    error(null)
    if (arr.some(f => f.size > maxBytes)) {
      error(`Máx ${p.max || 2}MB`)
      return
    }
    const updated = [...files(), ...arr]
    files(updated)
    if (isFunc(p.onselect)) p.onselect(updated)
    else if (isFunc(p.value)) p.value(updated)
  }

  const remove = (idx) => {
    const updated = files().filter((_, i) => i !== idx)
    files(updated)
    if (isFunc(p.onselect)) p.onselect(updated)
    else if (isFunc(p.value)) p.value(updated)
  }
  return h('div', { class: cls('fieldset w-full p-0', p.class) }, [
    h('label', {
      class: () => `relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 ${drag() ? 'border-primary bg-primary/10' : 'border-base-content/20 bg-base-100 hover:bg-base-200'}`,
      ondragover: (e) => { e.preventDefault(); drag(true) },
      ondragleave: () => drag(false),
      ondrop: (e) => { e.preventDefault(); drag(false); process(e.dataTransfer.files) }
    }, [
      h('div', { class: 'flex items-center gap-3 w-full' }, [
        h('span', { class: 'icon-[lucide--upload]' }),
        h('span', { class: 'text-sm opacity-70 truncate grow text-left' }, 'Drag and drop...'),
        h('span', { class: 'text-[10px] opacity-40 shrink-0' }, `Máx ${p.max || 2}MB`)
      ]),
      h('input', {
        type: 'file',
        multiple: true,
        accept: p.accept || '*',
        class: 'hidden',
        onchange: (e) => process(e.target.files)
      })
    ]),
    () => error() && h('span', { class: 'text-[10px] text-error mt-1 px-1 font-medium' }, error()),
    when(() => files().length > 0, () =>
      h('ul', { class: 'mt-2 space-y-1' },
        each(files, (file, idx) =>
          h('li', { class: 'flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300' }, [
            h('div', { class: 'flex items-center gap-2 truncate' }, [
              h('span', { class: 'opacity-50' }, '📄'),
              h('span', { class: 'truncate font-medium max-w-[200px]' }, file.name),
              h('span', { class: 'text-[9px] opacity-40' }, `(${(file.size / 1024).toFixed(0)} KB)`)
            ]),
            h('button', {
              type: 'button',
              class: 'btn btn-ghost btn-xs btn-circle',
              onclick: (e) => { e.preventDefault(); remove(idx) }
            }, h('span', { class: 'icon-[lucide--x]' }))
          ])
        )
      )
    )
  ])
}
export const Icon = (p) => h("span", { class: p.startsWith("icon-") ? p : "" }, p.startsWith("icon-") ? null : p);
export const Indicator = (p, c) => h("div", { ...p, class: cls("indicator", p.class) }, [p.value && h("span", { class: cls("indicator-item badge", p.class) }, p.value), c]);
export const Input = (p) => {
  const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p;

  const showPassword = $(false);
  const isPassword = p.type === 'password';
  const pattern = rule ?? null;

  const inputType = () => isPassword
    ? (val(showPassword) ? 'text' : 'password')
    : (p.type || 'search');

  return h("label", { class: float ? 'floating-label' : '' }, [
    float ? h("span", {}, label) : null,
    h("label", { pattern: pattern, class: () => cls('input validator', p.class) },
      [
        label && !float ? h('span', { class: 'label' }, label) : null,
        left ?? null,
        h('input', { ...rest, type: inputType, class: 'grow', pattern: pattern, placeholder: placeholder || label || ' ', value: value }),
        right ?? null,
        isPassword ? Swap({ class: 'ml-2' }, [
          SwapToggle({ value: showPassword, class: "swap-rotate" }),
          SwapOn({}, Icon('icon-[lucide--eye]')),
          SwapOff({}, Icon('icon-[lucide--eye-off]')),
        ]) : null
      ]),
    hint ? h('div', { class: "validator-hint" }, hint) : null,
  ]);
};
export const Kbd = (p, c) => h("kbd", { ...p, class: cls("kbd", p.class) }, c);
export const List = (p, c) => h('ul', { ...p, class: cls('list', p.class) }, c)
export const ListRows = (p) => () => (val(p.items) || []).map((item, idx) => h('li', { class: cls('list-row', p.class, item?.class) }, typeof p.render === 'function' ? p.render(item, idx) : item))
export const Loading = (p, c) => h("span", { ...p, class: cls("loading loading-spinner", p.class) }, c);
export const Menu = (p) => {
  if (p.children !== undefined) return h('ul', { class: cls('menu', p.class), ...p }, p.children)
  const { items } = p
  const render = (item) => item.children
    ? h('li', {}, h('details', { open: item.open || undefined }, [
      h('summary', {}, getBy(item)),
      h('ul', {}, each(() => val(item.children) || [], render))
    ]))
    : h('li', {}, h('a', {
      href: item.href,
      onclick: item.onclick ? (e) => { if (!item.href) e.preventDefault(); item.onclick(e) } : null
    }, getBy(item)))
  return h('ul', { class: cls('menu', p.class) },
    each(() => val(items) || [], render)
  )
}
export const Modal = (p) => {
  let dialogRef = null;

  watch(() => {
    const isOpen = val(p.open);
    if (!dialogRef) return;
    isOpen ? dialogRef.showModal() : dialogRef.hide();
  });

  const close = () => isFunc(p.open) && p.open(false);

  return h("dialog", {
    ...p,
    ref: el => dialogRef = el,
    class: cls('modal', p.class),
    onclose: close,
    oncancel: close
  }, [
    h("div", { class: "modal-box" }, [
      p.title && h("h3", { class: "text-lg font-bold" }, p.title),
      p.children,
      h("div", { class: "modal-action" }, [
        p.actions || Button({ class: 'btn', onclick: close }, 'Cerrar')
      ])
    ]),
    h("form", { method: "dialog", class: "modal-backdrop" }, [
      h("button", {}, "close")
    ])
  ]);
};
export const Navbar = (p, c) => h("div", { ...p, class: cls("navbar", p.class) }, c);
export const Progress = (p) => h("progress", { ...p, class: cls("progress", p.class) });
export const Radial = (p, c) => h("div", { class: cls("radial-progress", p.class,), style: `--value:${val(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c)
export const Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) });
export const Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) });
export const Rating = (p, c) => h('div', { ...p, class: "rating" }, c);
export const RatingItems = (p) => [...Array(p.count)].map((_, i) => h('input', { class: cls('mask', p.class), name: p.name, type: 'radio', checked: () => val(p.value) === i, onchange: () => isFunc(p.value) ? p.value(i) : p.onchange?.(i) }))
export const Select = (p, c) => {
  if (c !== undefined) return h('select', { class: cls('select', p.class), ...p }, c)

  const { label, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p

  const opts = () => {
    const raw = val(items) || []
    const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: '' }] : []
    return [...ph, ...raw]
  }

  return h('label', { class: float ? 'floating-label' : '' }, [
    float ? h('span', {}, label) : null,
    h('label', { class: cls('select', rest.class) }, [
      (!float && label) ? h('span', { class: 'label' }, label) : null,
      left ?? null,
      h('select', {
        value: () => val(value),
        onchange: (e) => isFunc(value) ? value(e.target.value) : rest.onchange?.(e)
      },
        each(opts, (item) => {
          const val = getBy(item, item.value !== undefined ? 'value' : undefined)
          const lab = getBy(item, 'label')
          return h('option', { value: val, disabled: item.disabled || undefined }, lab)
        })
      ),
      right ?? null
    ]),
    hint ? h('div', { class: 'validator-hint' }, hint) : null
  ])
}
export const Skeleton = (p) => h("div", { ...p, class: cls("skeleton", p.class) });
export const SkeletonText = (p) => h("span", { ...p, class: cls("skeleton skeleton-text", p.class) });
export const Stack = (p, c) => h("div", { ...p, class: cls("stack", p.class) }, c);
export const Stats = (p, c) => h('div', { ...p, class: cls('stats shadow', p.class) }, c)
export const Stat = (p) => h('div', { ...p, class: cls('stat', p.class) }, [
  p.title ? h('div', { class: 'stat-title' }, p.title) : null,
  p.value ? h('div', { class: 'stat-value' }, p.value) : null,
  p.desc ? h('div', { class: 'stat-desc' }, p.desc) : null
])
export const Steps = (p, c) => h("ul", { ...p, class: cls("steps", p.class) }, c);
export const Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
export const Swap = (p, c) => h('label', { ...p, class: cls('swap', p.class) }, c)
export const SwapToggle = (p) => h('input', { type: 'checkbox', checked: () => val(p.value), onchange: (e) => isFunc(p.value) && p.value(e.target.checked), class: p.class })
export const SwapOn = (p, c) => h('div', { ...p, class: cls('swap-on', p.class) }, c)
export const SwapOff = (p, c) => h('div', { ...p, class: cls('swap-off', p.class) }, c)
export const Table = (p, c) => h('table', { ...p, class: cls('table', p.class) }, c)
export const TableItems = ({ items, columns = [], header = true }) => {
  const head = header !== false && columns.some(c => c.label) ? h('thead', {}, h('tr', {}, columns.map(c => h('th', { class: c.class }, c.label)))) : null
  const body = h('tbody', {}, () => {
    const list = val(items) || []
    return list.map((it, idx) => h('tr', {}, columns.map(c => { const v = c.render ? c.render(it, idx) : it[c.key]; return h('td', { class: c.class }, v) })))
  })
  return [head, body].filter(Boolean)
}
export const Tabs = (p, c) => {
  if (!p.items) {
    const { class: className, ...rest } = p
    return h('div', { ...rest, class: cls('tabs', className) }, c)
  }
  const { items, activeIndex, onClose, class: className, ...rest } = p
  const get = x => (isFunc(x) ? x() : x)
  const closeH = onClose || (isFunc(items) ? (idx, item) => {
    const arr = val(items)
    const newArr = arr.filter((_, i) => i !== idx)
    items(newArr)
    if (activeIndex() >= newArr.length) activeIndex(Math.max(0, newArr.length - 1))
  } : null)

  return h('div', { ...rest, class: cls('tabs', className) }, () => {
    const list = val(items) || []
    return list.flatMap((it, idx) => {
      const isActive = () => activeIndex() === idx
      const button = h('button', {
        class: () => `tab ${isActive() ? 'tab-active' : ''} ${it.class || ''}`,
        onclick: (e) => { e.preventDefault(); activeIndex(idx); it.onclick?.(e) }
      }, [
        getBy(it),
        it.closable ? h('span', {
          class: 'ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-base-300 text-base-content/60 hover:text-base-content cursor-pointer',
          onclick: (e) => { e.stopPropagation(); closeH?.(idx, it) }
        }, h('span', { class: 'icon-[lucide--x] w-3 h-3' })) : null
      ])
      const contentDiv = h('div', {
        class: 'tab-content bg-base-100 border-base-300 p-6',
        style: () => `display: ${isActive() ? 'block' : 'none'};`
      }, isFunc(it.content) ? it.content() : it.content)
      return [button, contentDiv]
    })
  })
}
export const Textarea = (p) => h("textarea", { ...p, class: cls("textarea", p.class) });
export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate', p.class) }, h('span', {}, c))
export const Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class) }, c);
export const Toast = (message, type = "alert-success", duration = 3500) => {
  let container = document.getElementById("sigpro-toast-container");
  if (!container) {
    container = h("div", {
      id: "sigpro-toast-container",
      class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none"
    });
    document.body.appendChild(container);
  }
  const host = h("div", { style: "display: contents" });
  container.appendChild(host);
  let closeFn, timer, enterTimer;
  const ToastComponent = () => {
    const visible = $(false);
    const leaving = $(false);
    closeFn = () => {
      if (leaving()) return;
      clearTimeout(timer);
      clearTimeout(enterTimer);
      leaving(true);
      setTimeout(() => {
        instance.destroy();
        host.remove();
        if (!container.hasChildNodes()) container.remove();
      }, 300);
    };
    enterTimer = setTimeout(() => visible(true), 0);
    const content = typeof message === 'function' ? val(message) : message;
    const msgNode = typeof content === 'string' ? h("span", {}, content) : content;
    return h("div", {
      class: () => {
        const base = `alert alert-soft ${type} shadow-lg transition-all duration-300 inline-flex w-auto whitespace-nowrap pointer-events-auto`;
        if (leaving()) return `${base} translate-x-full opacity-0`;
        if (visible()) return `${base} translate-x-0 opacity-100`;
        return `${base} translate-x-10 opacity-0`;
      }
    }, [
      msgNode,
      h("button", {
        class: "btn btn-xs btn-circle btn-ghost",
        onclick: closeFn
      }, h("span", { class: "icon-[lucide--x]" }))
    ]);
  };
  const instance = mount(ToastComponent, host);
  if (duration > 0) timer = setTimeout(closeFn, duration);
  return closeFn;
};
export const Toggle = (p) => h("input", { ...p, type: "checkbox", class: cls("toggle", p.class) });
export const Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c);





























// Editor
export const Editor = (p) => {
  const { value, class: extraClass } = p
  let editorRef = null
  let savedRange = null

  const isSource = $(false)
  const source = $("")
  const count = $(0)
  const refreshTick = $(0)
  const showEmojis = $(false)

  const emojis = ["😀", "😊", "😉", "🧐", "😮", "🤔", "😅", "😂", "😍", "😘", "🥰", "👍", "👎", "👌", "🤝", "🤞", "👋", "👏", "🙌", "🙏", "💪", "☝️", "👇", "👈", "👉", "🖕", "✅", "⚠️", "🚀", "📢", "✉️", "❤️"]

  const saveSelection = () => {
    const sel = window.getSelection()
    if (sel.getRangeAt && sel.rangeCount) savedRange = sel.getRangeAt(0)
  }

  const restoreSelection = () => {
    if (savedRange) {
      const sel = window.getSelection()
      sel.removeAllRanges()
      sel.addRange(savedRange)
    }
  }

  const triggerRefresh = () => {
    refreshTick(refreshTick() + 1)
    if (editorRef) count(editorRef.innerText.length)
  }

  const notify = () => {
    if (!editorRef) return
    const html = editorRef.innerHTML
    if (isFunc(value)) value(html)
    else p.onchange?.(html)
    triggerRefresh()
  }

  const exec = (cmd, val = null) => {
    if (!editorRef) return
    editorRef.focus()
    if (savedRange) restoreSelection()
    document.execCommand(cmd, false, val)
    savedRange = null
    notify()
  }

  const openLightbox = (src) => {
    const overlay = document.createElement('div')
    overlay.style = `position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;`
    const img = document.createElement('img')
    img.src = src
    img.style = `max-width:95%;max-height:95%;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px;`
    overlay.onclick = () => document.body.removeChild(overlay)
    overlay.appendChild(img)
    document.body.appendChild(overlay)
  }

  const handleUpload = (file) => {
    if (!file) return
    const reader = new FileReader()
    reader.onload = (re) => {
      if (file.type.startsWith('image/')) {
        const imgHtml = `<div style="display:inline-block; resize:both; overflow:hidden; vertical-align:bottom; line-height:0; width:200px; height:auto; border:1px dashed #ccc; padding:2px; cursor:pointer;" class="resizable-img-container"><img src="${re.target.result}" style="width:100%; height:100%; object-fit:contain; pointer-events:none;"></div>&nbsp;`
        exec("insertHTML", imgHtml)
      } else {
        const linkHtml = `<a href="${re.target.result}" download="${file.name}" contenteditable="false" style="display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; background:#f9f9f9; text-decoration:none; color:#333; font-size:12px; margin:2px; cursor:pointer;"><span class="icon-[lucide--paperclip] w-3 h-3"></span>${file.name}</a>&nbsp;`
        exec("insertHTML", linkHtml)
      }
    }
    reader.readAsDataURL(file)
  }

  const queryState = (cmd, val = null) => {
    refreshTick(); if (!editorRef || isSource()) return false
    try {
      if (cmd === 'formatBlock') {
        let node = window.getSelection().getRangeAt(0).commonAncestorContainer
        while (node && node !== editorRef) {
          if (node.nodeType === 1 && node.tagName === val) return true
          node = node.parentNode
        }
        return false
      }
      return document.queryCommandState(cmd)
    } catch (e) { return false }
  }

  const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
    h("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [

      h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('bold') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("bold") }, h("span", { class: "icon-[lucide--bold]" })),
      h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('italic') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("italic") }, h("span", { class: "icon-[lucide--italic]" })),
      h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('underline') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("underline") }, h("span", { class: "icon-[lucide--underline]" })),
      h("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),

      h("span", { class: "w-px h-5 bg-base-300 mx-1" }),

      h("button", {
        type: "button",
        class: "btn btn-ghost btn-xs",
        onclick: () => exec("justifyLeft")
      }, h("span", { class: "icon-[lucide--align-left]" })),

      h("button", {
        type: "button",
        class: "btn btn-ghost btn-xs",
        onclick: () => exec("justifyCenter")
      }, h("span", { class: "icon-[lucide--align-center]" })),

      h("button", {
        type: "button",
        class: "btn btn-ghost btn-xs",
        onclick: () => exec("justifyRight")
      }, h("span", { class: "icon-[lucide--align-right]" })),

      h("span", { class: "w-px h-5 bg-base-300 mx-1" }),

      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h("span", { class: "icon-[lucide--list]" })),
      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h("span", { class: "icon-[lucide--list-ordered]" })),
      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h("span", { class: "icon-[lucide--indent-decrease]" })),
      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent") }, h("span", { class: "icon-[lucide--indent-increase]" })),
      h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('formatBlock', 'BLOCKQUOTE') ? 'btn-active' : ''}`, onclick: () => exec("formatBlock", queryState('formatBlock', 'BLOCKQUOTE') ? 'P' : 'BLOCKQUOTE') }, h("span", { class: "icon-[lucide--quote]" })),

      h("span", { class: "w-px h-5 bg-base-300 mx-1" }),

      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const url = window.prompt('URL:'); if (url) exec("createLink", url) } }, h("span", { class: "icon-[lucide--link]" })),
      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const input = document.createElement('input'); input.type = 'file'; input.onchange = (e) => handleUpload(e.target.files[0]); input.click(); } }, h("span", { class: "icon-[lucide--paperclip]" })),

      h("div", { class: "relative" }, [
        h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => { e.stopPropagation(); saveSelection(); showEmojis(!showEmojis()); } }, h("span", { class: "icon-[lucide--smile]" })),
        h("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map(emo => h("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => { e.stopPropagation(); exec("insertText", emo); showEmojis(false); } }, emo)))
      ]),

      h("span", { class: "w-px h-5 bg-base-300 mx-1" }),

      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h("span", { class: "icon-[lucide--undo-2]" })),
      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h("span", { class: "icon-[lucide--redo-2]" })),
    ]),

    h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? 'btn-active' : ''}`, onclick: () => { if (!isSource()) source(editorRef?.innerHTML || ""); else if (editorRef) { editorRef.innerHTML = source(); notify(); }; isSource(!isSource()) } }, h("span", { class: "icon-[lucide--code-2]" }))
  ])

  if (typeof document !== 'undefined' && !document.getElementById('editor-styles')) {
    const style = document.createElement('style')
    style.id = 'editor-styles'
    style.textContent = `
    [contenteditable="true"] div,
    [contenteditable="true"] p {
      margin: 0;
      padding: 0;
    }
  `
    document.head.appendChild(style)
  }
  return h("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
    toolbar,
    h("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
      h("div", {
        ref: el => {
          if (!editorRef && el) {
            editorRef = el; el.innerHTML = val(value) || "";
            document.execCommand("defaultParagraphSeparator", false, "br");
            el.addEventListener('click', (e) => {
              const container = e.target.closest('.resizable-img-container');
              if (container) { const img = container.querySelector('img'); if (img) openLightbox(img.src); }
            });
          }
        },
        style: () => `min-height:22rem;${isSource() ? 'display:none' : ''}`,
        class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8",
        contenteditable: "true",
        oninput: notify,
        onkeydown: (e) => { if (e.key === 'Tab') { e.preventDefault(); exec("indent"); } },
        onkeyup: () => { triggerRefresh(); saveSelection(); },
        onclick: (e) => { triggerRefresh(); saveSelection(); e.stopPropagation(); },
        onmouseup: () => { notify(); saveSelection(); },
        onpaste: (e) => {
          e.preventDefault();
          const text = e.clipboardData.getData('text/plain');
          exec('insertText', text);
        },
        ondragover: (e) => e.preventDefault(),
        ondrop: (e) => { e.preventDefault(); handleUpload(e.dataTransfer.files[0]) }
      }),
      h("textarea", {
        class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0",
        style: () => isSource() ? '' : 'display:none',
        value: source,
        oninput: (e) => { source(e.target.value); if (editorRef) editorRef.innerHTML = e.target.value; p.onchange?.(e.target.value); }
      })
    ]),
    h("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
      h("span", () => `${count()}`)
    ])
  ])
}