/* global React */
const { useState, useMemo, useEffect, useRef } = React;

/* ---------- tiny inline icons (stroke SVGs, consistent 20x20) ---------- */
const Icon = ({ name, size = 20 }) => {
  const s = size;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "home":      return <svg {...common}><path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2z"/></svg>;
    case "phone":     return <svg {...common}><path d="M22 16.92V21a1 1 0 0 1-1.11 1A19.86 19.86 0 0 1 2 4.11 1 1 0 0 1 3 3h4.09a1 1 0 0 1 1 .75l1 4a1 1 0 0 1-.27 1L7 10.5a16 16 0 0 0 6.5 6.5l1.75-1.75a1 1 0 0 1 1-.27l4 1a1 1 0 0 1 .75 1z"/></svg>;
    case "users":     return <svg {...common}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case "calendar":  return <svg {...common}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
    case "message":   return <svg {...common}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    case "doc":       return <svg {...common}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>;
    case "truck":     return <svg {...common}><rect x="1" y="7" width="14" height="10" rx="1"/><path d="M15 10h4l3 3v4h-7z"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="19" r="2"/></svg>;
    case "sparkle":   return <svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M18.4 5.6l-4.2 4.2M9.8 14.2l-4.2 4.2"/></svg>;
    case "search":    return <svg {...common}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>;
    case "close":     return <svg {...common}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case "chev":      return <svg {...common}><polyline points="9 18 15 12 9 6"/></svg>;
    case "chev-left": return <svg {...common}><polyline points="15 18 9 12 15 6"/></svg>;
    case "play":      return <svg {...common} fill="currentColor" stroke="none"><path d="M8 5v14l11-7z"/></svg>;
    case "pause":     return <svg {...common} fill="currentColor" stroke="none"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>;
    case "plus":      return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case "filter":    return <svg {...common}><path d="M3 5h18l-7 9v6l-4-2v-4z"/></svg>;
    case "pin":       return <svg {...common}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "clock":     return <svg {...common}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
    case "check":     return <svg {...common}><polyline points="20 6 9 17 4 12"/></svg>;
    case "wave":      return <svg {...common}><path d="M3 12c2-3 4-3 6 0s4 3 6 0 4-3 6 0"/><path d="M3 18c2-3 4-3 6 0s4 3 6 0 4-3 6 0"/></svg>;
    case "more":      return <svg {...common}><circle cx="5" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="19" cy="12" r="1.5" fill="currentColor"/></svg>;
    case "sun":       return <svg {...common}><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>;
    case "moon":      return <svg {...common}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>;
    case "bug":       return <svg {...common}><rect x="8" y="6" width="8" height="14" rx="4"/><path d="M12 6V4M9 4l-2-2M15 4l2-2M5 11h3M16 11h3M5 16h3M16 16h3M5 6h2M17 6h2"/></svg>;
    case "alert":     return <svg {...common}><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>;
    case "check-circle": return <svg {...common}><circle cx="12" cy="12" r="10"/><polyline points="9 11 12 14 16 9"/></svg>;
    default: return null;
  }
};

/* ---------- helpers ---------- */
const fmtDay = (iso) => {
  if (!iso) return "—";
  try { return new Date(iso).toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" }); }
  catch(e) { return "—"; }
};
const daysBetween = (isoA, isoB) => {
  try { return Math.floor((new Date(isoA).getTime() - new Date(isoB).getTime()) / 86400e3); }
  catch(e) { return 0; }
};
const durFmt = (sec) => `${Math.floor(sec/60)}:${String(sec%60).padStart(2,"0")}`;

const serviceLabel = (s) => ({
  weekly: "Weekly service",
  opening: "Opening",
  closing: "Closing",
  liner: "Liner replacement",
  equipment: "Equipment",
  inquiry: "Inquiry",
}[s] || s);
const serviceChip = (s) => ({
  weekly: "sage",
  opening: "pool",
  closing: "sun",
  liner: "clay",
  equipment: "clay",
  inquiry: "ink",
}[s] || "");

/* ---------- toast ---------- */
let toastSeq = 0;
const toast = (msg) => {
  const root = document.getElementById("toast-root") || (() => {
    const r = document.createElement("div");
    r.id = "toast-root";
    document.body.appendChild(r);
    return r;
  })();
  const id = ++toastSeq;
  const el = document.createElement("div");
  el.className = "toast";
  el.dataset.id = id;
  el.textContent = msg;
  root.appendChild(el);
  requestAnimationFrame(() => el.classList.add("show"));
  setTimeout(() => {
    el.classList.remove("show");
    setTimeout(() => el.remove(), 250);
  }, 2400);
};

Object.assign(window, { Icon, fmtDay, daysBetween, durFmt, serviceLabel, serviceChip, toast });