/* ───────────────────────── CEMETERY · GROUNDS MAP ───────────────────────── */
function PlotCard({rec, onClose}){
  if(!rec) return (
    <div className="rec-card">
      <div className="rec-empty">
        <div className="ph">⌖</div>
        <b>Select a plot</b>
        <p className="muted" style={{marginTop:6}}>Click any marker on the map to open its record.</p>
      </div>
    </div>
  );
  if(rec.status==="available"){
    return (
      <div className="rec-card fade-in" key={rec.id}>
        <div className="rec-b" style={{paddingTop:18}}>
          <div className="eyebrow">Inventory · For sale</div>
          <div className="rec-name" style={{marginTop:8}}>Plot {rec.plot}</div>
          <div className="rec-dates">{rec.section.name} · Section {rec.section.id}</div>
          <div className="rec-tags"><Pill status="available" /></div>
          <div className="rec-rows">
            <div className="r"><span>List price</span><b>${rec.listPrice.toLocaleString()}</b></div>
            <div className="r"><span>Size</span><b>{rec.sizeW}′ × {rec.sizeL}′</b></div>
            <div className="r"><span>Type</span><b>Single lawn</b></div>
            <div className="r"><span>Pre-need</span><b>Eligible</b></div>
          </div>
          <button className="btn primary" style={{width:"100%",marginTop:16,justifyContent:"center"}} onClick={()=>window.__startSale&&window.__startSale(rec)}>Start sale →</button>
        </div>
      </div>
    );
  }
  const fam = FAMILY_COUNTS[rec.sur]||1;
  return (
    <div className="rec-card fade-in" key={rec.id}>
      <div className="rec-cover"><div className="rec-port"></div></div>
      <div className="rec-b">
        <div className="rec-name">{rec.name}</div>
        <div className="rec-dates">{rec.birth} – {rec.death} · interred {rec.interred}</div>
        <div className="rec-tags">
          <Pill status={rec.status} />
          {rec.vet && <VetPill vet={rec.vet} />}
        </div>
        <div className="rec-rows">
          <div className="r"><span>Plot</span><b>{rec.plot}</b></div>
          <div className="r"><span>Section</span><b>{rec.section.name}</b></div>
          <div className="r"><span>Size</span><b>{rec.sizeW}′ × {rec.sizeL}′</b></div>
          {rec.vet && <div className="r"><span>Service</span><b>{rec.vet.branch} · {rec.vet.conflict}</b></div>}
          <div className="r"><span>Family</span><b>{rec.sur} · {fam} linked</b></div>
        </div>
        <div className="fam">
          {Array.from({length:Math.min(5,fam)}).map((_,i)=><div key={i} className="fa"></div>)}
          <span className="fm">{fam} in this family</span>
        </div>
        <div style={{display:"flex",gap:8,marginTop:16}}>
          <button className="btn ghost" style={{flex:1,justifyContent:"center"}} onClick={()=>window.__openMemorial&&window.__openMemorial(rec)}>Memorial</button>
          <button className="btn primary" style={{flex:1,justifyContent:"center"}} onClick={()=>window.__openRecord&&window.__openRecord(rec)}>Open record</button>
        </div>
      </div>
    </div>
  );
}

function GroundsMap(){
  const [sel, setSel] = useState(null);
  const [vetOnly, setVetOnly] = useState(false);
  const [statusFilter, setStatusFilter] = useState("all");
  const [view, setView] = useState(()=>{ try{ return localStorage.getItem("tendmory_mapview")||"markers"; }catch(e){ return "markers"; } });
  const setMapView = (v)=>{ setView(v); try{ localStorage.setItem("tendmory_mapview", v); }catch(e){} };

  const counts = useMemo(()=>{
    const c={occupied:0,available:0,reserved:0,hold:0,exhumated:0,vet:0};
    ALL_RECORDS.forEach(r=>{ c[r.status]++; if(r.vet)c.vet++; });
    return c;
  },[]);

  const visible = (r)=>{
    if(vetOnly && !r.vet) return false;
    if(statusFilter!=="all" && r.status!==statusFilter) return false;
    return true;
  };

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">Cemetery Workspace</div>
          <h1>Grounds Map</h1>
          <div className="sub">{ALL_RECORDS.length.toLocaleString()} plots across {SECTIONS.length} sections · {counts.vet} veterans honored</div>
        </div>
        <div style={{display:"flex",alignItems:"center",gap:12}}>
          <div className="view-toggle" title="How burials display on the map">
            <button className={view==="markers"?"on":""} onClick={()=>setMapView("markers")}>● Markers</button>
            <button className={view==="parcels"?"on":""} onClick={()=>setMapView("parcels")}>▭ Parcels</button>
          </div>
          <button className="btn primary" onClick={()=>window.__openImport&&window.__openImport()}>＋ Import records</button>
        </div>
      </div>

      <div className="toolbar">
        <div className="seg">
          {["all","occupied","available","reserved","hold","exhumated"].map(s=>(
            <button key={s} className={statusFilter===s?"on":""} onClick={()=>setStatusFilter(s)}>
              {s==="all"?"All":STATUS_META[s].label}
            </button>
          ))}
        </div>
        <button className={"chip"+(vetOnly?" on":"")} onClick={()=>setVetOnly(v=>!v)}>
          <span className="sw" style={{background:"var(--accent)"}}></span>★ Veterans only ({counts.vet})
        </button>
        {view==="parcels" && <span className="setup-note">▭ sized to each plot · set at cemetery setup</span>}
      </div>

      <div className="split">
        <div className={"map"}>
          {SECTIONS.map(s=>(
            <React.Fragment key={s.id}>
              <div style={{position:"absolute",left:`${s.x}%`,top:`${s.y}%`,width:`${s.w}%`,height:`${s.h}%`,
                border:"1px dashed color-mix(in oklab,var(--brand) 26%,transparent)",borderRadius:10,
                background: s.kind==="veteran"?"color-mix(in oklab,var(--accent) 7%,transparent)":"color-mix(in oklab,var(--brand) 4%,transparent)"}}></div>
              <div className="sec-label" style={{left:`${s.x+1}%`,top:`${s.y+1}%`}}>{s.id} · {s.name}{s.kind==="veteran"?" ★":""}</div>
            </React.Fragment>
          ))}
          {view==="markers" && ALL_RECORDS.map(r=>{
            const vis = visible(r);
            const m = STATUS_META[r.status];
            return (
              <div key={r.id}
                className={"plot-dot"+(r.vet&&vetOnly?" vet":"")+(sel&&sel.id===r.id?" sel":"")+(!vis?" dim":"")}
                style={{left:`${r.x}%`,top:`${r.y}%`,background:m.color, pointerEvents:vis?"auto":"none"}}
                title={r.name?`${r.name} · ${r.plot}`:`Available · ${r.plot}`}
                onClick={()=>setSel(r)}></div>
            );
          })}
          {view==="parcels" && SECTIONS.map(s=>{
            const recs = ALL_RECORDS.filter(r=>r.section.id===s.id);
            const cols = recs[0]?recs[0].cols:9;
            const rows = Math.ceil(recs.length/cols);
            return (
              <div key={"p"+s.id} className="parcel-sec"
                style={{left:`${s.x+1.5}%`,top:`${s.y+4}%`,width:`${s.w-3}%`,height:`${s.h-6}%`,
                  gridTemplateColumns:`repeat(${cols},1fr)`, gridTemplateRows:`repeat(${rows},1fr)`}}>
                {recs.map(r=>{
                  const vis = visible(r); const m = STATUS_META[r.status];
                  return (
                    <div key={r.id}
                      className={"parcel"+(r.vet&&vetOnly?" vetring":"")+(sel&&sel.id===r.id?" sel":"")+(!vis?" dim":"")}
                      style={{background:m.color}}
                      title={(r.name?`${r.name} · ${r.plot}`:`Available · ${r.plot}`)+` · ${r.sizeW}′×${r.sizeL}′`}
                      onClick={()=>setSel(r)}></div>
                  );
                })}
              </div>
            );
          })}
          <div className="map-legend">
            {Object.entries(STATUS_META).map(([k,m])=>(
              <span key={k}><i style={{background:m.color}}></i>{m.label} ({counts[k]})</span>
            ))}
            <span><i style={{background:"transparent",border:"1.5px solid var(--accent)"}}></i>Veteran</span>
          </div>
        </div>
        <PlotCard rec={sel} onClose={()=>setSel(null)} />
      </div>
    </div>
  );
}

Object.assign(window, { GroundsMap, PlotCard });