// ============================================================
// HausMatch App · Primitives
// Button, Chip, AppBar, StyleChip, MatchBadge, inline icons
// ============================================================

// --- Icons (currentColor, 1.5px stroke) ---
function Icon({ name, size = 16, stroke = 1.5 }) {
  const paths = {
    upload: <><path d="M12 16V4M12 4L7 9M12 4L17 9" /><path d="M4 20h16" /></>,
    image: <><rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 16l5-5 4 4 3-3 6 6" /><circle cx="9" cy="10" r="1.5" /></>,
    link: <><path d="M10 14a4 4 0 0 0 5.656 0l3-3a4 4 0 0 0-5.656-5.656l-1 1" /><path d="M14 10a4 4 0 0 0-5.656 0l-3 3a4 4 0 0 0 5.656 5.656l1-1" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="M16 16l4 4" /></>,
    arrow: <><path d="M5 12h14M14 6l6 6-6 6" /></>,
    arrowBack: <><path d="M19 12H5M10 18l-6-6 6-6" /></>,
    close: <><path d="M6 6l12 12M18 6L6 18" /></>,
    check: <><path d="M5 12l5 5L20 7" /></>,
    heart: <><path d="M12 21s-7-4.35-10-9a5.5 5.5 0 0 1 10-3.5A5.5 5.5 0 0 1 22 12c-3 4.65-10 9-10 9z" /></>,
    save: <><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" /></>,
    map: <><path d="M9 3 3 5v16l6-2 6 2 6-2V3l-6 2-6-2z" /><path d="M9 3v16M15 5v16" /></>,
    sliders: <><path d="M4 6h16M4 12h16M4 18h16" /><circle cx="9" cy="6" r="2" fill="currentColor" /><circle cx="14" cy="12" r="2" fill="currentColor" /><circle cx="7" cy="18" r="2" fill="currentColor" /></>,
    sparkle: <><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3z" /><path d="M19 18l.6 1.7L21 20l-1.4.3L19 22l-.6-1.7L17 20l1.4-.3z" /></>,
    bed: <><path d="M3 18V8m0 4h18v6M7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" /><path d="M21 18V6" /></>,
    bath: <><path d="M4 12V6a2 2 0 0 1 2-2h2v4M4 12h16v4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z" /><path d="M6 20v2M18 20v2" /></>,
    ruler: <><rect x="3" y="8" width="18" height="8" rx="1" /><path d="M7 8v3M11 8v4M15 8v3M19 8v4" /></>,
    share: <><circle cx="6" cy="12" r="2" /><circle cx="18" cy="6" r="2" /><circle cx="18" cy="18" r="2" /><path d="M8 11l8-4M8 13l8 4" /></>,
    phone: <><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.7.6 2.5a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.8.3 1.6.5 2.5.6a2 2 0 0 1 1.7 2z" /></>,
    grid: <><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13" /><circle cx="4" cy="6" r="1" fill="currentColor" /><circle cx="4" cy="12" r="1" fill="currentColor" /><circle cx="4" cy="18" r="1" fill="currentColor" /></>,
    filter: <><path d="M3 5h18l-7 9v6l-4-2v-4L3 5z" /></>,
  };
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={stroke}
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ flexShrink: 0 }}
    >
      {paths[name]}
    </svg>
  );
}

// --- HausMatch wordmark: real mark + wordmark lockup ---
// Uses the actual brand PNGs (compass-heart mark + HausMatch wordmark).
// Parent passes `size` as the nominal mark height in px.
function Wordmark({ inverted = false, size = 28 }) {
  const markSrc = inverted
    ? "/try/assets/hausmatch-mark-white.png"
    : "/try/assets/hausmatch-mark-black.png";
  const wordSrc = inverted
    ? "/try/assets/hausmatch-wordmark-white.png"
    : "/try/assets/hausmatch-wordmark.png";
  return (
    <span
      className="hm-wordmark-lockup"
      style={{ display: "inline-flex", alignItems: "center", gap: 10 }}
    >
      <img
        src={markSrc}
        alt=""
        style={{ height: size, width: "auto", display: "block", opacity: 0.95 }}
      />
      <img
        src={wordSrc}
        alt="HausMatch"
        style={{ height: size * 0.68, width: "auto", display: "block", opacity: 0.95 }}
      />
    </span>
  );
}

// --- Button ---
function Button({ variant = "primary", size = "md", children, onClick, icon, iconRight, disabled, ...rest }) {
  return (
    <button
      className={`hm-btn hm-btn-${variant} hm-btn-${size}`}
      onClick={onClick}
      disabled={disabled}
      {...rest}
    >
      {icon && <Icon name={icon} size={size === "sm" ? 14 : 16} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} size={size === "sm" ? 14 : 16} />}
    </button>
  );
}

// --- Chip (for style tags) ---
function Chip({ children, variant = "default", onClick, active }) {
  return (
    <span
      className={`hm-chip hm-chip-${variant} ${active ? "is-active" : ""}`}
      onClick={onClick}
      role={onClick ? "button" : undefined}
    >
      {children}
    </span>
  );
}

// --- Match Badge — quiet similarity indicator ---
// A thin ring with the % inside, in serif italic. Not a big stat.
function MatchBadge({ pct, size = 48 }) {
  const circumference = 2 * Math.PI * 20;
  const dash = circumference * pct;
  return (
    <div className="hm-match-badge" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox="0 0 48 48">
        <circle cx="24" cy="24" r="20" fill="none" stroke="var(--line-1)" strokeWidth="1.5" />
        <circle
          cx="24" cy="24" r="20"
          fill="none"
          stroke="var(--sage-600)"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeDasharray={`${dash} ${circumference}`}
          transform="rotate(-90 24 24)"
        />
      </svg>
      <span className="hm-match-badge-pct">
        {Math.round(pct * 100)}
      </span>
    </div>
  );
}

// --- AppBar (desktop) ---
function AppBar({ current = "upload", onNav, rightContent }) {
  const items = [
    { id: "upload", label: "Upload" },
    { id: "quiz", label: "Style Quiz" },
    { id: "matches", label: "Matches" },
  ];
  // Fall back to window.__hmNav (wired by InteractiveFlow) so every screen's
  // AppBar gets working navigation without threading a prop through each one.
  const handleNav = (id) => {
    if (onNav) return onNav(id);
    if (typeof window !== "undefined" && typeof window.__hmNav === "function") {
      window.__hmNav(id);
    }
  };
  return (
    <header className="hm-appbar">
      <a
        href="/market/"
        style={{ cursor: "pointer", textDecoration: "none", display: "flex", alignItems: "center", gap: 10 }}
        aria-label="HausMatch — back to market"
      >
        <span className="hm-appbar-back" aria-hidden>←</span>
        <Wordmark />
      </a>
      <nav className="hm-appbar-nav">
        {items.map((it) => (
          <a
            key={it.id}
            className={`hm-appbar-link ${current === it.id ? "is-current" : ""}`}
            onClick={() => handleNav(it.id)}
            style={{ cursor: "pointer" }}
          >
            {it.label}
          </a>
        ))}
      </nav>
      <div className="hm-appbar-right">
        {rightContent || (
          <a
            className="hm-appbar-cta"
            href="https://calendly.com/placeholder"
            target="_blank"
            rel="noreferrer"
          >
            Book a call
            <span className="hm-appbar-cta-arrow" aria-hidden>↗</span>
          </a>
        )}
      </div>
    </header>
  );
}

// --- Section eyebrow ---
function Eyebrow({ children, muted }) {
  return (
    <span className={`hm-eyebrow ${muted ? "is-muted" : ""}`}>
      {children}
    </span>
  );
}

// --- Listing Card ---
function ListingCard({ listing, onClick, showMatch = true, showRationale = true }) {
  return (
    <article className="hm-listing" onClick={onClick}>
      <div className="hm-listing-photo">
        <img src={listing.photos[0]} alt={listing.address} />
        {showMatch && <div className="hm-listing-match"><MatchBadge pct={listing.sim} size={44} /></div>}
        <button className="hm-listing-save" aria-label="Save"><Icon name="heart" size={16} /></button>
      </div>
      <div className="hm-listing-body">
        <div className="hm-listing-head">
          <div>
            <div className="hm-listing-price">{listing.price}</div>
            <div className="hm-listing-addr">
              {listing.address}
              <span className="hm-listing-hood"> · {listing.neighborhood}</span>
            </div>
          </div>
        </div>
        <div className="hm-listing-specs">
          <span><Icon name="bed" size={13} /> {listing.beds} bd</span>
          <span><Icon name="bath" size={13} /> {listing.baths} ba</span>
          <span><Icon name="ruler" size={13} /> {listing.sqft.toLocaleString()} sq ft</span>
        </div>
        <div className="hm-listing-tags">
          {listing.styleTags.map((t) => (
            <Chip key={t} variant="sage">{t}</Chip>
          ))}
        </div>
        {showRationale && listing.rationale && (
          <div className="hm-listing-rationale">
            <span className="hm-rationale-label">Matched on</span>
            <span className="hm-rationale-text">{listing.rationale}</span>
          </div>
        )}
      </div>
    </article>
  );
}

Object.assign(window, {
  Icon, Wordmark, Button, Chip, MatchBadge, AppBar, Eyebrow, ListingCard,
});