(() => {
const { Icon, Button } = window.TaskFlowDesignSystem_dd53c2;

const MONTHS = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"];
const short = (iso) => {
  const [y, m, d] = String(iso).split("-").map(Number);
  return `${d} ${MONTHS[m - 1]}`;
};

/* Compact period picker that lives in a top bar next to the page's primary
   action. Collapsed it is a single pill; open it is a small glass popover. */
function PeriodFilter({ from, to, defaultFrom, defaultTo, onApply, align = "right" }) {
  const phone = useBreakpoint() === "mobile";
  const [open, setOpen] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const [f, setF] = React.useState(from);
  const [t, setT] = React.useState(to);
  React.useEffect(() => { setF(from); setT(to); }, [from, to]);
  const btn = React.useRef(null);
  const [pos, setPos] = React.useState(null);
  const place = () => {
    const el = btn.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const w = phone ? 236 : 260;
    const left = Math.max(8, Math.min(window.innerWidth - w - 8, align === "right" ? r.right - w : r.left));
    const openUp = r.bottom + 200 > window.innerHeight && r.top > 220;
    setPos({ left, top: openUp ? undefined : r.bottom + 8, bottom: openUp ? window.innerHeight - r.top + 8 : undefined, w });
  };
  React.useEffect(() => {
    if (!open) return;
    place();
    const on = () => place();
    window.addEventListener("resize", on);
    window.addEventListener("scroll", on, true);
    return () => { window.removeEventListener("resize", on); window.removeEventListener("scroll", on, true); };
  }, [open]);

  const field = {
    height: 34, padding: "0 10px", borderRadius: "var(--radius-sm)", width: "100%",
    border: "1px solid var(--border-default)", background: "var(--white)",
    font: "var(--fw-semibold) var(--fs-xs)/1 var(--font-mono)", color: "var(--text-strong)",
  };

  return (
    <span style={{ position: "relative", display: "inline-flex" }}>
      <button ref={btn} type="button" onClick={() => setOpen((o) => !o)}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          display: "inline-flex", alignItems: "center", gap: phone ? 5 : 8, height: 36, padding: phone ? "0 9px" : "0 12px", cursor: "pointer",
          borderRadius: "var(--radius-pill)", border: "1px solid " + (open || hover ? "var(--teal-400)" : "var(--border-glass)"),
          background: "var(--surface-glass)", backdropFilter: "var(--blur-glass)", WebkitBackdropFilter: "var(--blur-glass)",
          boxShadow: open || hover ? "var(--glow-teal)" : "var(--shadow-xs)",
          transform: hover ? "var(--lift-hover)" : "none", transition: "var(--transition-float), var(--transition-control)",
          font: "var(--fw-semibold) var(--fs-xs)/1 var(--font-body)", color: "var(--text-strong)", whiteSpace: "nowrap",
        }}>
        <Icon name="calendar-range" size={15} color="var(--teal-600)" />
        {phone ? short(from) : `${short(from)} – ${short(to)}`}
        <Icon name={open ? "chevron-up" : "chevron-down"} size={14} color="var(--text-faint)" />
      </button>
      {open && pos && ReactDOM.createPortal((
        <>
          <span onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 55 }} />
          <span style={{
            position: "fixed", left: pos.left, top: pos.top, bottom: pos.bottom, zIndex: 56, width: pos.w, padding: 12,
            display: "flex", flexDirection: "column", gap: 10, borderRadius: "var(--radius-lg)",
            background: "var(--surface-glass-strong)", backdropFilter: "var(--blur-glass)", WebkitBackdropFilter: "var(--blur-glass)",
            border: "1px solid var(--border-glass)", boxShadow: "var(--shadow-lg)",
          }}>
            <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              <span style={{ font: "var(--text-label)", color: "var(--text-muted)" }}>Dari</span>
              <input type="date" value={f} onChange={(e) => setF(e.target.value)} style={field} />
            </label>
            <label style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              <span style={{ font: "var(--text-label)", color: "var(--text-muted)" }}>Sampai</span>
              <input type="date" value={t} onChange={(e) => setT(e.target.value)} style={field} />
            </label>
            <span style={{ display: "flex", gap: 8 }}>
              <Button variant="primary" gradient size="sm" onClick={() => { onApply({ from: f, to: t }); setOpen(false); }}>Terapkan</Button>
              {defaultFrom && (
                <Button variant="ghost" size="sm" onClick={() => { setF(defaultFrom); setT(defaultTo); onApply({ from: defaultFrom, to: defaultTo }); setOpen(false); }}>Bulan ini</Button>
              )}
            </span>
          </span>
        </>
      ), document.body)}
    </span>
  );
}

Object.assign(window, { PeriodFilter });
})();