/* Core UI primitives for Kisongi Farm Tracker. Styled with Tailwind utility classes. Original implementation inspired by the calm, neutral feel of headless component libraries. */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ---------------- Utilities ---------------- */ function formatUGX(n, opts = {}) { if (n === null || n === undefined || isNaN(n)) return "—"; const sign = n < 0 ? "−" : ""; const abs = Math.abs(n); const s = abs.toLocaleString("en-US"); return opts.bare ? `${sign}${s}` : `${sign}${s} UGX`; } function formatDate(iso) { if (!iso) return "—"; const d = new Date(iso + "T00:00:00"); return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }); } function todayISO() { return new Date().toISOString().slice(0, 10); } function cls(...xs) { return xs.filter(Boolean).join(" "); } /* ---------------- Icon set (lucide-style inline SVGs) ---------------- */ const Icon = { Plus: (p) => , Search: (p) => , X: (p) => , Edit: (p) => , Trash: (p) => , Eye: (p) => , Calendar:(p) => , Filter: (p) => , Check: (p) => , Chevron: (p) => , ArrowUp: (p) => , ArrowDown:(p)=> , Coffee: (p) => , User: (p) => , TrendDown:(p)=> , TrendUp: (p) => , Wallet: (p) => , Home: (p) => , Pie: (p) => , Book: (p) => , Mail: (p) => , Sparkle: (p) => , Inbox: (p) => , Leaf: (p) => , }; /* ---------------- Button ---------------- */ function Button({ variant = "primary", size = "md", children, className = "", ...rest }) { const base = "inline-flex items-center justify-center gap-2 font-medium rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600/40 disabled:opacity-50 disabled:cursor-not-allowed select-none"; const sizes = { sm: "h-8 px-3 text-[13px]", md: "h-10 px-4 text-sm", lg: "h-12 px-5 text-[15px]" }; const variants = { primary: "bg-[#2E7D32] text-white shadow-sm hover:bg-[#256A29] active:bg-[#1F5A23]", secondary: "bg-white text-stone-800 border border-stone-200 hover:bg-stone-50 active:bg-stone-100", ghost: "text-stone-700 hover:bg-stone-100 active:bg-stone-200", danger: "bg-rose-600 text-white hover:bg-rose-700 active:bg-rose-800", gold: "bg-[#FBC02D] text-stone-900 hover:bg-[#F2B619] active:bg-[#E0A700]", }; return ; } /* ---------------- Badge ---------------- */ function Badge({ tone = "neutral", outlined = false, children, className = "" }) { const tones = { green: outlined ? "border-[#2E7D32] text-[#2E7D32]" : "bg-[#2E7D32] text-white", gold: outlined ? "border-[#FBC02D] text-[#8a6500]" : "bg-[#FBC02D] text-stone-900", neutral: outlined ? "border-stone-300 text-stone-700" : "bg-stone-100 text-stone-700", red: outlined ? "border-rose-500 text-rose-700" : "bg-rose-100 text-rose-700", surface: outlined ? "border-emerald-200 text-emerald-800" : "bg-[#f1f8e9] text-emerald-800", }; return ( {children} ); } /* ---------------- Input / Select / Textarea ---------------- */ function Input({ className = "", icon, ...rest }) { if (icon) { return (

{icon}

); } return ; } function Select({ value, onChange, options, placeholder = "Select…", className = "" }) { return (

); } function Textarea({ className = "", ...rest }) { return

;
}

/* ---------------- Multi-select chip dropdown ---------------- */
function MultiSelect({ values = [], onChange, options, label = "Categories" }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const toggle = (v) => onChange(values.includes(v) ? values.filter(x => x !== v) : [...values, v]);
  return (
    <div ref={ref} className="relative">
      <button onClick={() => setOpen(o => !o)} className="h-10 w-full inline-flex items-center justify-between gap-2 rounded-lg border border-stone-200 bg-white px-3 text-sm text-left hover:bg-stone-50">
        <span className={cls(values.length === 0 && "text-stone-400")}>
          {values.length === 0 ? `All ${label.toLowerCase()}` : `${values.length} selected`}
        </span>
        <Icon.Chevron width="16" height="16" className="text-stone-400"/>
      </button>
      {open && (
        <div className="absolute z-30 mt-1 w-full max-h-72 overflow-auto rounded-lg border border-stone-200 bg-white shadow-lg p-1">
          {options.map((o) => {
            const on = values.includes(o);
            return (
              <button key={o} onClick={() => toggle(o)} className="flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-2 text-sm hover:bg-stone-50">
                <span>{o}</span>
                <span className={cls("flex h-4 w-4 items-center justify-center rounded border", on ? "bg-[#2E7D32] border-[#2E7D32] text-white" : "border-stone-300")}>
                  {on && <Icon.Check width="12" height="12"/>}
                </span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ---------------- Drawer / Slide-over ---------------- */
function Drawer({ open, onClose, title, children, footer, side = "right" }) {
  // Mobile becomes a bottom sheet (full height); desktop a side panel
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50">
      <div className="absolute inset-0 bg-stone-900/40 backdrop-blur-[1px]" onClick={onClose}/>
      <div className={cls(
        "absolute bg-white shadow-2xl flex flex-col",
        // mobile
        "inset-x-0 bottom-0 top-0 sm:top-auto sm:bottom-0 sm:inset-x-0 sm:rounded-t-2xl",
        // desktop
        "md:top-0 md:bottom-0 md:right-0 md:left-auto md:w-[440px] md:rounded-none md:rounded-l-2xl"
      )}>
        <div className="flex items-center justify-between px-5 h-14 border-b border-stone-100 shrink-0">
          <h3 className="font-medium text-stone-900">{title}</h3>
          <button onClick={onClose} className="h-8 w-8 inline-flex items-center justify-center rounded-md hover:bg-stone-100 text-stone-500"><Icon.X width="18" height="18"/></button>
        </div>
        <div className="flex-1 overflow-y-auto px-5 py-4">{children}</div>
        {footer && <div className="border-t border-stone-100 px-5 py-3 bg-white shrink-0">{footer}</div>}
      </div>
    </div>
  );
}

/* ---------------- Toast ---------------- */
const ToastCtx = React.createContext(null);
function ToastHost({ children }) {
  const [toasts, setToasts] = useState([]);
  const push = useCallback((t) => {
    const id = Math.random().toString(36).slice(2);
    setToasts(ts => [...ts, { id, ...t }]);
    setTimeout(() => setToasts(ts => ts.filter(x => x.id !== id)), t.duration || 2600);
  }, []);
  return (
    <ToastCtx.Provider value={push}>
      {children}
      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[60] flex flex-col items-center gap-2 pointer-events-none">
        {toasts.map(t => (
          <div key={t.id} className={cls(
            "pointer-events-auto rounded-lg shadow-lg px-4 py-2.5 text-sm flex items-center gap-2 border",
            t.tone === "error" ? "bg-rose-600 text-white border-rose-700" :
            t.tone === "info"  ? "bg-stone-900 text-white border-stone-800" :
                                 "bg-[#2E7D32] text-white border-[#256A29]"
          )}>
            {t.tone === "error" ? <Icon.X width="16" height="16"/> : <Icon.Check width="16" height="16"/>}
            <span>{t.message}</span>
          </div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
}
function useToast() { return React.useContext(ToastCtx); }

/* ---------------- Skeleton ---------------- */
function SkeletonRow() {
  return (
    <tr className="border-b border-stone-100">
      {Array.from({length: 7}).map((_, i) => (
        <td key={i} className="px-3 py-3"><div className="h-3 bg-stone-100 rounded animate-pulse"/></td>
      ))}
    </tr>
  );
}

/* ---------------- Export to window ---------------- */
Object.assign(window, {
  Button, Badge, Input, Select, Textarea, MultiSelect,
  Drawer, ToastHost, useToast, SkeletonRow, Icon,
  formatUGX, formatDate, todayISO, cls,
});