/* Quote Connect — shared UI primitives */

// Lucide icon. Renders into a span React treats as opaque, so the SVG swap
// never collides with React reconciliation.
function Icon({ name, size = 18, stroke = 2, className = "", style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.innerHTML = `<i data-lucide="${name}" width="${size}" height="${size}" stroke-width="${stroke}"></i>`;
    if (window.lucide) window.lucide.createIcons();
  });
  return (
    <span
      ref={ref}
      className={"qc-ic " + className}
      style={{ width: size, height: size, display: "inline-flex", ...style }}
    />
  );
}

function money(n) {
  return "$" + Number(n).toLocaleString("en-AU");
}

// Logo / wordmark — real brand asset
function Logo({ onClick, mark = false }) {
  return (
    <button className="qc-logo" onClick={onClick} aria-label="Quote Connect — home">
      <img src={mark ? "assets/qc-mark.png" : "assets/qc-logo.png"} alt="Quote Connect" />
    </button>
  );
}

function Btn({ children, variant = "primary", size = "md", onClick, type, disabled, full, className = "" }) {
  return (
    <button
      type={type || "button"}
      onClick={onClick}
      disabled={disabled}
      className={`qc-btn v-${variant} s-${size} ${full ? "full" : ""} ${className}`}
    >
      {children}
    </button>
  );
}

function Tag({ children, tone = "line" }) {
  return <span className={`qc-tag t-${tone} mono`}>{children}</span>;
}

function Stars({ rating, reviews }) {
  return (
    <span className="qc-stars">
      <Icon name="star" size={13} className="star-fill" />
      <b>{rating.toFixed(1)}</b>
      {reviews != null && <span className="qc-stars-n mono">({reviews})</span>}
    </span>
  );
}

function Verified({ label = "Verified", size = "md" }) {
  return (
    <span className={`qc-verified s-${size}`}>
      <Icon name="badge-check" size={size === "sm" ? 13 : 15} />
      <span className="mono">{label}</span>
    </span>
  );
}

// Supplier monogram avatar, colour-keyed by hue
function SupAvatar({ sup, size = 40 }) {
  const hue = sup.hue ?? 65;
  return (
    <span
      className="qc-avatar mono"
      style={{
        width: size,
        height: size,
        fontSize: size * 0.34,
        background: `oklch(0.93 0.04 ${hue})`,
        color: `oklch(0.42 0.13 ${hue})`,
        borderColor: `oklch(0.85 0.05 ${hue})`,
      }}
    >
      {sup.code}
    </span>
  );
}

// Category visual — switches with the icon-style tweak
function CatVisual({ cat, iconStyle = "minimal", size = 48, radius = 10 }) {
  if (iconStyle === "photo") {
    return (
      <span className="qc-catvis photo" style={{ width: size, height: size, borderRadius: radius }}>
        <img src={cat.img} alt="" loading="lazy" />
      </span>
    );
  }
  if (iconStyle === "mono") {
    return (
      <span className="qc-catvis mono-tile mono" style={{ width: size, height: size, borderRadius: radius, fontSize: size * 0.26 }}>
        {cat.code}
      </span>
    );
  }
  return (
    <span className="qc-catvis glyph" style={{ width: size, height: size, borderRadius: radius }}>
      <Icon name={cat.icon} size={Math.round(size * 0.46)} stroke={1.75} />
    </span>
  );
}

// Status pill for requests / leads
const STATUS_META = {
  pending:   { label: "Awaiting quotes", tone: "wait", icon: "loader" },
  comparing: { label: "Comparing offers", tone: "live", icon: "git-compare" },
  accepted:  { label: "Accepted", tone: "good", icon: "check" },
  new:       { label: "New lead", tone: "live", icon: "sparkles" },
  viewed:    { label: "Viewed", tone: "wait", icon: "eye" },
  quoted:    { label: "Quoted", tone: "info", icon: "send" },
  won:       { label: "Won", tone: "good", icon: "trophy" },
  lost:      { label: "Lost", tone: "dead", icon: "x" },
};
function StatusPill({ status, count }) {
  const m = STATUS_META[status] || { label: status, tone: "info", icon: "circle" };
  return (
    <span className={`qc-status tone-${m.tone}`}>
      <Icon name={m.icon} size={13} stroke={2.25} />
      <span>{count != null ? `${count} ${m.label}` : m.label}</span>
    </span>
  );
}

// Small labelled spec cell (the engineering-drawing detail)
function Spec({ k, v, accent }) {
  return (
    <div className="qc-spec">
      <div className="qc-spec-k mono">{k}</div>
      <div className={"qc-spec-v" + (accent ? " accent" : "")}>{v}</div>
    </div>
  );
}

Object.assign(window, {
  Icon, money, Logo, Btn, Tag, Stars, Verified, SupAvatar, CatVisual, StatusPill, Spec, STATUS_META,
});