// 07 Admin / Curator workspace

const AdminTab = () => (
  <div>
    <SectionLead
      eyebrow="07 / admin · curator"
      title="Light-weight human-in-the-loop layer"
      sub="Not enterprise back-office. Curators review profiles, manage taxonomy, approve/hide system-generated edges, and keep the ecosystem map healthy."
    />

    <div className="frame-grid cols-2">
      <Frame title="Curator dashboard" tag="admin home">
        <Browser title="h2learn.app/admin">
          <div className="row gap-2" style={{alignItems:'flex-start'}}>
            <div className="sketch-box thin p-2" style={{width:130}}>
              <div className="ui xsmall uppercase">Curator</div>
              <div className="col gap-1 mt-2 ui xsmall">
                {['Overview','Review queue','Taxonomy','Matches','Health','Exports'].map((m,i)=>(
                  <div key={m} className={'p-2 ' + (i===1?'sketch-box ink-fill':'')} style={{borderRadius:6, fontFamily:'Kalam', fontSize:13}}>{m}</div>
                ))}
              </div>
            </div>
            <div className="col gap-2 flex-1">
              <div className="frame-grid cols-3" style={{gap:8}}>
                {[['Profiles','248'],['Pending review','7'],['Avg completion','71%'],['New edges (week)','312'],['Anti-dup clusters','3'],['Bridge actors','11']].map(([l,v])=>(
                  <div key={l} className="sketch-box p-2"><div className="ui xsmall uppercase">{l}</div><div className="hand-title" style={{fontSize:24}}>{v}</div></div>
                ))}
              </div>
              <div className="sketch-box p-2">
                <div className="ui xsmall uppercase">Ecosystem coverage by domain</div>
                <div className="row gap-1 mt-2">
                  {[['Prod',38],['Storage',12],['Conversion',18],['Safety',8],['Materials',24],['Education',18],['Policy',8]].map(([n,v])=>(
                    <div key={n} style={{flex:v, height:36, background:'#b14fa6', opacity:0.3+v/40, border:'1px solid #1a1a1a', position:'relative'}}>
                      <span className="ui xsmall" style={{position:'absolute', bottom:2, left:4, color:'#fff', fontSize:9}}>{n}</span>
                    </div>
                  ))}
                </div>
                <div className="ui xsmall muted-text mt-1">⚠ Storage &amp; Safety under-represented — invite targeted users.</div>
              </div>
            </div>
          </div>
        </Browser>
      </Frame>

      <Frame title="Review queue — newly submitted profiles" tag="moderation">
        <Browser title="h2learn.app/admin/review">
          <div className="hand-title" style={{fontSize:20}}>Pending review · 7</div>
          <div className="col gap-2 mt-2">
            {[
              {n:'Tomás Reyes', org:'TU/e', flag:'Subdomain unclear',         act:'Add tag'},
              {n:'Isabel Mora', org:'GreenLab', flag:'Possible duplicate',     act:'Merge?'},
              {n:'Hannes V.',   org:'TNO',  flag:'OK',                          act:'Approve'},
              {n:'Project ELYSE', org:'consortium', flag:'TRL missing',         act:'Request info'},
            ].map((r,i)=>(
              <div key={i} className="sketch-box p-2 row gap-3" style={{alignItems:'center'}}>
                <div className="sketch-box thin" style={{width:34,height:34,borderRadius:17}}/>
                <div className="col flex-1">
                  <div className="hand-title" style={{fontSize:15}}>{r.n} <span className="ui xsmall muted-text">· {r.org}</span></div>
                  <div className="ui xsmall accent2-text">{r.flag}</div>
                </div>
                <Btn>{r.act}</Btn>
                <Btn className="primary">Approve</Btn>
              </div>
            ))}
          </div>
        </Browser>
      </Frame>
    </div>

    <div className="frame-grid cols-2 mt-4">
      <Frame title="Taxonomy management" tag="controlled vocab">
        <Browser title="h2learn.app/admin/taxonomy">
          <div className="row gap-2" style={{alignItems:'flex-start'}}>
            <div className="sketch-box thin p-2" style={{width:160}}>
              <div className="ui xsmall uppercase">Taxonomy tree</div>
              <div className="col gap-1 mt-2 ui xsmall">
                <div>▼ Production</div>
                <div style={{marginLeft:12}}>· PEM</div>
                <div style={{marginLeft:12, color:'var(--accent)'}}>· Alkaline ✓</div>
                <div style={{marginLeft:12}}>· SOEC</div>
                <div>▶ Storage</div>
                <div>▶ Conversion</div>
                <div>▼ Methods</div>
                <div style={{marginLeft:12}}>· LCA</div>
                <div style={{marginLeft:12}}>· TEA</div>
                <div style={{marginLeft:12, fontStyle:'italic'}}>+ add</div>
              </div>
            </div>
            <div className="sketch-box p-2 flex-1">
              <div className="hand-title" style={{fontSize:18}}>Alkaline electrolysis</div>
              <div className="ui xsmall muted-text">Subdomain · 14 contributors</div>
              <div className="col gap-2 mt-2">
                <div className="row gap-2"><span className="ui xsmall bold" style={{width:80}}>Aliases</span><div className="pill-row">{['Alkaline','AEL','Alkaline electrolyzer'].map(t=><Pill key={t} className="dashed">{t} ×</Pill>)}<Pill className="dashed">+ add</Pill></div></div>
                <div className="row gap-2"><span className="ui xsmall bold" style={{width:80}}>Parent</span><Pill>Production</Pill></div>
                <div className="row gap-2"><span className="ui xsmall bold" style={{width:80}}>Cross-link</span><div className="pill-row"><Pill>Materials char.</Pill><Pill>Catalyst design</Pill></div></div>
              </div>
              <div className="row gap-2 mt-2"><Btn>Merge with…</Btn><Btn className="warn">Deprecate</Btn></div>
            </div>
          </div>
        </Browser>
      </Frame>

      <Frame title="Match curation — approve / hide system edges" tag="HITL">
        <Browser title="h2learn.app/admin/matches">
          <div className="row between mb-2"><div className="hand-title" style={{fontSize:20}}>Generated edges · 312 this week</div><Pill>filter: low confidence</Pill></div>
          <div className="col gap-2">
            {[
              {a:'Sara A.', b:'HYDRO-NL', t:'comp 88%', c:0.92, status:'pending'},
              {a:'Bram J.', b:'Liesbeth K.', t:'anti-dup', c:0.71, status:'pending'},
              {a:'Lori D.V.', b:'Iteke v.H.', t:'bridge', c:0.65, status:'flagged'},
              {a:'Frank d.B.', b:'GreenLab', t:'sim 54%', c:0.42, status:'low conf'},
            ].map((r,i)=>(
              <div key={i} className="sketch-box p-2 row gap-3" style={{alignItems:'center'}}>
                <div className="ui small flex-1"><b>{r.a}</b> ↔ <b>{r.b}</b></div>
                <Pill className={r.t.startsWith('comp')?'warn':r.t.startsWith('anti')?'':'muted'}>{r.t}</Pill>
                <span className="ui xsmall">conf {r.c}</span>
                <Pill className={r.status==='flagged'?'warn':'dashed'}>{r.status}</Pill>
                <Btn className="accent">Approve</Btn><Btn>Hide</Btn>
              </div>
            ))}
          </div>
          <Note style={{marginTop:12}}>Approval pins an edge. Hidden edges are removed from public graph but kept for audit.</Note>
        </Browser>
      </Frame>
    </div>
  </div>
);
window.AdminTab = AdminTab;