/* ───────────────────────── CEMETERY · SETTINGS ───────────────────────── */
const SECTION_COLORS = ["var(--brand)","var(--accent)","var(--info)","var(--ok)","#7A6E8C","#B0784A"];
function loadSettings(){
  try{ const s=JSON.parse(localStorage.getItem("tendmory_settings")||"null"); if(s) return s; }catch(e){}
  return {
    name:"Maplewood Cemetery", est:"1871", city:"Springfield, Ohio",
    phone:"(307) 205.6765", email:"office@maplewood.org", acres:"41",
    hours:[["Mon–Fri","8:00 AM","5:00 PM",true],["Saturday","9:00 AM","2:00 PM",true],["Sunday","Dawn","Dusk",true]],
    brandColor:"#33523F", tagline:"Resting place since 1871",
    sizes:Object.fromEntries(SECTIONS.map((s,i)=>[s.id,{w:s.kind==="veteran"?4:3.5,l:10,color:SECTION_COLORS[i%SECTION_COLORS.length]}])),
  };
}
function saveSettings(s){ try{ localStorage.setItem("tendmory_settings", JSON.stringify(s)); }catch(e){} }

function Settings(){
  const [tab,setTab] = useState("profile");
  const [s,setS] = useState(loadSettings);
  const [dirty,setDirty] = useState(false);
  const set = (patch)=>{ setS(v=>({...v,...patch})); setDirty(true); };
  const setSize = (id,patch)=>{ setS(v=>({...v, sizes:{...v.sizes,[id]:{...v.sizes[id],...patch}}})); setDirty(true); };
  const save = ()=>{ saveSettings(s); setDirty(false); window.__toast&&window.__toast({label:"Saved",title:"Settings updated",sub:"Changes applied to your workspace"}); };

  const TABS = [["profile","Cemetery profile"],["hours","Hours & contact"],["brand","Public site"],["sections","Sections & plot sizes"]];

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">Cemetery Workspace</div>
          <h1>Settings</h1>
          <div className="sub">Your cemetery's profile, public site, and grounds configuration</div>
        </div>
        <button className="btn primary" disabled={!dirty} style={{opacity:dirty?1:.5,pointerEvents:dirty?"auto":"none"}} onClick={save}>Save changes</button>
      </div>

      <div className="set-grid">
        <div className="set-nav">
          {TABS.map(([k,l])=><button key={k} className={tab===k?"on":""} onClick={()=>setTab(k)}>{l}</button>)}
        </div>

        <div className="set-panel">
          {tab==="profile" && (
            <div className="fade-in">
              <h2>Cemetery profile</h2>
              <div className="sub">Basic identity shown across your workspace and public site.</div>
              <div className="set-row">
                <div className="set-field"><label>Cemetery name</label><input className="finp" value={s.name} onChange={e=>set({name:e.target.value})} /></div>
                <div className="set-field"><label>Established</label><input className="finp" value={s.est} onChange={e=>set({est:e.target.value})} /></div>
              </div>
              <div className="set-row">
                <div className="set-field"><label>City / location</label><input className="finp" value={s.city} onChange={e=>set({city:e.target.value})} /></div>
                <div className="set-field"><label>Grounds size (acres)</label><input className="finp" value={s.acres} onChange={e=>set({acres:e.target.value})} /></div>
              </div>
              <div className="set-field full" style={{marginTop:4}}><label>Tagline</label><input className="finp" value={s.tagline} onChange={e=>set({tagline:e.target.value})} /></div>
            </div>
          )}

          {tab==="hours" && (
            <div className="fade-in">
              <h2>Hours &amp; contact</h2>
              <div className="sub">Displayed on the public site and memorial pages.</div>
              <div className="set-row">
                <div className="set-field"><label>Office phone</label><input className="finp" value={s.phone} onChange={e=>set({phone:e.target.value})} /></div>
                <div className="set-field"><label>Office email</label><input className="finp" value={s.email} onChange={e=>set({email:e.target.value})} /></div>
              </div>
              <div className="sec-h" style={{margin:"18px 0 8px"}}><h3>Visiting hours</h3><div className="ln"></div></div>
              {s.hours.map((h,i)=>(
                <div key={i} className="hours-row">
                  <span className="day">{h[0]}</span>
                  <input className="finp" style={{width:110,padding:"8px 10px"}} value={h[1]} onChange={e=>{const hr=[...s.hours];hr[i]=[h[0],e.target.value,h[2],h[3]];set({hours:hr});}} />
                  <span style={{color:"var(--faint)"}}>–</span>
                  <input className="finp" style={{width:110,padding:"8px 10px"}} value={h[2]} onChange={e=>{const hr=[...s.hours];hr[i]=[h[0],h[1],e.target.value,h[3]];set({hours:hr});}} />
                </div>
              ))}
            </div>
          )}

          {tab==="brand" && (
            <div className="fade-in">
              <h2>Public site branding</h2>
              <div className="sub">How your public search &amp; memorial pages look to families.</div>
              <div className="set-field full"><label>Brand color</label>
                <div className="swatch-row">
                  {["#33523F","#2B3A56","#6E5A33","#7A3B3B","#3E5F4A","#1C2A21"].map(c=>(
                    <div key={c} className={"swatch"+(s.brandColor===c?" on":"")} style={{background:c}} onClick={()=>set({brandColor:c})}></div>
                  ))}
                </div>
              </div>
              <div className="set-field full" style={{marginTop:16}}><label>Site tagline</label><input className="finp" value={s.tagline} onChange={e=>set({tagline:e.target.value})} /></div>
              <div className="sec-h" style={{margin:"20px 0 8px"}}><h3>Preview</h3><div className="ln"></div></div>
              <div className="brand-prev">
                <div className="bp-head" style={{background:s.brandColor}}><div className="bp-logo"></div><b style={{fontSize:15}}>{s.name}</b></div>
                <div className="bp-body">{s.tagline} · {s.city} · {s.phone}</div>
              </div>
              <p className="muted" style={{fontSize:12.5,marginTop:12}}>Public site: <b style={{color:"var(--ink)"}}>{s.name.toLowerCase().replace(/[^a-z]+/g,"")}.tendmory.com</b></p>
            </div>
          )}

          {tab==="sections" && (
            <div className="fade-in">
              <h2>Sections &amp; plot sizes</h2>
              <div className="sub">Default dimensions used to draw parcels on the grounds map.</div>
              {SECTIONS.map(sec=>{
                const sz = s.sizes[sec.id]||{w:3.5,l:10,color:"var(--brand)"};
                return (
                  <div key={sec.id} className="sec-edit">
                    <span className="dot" style={{background:sz.color}}></span>
                    <span className="nm">{sec.id} · {sec.name}{sec.kind==="veteran"?" ★":""}</span>
                    <div className="sz">
                      <input value={sz.w} onChange={e=>setSize(sec.id,{w:e.target.value})} />
                      <span>′ W ×</span>
                      <input value={sz.l} onChange={e=>setSize(sec.id,{l:e.target.value})} />
                      <span>′ L</span>
                    </div>
                  </div>
                );
              })}
              <p className="muted" style={{fontSize:12.5,marginTop:10}}>Applied when the map is in <b style={{color:"var(--ink)"}}>Parcels</b> view. Individual plots can still be overridden from their record.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Settings });