/* global React, PAPERS, PaperTexture, Icon, BrandStamp */
const { useState } = React;

function CompareModal({ papers, onClose, onRemove, addToCart, navigate }) {
  if (!papers.length) return null;
  const cols = papers.length;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="compare-modal" onClick={(e) => e.stopPropagation()}>
        <div className="compare-modal-head">
          <div>
            <span className="eyebrow eyebrow-ink">「 Side-by-side 」</span>
            <h2 style={{marginTop:4}}>Comparing <em>{papers.length} papers</em></h2>
          </div>
          <button className="btn btn-ghost" onClick={onClose}><Icon.X /> Close</button>
        </div>

        <div className="compare-modal-body">
          {/* Top row: swatch + name */}
          <div className="compare-grid" style={{gridTemplateColumns: `repeat(${cols}, 1fr)`}}>
            {papers.map(p => (
              <div key={p.id} className="compare-col">
                <div className="ct-swatch" style={{position:"relative", overflow:"hidden"}}>
                  <PaperTexture tone={p.swatchTone} grain={p.grain} />
                  <button
                    onClick={() => onRemove(p)}
                    style={{position:"absolute", top:8, right:8, width:28, height:28, borderRadius:"50%", background:"var(--paper-bg)", border:"1px solid var(--ink)", display:"grid", placeItems:"center", cursor:"pointer"}}
                    title="Remove"
                  ><Icon.X /></button>
                </div>
                <div className="ct-body">
                  <div className="ct-brand">{p.brand}</div>
                  <div className="ct-name">{p.name}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Spec rows */}
          {[
            ["Weight", p => p.gsm + " gsm"],
            ["Finish", p => p.finish],
            ["Color", p => p.color],
            ["Grain", p => p.grain],
            ["Origin", p => p.origin],
            ["MOQ", p => p.moq + " lembar"],
            ["Price (min)", p => p.price_min > 0 ? "Rp " + p.price_min.toLocaleString("id-ID") : "—"],
            ["Gramatur", p => Object.keys(p.price||{}).filter(k=>k!=="default").map(k=>k+"gsm").join(" · ") || "—"],
            ["Eco", p => p.eco ? "Yes · FSC" : "—"],
            ["Formats", p => p.formats.join(" · ")],
          ].map(([h, fn]) => (
            <div key={h} className="compare-row" style={{gridTemplateColumns: `180px repeat(${cols}, 1fr)`}}>
              <div className="rh">{h}</div>
              {papers.map(p => <div key={p.id} className="rv">{fn(p)}</div>)}
            </div>
          ))}

          {/* Actions row */}
          <div className="compare-row" style={{gridTemplateColumns: `180px repeat(${cols}, 1fr)`, padding: 0}}>
            <div className="rh">Actions</div>
            {papers.map(p => (
              <div key={p.id} className="rv" style={{display:"flex", gap:6, flexDirection:"column", fontFamily:"var(--font-sans)"}}>
                <button className="btn btn-primary btn-sm" onClick={() => { addToCart(p); }}>Add to cart</button>
                <button className="btn btn-ghost btn-sm" onClick={() => { onClose(); navigate("/product/" + p.id); }}>View detail</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.CompareModal = CompareModal;