/* Kings Roofing — colour picker + sticky bar */
(function () {
  const { I } = window.KUI;
  const { useState, useRef, useEffect } = React;

  // Compact colour dropdown — replaces the tall swatch grid so there's no long scroll.
  function ColourDropdown({ colours, colour, onPick }) {
    const [open, setOpen] = useState(false);
    const ref = useRef(null);
    useEffect(() => {
      function onDoc(e) {
        if (ref.current && !ref.current.contains(e.target)) setOpen(false);
      }
      document.addEventListener("mousedown", onDoc);
      return () => document.removeEventListener("mousedown", onDoc);
    }, []);
    return (
      <div className={"cdrop" + (open ? " open" : "")} ref={ref}>
        <button type="button" className="cdrop-btn" aria-haspopup="listbox" aria-expanded={open}
          onClick={() => setOpen((o) => !o)}>
          <span className="cdrop-dot" style={{ background: colour ? colour.hex : "transparent" }}></span>
          <span className="cdrop-name">{colour ? colour.name : "Choose a colour"}</span>
          {colour && <span className="cdrop-hex">{colour.hex.toUpperCase()}</span>}
          <span className="cdrop-caret"><I.chevron width="16" height="16" /></span>
        </button>
        {open && (
          <div className="cdrop-menu" role="listbox">
            {colours.map((c) => (
              <button type="button" key={c.name} role="option"
                aria-selected={colour && colour.name === c.name}
                className={"cdrop-item" + (colour && colour.name === c.name ? " on" : "")}
                onClick={() => { onPick(c); setOpen(false); }}>
                <span className="cdrop-dot" style={{ background: c.hex }}></span>
                <span className="cdrop-name">{c.name}</span>
                {c.popular && <span className="cdrop-pop">Popular</span>}
                <span className="cdrop-hex">{c.hex.toUpperCase()}</span>
                {colour && colour.name === c.name && (
                  <span className="cdrop-check"><I.check width="13" height="13" /></span>
                )}
              </button>
            ))}
          </div>
        )}
      </div>
    );
  }

  function ColourPicker({ colour, onPick, finish, onFinish }) {
    const D = window.KINGS_DATA;
    const colours = D.FINISH_COLOURS[finish] || D.STANDARD;
    return (
      <div>
        <div className="finish-row">
          <div className="finish-tabs">
            {D.FINISHES.map((f) => (
              <button key={f} className={finish === f ? "on" : ""} onClick={() => onFinish(f)}>{f}</button>
            ))}
          </div>
          <div className="finish-note">{D.FINISH_NOTES[finish] || D.FINISH_NOTES.Standard}</div>
        </div>

        <p className="cat-label" style={{ margin: "18px 0 10px" }}>Choose your Colorsteel® colour</p>
        <ColourDropdown colours={colours} colour={colour} onPick={onPick} />
      </div>
    );
  }

  function StickyBar({ colour, canGo, onGo }) {
    return (
      <div className="sticky-bar">
        <div className="sticky-inner">
          <div className="sticky-sel">
            <span className="swdot" style={colour ? { background: colour.hex, backgroundImage: "none" } : {}}></span>
            <div className="tx">
              {colour
                ? (<><div className="t">{colour.name}</div><div className="s">Colorsteel® · Corrugate</div></>)
                : (<><div className="t" style={{ color: "var(--ink-3)" }}>No colour picked yet</div><div className="s">Pick a swatch above to continue</div></>)}
            </div>
          </div>
          <button className="btn btn-primary btn-lg" disabled={!canGo} onClick={onGo}
            style={!canGo ? { opacity: .45, cursor: "not-allowed", boxShadow: "none" } : {}}>
            Render my roof<span className="arrow"><I.arrow width="14" height="14" /></span>
          </button>
        </div>
      </div>
    );
  }

  window.KPICK = { ColourPicker, StickyBar };
})();