/* ============================================================
   NeuroRoute — Team Members + Settings — wired to live APIs.
   ============================================================ */

/* =====================  TEAM  ===================== */
function TeamPage(){
  var t=useToast();
  var _loading=useState(true); var loading=_loading[0], setLoading=_loading[1];
  var _team=useState([]); var team=_team[0], setTeam=_team[1];
  var _invites=useState([]); var invites=_invites[0], setInvites=_invites[1];
  var _modal=useState(false); var modal=_modal[0], setModal=_modal[1];
  var _email=useState(''); var email=_email[0], setEmail=_email[1];
  var _role=useState('org_member'); var role=_role[0], setRole=_role[1];
  var _sending=useState(false); var sending=_sending[0], setSending=_sending[1];

  var rc=function(r){return ({admin:'magenta',org_admin:'magenta',sisl_admin:'magenta',developer:'blue',org_member:'blue',viewer:'gray',org_viewer:'gray'})[r]||'gray';};
  var roleName=function(r){return ({admin:'Admin',org_admin:'Admin',sisl_admin:'Sisl Admin',developer:'Developer',org_member:'Member',viewer:'Viewer',org_viewer:'Viewer'})[r]||r;};

  useEffect(function(){
    Promise.all([NR_API.users(), NR_API.invitations()]).then(function(results){
      var usersData = results[0];
      var invData = results[1];
      if(usersData && Array.isArray(usersData.users||usersData)) {
        setTeam(usersData.users||usersData);
      }
      if(invData && Array.isArray(invData.invitations||invData)) {
        setInvites(invData.invitations||invData);
      }
      setLoading(false);
    }).catch(function(){
      /* Endpoints may not exist yet — show empty state */
      setLoading(false);
    });
  },[]);

  var invite=function(){
    if(!email) return;
    setSending(true);
    NR_API.invite(email, role).then(function(res){
      setSending(false);
      if(res) {
        setInvites(function(iv){return [{email:email,role:role,sent:new Date().toISOString(),expires:'in 7 days'}].concat(iv);});
        setModal(false); setEmail(''); setRole('org_member');
        t({title:'Invitation sent',msg:email});
      } else {
        t({kind:'error',title:'Failed to send invite',msg:'Endpoint may not be wired yet.'});
      }
    }).catch(function(){ setSending(false); t({kind:'error',title:'Failed to send invite'}); });
  };

  var removeUser=function(uid,name){
    NR_API.removeUser(uid).then(function(){
      setTeam(function(tm){return tm.filter(function(x){return (x.id||x.uid)!==uid;});});
      t({kind:'info',title:'Member removed',msg:name});
    }).catch(function(){ t({kind:'error',title:'Failed to remove member'}); });
  };

  if(loading) return <LoadingPage/>;

  return (
    <div className="grid" style={{gap:18}}>
      <PageHead desc="Manage who can access your NeuroRoute organization and what they can do.">
        <button className="btn btn-primary btn-sm" onClick={function(){setModal(true);}}><Icon name="onboard" size={15}/>Invite team member</button>
      </PageHead>

      {team.length===0 && invites.length===0 ?
        <EmptyState icon="team" title="No team members yet"
          desc="You're the only member of this organization. Invite team members to collaborate on NeuroRoute."
          actions={[{label:'Invite Member', onClick:function(){setModal(true);}, primary:true}]}/> :
        <>
          <SectionCard title="Members" sub={team.length+' members'} pad={false}>
            {team.length>0 ? <table className="table">
              <thead><tr><th>Member</th><th>Email</th><th>Role</th><th style={{textAlign:'right'}}>Actions</th></tr></thead>
              <tbody>
                {team.map(function(m){
                  var name = m.name||m.email||'User';
                  var initials = name.split(' ').map(function(x){return x[0]||'';}).join('').toUpperCase().slice(0,2);
                  var uid = m.id||m.uid;
                  return (
                    <tr key={uid||m.email}>
                      <td><span className="row" style={{gap:10}}><span className="avatar" style={{background:m.color||'var(--blue)',width:30,height:30,fontSize:11.5}}>{initials}</span><b style={{color:'var(--tx-0)'}}>{name}</b></span></td>
                      <td className="faint">{m.email}</td>
                      <td><Badge color={rc(m.role)}>{roleName(m.role)}</Badge></td>
                      <td style={{textAlign:'right'}}>
                        <div className="row" style={{gap:6,justifyContent:'flex-end'}}>
                          <button className="iconbtn" onClick={function(){removeUser(uid,name);}} title="Remove member"><Icon name="trash" size={14}/></button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table> : <div className="empty" style={{padding:32}}><p className="faint">No team members loaded.</p></div>}
          </SectionCard>

          <div className="grid" style={{gridTemplateColumns:'1.5fr 1fr'}}>
            <SectionCard title="Pending invitations" sub={invites.length+' pending'} pad={false}>
              {invites.length? <table className="table">
                <thead><tr><th>Email</th><th>Role</th><th>Sent</th><th></th></tr></thead>
                <tbody>{invites.map(function(iv){return (
                  <tr key={iv.email}><td style={{color:'var(--tx-0)'}}>{iv.email}</td><td><Badge color={rc(iv.role)}>{roleName(iv.role)}</Badge></td><td className="faint">{timeAgo(iv.sent)||iv.sent}</td>
                    <td style={{textAlign:'right'}}><button className="btn btn-soft btn-sm" onClick={function(){setInvites(function(x){return x.filter(function(y){return y.email!==iv.email;});});t({kind:'info',title:'Invite cancelled'});}}>Cancel</button></td></tr>
                );})}</tbody>
              </table> : <div className="empty" style={{padding:32}}><div className="e-ico"><Icon name="onboard" size={22}/></div><p className="faint">No pending invitations.</p></div>}
            </SectionCard>
            <SectionCard title="Role permissions">
              <div className="grid" style={{gap:12}}>
                {[['Admin','magenta','Full access — manage members, keys, billing & config'],['Developer','blue','Use the API and view all usage data'],['Viewer','gray','Read-only access to dashboards']].map(function(arr){
                  var r=arr[0],c=arr[1],d=arr[2];
                  return <div key={r} className="row" style={{gap:12,alignItems:'flex-start'}}><Badge color={c} style={{marginTop:2}}>{r}</Badge><span className="faint" style={{fontSize:13}}>{d}</span></div>;
                })}
              </div>
            </SectionCard>
          </div>
        </>
      }

      {modal && <Modal title="Invite team member" sub={"They'll get an email invitation to join "+window.DATA.ORG.name+"."} onClose={function(){setModal(false);}}
        footer={<><button className="btn btn-ghost" onClick={function(){setModal(false);}}>Cancel</button><button className="btn btn-primary" disabled={!email||sending} onClick={invite}><Icon name="send" size={15}/>{sending?'Sending…':'Send invitation'}</button></>}>
        <div className="grid" style={{gap:16}}>
          <Field label="Email address"><input className="input" type="email" placeholder="teammate@company.com" value={email} onChange={function(e){setEmail(e.target.value);}}/></Field>
          <Field label="Role"><select className="select" value={role} onChange={function(e){setRole(e.target.value);}}><option value="org_admin">Admin (org)</option><option value="org_member">Developer</option><option value="org_viewer">Viewer</option></select></Field>
        </div>
      </Modal>}
    </div>
  );
}

/* =====================  SETTINGS  ===================== */
function SettingsPage(){
  var t=useToast();
  var _loading=useState(true); var loading=_loading[0], setLoading=_loading[1];
  var _config=useState(null); var config=_config[0], setConfig=_config[1];
  var _strategy=useState('balanced'); var strategy=_strategy[0], setStrategy=_strategy[1];
  var _quality=useState(70); var quality=_quality[0], setQuality=_quality[1];

  useEffect(function(){
    NR_API.config().then(function(res){
      if(res) {
        setConfig(res);
        setStrategy(res.default_routing_strategy||res.routing_strategy||'balanced');
        setQuality(Math.round((res.default_quality_threshold||res.quality_threshold||0.7)*100));
      }
      setLoading(false);
    }).catch(function(){ setLoading(false); });
  },[]);

  if(loading) return <LoadingPage/>;

  var org = window.DATA.ORG;

  return (
    <div className="grid" style={{gap:18,maxWidth:900}}>
      <PageHead desc="Organization details and default routing behavior."/>
      <SectionCard title="Organization">
        <div className="grid" style={{gridTemplateColumns:'1fr 1fr',gap:16}}>
          <Field label="Organization name"><input className="input" defaultValue={org.name} readOnly/></Field>
          <Field label="Billing email"><input className="input" defaultValue={org.billingEmail||org.billing_email||''} readOnly/></Field>
          {org.id && <Field label="Organization ID"><input className="input input-mono" value={org.id} readOnly/></Field>}
        </div>
      </SectionCard>
      <SectionCard title="Routing preferences" sub="Current server-side defaults (read-only). Per-request override via X-Routing-Strategy header.">
        <div className="grid" style={{gap:20}}>
          <div className="spread"><div><div style={{fontWeight:600}}>Default strategy</div><div className="faint" style={{fontSize:12.5}}>Applied when a request doesn't specify its own.</div></div>
            <Badge color="blue" style={{fontSize:13,padding:'4px 10px'}}>{strategy}</Badge></div>
          <hr className="divider"/>
          <div className="spread"><div><div style={{fontWeight:600}}>Quality threshold</div><div className="faint" style={{fontSize:12.5}}>Minimum quality score a model must clear.</div></div>
            <span className="display tnum" style={{fontSize:22}}>{quality}</span></div>
        </div>
      </SectionCard>
      {config && <SectionCard title="Server configuration" sub="Read-only — from environment variables.">
        <div className="grid" style={{gap:10}}>
          {Object.keys(config).map(function(key){
            var val = config[key];
            if(typeof val==='object') val = JSON.stringify(val);
            return <div key={key} className="spread" style={{padding:'8px 0',borderBottom:'1px solid var(--line)'}}>
              <span className="mono faint" style={{fontSize:12.5}}>{key}</span>
              <span className="mono" style={{fontSize:12.5}}>{String(val)}</span>
            </div>;
          })}
        </div>
      </SectionCard>}
    </div>
  );
}

window.PAGES = Object.assign(window.PAGES||{}, {team:TeamPage, settings:SettingsPage});