// Workspace.jsx — methodology picker + registry for the Pamoja Field app.
//
// The Field Agent is a role (the human who walks the site).
// The Pamoja Field app is the container they use.
// Methodologies are the kinds of work inside that container —
// Cookstoves today, with more methodologies plugging in later
// (Reforestation, biochar, Article 6, metered cooking fuel, …).
//
// User-facing strings call the active surface a "workspace" per
// the spec USER_GUIDE.md ("You can change workspaces any time").
// Code internals use "methodology" terminology so the architecture
// is unambiguous: the registry catalogs methodologies; a workspace
// is the rendered view of one methodology at a time.

const METHODOLOGIES = [
  {
    id: 'reforestation',
    name: 'Reforestation',
    sub: 'Trees, bamboo, agroforestry, forest restoration',
    accent: '#2BC48A',
    tint: 'rgba(43,196,138,0.12)',
    border: 'rgba(43,196,138,0.32)',
    appKey: 'ReforestationApp', // resolved via window[appKey] in PamojaField.jsx
    iconPath: 'M11 20A7 7 0 0 1 4 13 7 7 0 0 1 11 6h9v3a11 11 0 0 1-9 11z M2 22c0-7 5-12 12-12',
  },
  {
    id: 'cookstoves',
    name: 'Cookstoves',
    sub: 'Stove installs, fuel checks, household visits',
    accent: '#D97706',
    tint: 'rgba(217,119,6,0.12)',
    border: 'rgba(217,119,6,0.32)',
    appKey: 'CookstovesApp', // resolved via window[appKey] in PamojaField.jsx
    // Stove/flame stroke
    iconPath: 'M12 2c1 2 3 3 3 6a3 3 0 0 1-6 0c0-3 2-4 3-6z M5 14h14v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z M9 14V11a3 3 0 0 1 6 0v3',
  },
];

const methodologyById = (id) => METHODOLOGIES.find(m => m.id === id) || METHODOLOGIES[0];

// ─────────────────────────────────────────────────────────
// FIRST-LAUNCH METHODOLOGY PICKER
// ─────────────────────────────────────────────────────────
function MethodologyPicker({ initial, onPick, agentName = 'Mary', greeting = 'Good morning' }) {
  const [selected, setSelected] = React.useState(initial || null);
  const [remember, setRemember] = React.useState(true);

  return (
    <div style={{position:'absolute',inset:0,background:'#022C28',display:'flex',flexDirection:'column',zIndex:100,overflow:'hidden'}}>
      {/* Subtle gold glow background */}
      <div style={{position:'absolute',inset:0,background:'radial-gradient(ellipse 60% 40% at 80% 10%, rgba(244,195,0,0.12), transparent 70%)',pointerEvents:'none'}}/>

      <div style={{position:'relative',padding:'34px 24px 14px',display:'flex',flexDirection:'column',gap:6}}>
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <div style={{width:44,height:44,borderRadius:'50%',background:'#F4C300',color:'#022C28',display:'flex',alignItems:'center',justifyContent:'center',fontWeight:900,fontSize:16}}>{agentName.split(' ').map(s=>s[0]).join('').toUpperCase()}</div>
          <div>
            <div style={{fontSize:11,fontWeight:800,letterSpacing:'0.12em',color:'#F4C300',fontFamily:"'JetBrains Mono', monospace"}}>{greeting.toUpperCase()}</div>
            <div style={{fontSize:18,fontWeight:900,color:'#fff',letterSpacing:'-0.01em',marginTop:2}}>{agentName}</div>
          </div>
        </div>
        <div style={{fontSize:22,fontWeight:900,color:'#fff',letterSpacing:'-0.02em',lineHeight:1.2,marginTop:18}}>What work are you doing today?</div>
        <div style={{fontSize:13,color:'rgba(255,255,255,0.65)',marginTop:4,lineHeight:1.45}}>Pick one. You can change it any time from your profile.</div>
      </div>

      <div style={{position:'relative',flex:1,overflowY:'auto',padding:'14px 18px 4px',display:'flex',flexDirection:'column',gap:12}}>
        {METHODOLOGIES.map(m => {
          const sel = selected === m.id;
          return (
            <button key={m.id} onClick={()=>setSelected(m.id)}
              style={{background: sel ? m.tint : 'rgba(255,255,255,0.04)',border:`1.5px solid ${sel ? m.accent : 'rgba(255,255,255,0.1)'}`,borderRadius:14,padding:'18px',display:'flex',alignItems:'center',gap:14,cursor:'pointer',fontFamily:'inherit',textAlign:'left',transition:'all .15s ease',color:'#fff'}}>
              <div style={{width:56,height:56,borderRadius:12,background: sel ? m.accent : 'rgba(255,255,255,0.06)',color: sel ? '#022C28' : m.accent,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,transition:'all .15s ease'}}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d={m.iconPath}/></svg>
              </div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:11,fontWeight:800,letterSpacing:'0.12em',color: sel ? m.accent : 'rgba(255,255,255,0.55)',fontFamily:"'JetBrains Mono', monospace"}}>{m.name.toUpperCase()}</div>
                <div style={{fontSize:14,fontWeight:700,color:'#fff',marginTop:4,lineHeight:1.4}}>{m.sub}</div>
              </div>
              <div style={{width:24,height:24,borderRadius:'50%',border:`2px solid ${sel ? m.accent : 'rgba(255,255,255,0.25)'}`,display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,background: sel ? m.accent : 'transparent'}}>
                {sel && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#022C28" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>}
              </div>
            </button>
          );
        })}
      </div>

      <div style={{position:'relative',padding:'14px 18px 24px',display:'flex',flexDirection:'column',gap:12}}>
        <button onClick={()=>setRemember(r=>!r)} style={{display:'flex',alignItems:'center',gap:10,background:'transparent',border:'none',padding:'6px 4px',cursor:'pointer',fontFamily:'inherit'}}>
          <div style={{width:22,height:22,borderRadius:6,border:`2px solid ${remember?'#F4C300':'rgba(255,255,255,0.4)'}`,background:remember?'#F4C300':'transparent',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
            {remember && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#022C28" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>}
          </div>
          <div style={{fontSize:13,fontWeight:700,color:'#fff',textAlign:'left'}}>Remember this — I usually do this work</div>
        </button>

        <button onClick={()=>selected && onPick(selected, remember)} disabled={!selected}
          style={{padding:'16px',background: selected ? '#F4C300':'rgba(255,255,255,0.08)',color: selected ? '#022C28':'rgba(255,255,255,0.4)',border:'none',borderRadius:14,fontWeight:900,fontSize:16,cursor: selected?'pointer':'not-allowed',fontFamily:'inherit',letterSpacing:'-0.01em'}}>
          {selected ? `Continue · ${methodologyById(selected).name}` : 'Choose your work'}
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// MID-SHIFT METHODOLOGY SWITCHER (bottom sheet)
// ─────────────────────────────────────────────────────────
function MethodologySwitcher({ open, current, onClose, onPick }) {
  if (!open) return null;
  return (
    <div style={{position:'absolute',inset:0,zIndex:60,display:'flex',flexDirection:'column',justifyContent:'flex-end',background:'rgba(2,28,24,0.55)'}} onClick={onClose}>
      <div onClick={(e)=>e.stopPropagation()} style={{background:'#fff',borderTopLeftRadius:18,borderTopRightRadius:18,display:'flex',flexDirection:'column',overflow:'hidden',animation:'sheetIn .2s ease-out'}}>
        <div style={{padding:'10px 0 4px',display:'flex',justifyContent:'center'}}>
          <div style={{width:42,height:4,borderRadius:2,background:'#D1D5DB'}}/>
        </div>
        <div style={{padding:'8px 18px 14px',borderBottom:'1px solid #F3F4F6'}}>
          <div style={{fontSize:16,fontWeight:900,color:'#022C28',letterSpacing:'-0.01em'}}>Switch your work</div>
          <div style={{fontSize:12,color:'#6B7280',marginTop:2}}>Your queue, route, and capture screens will change.</div>
        </div>
        <div style={{padding:'8px 14px 18px',display:'flex',flexDirection:'column',gap:8}}>
          {METHODOLOGIES.map(m => {
            const sel = current === m.id;
            return (
              <button key={m.id} onClick={()=>{ if (!sel) onPick(m.id); onClose(); }}
                style={{background: sel ? m.tint : '#fff',border:`1.5px solid ${sel ? m.accent : '#E5E7EB'}`,borderRadius:12,padding:'14px',display:'flex',alignItems:'center',gap:12,cursor:'pointer',fontFamily:'inherit',textAlign:'left'}}>
                <div style={{width:42,height:42,borderRadius:10,background: m.accent,color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d={m.iconPath}/></svg>
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:14,fontWeight:900,color:'#022C28',letterSpacing:'-0.01em',display:'flex',alignItems:'center',gap:6}}>
                    {m.name}
                    {sel && <span style={{fontSize:9,fontWeight:800,letterSpacing:'0.08em',padding:'2px 6px',borderRadius:3,background: m.accent,color:'#fff',fontFamily:"'JetBrains Mono', monospace"}}>CURRENT</span>}
                  </div>
                  <div style={{fontSize:12,color:'#6B7280',marginTop:2,lineHeight:1.4}}>{m.sub}</div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
      <style>{`@keyframes sheetIn { from { transform: translateY(100%) } to { transform: translateY(0) } }`}</style>
    </div>
  );
}

Object.assign(window, { METHODOLOGIES, methodologyById, MethodologyPicker, MethodologySwitcher });