/* ===== materials.jsx — material swatch + picker (bottom sheet) ===== */

/* small colour swatch */
function MatSwatch({ hex, size = 22, radius = 6 }) {
  return (
    <span className="matswatch" style={{
      width: size, height: size, borderRadius: radius, background: hex || "transparent",
    }} />
  );
}

/* trigger field showing the currently assigned material */
function MaterialField({ value, onChange, placeholder = "Vali materjal" }) {
  const [open, setOpen] = useState(false);
  const m = value ? getMat(value) : null;
  return (
    <React.Fragment>
      <button type="button" className="matfield" onClick={() => setOpen(true)}>
        {m ? (
          <React.Fragment>
            <MatSwatch hex={m.hex} />
            <span className="matfield-txt">
              <span className="matfield-code">{m.code}</span>
              {m.desc ? <span className="matfield-desc">{m.desc}</span> : null}
            </span>
          </React.Fragment>
        ) : (
          <span className="matfield-txt"><span className="matfield-ph">{placeholder}</span></span>
        )}
        <span className="matfield-chev"><Icon name="chevron" size={16} stroke={2.4} /></span>
      </button>
      {open && <MaterialSheet value={value} onClose={() => setOpen(false)}
        onSelect={(id) => { onChange(id); setOpen(false); }} />}
    </React.Fragment>
  );
}

/* full bottom-sheet picker, portalled into the device frame */
function MaterialSheet({ value, onSelect, onClose }) {
  const [q, setQ] = useState("");

  const close = () => onClose();

  const needle = q.trim().toLowerCase();
  const groups = MATERIAL_GROUPS.map((g) => ({
    name: g,
    en: MATERIAL_GROUP_EN[g],
    items: MATERIALS.filter((m) => m.group === g &&
      (!needle || m.code.toLowerCase().includes(needle) || (m.desc || "").toLowerCase().includes(needle) || g.toLowerCase().includes(needle))),
  })).filter((g) => g.items.length);

  const host = document.getElementById("device") || document.body;

  const sheet = (
    <div className="sheet-scrim" onClick={close}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-grab" />
        <div className="sheet-head">
          <div>
            <div className="sheet-title">Vali materjal</div>
            <div className="sheet-sub">EVS-EN ISO 14688 · Transpordiamet</div>
          </div>
          <button className="iconbtn" onClick={close} aria-label="Sulge">
            <Icon name="plus" size={22} stroke={2.2} />
          </button>
        </div>
        <div className="sheet-search">
          <input className="input" placeholder="Otsi materjali või koodi…" value={q}
            onChange={(e) => setQ(e.target.value)} />
        </div>
        <div className="sheet-list">
          {groups.length === 0 && <div className="empty"><p>Vastet ei leitud.</p></div>}
          {groups.map((g) => (
            <div key={g.name} className="sheet-group">
              <div className="sheet-grouphd">
                <span>{g.name}</span><span className="sheet-groupen">{g.en}</span>
              </div>
              {g.items.map((m) => (
                <button key={m.id} type="button"
                  className={"matrow" + (m.id === value ? " sel" : "")}
                  onClick={() => onSelect(m.id)}>
                  <MatSwatch hex={m.hex} size={26} />
                  <span className="matrow-txt">
                    <span className="matrow-code">{m.code}</span>
                    {m.desc ? <span className="matrow-desc">{m.desc}</span> : null}
                  </span>
                  <span className="matrow-rgb mono">{m.hex}</span>
                  {m.id === value && <span className="matrow-check"><Icon name="check" size={17} stroke={3} /></span>}
                </button>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  return ReactDOM.createPortal(sheet, host);
}

Object.assign(window, { MatSwatch, MaterialField, MaterialSheet });

/* ===== FIELD material picker (välimäärang — 12 broad types) ===== */
function FieldMatField({ value, onChange, placeholder = "Vali põhitüüp" }) {
  const [open, setOpen] = useState(false);
  const f = value ? getFieldMat(value) : null;
  return (
    <React.Fragment>
      <button type="button" className="matfield" onClick={() => setOpen(true)}>
        {f ? (
          <React.Fragment>
            <MatSwatch hex={f.hex} />
            <span className="matfield-txt">
              <span className="matfield-code" style={{ fontFamily: "var(--font-sans)" }}>{f.name}</span>
              <span className="matfield-desc">{f.hint}</span>
            </span>
          </React.Fragment>
        ) : (
          <span className="matfield-txt"><span className="matfield-ph">{placeholder}</span></span>
        )}
        <span className="matfield-chev"><Icon name="chevron" size={16} stroke={2.4} /></span>
      </button>
      {open && <FieldMatSheet value={value} onClose={() => setOpen(false)}
        onSelect={(id) => { onChange(id); setOpen(false); }} />}
    </React.Fragment>
  );
}

function FieldMatSheet({ value, onSelect, onClose }) {
  const host = document.getElementById("device") || document.body;
  const sheet = (
    <div className="sheet-scrim" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-grab" />
        <div className="sheet-head">
          <div>
            <div className="sheet-title">Materjali põhitüüp</div>
            <div className="sheet-sub">Välimäärang · 12 põhitüüpi</div>
          </div>
          <button className="iconbtn" onClick={onClose} aria-label="Sulge">
            <Icon name="plus" size={22} stroke={2.2} />
          </button>
        </div>
        <div className="sheet-list">
          {FIELD_MATERIALS.map((f) => (
            <button key={f.id} type="button"
              className={"matrow fieldrow" + (f.id === value ? " sel" : "")}
              onClick={() => onSelect(f.id)}>
              <MatSwatch hex={f.hex} size={30} radius={8} />
              <span className="matrow-txt">
                <span className="matrow-code" style={{ fontFamily: "var(--font-sans)", fontSize: 15 }}>
                  {f.name} <span className="fieldrow-en">{f.en}</span>
                </span>
                <span className="matrow-desc">{f.hint}</span>
              </span>
              {f.id === value && <span className="matrow-check"><Icon name="check" size={18} stroke={3} /></span>}
            </button>
          ))}
          <div className="sheet-note">
            <Icon name="layers" size={14} /> Täpne AGS-materjal määratakse hilisemal analüüsil.
          </div>
        </div>
      </div>
    </div>
  );
  return ReactDOM.createPortal(sheet, host);
}

Object.assign(window, { FieldMatField, FieldMatSheet });