/* ───────────────────────── CEMETERY · REPORTS (library · AI chat · builder) ───────────────────────── */
function repStats(){
  const c={total:0,occupied:0,available:0,reserved:0,vet:0};
  ALL_RECORDS.forEach(r=>{ c.total++; if(r.status==="occupied")c.occupied++; if(r.status==="available")c.available++; if(r.status==="reserved")c.reserved++; if(r.vet)c.vet++; });
  return c;
}
const repToast = (name,fmt)=>window.__toast && window.__toast({label:"Report ready", title:name, sub:"Exported as "+fmt});

function ReportLibrary(){
  const stats = useMemo(repStats,[]);
  const decades = useMemo(()=>{
    const m={}; ALL_RECORDS.forEach(r=>{ if(r.death){ const d=Math.floor(r.death/10)*10; m[d]=(m[d]||0)+1; } });
    const keys=Object.keys(m).map(Number).sort((a,b)=>a-b);
    const max=Math.max(...keys.map(k=>m[k]));
    return keys.map(k=>({label:"'"+String(k).slice(2), v:m[k], pct:Math.round(m[k]/max*100)}));
  },[]);
  const REPORTS = [
    {ic:"◰",bg:"color-mix(in oklab,var(--brand) 12%,var(--paper))",c:"var(--brand)",title:"Occupancy & Capacity",desc:"Plots filled, available, and projected years to capacity by section.",readout:[[stats.occupied.toLocaleString(),"OCCUPIED"],[stats.available,"AVAILABLE"],["~3 yr","TO CAPACITY"]]},
    {ic:"★",bg:"color-mix(in oklab,var(--accent) 14%,var(--paper))",c:"var(--accent)",title:"Veteran Roster",desc:"Every veteran by branch and conflict — ready for Memorial Day flag placement.",readout:[[stats.vet,"VETERANS"],["5","BRANCHES"],["218","FLAGS"]]},
    {ic:"$",bg:"color-mix(in oklab,var(--ok) 14%,var(--paper))",c:"var(--ok)",title:"Sales & Pre-need Revenue",desc:"At-need and pre-need contracts, balances due, and collected revenue.",readout:[["$6.2K","COLLECTED"],["2","PRE-NEED"],["$48K","INVENTORY"]]},
    {ic:"▤",bg:"color-mix(in oklab,var(--info) 13%,var(--paper))",c:"var(--info)",title:"Data Completeness",desc:"Records missing photos, documents, or veteran details — your cleanup list.",readout:[[Math.round(stats.occupied*0.06),"NO DOCS"],["12","NO BRANCH"],["97%","COMPLETE"]]},
  ];
  return (
    <div className="fade-in">
      <div className="card" style={{padding:"20px 22px",marginBottom:16}}>
        <div className="sec-h" style={{margin:"0 0 4px"}}><h3>Interments by decade</h3><div className="ln"></div><span className="cnt">{ALL_RECORDS.filter(r=>r.name).length} total</span></div>
        <div className="rep-bars" style={{height:96}}>
          {decades.map((d,i)=>(<div key={i} className={"b"+(d.pct>72?" hot":"")} style={{height:`${d.pct}%`}}><span>{d.label}</span></div>))}
        </div>
        <div className="rep-actions" style={{marginTop:18}}>
          <button className="rep-btn" onClick={()=>repToast("Interments by decade","CSV")}>⤓ CSV</button>
          <button className="rep-btn solid" onClick={()=>repToast("Interments by decade","PDF")}>⤓ Export PDF</button>
        </div>
      </div>
      <div className="rep-grid">
        {REPORTS.map((r,i)=>(
          <div key={i} className="rep-card">
            <div className="rh"><div className="rc-ic" style={{background:r.bg,color:r.c}}>{r.ic}</div><div><h3>{r.title}</h3><div className="rc-d">{r.desc}</div></div></div>
            <div className="rep-readout">{r.readout.map((ro,j)=>(<div key={j} className="ro"><b style={j===0?{color:r.c}:null}>{ro[0]}</b><span>{ro[1]}</span></div>))}</div>
            <div className="rep-actions">
              <button className="rep-btn" onClick={()=>repToast(r.title,"CSV")}>⤓ CSV</button>
              <button className="rep-btn solid" onClick={()=>repToast(r.title,"PDF")}>⤓ Export PDF</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ───── REPORTS ASSISTANT (chat that helps build reports) ───── */
function aiAnswer(q){
  const s = repStats();
  const t = q.toLowerCase();
  const gardenOpen = ALL_RECORDS.filter(r=>r.section.id==="H"&&r.status==="available").length;
  if(/(left|available|capacity|space|room|fill|occupan)/.test(t)){
    const bySec = SECTIONS.map(sec=>({name:sec.name, open:ALL_RECORDS.filter(r=>r.section.id===sec.id&&r.status==="available").length}));
    return {text:`You have ${s.available} plots available. Garden of Honor is tightest — only ${gardenOpen} left. I can build an Occupancy report broken down by section and value.`, rows:bySec.map(x=>[x.name,String(x.open)]), gen:"Occupancy & Capacity",
      build:{name:"Occupancy & Capacity", fields:["name","plot","section","status","value"], sec:"all", status:"all"}};
  }
  if(/(veteran|branch|military|memorial day|flag)/.test(t)){
    return {text:`${s.vet} veterans are on record, 12 missing branch data. I can build a Veteran Roster — name, plot, section and branch, filtered to veterans only.`, rows:[["Total veterans",String(s.vet)],["Missing branch","12"],["Flags needed","218"]], gen:"Veteran Roster",
      build:{name:"Veteran Roster — Memorial Day", fields:["name","life","plot","section","vet"], vetOnly:true}};
  }
  if(/(revenue|sales|money|pre-?need|income|collected|paid|balance)/.test(t)){
    return {text:`$6,250 collected across 3 contracts, 2 pre-need on installments. I can build a Revenue report with plot value, amount paid, balance and payment status.`, rows:[["Collected YTD","$6,250"],["Pre-need active","2"],["Inventory value","$48,000"]], gen:"Sales & Pre-need Revenue",
      build:{name:"Revenue & Pre-need", fields:["name","plot","section","value","paid","balance","contract","paystatus"]}};
  }
  if(/(document|scan|missing|incomplete|photo|complete)/.test(t)){
    return {text:`~${Math.round(s.occupied*0.06)} records are missing a scanned document. I can build a Data Completeness list — name, plot, section, status and documents — so your team can fill the gaps.`, rows:[["Missing docs",String(Math.round(s.occupied*0.06))],["No photo",String(s.available)],["Completeness","97%"]], gen:"Data Completeness",
      build:{name:"Data Completeness", fields:["name","plot","section","status","docs"]}};
  }
  if(/(year|decade|when|date|interment)/.test(t)){
    return {text:`I can build an Interments-by-year report — name, year, and section. Set a year range in the builder to focus on a period.`, rows:null, gen:null,
      build:{name:"Interments by year", fields:["name","year","section","plot"]}};
  }
  return {text:`Tell me what the report is for — e.g. “available plots by section”, “veterans for Memorial Day”, “pre-need revenue”, or “records missing documents”. I'll draft it and open it in the builder so you can adjust the fields.`, rows:null, gen:null, build:null};
}

function AiChat({onBuild}){
  const [log,setLog] = useState([{who:"bot", text:"Hi — I'm your Reports assistant. Tell me what you need a report on and I'll draft the columns and filters, then open it in the builder for you."}]);
  const [val,setVal] = useState("");
  const [busy,setBusy] = useState(false);
  const scroller = useRef(null);
  useEffect(()=>{ if(scroller.current) scroller.current.scrollTop=scroller.current.scrollHeight; },[log,busy]);

  const send = (text)=>{
    const q=(text||val).trim(); if(!q||busy) return;
    setLog(l=>[...l,{who:"user",text:q}]); setVal(""); setBusy(true);
    setTimeout(()=>{ const a=aiAnswer(q); setBusy(false); setLog(l=>[...l,{who:"bot",...a}]); }, 750);
  };
  const SUGGEST = ["Available plots by section","Veteran roster for Memorial Day","Pre-need revenue & balances","Records missing documents"];

  return (
    <div className="fade-in ai-chat">
      <div className="ai-chat-head">
        <div className="sp">✦</div><b>Reports Assistant</b><span className="tag">AI</span>
        <span className="muted" style={{marginLeft:"auto",fontSize:12}}>Drafts &amp; builds reports</span>
      </div>
      <div className="ai-log" ref={scroller}>
        {log.map((m,i)=>(
          <div key={i} className={"ai-msg "+m.who}>
            <div className="ai-av">{m.who==="bot"?"✦":"R"}</div>
            <div className="ai-bubble">
              {m.text}
              {m.rows && (
                <div className="mini-tbl">
                  {m.rows.map((r,j)=>(<div key={j} className="r"><span>{r[0]}</span><b>{r[1]}</b></div>))}
                </div>
              )}
              {m.gen && <div className="gen-link" onClick={()=>repToast(m.gen,"PDF")}>⤓ Generate “{m.gen}” report</div>}
              {m.build && <div className="gen-link" style={{marginLeft:14}} onClick={()=>onBuild&&onBuild(m.build)}>⊕ Open in builder</div>}
            </div>
          </div>
        ))}
        {busy && (
          <div className="ai-msg bot"><div className="ai-av">✦</div><div className="ai-bubble"><div className="ai-typing"><i></i><i></i><i></i></div></div></div>
        )}
      </div>
      {log.length<=1 && (
        <div className="ai-suggest">{SUGGEST.map(s=>(<button key={s} onClick={()=>send(s)}>{s}</button>))}</div>
      )}
      <div className="ai-input">
        <input value={val} onChange={e=>setVal(e.target.value)} onKeyDown={e=>{if(e.key==="Enter")send();}} placeholder="Describe the report you need…" />
        <button onClick={()=>send()}>Ask</button>
      </div>
    </div>
  );
}

/* ───── CUSTOM REPORT BUILDER ───── */
const BUILD_FIELDS = [
  {k:"name",label:"Name"},{k:"life",label:"Lifespan"},{k:"year",label:"Interment year"},{k:"plot",label:"Plot"},
  {k:"section",label:"Section"},{k:"status",label:"Status"},{k:"vet",label:"Veteran branch"},
  {k:"family",label:"Family links"},{k:"interred",label:"Interment date"},{k:"docs",label:"Documents"},{k:"candles",label:"Memorial candles"},
  {k:"value",label:"Plot value $"},{k:"paid",label:"Amount paid $"},{k:"balance",label:"Balance due $"},
  {k:"contract",label:"Contract type"},{k:"paystatus",label:"Payment status"},
];
function CustomBuilder({preset}){
  const p = preset||{};
  const [name,setName] = useState(p.name||"Untitled report");
  const [fields,setFields] = useState(p.fields ? Object.fromEntries(p.fields.map(k=>[k,true])) : {name:true,life:true,year:true,plot:true,section:true,value:true});
  const [sec,setSec] = useState(p.sec||"all");
  const [status,setStatus] = useState(p.status||"all");
  const [vetOnly,setVetOnly] = useState(!!p.vetOnly);
  const [yearFrom,setYearFrom] = useState(p.yearFrom||"");
  const [yearTo,setYearTo] = useState(p.yearTo||"");
  const toggle = (k)=>setFields(f=>({...f,[k]:!f[k]}));
  const chosen = BUILD_FIELDS.filter(f=>fields[f.k]);
  const moneyOn = chosen.some(f=>["value","paid","balance"].includes(f.k));

  const rows = useMemo(()=>ALL_RECORDS.filter(r=>r.name)
    .filter(r=>sec==="all"||r.section.id===sec)
    .filter(r=>status==="all"||r.status===status)
    .filter(r=>!vetOnly||r.vet)
    .filter(r=>!yearFrom||r.death>=+yearFrom)
    .filter(r=>!yearTo||r.death<=+yearTo), [sec,status,vetOnly,yearFrom,yearTo]);

  const totalValue = useMemo(()=>rows.reduce((s,r)=>{ const secIdx=SECTIONS.findIndex(x=>x.id===r.section.id); return s + (1800+secIdx*220+(r.vet?400:0)+(r.id%9)*150); },0),[rows]);

  return (
    <div className="fade-in build-grid">
      <div>
        <div className="card" style={{padding:"18px 20px",marginBottom:14}}>
          <label className="flbl">Report name</label>
          <input className="finp" value={name} onChange={e=>setName(e.target.value)} style={{marginBottom:16}} />
          <div className="sec-h" style={{margin:"0 0 12px"}}><h3 style={{fontSize:16}}>Columns to include</h3><div className="ln"></div><span className="cnt">{chosen.length} selected</span></div>
          <div className="field-pick">
            {BUILD_FIELDS.map(f=>(
              <div key={f.k} className={"fpick"+(fields[f.k]?" on":"")} onClick={()=>toggle(f.k)}>
                <div className="cbx">{fields[f.k]?"✓":""}</div>{f.label}
              </div>
            ))}
          </div>
        </div>

        <div className="card" style={{padding:"18px 20px"}}>
          <div className="sec-h" style={{margin:"0 0 12px"}}><h3 style={{fontSize:16}}>Filters</h3><div className="ln"></div></div>
          <div style={{display:"flex",gap:10,flexWrap:"wrap",alignItems:"center"}}>
            <select className="finp" style={{width:"auto"}} value={sec} onChange={e=>setSec(e.target.value)}>
              <option value="all">All sections</option>
              {SECTIONS.map(s=><option key={s.id} value={s.id}>{s.id} · {s.name}</option>)}
            </select>
            <select className="finp" style={{width:"auto"}} value={status} onChange={e=>setStatus(e.target.value)}>
              <option value="all">Any status</option>
              {Object.keys(STATUS_META).filter(k=>k!=="available").map(k=><option key={k} value={k}>{STATUS_META[k].label}</option>)}
            </select>
            <div style={{display:"inline-flex",alignItems:"center",gap:6}}>
              <span className="flbl" style={{margin:0}}>Years</span>
              <input className="finp" style={{width:78}} value={yearFrom} onChange={e=>setYearFrom(e.target.value)} placeholder="From" />
              <span className="muted">–</span>
              <input className="finp" style={{width:78}} value={yearTo} onChange={e=>setYearTo(e.target.value)} placeholder="To" />
            </div>
            <button className={"chip"+(vetOnly?" on":"")} onClick={()=>setVetOnly(v=>!v)}><span className="sw" style={{background:"var(--accent)"}}></span>★ Veterans only</button>
          </div>
        </div>
      </div>

      <div className="build-side">
        {preset && <div style={{display:"flex",alignItems:"center",gap:9,padding:"10px 12px",borderRadius:10,background:"color-mix(in oklab,var(--brand) 8%,var(--paper))",border:"1px solid color-mix(in oklab,var(--brand) 24%,transparent)"}}><span style={{color:"var(--brand)"}}>✦</span><span style={{fontSize:12.5,color:"var(--muted)"}}>Drafted by the assistant — adjust anything below.</span></div>}
        <div className="build-prev">
          <div className="eyebrow">Preview</div>
          <div style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:18,marginTop:8}}>{name||"Untitled report"}</div>
          <div className="rep-readout" style={{margin:"14px 0"}}>
            <div className="ro"><b style={{color:"var(--brand)"}}>{rows.length.toLocaleString()}</b><span>RECORDS</span></div>
            <div className="ro"><b>{chosen.length}</b><span>COLUMNS</span></div>
          </div>
          {moneyOn && (
            <div style={{display:"flex",alignItems:"center",gap:9,padding:"10px 12px",borderRadius:10,background:"color-mix(in oklab,var(--ok) 9%,var(--paper))",border:"1px solid color-mix(in oklab,var(--ok) 26%,transparent)",marginBottom:12}}>
              <span style={{color:"var(--ok)",fontWeight:700}}>＄</span>
              <span style={{fontSize:12.5,color:"var(--muted)"}}>Total plot value <b style={{color:"var(--ink)"}}>${totalValue.toLocaleString()}</b></span>
            </div>
          )}
          <div className="pv-row">{chosen.map(f=><span key={f.k} className="pv-chip">{f.label}</span>)}</div>
        </div>
        <button className="btn primary" style={{justifyContent:"center"}} onClick={()=>repToast(name||"Custom report","PDF · "+rows.length+" rows")} >⤓ Generate report</button>
        <button className="btn ghost" style={{justifyContent:"center"}} onClick={()=>repToast(name||"Custom report","CSV · "+rows.length+" rows")}>⤓ Export as CSV</button>
        <button className="btn ghost" style={{justifyContent:"center"}} onClick={()=>window.__toast&&window.__toast({label:"Saved",title:"Report template saved",sub:(name||"Custom report")+" · reusable"})}>★ Save template</button>
      </div>
    </div>
  );
}

function Reports(){
  const [tab,setTab] = useState("library");
  const [preset,setPreset] = useState(null);
  const [presetKey,setPresetKey] = useState(0);
  const openBuilder = (p)=>{ setPreset(p); setPresetKey(k=>k+1); setTab("build"); window.__toast&&window.__toast({label:"Draft ready",title:"Report opened in builder",sub:p.name+" · "+p.fields.length+" columns"}); };
  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">Cemetery Workspace</div>
          <h1>Reports</h1>
          <div className="sub">Board-ready exports, an AI assistant, and a custom builder — all from live records</div>
        </div>
        {tab==="library" && <button className="btn primary" onClick={()=>repToast("Full cemetery report","PDF")}>⤓ Export all</button>}
      </div>

      <div className="rep-tabs">
        <button className={tab==="library"?"on":""} onClick={()=>setTab("library")}>▤ Report library</button>
        <button className={tab==="ai"?"on":""} onClick={()=>setTab("ai")}>✦ Ask AI</button>
        <button className={tab==="build"?"on":""} onClick={()=>setTab("build")}>⊕ Build a report</button>
      </div>

      {tab==="library" && <ReportLibrary />}
      {tab==="ai" && <AiChat onBuild={openBuilder} />}
      {tab==="build" && <CustomBuilder key={presetKey} preset={preset} />}
    </div>
  );
}

Object.assign(window, { Reports });