/* ===== Interactive plot map — Mazurski Brzask ===== */
const { useState: useStateM, useRef: useRefM, useMemo } = React;

const STATUS = {
  dostepna:     { label:'Dostępna',     cls:'ok'   },
  zarezerwowana:{ label:'Zarezerwowana',cls:'hold' },
  sprzedana:    { label:'Sprzedana',    cls:'gone' },
};
const ptsStr = (poly)=> poly.map(p=>p.join(',')).join(' ');

function PlotMap(){
  const PL = window.MB_PLOTS || [];
  const [sel,setSel]     = useStateM(null);
  const [hov,setHov]     = useStateM(null);
  const [filter,setFilter] = useStateM(null);   // status key or null
  const [sort,setSort]   = useStateM({key:'nr', dir:1});
  const [tip,setTip]     = useStateM(null);      // {x,y,plot}
  const mapWrap = useRefM(null);
  const rowRefs = useRefM({});

  const byId = useMemo(()=>Object.fromEntries(PL.map(p=>[p.id,p])),[PL]);
  const counts = useMemo(()=>{
    const c={dostepna:0,zarezerwowana:0,sprzedana:0};
    PL.forEach(p=>c[p.status]++); return c;
  },[PL]);

  const selPlot = sel!=null ? byId[sel] : null;
  const activeId = hov!=null ? hov : sel;

  // klik na mapce — tylko zaznacz, nie przewijaj
  const chooseFromMap = (id)=>{ setSel(id); };

  // klik w tabeli — zaznacz + przewiń do mapy
  const chooseFromTable = (id)=>{
    setSel(id);
    const sec = document.getElementById('dzialki');
    if(sec){
      const top = sec.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior:'smooth' });
    }
  };

  const onCellMove = (e, p)=>{
    const r = mapWrap.current.getBoundingClientRect();
    setTip({ x:e.clientX-r.left, y:e.clientY-r.top, plot:p });
  };

  const rows = useMemo(()=>{
    let r=[...PL];
    r.sort((a,b)=>{
      let va,vb;
      if(sort.key==='nr'){va=a.id;vb=b.id;}
      else if(sort.key==='m2'){va=a.m2;vb=b.m2;}
      else if(sort.key==='price'){va=a.price;vb=b.price;}
      else if(sort.key==='status'){va=a.status;vb=b.status;}
      if(va<vb)return -1*sort.dir; if(va>vb)return 1*sort.dir; return 0;
    });
    return r;
  },[PL,sort]);

  const toggleSort=(key)=> setSort(s=> s.key===key? {key,dir:-s.dir} : {key,dir:1});
  const sortMark=(key)=> sort.key===key ? (sort.dir>0?'↑':'↓') : '';

  const dimmed = (p)=> filter && p.status!==filter;

  return (
    <section className="section" id="dzialki">
      <div className="wrap">
        <div style={{maxWidth:'58ch'}}>
          <span className="eyebrow reveal">Mapa działek</span>
          <h2 className="display d-xl reveal d1">Wybierz działkę<br/>dla siebie</h2>
          <p className="reveal d2" style={{marginTop:'1.3rem'}}>
            Sprawdź dostępne działki na mapie inwestycji. Najedź lub kliknij wybrany teren,
            aby zobaczyć jego numer, powierzchnię i&nbsp;cenę.</p>
        </div>

        <div className="map-layout reveal d1">
          {/* ---- MAP ---- */}
          <div className="map-col">
            <div className="map-frame" ref={mapWrap}>
              <div className="map-caption"><IconPin/> Plichta · gmina Łukta</div>
              <div className="map-north">N<span className="arrow">↑</span></div>
              <svg className="map-svg" viewBox={window.MB_VIEWBOX} preserveAspectRatio="xMidYMid meet"
                   onMouseLeave={()=>{setHov(null);setTip(null)}}>
                {/* warstwa tła — kontury wszystkich działek */}
                {PL.map(p=>(
                  <polygon key={'bg'+p.id} className="cell-bg" points={ptsStr(p.poly)}/>
                ))}
                {PL.map(p=>{
                  const st=STATUS[p.status].cls;
                  const isSel=sel===p.id, isHov=hov===p.id;
                  return (
                    <polygon key={p.id}
                      className={"cell c-"+st+(isSel?" sel":"")+(isHov?" hov":"")+(dimmed(p)?" dim":"")}
                      points={ptsStr(p.poly)}
                      onMouseEnter={()=>setHov(p.id)}
                      onMouseMove={(e)=>onCellMove(e,p)}
                      onMouseLeave={()=>setHov(null)}
                      onClick={()=>chooseFromMap(p.id)}/>
                  );
                })}
                {PL.map(p=>(
                  <text key={'t'+p.id} className={"cell-num"+((activeId===p.id)?" on":"")+(dimmed(p)?" dim":"")}
                        x={p.cx} y={p.cy} dy="0.34em">{p.nr}</text>
                ))}
              </svg>
              {tip && (
                <div className="map-tip" style={{left:tip.x, top:tip.y}}>
                  <strong className="num">Działka {tip.plot.nr}</strong>
                  <span className="num">{tip.plot.m2.toLocaleString('pl-PL')} m²</span>
                  <span className={"tip-st "+STATUS[tip.plot.status].cls}>{STATUS[tip.plot.status].label}</span>
                </div>
              )}
            </div>

            <div className="legend">
              {Object.entries(STATUS).map(([k,v])=>(
                <button key={k} className={"lg "+v.cls+(filter===k?" active":"")+(filter&&filter!==k?" off":"")}
                        onClick={()=>setFilter(filter===k?null:k)}>
                  <span className="dot"/>{v.label}<span className="lg-n num">{counts[k]}</span>
                </button>
              ))}
            </div>

          </div>

          {/* ---- DETAILS ---- */}
          <aside className="detail-col">
            <div className={"detail-card"+(selPlot?" filled":"")}>
              {selPlot ? (
                <React.Fragment>
                  <div className="dc-top">
                    <div>
                      <div className="dc-eyebrow">Działka</div>
                      <div className="dc-nr num">nr {selPlot.nr}</div>
                    </div>
                    <span className={"badge "+STATUS[selPlot.status].cls}>{STATUS[selPlot.status].label}</span>
                  </div>
                  <div className="dc-params">
                    <div className="param">
                      <span className="p-ic"><IconRuler/></span>
                      <span className="p-l">Powierzchnia</span>
                      <span className="p-v num">{selPlot.m2.toLocaleString('pl-PL')} m²</span>
                    </div>
                    <div className="param">
                      <span className="p-ic"><IconTag/></span>
                      <span className="p-l">Cena</span>
                      <span className="p-v num">{selPlot.price.toLocaleString('pl-PL')} zł</span>
                    </div>
                    <div className="param">
                      <span className="p-ic"><IconHash/></span>
                      <span className="p-l">Cena za m²</span>
                      <span className="p-v num">{selPlot.ppm} zł/m²</span>
                    </div>
                  </div>
                  <p className="dc-desc">Rekreacyjno-budowlana przestrzeń w&nbsp;otoczeniu natury — lasów, jezior i&nbsp;terenów zielonych.</p>
                  <div className="dc-actions">
                    {selPlot.status!=='sprzedana'
                      ? <a className="btn btn-primary" href="#kontakt" onClick={()=>{
                          window.__mbPlot=selPlot.nr;
                          window.dispatchEvent(new CustomEvent('mb:plot-select',{detail:{nr:selPlot.nr}}));
                        }} style={{width:'100%',justifyContent:'center'}}>Zapytaj o tę działkę <IconArrowRight/></a>
                      : <div className="sold-note">Ta działka została już sprzedana.</div>}
                  </div>
                </React.Fragment>
              ) : (
                <div className="dc-empty">
                  <span className="dc-empty-ic"><IconMap/></span>
                  <h3 className="display d-md">Kliknij działkę<br/>na mapie</h3>
                  <p className="muted">Wybierz parcelę, aby zobaczyć jej numer, powierzchnię i&nbsp;cenę. Możesz też wybrać działkę z&nbsp;listy poniżej.</p>
                </div>
              )}
            </div>
          </aside>
        </div>

        {/* ---- TABLE / LIST ---- */}
        <div className="reveal table-wrap">
          <div className="table-head-row">
            <h3 className="display d-md">Wszystkie działki</h3>
            <span className="muted" style={{fontFamily:'var(--fd)',fontSize:'.92rem'}}>Najedź na wiersz, aby podświetlić działkę na mapie.</span>
          </div>
          <div className="ptable" role="table">
            <div className="pt-head" role="row">
              <button className="th th-nr" onClick={()=>toggleSort('nr')}>Nr {sortMark('nr')}</button>
              <button className="th" onClick={()=>toggleSort('m2')}>Powierzchnia {sortMark('m2')}</button>
              <button className="th" onClick={()=>toggleSort('price')}>Cena {sortMark('price')}</button>
              <button className="th th-st" onClick={()=>toggleSort('status')}>Status {sortMark('status')}</button>
              <span className="th th-act"></span>
            </div>
            <div className="pt-body">
              {rows.map(p=>{
                const st=STATUS[p.status];
                return (
                  <div key={p.id} ref={el=>rowRefs.current[p.id]=el}
                    className={"pt-row"+(sel===p.id?" sel":"")+(hov===p.id?" hov":"")+(dimmed(p)?" dim":"")}
                    role="row"
                    onMouseEnter={()=>setHov(p.id)} onMouseLeave={()=>setHov(null)}
                    onClick={()=>chooseFromTable(p.id)}>
                    <span className="td td-nr num">{p.nr}</span>
                    <span className="td num">{p.m2.toLocaleString('pl-PL')} m²</span>
                    <span className="td num">{p.price.toLocaleString('pl-PL')} zł</span>
                    <span className="td td-st"><span className={"badge sm "+st.cls}><span className="dot"/>{st.label}</span></span>
                    <span className="td td-act">{p.status!=='sprzedana'
                      ? <a className="row-cta" href="#kontakt" onClick={(e)=>{e.stopPropagation();setSel(p.id);window.__mbPlot=p.nr;window.dispatchEvent(new CustomEvent('mb:plot-select',{detail:{nr:p.nr}}));}}>Zapytaj <IconArrowRight/></a>
                      : <span className="row-cta off">—</span>}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.PlotMap = PlotMap;