/* ───────────────────────── CEMETERY · TEAM & ACCESS ───────────────────────── */
const ACCESS = {
  admin:  {label:"Admin",  c:"var(--brand)", d:"Full access — billing, team & records"},
  editor: {label:"Editor", c:"var(--info)",  d:"Edit records, sales, care & moderation"},
  field:  {label:"Field crew", c:"var(--accent)", d:"Care tasks & completion reports only"},
  viewer: {label:"Viewer", c:"var(--faint)", d:"Read-only access"},
};
const TEAM_SEED = [
  {id:1, name:"R. Tillman", email:"superintendent@maplewood.org", role:"Superintendent", access:"admin", status:"active"},
  {id:2, name:"Dolores Park", email:"office@maplewood.org", role:"Office manager", access:"editor", status:"active"},
  {id:3, name:"M. Okafor", email:"m.okafor@maplewood.org", role:"Groundskeeper", access:"field", status:"active"},
  {id:4, name:"Pastor J. Reed", email:"jreed@firstcovenant.org", role:"Clergy liaison", access:"viewer", status:"invited"},
];

function Team(){
  const [team,setTeam] = useState(TEAM_SEED);
  const [inviting,setInviting] = useState(false);
  const active = team.filter(t=>t.status==="active").length;

  const invite = (m)=>{ const id=Math.max(0,...team.map(x=>x.id))+1; setTeam(ts=>[...ts,{...m,id,status:"invited"}]); setInviting(false); window.__toast&&window.__toast({label:"Invitation sent",title:m.name+" invited",sub:"Email sent to "+m.email}); };
  const setAccess = (id,access)=>setTeam(ts=>ts.map(t=>t.id===id?{...t,access}:t));
  const remove = (id)=>setTeam(ts=>ts.filter(t=>t.id!==id));
  const resend = (m)=>window.__toast&&window.__toast({label:"Invite resent",title:"Invitation resent",sub:m.email});

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <div className="eyebrow">Cemetery Workspace</div>
          <h1>Team &amp; Access</h1>
          <div className="sub">{active} active · {team.length-active} pending invite · manage who can sign in</div>
        </div>
        <button className="btn primary" onClick={()=>setInviting(true)}>＋ Invite teammate</button>
      </div>

      <div className="mod-intro" style={{background:"linear-gradient(120deg,color-mix(in oklab,var(--brand) 8%,var(--card)),var(--card))",borderColor:"color-mix(in oklab,var(--brand) 22%,var(--line))"}}>
        <div className="mi" style={{background:"var(--brand)"}}>👤</div>
        <div>
          <h3>You control who gets in</h3>
          <p>Invite staff and contractors, then set exactly what each person can see and do.</p>
        </div>
        <div className="mod-flow">
          {Object.values(ACCESS).map((a,i)=>(<span key={i} className="fstep" style={{color:a.c,borderColor:`color-mix(in oklab, ${a.c} 36%, transparent)`}}>{a.label}</span>))}
        </div>
      </div>

      <div className="card" style={{overflow:"hidden"}}>
        <table className="tbl">
          <thead><tr><th>Member</th><th>Role</th><th>Access</th><th>Status</th><th style={{textAlign:"right"}}>Actions</th></tr></thead>
          <tbody>
            {team.map(m=>(
              <tr key={m.id} style={{cursor:"default"}}>
                <td><div style={{display:"flex",alignItems:"center",gap:11}}>
                  <div style={{width:34,height:34,borderRadius:"50%",flex:"none",border:"1px solid var(--line)",background:"repeating-linear-gradient(135deg,#8a9d8f 0 5px,#76897c 5px 10px)",display:"grid",placeItems:"center",color:"#fff",fontWeight:700,fontSize:13}}>{m.name[0]}</div>
                  <div><div className="nm" style={{fontSize:14.5}}>{m.name}</div><div className="sub">{m.email}</div></div>
                </div></td>
                <td>{m.role}</td>
                <td>
                  <select value={m.access} onChange={e=>setAccess(m.id,e.target.value)} className="finp" style={{width:"auto",padding:"6px 10px",fontSize:12.5,fontWeight:600,color:ACCESS[m.access].c}}>
                    {Object.entries(ACCESS).map(([k,a])=><option key={k} value={k}>{a.label}</option>)}
                  </select>
                </td>
                <td>
                  {m.status==="active"
                    ? <span className="pill available"><i className="pd"></i>Active</span>
                    : <span className="pill reserved"><i className="pd"></i>Invited</span>}
                </td>
                <td style={{textAlign:"right"}}>
                  {m.status==="invited" && <button className="chip" style={{marginRight:6}} onClick={()=>resend(m)}>Resend</button>}
                  <button className="chip" onClick={()=>remove(m.id)}>Remove</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{marginTop:16,display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12}}>
        {Object.values(ACCESS).map((a,i)=>(
          <div key={i} className="card" style={{padding:"13px 15px"}}>
            <div style={{fontFamily:"var(--font-mono)",fontSize:10,letterSpacing:".08em",textTransform:"uppercase",fontWeight:700,color:a.c}}>{a.label}</div>
            <div className="muted" style={{fontSize:12.5,marginTop:5}}>{a.d}</div>
          </div>
        ))}
      </div>

      {inviting && <InviteModal onClose={()=>setInviting(false)} onInvite={invite} />}
    </div>
  );
}

function InviteModal({onClose, onInvite}){
  const [name,setName] = useState("");
  const [email,setEmail] = useState("");
  const [role,setRole] = useState("");
  const [access,setAccess] = useState("editor");
  const ok = name.trim() && email.trim();
  return (
    <div className="overlay" onClick={(e)=>{if(e.target.classList.contains("overlay"))onClose();}}>
      <div className="modal" style={{width:"min(520px,100%)"}}>
        <div className="modal-h">
          <div style={{width:34,height:34,borderRadius:9,background:"color-mix(in oklab,var(--brand) 12%,var(--paper))",color:"var(--brand)",display:"grid",placeItems:"center",flex:"none"}}>👤</div>
          <h3>Invite a teammate</h3>
          <button className="x" onClick={onClose}>×</button>
        </div>
        <div className="modal-b">
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginBottom:14}}>
            <div><label className="flbl">Full name</label><input className="finp" value={name} onChange={e=>setName(e.target.value)} placeholder="e.g. Dolores Park" autoFocus /></div>
            <div><label className="flbl">Role</label><input className="finp" value={role} onChange={e=>setRole(e.target.value)} placeholder="e.g. Office manager" /></div>
          </div>
          <label className="flbl">Work email</label>
          <input className="finp" value={email} onChange={e=>setEmail(e.target.value)} placeholder="name@cemetery.org" style={{marginBottom:14}} />
          <label className="flbl">Access level</label>
          <div style={{display:"flex",flexDirection:"column",gap:8,marginTop:4}}>
            {Object.entries(ACCESS).map(([k,a])=>(
              <div key={k} className={"fpick"+(access===k?" on":"")} style={{width:"100%"}} onClick={()=>setAccess(k)}>
                <div className="cbx" style={{borderRadius:"50%"}}>{access===k?"●":""}</div>
                <div><b style={{fontWeight:600}}>{a.label}</b> <span className="muted" style={{fontSize:12}}>— {a.d}</span></div>
              </div>
            ))}
          </div>
          <button className="btn primary" style={{width:"100%",justifyContent:"center",marginTop:18,opacity:ok?1:.5,pointerEvents:ok?"auto":"none"}} onClick={()=>onInvite({name:name.trim(),email:email.trim(),role:role||"Team member",access})}>✉ Send invitation</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Team });