/* ───────────────────────── CEMETERY · DASHBOARD ───────────────────────── */
function Dashboard({onGo}){
  const stats = useMemo(()=>{
    const c={total:0,occupied:0,available:0,reserved:0,hold:0,exhumated:0,vet:0,value:0};
    ALL_RECORDS.forEach(r=>{ c.total++; c[r.status]++; if(r.vet)c.vet++; if(r.status==="available")c.value+=(r.listPrice||0); });
    return c;
  },[]);
  // occupancy per section
  const occ = useMemo(()=>SECTIONS.map(s=>{
    const inSec = ALL_RECORDS.filter(r=>r.section.id===s.id);
    const filled = inSec.filter(r=>r.status==="occupied"||r.status==="reserved").length;
    return {id:s.id, name:s.name, kind:s.kind, filled, total:inSec.length, pct:Math.round(filled/inSec.length*100)};
  }),[]);
  const topSec = useMemo(()=>[...occ].sort((a,b)=>b.pct-a.pct)[0]||{name:"Section H",pct:84},[occ]);

  const feed = [
    {dot:"var(--ok)",   t:<><b>14,287 records</b> imported from county ledger</>, m:"Auto-import · today 9:14 AM"},
    {dot:"var(--brand)",t:<><b>Plot H-214</b> interment confirmed — E. Hayes</>, m:"Synced from Riverside Funeral Home · yesterday"},
    {dot:"var(--accent)",t:<><b>218 veteran flags</b> placed for Memorial Day</>, m:"Field Team · 2 days ago"},
    {dot:"var(--warn)", t:<><b>Galloway pre-need</b> contract sent to DocuSign</>, m:"R. Tillman · 2 days ago"},
    {dot:"var(--brand)",t:<><b>Whitfield monument</b> cleaned &amp; sealed — A-118</>, m:"Care Log · 3 days ago"},
  ];

  const todos = [
    {ic:"⌖", bg:"color-mix(in oklab,var(--brand) 12%,var(--paper))", c:"var(--brand)", t:"2 interments scheduled this week", m:"H-214 Thu · R-061 Sat", go:"map"},
    {ic:"✎", bg:"color-mix(in oklab,var(--info) 12%,var(--paper))", c:"var(--info)", t:"1 contract awaiting signature", m:"Galloway pre-need · DocuSign", go:"sales"},
    {ic:"✿", bg:"color-mix(in oklab,var(--accent) 12%,var(--paper))", c:"var(--accent)", t:"4 open care tasks", m:"2 high priority", go:"care"},
  ];

  return (
    <div className="fade-in">
      <div className="dash-hero">
        <div className="dash-crest">⚜</div>
        <div style={{flex:1}}>
          <div className="eyebrow">Cemetery Workspace</div>
          <h1>Maplewood Cemetery</h1>
          <div className="loc">
            <span>📍 Springfield, Ohio</span>
            <span>Est. 1871</span>
            <span>{SECTIONS.length} sections · 41 acres</span>
            <span>Supt. R. Tillman</span>
          </div>
        </div>
        <button className="btn primary" onClick={()=>onGo&&onGo("map")}>Open grounds map →</button>
      </div>

      <div className="grid stat-row" style={{marginBottom:18}}>
        <div className="card stat"><div className="k">Total interments</div><div className="v">{stats.occupied.toLocaleString()}</div><div className="d">of {stats.total.toLocaleString()} plots on record</div></div>
        <div className="card stat"><div className="k">Available to sell</div><div className="v">{stats.available}</div><div className="d">${(stats.value/1000).toFixed(0)}<span className="u">K</span> inventory value</div></div>
        <div className="card stat"><div className="k">Veterans honored</div><div className="v" style={{color:"var(--accent)"}}>{stats.vet}</div><div className="d">flagged for Memorial Day</div></div>
        <div className="card stat"><div className="k">Reserved / pre-need</div><div className="v">{stats.reserved}</div><div className="d">{stats.hold} on hold</div></div>
      </div>

      {/* AI insights */}
      <div className="ai-band">
        <div className="ai-head">
          <div className="ai-spark">✦</div>
          <b>Tendmory Intelligence</b>
          <span className="tag">AI</span>
          <span className="upd">Updated this morning</span>
        </div>
        <div className="ai-grid">
          <div className="ai-card">
            <div className="ai-ic" style={{background:"color-mix(in oklab,var(--warn) 14%,var(--paper))",color:"var(--warn)"}}>◰</div>
            <div><div className="ai-t"><b>{topSec.name}</b> is <b>{topSec.pct}% full</b>. At the current pace it reaches capacity in about <b>3 years</b> — time to plan new inventory.</div><span className="ai-act" onClick={()=>onGo&&onGo("sales")}>Review inventory →</span></div>
          </div>
          <div className="ai-card">
            <div className="ai-ic" style={{background:"color-mix(in oklab,var(--accent) 14%,var(--paper))",color:"var(--accent)"}}>★</div>
            <div><div className="ai-t"><b>12 of {stats.vet} veterans</b> are missing branch-of-service data. Completing them strengthens your Memorial Day list.</div><span className="ai-act" onClick={()=>onGo&&onGo("records")}>Fill in records →</span></div>
          </div>
          <div className="ai-card">
            <div className="ai-ic" style={{background:"color-mix(in oklab,var(--brand) 12%,var(--paper))",color:"var(--brand)"}}>◎</div>
            <div><div className="ai-t"><b>{stats.available} plots</b> still have no headstone photo. Families search these most — a field visit would close the gap.</div><span className="ai-act" onClick={()=>onGo&&onGo("care")}>Schedule capture →</span></div>
          </div>
        </div>
      </div>

      <div className="dash-grid">
        <div style={{display:"flex",flexDirection:"column",gap:18}}>
          <div className="card" style={{padding:"18px 20px"}}>
            <div className="sec-h" style={{margin:"0 0 8px"}}><h3>Section occupancy</h3><div className="ln"></div><span className="cnt">{occ.length} sections</span></div>
            {occ.map(s=>(
              <div key={s.id} className="occ-row">
                <div className="on">{s.id} · {s.name}{s.kind==="veteran"?" ★":""}</div>
                <div className="occ-bar"><i style={{width:`${s.pct}%`,background:s.kind==="veteran"?"var(--accent)":"var(--brand)"}}></i></div>
                <div className="ot">{s.pct}% · {s.total-s.filled} open</div>
              </div>
            ))}
          </div>

          <div className="card" style={{padding:"18px 20px"}}>
            <div className="sec-h" style={{margin:"0 0 6px"}}><h3>Recent activity</h3><div className="ln"></div></div>
            <div className="feed">
              {feed.map((f,i)=>(
                <div key={i} className="fr">
                  <div className="fdot" style={{background:f.dot}}></div>
                  <div><div className="ft">{f.t}</div><div className="fm">{f.m}</div></div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div style={{display:"flex",flexDirection:"column",gap:18}}>
          <div className="card" style={{padding:"18px 20px"}}>
            <div className="sec-h" style={{margin:"0 0 6px"}}><h3>Needs attention</h3><div className="ln"></div></div>
            {todos.map((t,i)=>(
              <div key={i} className="todo-row" style={{cursor:"pointer"}} onClick={()=>onGo&&onGo(t.go)}>
                <div className="ti2" style={{background:t.bg,color:t.c}}>{t.ic}</div>
                <div><div className="tt2">{t.t}</div><div className="tm2">{t.m}</div></div>
                <div className="tgo">›</div>
              </div>
            ))}
          </div>

          <div className="card" style={{padding:"18px 20px"}}>
            <div className="sec-h" style={{margin:"0 0 6px"}}><h3>This month</h3><div className="ln"></div></div>
            <div className="rec-rows" style={{borderTop:"none"}}>
              <div className="r"><span>Interments</span><b>3</b></div>
              <div className="r"><span>Plots sold</span><b>2 · $6,250</b></div>
              <div className="r"><span>Memorials viewed</span><b>1,840</b></div>
              <div className="r"><span>Candles lit by families</span><b>312</b></div>
            </div>
          </div>

          <div className="vet-banner">
            <div className="vi">★</div>
            <div style={{flex:1}}>
              <b style={{fontSize:14}}>Memorial Day list is ready</b>
              <p className="muted" style={{fontSize:12.5,marginTop:2}}>{stats.vet} veterans located &amp; mapped for flag placement.</p>
            </div>
            <button className="chip" onClick={()=>onGo&&onGo("map")}>View →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });