// Shared UI components: Icon, Pill, Button, Modal, etc.

function Icon({ name, size = 16, color = "currentColor", strokeWidth = 1.6, style, ...rest }) {
  const s = size;
  const stroke = { stroke: color, fill: "none", strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    home: <><path d="M3 10.5L12 3l9 7.5" {...stroke}/><path d="M5 9.5V20a1 1 0 001 1h12a1 1 0 001-1V9.5" {...stroke}/></>,
    calendar: <><rect x="3.5" y="5" width="17" height="15" rx="2.5" {...stroke}/><path d="M8 3v4M16 3v4M3.5 10h17" {...stroke}/></>,
    list: <><path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01" {...stroke}/></>,
    sparkle: <><path d="M12 4v4M12 16v4M4 12h4M16 12h4M6.5 6.5l2.8 2.8M14.7 14.7l2.8 2.8M17.5 6.5l-2.8 2.8M9.3 14.7l-2.8 2.8" {...stroke}/></>,
    bell: <><path d="M6 16V11a6 6 0 0112 0v5l1.5 2H4.5L6 16z" {...stroke}/><path d="M10 20a2 2 0 004 0" {...stroke}/></>,
    plus: <><path d="M12 5v14M5 12h14" {...stroke}/></>,
    check: <><path d="M5 12.5l4 4 10-10" {...stroke}/></>,
    cross: <><path d="M6 6l12 12M18 6L6 18" {...stroke}/></>,
    arrow: <><path d="M5 12h13M13 6l6 6-6 6" {...stroke}/></>,
    back: <><path d="M19 12H6M11 6l-5 6 5 6" {...stroke}/></>,
    chev: <><path d="M9 6l6 6-6 6" {...stroke}/></>,
    chevDown: <><path d="M6 9l6 6 6-6" {...stroke}/></>,
    dot: <><circle cx="12" cy="12" r="3" fill={color} stroke="none"/></>,
    circle: <><circle cx="12" cy="12" r="8" {...stroke}/></>,
    halfcircle: <><circle cx="12" cy="12" r="8" {...stroke}/><path d="M12 4a8 8 0 010 16z" fill={color} stroke="none"/></>,
    repeat: <><path d="M17 3l4 4-4 4M3 11V9a4 4 0 014-4h14M7 21l-4-4 4-4M21 13v2a4 4 0 01-4 4H3" {...stroke}/></>,
    edit: <><path d="M4 20h4l11-11-4-4L4 16v4z" {...stroke}/><path d="M14 6l4 4" {...stroke}/></>,
    trash: <><path d="M5 7h14M9 7V5a1 1 0 011-1h4a1 1 0 011 1v2M7 7l1 13a1 1 0 001 1h6a1 1 0 001-1l1-13" {...stroke}/></>,
    flag: <><path d="M5 21V4M5 4h12l-2 4 2 4H5" {...stroke}/></>,
    cake: <><path d="M4 21V13a2 2 0 012-2h12a2 2 0 012 2v8M4 17h16M12 7V3M12 7c-1 0-2-.7-2-1.7C10 4 12 3 12 3s2 1 2 2.3c0 1-1 1.7-2 1.7z" {...stroke}/></>,
    stethoscope: <><path d="M6 3v6a4 4 0 008 0V3M6 3h2M12 3h2M10 13v3a4 4 0 008 0v-1" {...stroke}/><circle cx="18" cy="14" r="2" {...stroke}/></>,
    users: <><circle cx="9" cy="8" r="3" {...stroke}/><circle cx="17" cy="9" r="2.5" {...stroke}/><path d="M3 20c0-3 3-5 6-5s6 2 6 5M15 20c0-2 2-4 4-4s2.5 1 2.5 1" {...stroke}/></>,
    party: <><path d="M3 21l5-14 8 8-13 6zM12 5l1-2M16 4l2-1M19 8l2 0M14 9l3 3" {...stroke}/></>,
    filter: <><path d="M4 6h16M7 12h10M10 18h4" {...stroke}/></>,
    search: <><circle cx="11" cy="11" r="6" {...stroke}/><path d="M16 16l4 4" {...stroke}/></>,
    close: <><path d="M6 6l12 12M18 6L6 18" {...stroke}/></>,
    moon: <><path d="M20 14a8 8 0 11-10-10 6 6 0 0010 10z" {...stroke}/></>,
    sun: <><circle cx="12" cy="12" r="4" {...stroke}/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4" {...stroke}/></>,
    sprout: <><path d="M12 21v-7M12 14C8 14 4 12 4 7c0 0 4 0 6 2 1 1 2 3 2 5zM12 14c4 0 8-2 8-7 0 0-4 0-6 2-1 1-2 3-2 5z" {...stroke}/></>,
    settings: <><circle cx="12" cy="12" r="3" {...stroke}/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4" {...stroke}/></>,
    star: <><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" {...stroke}/></>,
  };
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" style={{ display: "inline-block", flexShrink: 0, ...style }} {...rest}>
      {paths[name] || null}
    </svg>
  );
}

// Icon for kind
function KindIcon({ kind, size = 14, color = "currentColor" }) {
  const map = { task: "check", birthday: "cake", appointment: "stethoscope", family: "users", event: "party" };
  return <Icon name={map[kind] || "circle"} size={size} color={color} />;
}

// Status pill
function StatusPill({ status, compact }) {
  const s = STATES[status] || STATES.todo;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      background: s.bg, color: s.color,
      padding: compact ? "2px 8px" : "4px 10px",
      borderRadius: 999, fontSize: compact ? 11 : 12, fontWeight: 500,
      border: `1px solid ${s.color}33`,
      whiteSpace: "nowrap",
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: s.color }} />
      {s.label}
    </span>
  );
}

// Priority pill (small flag)
function PriorityFlag({ p, withLabel }) {
  const pr = PRIORITIES[p] || PRIORITIES.mid;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      color: pr.color, fontSize: 12, fontWeight: 500,
    }}>
      <Icon name="flag" size={12} color={pr.color} />
      {withLabel && pr.label}
    </span>
  );
}

// Kind chip
function KindChip({ kind }) {
  const k = KINDS[kind] || KINDS.task;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      background: k.bg, color: k.color,
      padding: "2px 8px", borderRadius: 6,
      fontSize: 11, fontWeight: 500,
      letterSpacing: 0.02,
    }}>
      <KindIcon kind={kind} size={11} color={k.color} />
      {k.label}
    </span>
  );
}

// Button
function Button({ variant = "ghost", size = "md", icon, children, style, ...rest }) {
  const padBy = { sm: "6px 10px", md: "8px 14px", lg: "10px 18px" };
  const variants = {
    primary: { background: "var(--terracotta)", color: "#FFF8F0", border: "1px solid var(--terracotta-2)" },
    ghost:   { background: "transparent", color: "var(--ink)", border: "1px solid var(--line-2)" },
    soft:    { background: "var(--surface)", color: "var(--ink)", border: "1px solid var(--line)" },
    quiet:   { background: "transparent", color: "var(--ink-2)", border: "1px solid transparent" },
    danger:  { background: "transparent", color: "var(--prio-high)", border: "1px solid #E5C0BA" },
  };
  return (
    <button
      type="button"
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        padding: padBy[size], borderRadius: 10,
        fontSize: size === "sm" ? 12 : 13, fontWeight: 500,
        transition: "all .15s ease",
        ...variants[variant], ...style,
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}
      {...rest}
    >
      {icon && <Icon name={icon} size={14} />}
      {children}
    </button>
  );
}

// IconButton
function IconButton({ icon, onClick, label, active, size = 32, style }) {
  return (
    <button
      onClick={onClick}
      title={label}
      aria-label={label}
      style={{
        width: size, height: size,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        borderRadius: 10,
        background: active ? "var(--terracotta-tint)" : "transparent",
        color: active ? "var(--terracotta-2)" : "var(--ink-2)",
        border: `1px solid ${active ? "var(--terracotta-soft)" : "transparent"}`,
        transition: "all .15s ease", ...style,
      }}
      onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--line-3)"; }}
      onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}
    >
      <Icon name={icon} size={16} />
    </button>
  );
}

// Card
function Card({ children, style, padding = 20, ...rest }) {
  return (
    <div style={{
      background: "var(--surface)",
      border: "1px solid var(--line)",
      borderRadius: 16,
      padding,
      boxShadow: "var(--shadow-sm)",
      ...style,
    }} {...rest}>
      {children}
    </div>
  );
}

// Section heading
function SectionHeading({ eyebrow, title, action, count }) {
  return (
    <div className="section-heading row gap-3" style={{ alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
      <div className="col gap-1">
        {eyebrow && <div className="tiny">{eyebrow}</div>}
        <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "var(--ink)", lineHeight: 1.05 }}>
          {title}
          {count != null && <span style={{ color: "var(--ink-3)", fontFamily: "var(--font-sans)", fontSize: 18, marginLeft: 10, fontWeight: 400 }}>{count}</span>}
        </div>
      </div>
      {action}
    </div>
  );
}

// Modal
function Modal({ open, onClose, children, width = 560 }) {
  if (!open) return null;
  return (
    <div
      className="modal-overlay"
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 300,
        background: "rgba(28, 28, 30, 0.45)",
        display: "flex", alignItems: "center", justifyContent: "center",
        backdropFilter: "blur(4px)",
        padding: 20,
      }}>
      <div
        className="modal-content"
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "var(--bg-2)", borderRadius: 18,
          border: "1px solid var(--line)",
          boxShadow: "var(--shadow-lg)",
          width: "100%", maxWidth: width,
          maxHeight: "90vh", overflow: "auto",
        }}>
        {children}
      </div>
    </div>
  );
}

// Empty state
function Empty({ icon = "sparkle", title, hint, action }) {
  return (
    <div className="col gap-3" style={{ alignItems: "center", padding: "48px 20px", textAlign: "center", color: "var(--ink-3)" }}>
      <div style={{ width: 48, height: 48, borderRadius: 14, background: "var(--terracotta-tint)", color: "var(--terracotta)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={icon} size={22} />
      </div>
      <div className="col gap-1">
        <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--ink)" }}>{title}</div>
        {hint && <div className="small">{hint}</div>}
      </div>
      {action}
    </div>
  );
}

// Status dot bar (multiple status colors stacked)
function StatusDots({ items, date, max = 4 }) {
  const colors = items.slice(0, max).map(it => {
    if (it.kind !== "task") return KINDS[it.kind].color;
    const s = statusOn(it, date);
    return STATES[s].color;
  });
  return (
    <div style={{ display: "inline-flex", gap: 3 }}>
      {colors.map((c, i) => (
        <span key={i} style={{ width: 5, height: 5, borderRadius: 999, background: c }} />
      ))}
      {items.length > max && (
        <span style={{ fontSize: 9, color: "var(--ink-3)", marginLeft: 2, fontWeight: 600 }}>+{items.length - max}</span>
      )}
    </div>
  );
}

Object.assign(window, {
  Icon, KindIcon, StatusPill, PriorityFlag, KindChip,
  Button, IconButton, Card, SectionHeading, Modal, Empty, StatusDots,
});