/* Shared technology tile — brand-colored square with the real logo.
   Used by technologies index/detail pages, service-page stack strips,
   and the stack recommender. Expects a tech object from technologies/data.js
   ({ icons, tile: { bg, fg }, hue, mono }). */

function TechTile({ tech, size = 64 }) {
  const icons = tech.icons || [];
  const [broken, setBroken] = React.useState(false);
  const showLogos = icons.length > 0 && !broken;
  const iconSize = Math.round(icons.length > 1 ? size * 0.36 : size * 0.5);
  const fg = (tech.tile && tech.tile.fg) || "#ffffff";
  const plain = !!(tech.tile && tech.tile.plain);
  const bg = (tech.tile && tech.tile.bg) ||
    `linear-gradient(135deg, oklch(0.64 0.16 ${tech.hue}), oklch(0.46 0.16 ${tech.hue - 30}))`;
  return (
    <div
      className="tech-tile"
      style={{
        width: size,
        height: size,
        fontSize: size * 0.34,
        background: bg,
        color: fg,
      }}
      aria-hidden="true"
    >
      {showLogos
        ? icons.map((s) =>
            /^https?:/.test(s) ? (
              plain ? (
                <img
                  key={s}
                  src={s}
                  width={Math.round(iconSize * 1.15)}
                  height={Math.round(iconSize * 1.15)}
                  alt=""
                  loading="lazy"
                  onError={() => setBroken(true)}
                  style={{ display: "block", objectFit: "contain" }}
                />
              ) : (
                <span
                  key={s}
                  style={{
                    width: iconSize,
                    height: iconSize,
                    display: "block",
                    background: fg,
                    WebkitMaskImage: `url(${s})`,
                    maskImage: `url(${s})`,
                    WebkitMaskSize: "contain",
                    maskSize: "contain",
                    WebkitMaskRepeat: "no-repeat",
                    maskRepeat: "no-repeat",
                    WebkitMaskPosition: "center",
                    maskPosition: "center",
                  }}
                ></span>
              )
            ) : (
              <img
                key={s}
                src={`https://cdn.simpleicons.org/${s}/${fg.replace("#", "")}`}
                width={iconSize}
                height={iconSize}
                alt=""
                loading="lazy"
                onError={() => setBroken(true)}
                style={{ display: "block" }}
              />
            )
          )
        : tech.mono}
    </div>
  );
}

/* A compact row of tech tiles linking to their technology pages.
   prefix: "" on root pages, "../" on subfolder pages. */
function TechStrip({ slugs, prefix = "", size = 44, label }) {
  const techs = (slugs || [])
    .map((s) => (window.TECHS || []).find((t) => t.slug === s))
    .filter(Boolean);
  if (!techs.length) return null;
  return (
    <div className="tech-strip">
      {label && <div className="tech-strip__label">{label}</div>}
      <div className="tech-strip__row">
        {techs.map((t) => (
          <a
            key={t.slug}
            href={`${prefix}technology.html?slug=${t.slug}`}
            className="tech-strip__item"
            data-cursor={t.name}
          >
            <TechTile tech={t} size={size} />
            <span className="tech-strip__name">{t.name}</span>
          </a>
        ))}
      </div>
    </div>
  );
}

window.TechTile = TechTile;
window.TechStrip = TechStrip;