/* ui-kit.jsx — line icons + reusable mock UI pieces (OOH Sim) */

/* ---------------------------------------------------------
   Line icons — single stroke, 1.7 weight, inherit color
   --------------------------------------------------------- */
const I = {
  link: "M9 15l6-6M10.5 6.5l1.2-1.2a4 4 0 015.7 5.7l-1.2 1.2M13.5 17.5l-1.2 1.2a4 4 0 01-5.7-5.7l1.2-1.2",
  clock: "M12 7v5l3 2M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
  eye: "M2.5 12S5.5 5.5 12 5.5 21.5 12 21.5 12 18.5 18.5 12 18.5 2.5 12 2.5 12z|M12 15a3 3 0 100-6 3 3 0 000 6z",
  cursor: "M5 3l14 7-6 2-2 6-6-15z",
  image: "M3 5.5A1.5 1.5 0 014.5 4h15A1.5 1.5 0 0121 5.5v13A1.5 1.5 0 0119.5 20h-15A1.5 1.5 0 013 18.5v-13z|M3 16l5-5 4 4M14 14l3-3 4 4|M8.5 9.5a1 1 0 100-2 1 1 0 000 2z",
  edit: "M4 20h4l10.5-10.5a2 2 0 000-2.8l-1.2-1.2a2 2 0 00-2.8 0L4 16v4z|M13.5 6.5l4 4",
  users: "M16 19v-1.5a3.5 3.5 0 00-3.5-3.5h-5A3.5 3.5 0 004 17.5V19|M10 11a3.5 3.5 0 100-7 3.5 3.5 0 000 7z|M20 19v-1.5a3.5 3.5 0 00-2.6-3.4M15.5 4.2a3.5 3.5 0 010 6.8",
  qr: "M4 4h6v6H4V4z|M14 4h6v6h-6V4z|M4 14h6v6H4v-6z|M14 14h2v2h-2v-2z|M18 14h2v2h-2v-2z|M14 18h2v2h-2v-2z|M18 18h2v2h-2v-2z",
  layout: "M4 5.5A1.5 1.5 0 015.5 4h13A1.5 1.5 0 0120 5.5v13A1.5 1.5 0 0118.5 20h-13A1.5 1.5 0 014 18.5v-13z|M4 9h16M9 9v11",
  check: "M5 12.5l4.5 4.5L19 7",
  arrow: "M5 12h14M13 6l6 6-6 6",
  arrowDown: "M12 5v14M6 13l6 6 6-6",
  refresh: "M20 11a8 8 0 10-1.5 5.5M20 20v-4h-4",
  sparkle: "M12 4l1.6 4.4L18 10l-4.4 1.6L12 16l-1.6-4.4L6 10l4.4-1.6L12 4z",
  send: "M4 12l16-7-7 16-2-6-7-3z",
  smartphone: "M8 3h8a1.5 1.5 0 011.5 1.5v15A1.5 1.5 0 0116 21H8a1.5 1.5 0 01-1.5-1.5v-15A1.5 1.5 0 018 3z|M11 18h2",
  shield: "M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z|M9 12l2 2 4-4",
  chevron: "M9 6l6 6-6 6",
  plus: "M12 5v14M5 12h14",
  monitor: "M4 5.5A1.5 1.5 0 015.5 4h13A1.5 1.5 0 0120 5.5v9A1.5 1.5 0 0118.5 16h-13A1.5 1.5 0 014 14.5v-9z|M9 20h6M12 16v4",
  building: "M5 21V5a1 1 0 011-1h7a1 1 0 011 1v16M14 21V9h4a1 1 0 011 1v11M8 8h2M8 12h2M8 16h2",
  no: "M12 21a9 9 0 100-18 9 9 0 000 18z|M5.6 5.6l12.8 12.8",
};

function Icon({ name, size = 22, stroke = 1.7, className, style }) {
  const d = I[name] || "";
  const paths = d.split("|");
  return (
    <svg className={className} style={style} width={size} height={size}
         viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         aria-hidden="true">
      {paths.map((p, i) => <path key={i} d={p} />)}
    </svg>
  );
}

/* ---------------------------------------------------------
   QR glyph (decorative, deterministic pattern)
   --------------------------------------------------------- */
function QRGlyph({ color = "#14274A" }) {
  // fixed 11x11 module pattern with finder squares
  const finder = (x, y) => (
    <g key={`f${x}${y}`} fill={color}>
      <rect x={x} y={y} width="3" height="3" rx=".4" />
      <rect x={x + 1} y={y + 1} width="1" height="1" fill="#fff" />
    </g>
  );
  const dots = [
    [5,0],[7,0],[4,1],[8,1],[5,2],[9,2],[0,4],[2,4],[5,4],[7,4],[10,4],
    [1,5],[4,5],[6,5],[9,5],[3,6],[5,6],[8,6],[10,6],[0,7],[7,7],[5,8],
    [9,8],[4,9],[6,9],[8,9],[5,10],[10,10],[2,10]
  ];
  return (
    <svg viewBox="0 0 11 11" fill="none" aria-hidden="true">
      {finder(0,0)}{finder(8,0)}{finder(0,8)}
      {dots.map(([x,y],i) => <rect key={i} x={x} y={y} width="1" height="1" rx=".2" fill={color} />)}
    </svg>
  );
}

/* ---------------------------------------------------------
   Generic labeled placeholder (swappable image slot)
   --------------------------------------------------------- */
function Placeholder({ label, code, icon = "image", ratio, minHeight, style }) {
  return (
    <div className="ph" style={{ aspectRatio: ratio, minHeight, ...style }}>
      <div className="ph__inner">
        <Icon name={icon} size={26} className="ph__icon" />
        <span className="ph__label">{label}</span>
        {code && <span className="ph__code">{code}</span>}
      </div>
    </div>
  );
}

/* ---------------------------------------------------------
   Billboard — street scene with a sign frame.
   variant: "empty" (vacant) | "ad" (creative composited)
   --------------------------------------------------------- */
function Billboard({ variant = "empty", code, creative }) {
  return (
    <div className="bb bb--scene">
      <div className="bb__city">
        {[7,5,9,6,8,5,7,9,6,8,5,7].map((h,i) =>
          <i key={i} style={{ height: `${h * 9}%` }} />)}
      </div>
      <div className="bb__post" />
      <div className="bb__frame">
        {variant === "empty" ? (
          <div className="bb__plate">
            <Icon name="monitor" size={20} />
            <span>空き枠</span>
            {code && <code>{code}</code>}
          </div>
        ) : (
          <div className="creative">
            <div className="creative__brand">{creative?.brand || "BRAND CO."}</div>
            <div className="creative__head">{creative?.head || "新店舗、\nオープン。"}</div>
            <div className="creative__row">
              <span className="creative__cta">{creative?.cta || "詳しくはこちら"}</span>
              <span className="creative__logo">{creative?.logo || "B"}</span>
            </div>
          </div>
        )}
      </div>
      {variant === "empty" && code && (
        <span className="tag tag--edit" style={{ top: 10, left: 10, right: "auto", bottom: "auto" }}>
          <Icon name="monitor" size={12} /> {code}
        </span>
      )}
    </div>
  );
}

Object.assign(window, { Icon, QRGlyph, Placeholder, Billboard });