// Memory screen — agent knowledge base browser

const MEM_TYPES = {
  episodic:   { color: 'var(--accent)',  label: 'Episodic',   icon: '🔵' },
  semantic:   { color: 'var(--cyan)',    label: 'Semantic',   icon: '🟣' },
  procedural: { color: 'var(--emerald)', label: 'Procedural', icon: '🟢' },
  world:      { color: 'var(--amber)',   label: 'World State',icon: '🟡' },
};

const MEM_ITEMS = [
  { id: 'mem_a1b2c3d4', type: 'procedural', title: 'Pause campaign when CPA > 2x target', preview: 'When CPA exceeds target by 2x for 6h rolling, pause and alert growth-ops.', scope: 'Campaign', source: 'System', conf: 0.92, vec: true, ago: '12m', tags: ['ppc', 'anomaly', 'playbook'] },
  { id: 'mem_e5f6g7h8', type: 'episodic', title: 'Q1 Brand campaign underperformed on mobile', preview: 'Mobile CTR 0.34% (benchmark 1.2%) — creative iteration C2 recovered to 1.6%.', scope: 'Campaign', source: 'Agent', conf: 0.84, vec: true, ago: '2h', tags: ['postmortem', 'creative'] },
  { id: 'mem_i9j0k1l2', type: 'semantic', title: 'Dutch Black Friday starts Nov 20 — treat as tier-1', preview: 'NL market peaks start 2 weeks earlier than US. Shift prospecting budget Nov 6.', scope: 'Global', source: 'User', conf: 0.78, vec: true, ago: '1d', tags: ['calendar', 'seo', 'nl'] },
  { id: 'mem_m3n4o5p6', type: 'world', title: 'iOS 18 ATT consent rate dropped to 24%', preview: 'Post-update, cross-app tracking opt-in dropped 8pp. Model recalibration active.', scope: 'Global', source: 'System', conf: 0.95, vec: true, ago: '3d', tags: ['privacy', 'ios'] },
  { id: 'mem_q7r8s9t0', type: 'procedural', title: 'Referral trigger at NPS ≥ 9 + active 30d', preview: 'Show G2 review modal with 2-step flow when both gates true.', scope: 'Segment', source: 'System', conf: 0.88, vec: true, ago: '5d', tags: ['referral', 'g2'] },
  { id: 'mem_u1v2w3x4', type: 'semantic', title: 'GPT-4o best for complex attribution queries', preview: 'Switch to gpt-4o when prompt >1.5k tokens OR multi-hop reasoning detected.', scope: 'Global', source: 'Agent', conf: 0.71, vec: true, ago: '1w', tags: ['llm', 'routing'] },
  { id: 'mem_y5z6a7b8', type: 'episodic', title: 'Churn cohort: inactive 21+ days in trial', preview: 'Of 842 trial signups in Jan, 312 inactive 21+ days — 89% churn before upgrade.', scope: 'Segment', source: 'System', conf: 0.66, vec: false, ago: '2w', tags: ['churn', 'trial'] },
  { id: 'mem_c9d0e1f2', type: 'world', title: 'Black Friday: GA4 API rate limits drop 40%', preview: 'During Nov 24-27, backoff aggressive. Expect 4hr freshness delay, not 15min.', scope: 'Channel', source: 'System', conf: 0.80, vec: true, ago: '3w', tags: ['ga4', 'ops'] },
];

const MemListItem = ({ item, selected, onClick }) => {
  const t = MEM_TYPES[item.type];
  const confColor = item.conf >= 0.7 ? 'var(--emerald)' : item.conf >= 0.4 ? 'var(--amber)' : 'var(--rose)';
  return (
    <div onClick={onClick} style={{
      padding: '10px 14px', borderBottom: '1px solid var(--border)',
      background: selected ? 'rgba(139,92,246,0.08)' : 'transparent',
      borderLeft: selected ? '3px solid var(--accent)' : '3px solid transparent',
      cursor: 'pointer', display: 'flex', gap: 10, transition: 'background .1s'
    }}>
      <div style={{width: 4, height: 32, borderRadius: 2, background: t.color, flexShrink: 0, marginTop: 2}}/>
      <div style={{flex: 1, minWidth: 0}}>
        <div style={{fontSize: 13, fontWeight: 500, color: 'var(--text-1)', marginBottom: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{item.title}</div>
        <div style={{fontSize: 11, color: 'var(--text-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginBottom: 5}}>{item.preview}</div>
        <div style={{display: 'flex', gap: 4, flexWrap: 'wrap'}}>
          {item.tags.slice(0, 3).map(tg => <span key={tg} className="badge plain" style={{fontSize: 9, padding: '1px 5px'}}>{tg}</span>)}
        </div>
      </div>
      <div style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, flexShrink: 0}}>
        <div style={{fontSize: 16, fontWeight: 600, color: confColor, fontFamily: 'var(--mono)'}}>{item.conf.toFixed(2)}</div>
        {item.vec && <span className="badge cyan" style={{fontSize: 9, padding: '1px 5px'}}>Vec</span>}
        <span style={{fontSize: 10, color: 'var(--text-4)'}}>{item.ago}</span>
      </div>
    </div>
  );
};

const ConfidenceMeter = ({ value }) => {
  const pct = value * 100;
  const color = value >= 0.7 ? 'var(--emerald)' : value >= 0.4 ? 'var(--amber)' : 'var(--rose)';
  return (
    <div>
      <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 6}}>
        <span style={{fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em'}}>Confidence Score</span>
        <span style={{fontSize: 16, fontWeight: 700, color, fontFamily: 'var(--mono)'}}>{value.toFixed(2)}</span>
      </div>
      <div style={{height: 8, borderRadius: 4, background: 'linear-gradient(90deg, rgba(244,63,94,0.2), rgba(245,158,11,0.2), rgba(16,185,129,0.2))', position: 'relative', overflow: 'hidden'}}>
        <div style={{position: 'absolute', left: 0, top: 0, bottom: 0, width: pct + '%', background: `linear-gradient(90deg, var(--rose), var(--amber), var(--emerald))`, clipPath: `inset(0 0 0 0)`}}/>
        <div style={{position: 'absolute', left: pct + '%', top: -2, bottom: -2, width: 3, background: '#fff', transform: 'translateX(-50%)', borderRadius: 2}}/>
      </div>
      <div style={{display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 10, color: 'var(--text-4)'}}>
        <span>0.0 — Uncertain</span><span>1.0 — Highly Confident</span>
      </div>
    </div>
  );
};

const VectorBars = () => {
  const bars = Array.from({length: 20}, (_, i) => 0.3 + Math.abs(Math.sin(i * 0.7 + 1.2)) * 0.6);
  return (
    <div style={{display: 'flex', gap: 2, alignItems: 'flex-end', height: 60, padding: 10, background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 6}}>
      {bars.map((v, i) => (
        <div key={i} style={{flex: 1, height: (v * 100) + '%', background: `linear-gradient(180deg, var(--accent), var(--cyan))`, borderRadius: 1, opacity: 0.6 + v * 0.4}}/>
      ))}
    </div>
  );
};

const mapMemItem = (m, idx) => ({
  id: m.memory_id || m.id || ('mem_' + idx),
  type: m.memory_type || m.type || 'episodic',
  title: m.summary || m.title || 'Memory item',
  preview: m.content || m.preview || '',
  scope: m.scope || 'Global',
  source: m.source || 'System',
  conf: typeof m.confidence_score === 'number' ? m.confidence_score : (typeof m.conf === 'number' ? m.conf : 0.75),
  vec: m.embedding_id != null || m.vec || false,
  ago: m.created_at ? (() => { const s = Math.round((Date.now() - new Date(m.created_at).getTime()) / 1000); return s < 3600 ? Math.round(s/60)+'m ago' : s < 86400 ? Math.round(s/3600)+'h ago' : Math.round(s/86400)+'d ago'; })() : (m.ago || 'recently'),
  tags: Array.isArray(m.tags) ? m.tags : [],
});

const MemoryScreen = () => {
  const [items, setItems] = React.useState(MEM_ITEMS);
  const [q, setQ] = React.useState('');
  const [sel, setSel] = React.useState(MEM_ITEMS[0].id);
  const [tab, setTab] = React.useState('content');
  const [typeFilters, setTypeFilters] = React.useState({episodic: true, semantic: true, procedural: true, world: true});
  const [loading, setLoading] = React.useState(false);
  const [apiLoaded, setApiLoaded] = React.useState(false);
  const [scopeFilter, setScopeFilter] = React.useState('All');
  const [showWriteModal, setShowWriteModal] = React.useState(false);
  const [writeForm, setWriteForm] = React.useState({type:'episodic',title:'',content:'',tags:'',scope:'Global'});
  const [writeToast, setWriteToast] = React.useState(null);
  const [purged, setPurged] = React.useState(false);
  const [editItem, setEditItem] = React.useState(null);
  const [addingTag, setAddingTag] = React.useState(false);
  const [tagInput, setTagInput] = React.useState('');

  const fetchMemories = (query) => {
    setLoading(true);
    arFetch('/v1/memory/search?q=' + encodeURIComponent(query || '') + '&limit=50')
      .then(d => {
        const arr = Array.isArray(d) ? d : (d && Array.isArray(d.memories) ? d.memories : []);
        if (arr.length > 0) { const mapped = arr.map(mapMemItem); setItems(mapped); setSel(mapped[0].id); setApiLoaded(true); }
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  };

  React.useEffect(() => { fetchMemories(''); }, []);

  const handleSearch = (val) => {
    setQ(val);
    if (val.length === 0 || val.length > 2) fetchMemories(val);
  };

  const item = items.find(i => i.id === sel) || items[0] || MEM_ITEMS[0];
  const filtered = items.filter(i => typeFilters[i.type]
    && (scopeFilter === 'All' || i.scope === scopeFilter)
    && (!q || i.title.toLowerCase().includes(q.toLowerCase()) || i.preview.toLowerCase().includes(q.toLowerCase())));
  const t = MEM_TYPES[item.type] || MEM_TYPES.episodic;

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 16, height: '100%'}}>
      {/* Header */}
      <div style={{display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between'}}>
        <div>
          <div style={{fontSize: 11, color: 'var(--text-4)', fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6}}>Platform / Memory</div>
          <div style={{fontSize: 24, fontWeight: 700, letterSpacing: '-0.02em'}}>Agent Memory{!apiLoaded && <span className="badge plain" style={{fontSize: 10, marginLeft: 8, verticalAlign: 'middle'}}>demo data</span>}</div>
          <div style={{fontSize: 13, color: 'var(--text-3)', marginTop: 2}}>The knowledge base that makes every AI decision smarter</div>
        </div>
        <div style={{display: 'flex', gap: 8, alignItems: 'center'}}>
          <span className="badge plain" style={{fontSize: 11}}>147 items · 89 embedded · 2 expired</span>
          <button className="btn" onClick={() => { window.alert('Seeding 5 canonical playbooks into agent memory…\n\n✅ Playbooks seeded successfully (demo mode — no API call made).'); }}>Seed Playbooks</button>
          <button className="btn primary" onClick={() => setShowWriteModal(true)}><Icon name="plus" size={12}/>Write Memory</button>
        </div>
      </div>

      {/* Stats strip */}
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12}}>
        <div className="card" style={{padding: 14}}>
          <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10}}>Memory Types</div>
          <div style={{display: 'flex', flexDirection: 'column', gap: 6}}>
            {Object.entries(MEM_TYPES).map(([k, v]) => {
              const c = MEM_ITEMS.filter(i => i.type === k).length;
              return (
                <div key={k} style={{display: 'flex', alignItems: 'center', gap: 8, fontSize: 11}}>
                  <div style={{width: 8, height: 8, borderRadius: 2, background: v.color}}/>
                  <span style={{flex: 1, color: 'var(--text-2)'}}>{v.label}</span>
                  <span className="mono" style={{color: 'var(--text-1)'}}>{c * 20 + 14}</span>
                </div>
              );
            })}
          </div>
        </div>
        <div className="card" style={{padding: 14}}>
          <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10}}>Total Items</div>
          <div style={{fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em'}}>147</div>
          <div style={{fontSize: 11, color: 'var(--emerald)', marginTop: 2}}>+12 this week</div>
        </div>
        <div className="card" style={{padding: 14}}>
          <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10}}>Embedding Coverage</div>
          <div style={{fontSize: 13, color: 'var(--text-1)', marginBottom: 8}}>89 of 147 indexed</div>
          <div className="progress" style={{marginBottom: 8}}><div style={{width: '60.5%', background: 'var(--cyan)'}}/></div>
          <a style={{fontSize: 11, color: 'var(--cyan)', cursor: 'pointer'}}>Enable OpenAI key to embed all →</a>
        </div>
        <div className="card" style={{padding: 14}}>
          <div style={{fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10}}>Expired Items</div>
          <div style={{fontSize: 32, fontWeight: 700, color: 'var(--amber)', letterSpacing: '-0.02em'}}>2</div>
          <button className="btn ghost" style={{color: purged ? 'var(--emerald)' : 'var(--amber)', fontSize: 11, padding: '4px 0', marginTop: 4}} onClick={() => { if (!purged && window.confirm('Permanently delete 2 expired memory items?')) { setPurged(true); setItems(prev => prev.filter(i => i.conf > 0.5)); setWriteToast('2 expired items purged.'); setTimeout(() => setWriteToast(null), 3000); } }}>{purged ? '✓ Purged' : 'Purge Expired →'}</button>
        </div>
      </div>

      {/* Two-panel split */}
      <div style={{display: 'grid', gridTemplateColumns: '340px 1fr', gap: 14, flex: 1, minHeight: 500}}>
        {/* Left */}
        <div className="card" style={{padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden'}}>
          <div style={{padding: 14, borderBottom: '1px solid var(--border)'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 8, marginBottom: 12}}>
              <Icon name="search" size={12} style={{color: 'var(--text-3)'}}/>
              <input value={q} onChange={e => handleSearch(e.target.value)} placeholder="Search memory... (semantic + keyword)" style={{flex: 1, background: 'transparent', border: 'none', color: 'var(--text-1)', fontSize: 12, outline: 'none'}}/>
            </div>
            <div style={{fontSize: 10, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8}}>Type</div>
            <div style={{display: 'flex', flexWrap: 'wrap', gap: 4}}>
              {Object.entries(MEM_TYPES).map(([k, v]) => (
                <button key={k} onClick={() => setTypeFilters(f => ({...f, [k]: !f[k]}))} className={`filter-chip ${typeFilters[k]?'active':''}`} style={{borderColor: typeFilters[k] ? v.color : 'var(--border)', color: typeFilters[k] ? v.color : 'var(--text-3)'}}>
                  {v.label}
                </button>
              ))}
            </div>
            <div style={{fontSize: 10, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 12, marginBottom: 8}}>Scope</div>
            <div style={{display: 'flex', flexWrap: 'wrap', gap: 4}}>
              {['All','Global','Channel','Campaign','Segment'].map(sc => (
                <button key={sc} onClick={() => setScopeFilter(sc)} className={`filter-chip ${scopeFilter===sc?'active':''}`}>{sc}</button>
              ))}
            </div>
            <div style={{fontSize: 10, color: 'var(--text-4)', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 12, marginBottom: 6}}>Confidence</div>
            <div style={{height: 4, borderRadius: 4, background: 'linear-gradient(90deg, var(--rose), var(--amber), var(--emerald))', position: 'relative'}}>
              <div style={{position: 'absolute', left: '20%', top: -3, width: 10, height: 10, background: '#fff', borderRadius: '50%', border: '2px solid var(--bg-2)'}}/>
              <div style={{position: 'absolute', right: 0, top: -3, width: 10, height: 10, background: '#fff', borderRadius: '50%', border: '2px solid var(--bg-2)'}}/>
            </div>
          </div>
          <div style={{padding: '8px 14px', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-3)', borderBottom: '1px solid var(--border)'}}>
            <span>Sorted: Recent</span>
            <span>Showing {filtered.length} of 147</span>
          </div>
          <div style={{flex: 1, overflow: 'auto'}}>
            {filtered.map(it => <MemListItem key={it.id} item={it} selected={sel === it.id} onClick={() => setSel(it.id)}/>)}
          </div>
        </div>

        {/* Right */}
        <div className="card" style={{padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden'}}>
          <div style={{padding: 18, borderBottom: '1px solid var(--border)'}}>
            <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10}}>
              <span className="badge" style={{background: `${t.color}22`, color: t.color, borderColor: `${t.color}66`, fontSize: 11, padding: '4px 10px'}}>{t.label}</span>
              <span className="mono" style={{fontSize: 11, color: 'var(--text-3)'}}>{item.id}</span>
              <span style={{fontSize: 11, color: 'var(--text-4)', cursor: 'pointer'}}
                onClick={() => { navigator.clipboard?.writeText(item.id); setWriteToast('✓ ID copied'); setTimeout(() => setWriteToast(null), 2000); }}
                title="Copy memory ID">[Copy]</span>
            </div>
            <div style={{fontSize: 20, fontWeight: 700, letterSpacing: '-0.015em', marginBottom: 10}}>{item.title}</div>
            <div style={{display: 'flex', gap: 8, fontSize: 11, color: 'var(--text-3)', marginBottom: 14}}>
              <span>Scope: <b style={{color: 'var(--text-2)'}}>{item.scope}</b></span><span>·</span>
              <span>Source: <b style={{color: 'var(--text-2)'}}>{item.source}</b></span><span>·</span>
              <span>Created {item.ago} ago</span><span>·</span>
              <span>Expires: <b style={{color: 'var(--text-2)'}}>Never</b></span>
            </div>
            <div style={{display: 'flex', gap: 6, marginBottom: 14}}>
              <button className="btn ghost" style={{fontSize: 11}} onClick={() => setEditItem({...item})}>Edit</button>
              <button className="btn ghost" style={{fontSize: 11, color: 'var(--rose)'}} onClick={() => {
                if (window.confirm('Delete this memory item? This cannot be undone.')) {
                  // FIX: use prev (new array) not stale closure items to select next
                  setItems(prev => {
                    const next = prev.filter(i => i.id !== item.id);
                    setSel(next.find(i => i.id !== item.id)?.id || next[0]?.id || null);
                    return next;
                  });
                  setWriteToast('Memory item deleted'); setTimeout(() => setWriteToast(null), 2500);
                }
              }}>Delete</button>
              <button className="btn ghost" style={{fontSize: 11}} onClick={() => { navigator.clipboard?.writeText(item.id); setWriteToast('✓ ID copied: ' + item.id); setTimeout(() => setWriteToast(null), 2500); }}>Copy ID</button>
              <button className="btn" style={{background: 'var(--cyan)', color: '#001', borderColor: 'var(--cyan)', fontSize: 11, marginLeft: 'auto'}} onClick={() => { fetchMemories(item.title); setTab('neighbors'); }}>Search Similar →</button>
            </div>
            <ConfidenceMeter value={item.conf}/>
          </div>

          <div style={{display: 'flex', borderBottom: '1px solid var(--border)', padding: '0 18px'}}>
            {['content','structured','embeddings','usage','neighbors'].map(tb => (
              <button key={tb} onClick={() => setTab(tb)} style={{padding: '12px 14px', fontSize: 12, fontWeight: 500, color: tab===tb?'var(--text-1)':'var(--text-3)', borderBottom: tab===tb?'2px solid var(--accent)':'2px solid transparent', marginBottom: -1, textTransform: 'capitalize'}}>
                {tb === 'structured' ? 'Structured Data' : tb === 'usage' ? 'Usage History' : tb === 'neighbors' ? 'Semantic Neighbors' : tb}
              </button>
            ))}
          </div>

          <div style={{flex: 1, overflow: 'auto', padding: 18}}>
            {tab === 'content' && (
              <div>
                <div style={{padding: 20, background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 14, lineHeight: 1.7, color: 'var(--text-1)'}}>
                  {item.preview} This memory encodes a learned heuristic extracted from historical campaign performance data. When similar decision contexts arise, the agent uses this memory as grounding evidence, weighted by the confidence score and recency.
                </div>
                <div style={{marginTop: 16}}>
                  <div style={{fontSize: 11, color: 'var(--text-3)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.05em'}}>Tags</div>
                  <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
                    {item.tags.map(tg => <span key={tg} className="badge violet" style={{cursor:'pointer'}} onClick={() => setItems(prev => prev.map(it => it.id === item.id ? {...it, tags: it.tags.filter(t => t !== tg)} : it))}>{tg} ×</span>)}
                    {addingTag ? (
                      <input autoFocus
                        value={tagInput}
                        onChange={e => setTagInput(e.target.value)}
                        onKeyDown={e => {
                          if (e.key === 'Enter' && tagInput.trim()) {
                            setItems(prev => prev.map(it => it.id === item.id ? {...it, tags: [...it.tags, tagInput.trim()]} : it));
                            setTagInput(''); setAddingTag(false);
                          }
                          if (e.key === 'Escape') { setTagInput(''); setAddingTag(false); }
                        }}
                        onBlur={() => { setTagInput(''); setAddingTag(false); }}
                        style={{fontSize:11, padding:'2px 6px', background:'var(--bg-1)', border:'1px solid var(--accent)', borderRadius:12, color:'var(--text-1)', outline:'none', width:80}}
                        placeholder="tag name"
                      />
                    ) : (
                      <span className="badge plain" style={{cursor: 'pointer'}} onClick={() => setAddingTag(true)}>+ add</span>
                    )}
                  </div>
                </div>
              </div>
            )}
            {tab === 'embeddings' && (
              <div>
                <div style={{display: 'flex', gap: 8, marginBottom: 16}}>
                  <span className="badge cyan">Vector Indexed</span>
                  <span className="badge plain">text-embedding-3-small</span>
                  <span className="badge plain">1536 dimensions</span>
                </div>
                <div style={{fontSize: 11, color: 'var(--text-3)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em'}}>Vector preview (first 20 dims)</div>
                <VectorBars/>
                <div style={{fontSize: 10, color: 'var(--text-4)', marginTop: 6}}>Showing 20 of 1536 dimensions</div>
                <div style={{marginTop: 20, fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6}}>Distance distribution</div>
                <div style={{display: 'flex', alignItems: 'flex-end', gap: 2, height: 60}}>
                  {[0.2, 0.35, 0.58, 0.72, 0.85, 0.7, 0.5, 0.35, 0.25, 0.18, 0.12, 0.08].map((v, i) => (
                    <div key={i} style={{flex: 1, height: (v*100)+'%', background: 'var(--accent)', opacity: 0.7, borderRadius: 1}}/>
                  ))}
                </div>
                <div style={{fontSize: 11, color: 'var(--text-2)', marginTop: 10}}><b>Clustered</b> · similar to 12 other memories in this corpus</div>
              </div>
            )}
            {tab === 'neighbors' && (
              <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
                <div style={{fontSize: 11, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4}}>Top 5 semantically similar</div>
                {MEM_ITEMS.filter(i => i.id !== item.id).slice(0, 5).map((n, i) => (
                  <div key={n.id} style={{display: 'flex', gap: 12, padding: 12, background: 'var(--bg-1)', border: '1px solid var(--border)', borderRadius: 8}}>
                    <div style={{fontSize: 18, fontWeight: 700, color: 'var(--accent)', minWidth: 60}}>{(94 - i * 7).toFixed(1)}%</div>
                    <div style={{flex: 1}}>
                      <div style={{display: 'flex', gap: 8, alignItems: 'center', marginBottom: 4}}>
                        <span className="badge" style={{background: `${MEM_TYPES[n.type].color}22`, color: MEM_TYPES[n.type].color, borderColor: `${MEM_TYPES[n.type].color}66`, fontSize: 9}}>{MEM_TYPES[n.type].label}</span>
                      </div>
                      <div style={{fontSize: 13, fontWeight: 500}}>{n.title}</div>
                      <div style={{fontSize: 11, color: 'var(--text-3)', marginTop: 2}}>{n.preview.substring(0, 70)}...</div>
                    </div>
                    <button className="btn ghost" style={{fontSize: 11, alignSelf: 'center'}} onClick={() => setSel(n.id)}>View →</button>
                  </div>
                ))}
              </div>
            )}
            {tab === 'structured' && (
              <div style={{display: 'flex', flexDirection: 'column', gap: 14}}>
                <div>
                  <div style={{fontSize: 11, color: 'var(--text-3)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em'}}>Steps</div>
                  <div className="json-view">
{`[
  { "tool": "channels.pause", "params": { "campaign_id": "{{id}}" } },
  { "tool": "notify.slack",   "params": { "channel": "#growth-ops" } },
  { "tool": "memory.write",   "params": { "type": "episodic", "confidence": 0.9 } }
]`}
                  </div>
                </div>
                <div>
                  <div style={{fontSize: 11, color: 'var(--text-3)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em'}}>Guards</div>
                  <div className="json-view">{`[{ "rule": "spend_daily > 500", "severity": "HIGH" }]`}</div>
                </div>
              </div>
            )}
            {tab === 'usage' && (
              <div>
                <div style={{fontSize: 13, marginBottom: 12, color: 'var(--text-2)'}}>This memory was referenced in <b style={{color: 'var(--text-1)'}}>7 decisions</b></div>
                <table className="data-table">
                  <thead><tr><th>Decision</th><th>Objective</th><th>Similarity</th><th>When</th><th>Status</th></tr></thead>
                  <tbody>
                    {[['Budget reallocation', 'Reduce CPA on Q2 Prospecting', '92%', '2h ago', 'ACCEPTED'],
                      ['Pause campaign', 'Brand Awareness APAC underperforming', '88%', '1d ago', 'ACCEPTED'],
                      ['Alert routing', 'CPA anomaly on Lookalike 1%', '74%', '3d ago', 'PENDING']].map((r, i) => (
                      <tr key={i}>
                        <td style={{color: 'var(--text-1)'}}>{r[0]}</td>
                        <td>{r[1]}</td>
                        <td className="mono" style={{color: 'var(--accent)'}}>{r[2]}</td>
                        <td>{r[3]}</td>
                        <td><StatusBadge status={r[4]}/></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      </div>
      {/* Write Memory Modal */}
      {showWriteModal && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.65)',zIndex:1000,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={() => setShowWriteModal(false)}>
          <div style={{background:'var(--bg-0)',border:'1px solid var(--border)',borderRadius:12,padding:24,width:480,maxWidth:'90vw',maxHeight:'80vh',overflow:'auto'}} onClick={e => e.stopPropagation()}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
              <div style={{fontSize:18,fontWeight:700}}>Write Memory</div>
              <button className="btn ghost" style={{fontSize:11}} onClick={() => setShowWriteModal(false)}>✕</button>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:14}}>
              <div>
                <label style={{fontSize:11,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:6}}>Memory Type</label>
                <select value={writeForm.type} onChange={e => setWriteForm(f=>({...f,type:e.target.value}))} style={{width:'100%',background:'var(--bg-1)',border:'1px solid var(--border)',borderRadius:8,padding:'8px 12px',fontSize:13,color:'var(--text-1)',outline:'none'}}>
                  <option value="episodic">Episodic — past events & postmortems</option>
                  <option value="semantic">Semantic — facts & domain knowledge</option>
                  <option value="procedural">Procedural — playbooks & rules</option>
                  <option value="world">World State — environment conditions</option>
                </select>
              </div>
              <div>
                <label style={{fontSize:11,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:6}}>Title</label>
                <input placeholder="Short descriptive title…" value={writeForm.title} onChange={e => setWriteForm(f=>({...f,title:e.target.value}))} style={{width:'100%',background:'var(--bg-1)',border:'1px solid var(--border)',borderRadius:8,padding:'8px 12px',fontSize:13,color:'var(--text-1)',outline:'none',boxSizing:'border-box'}}/>
              </div>
              <div>
                <label style={{fontSize:11,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:6}}>Content</label>
                <textarea placeholder="What should the agent remember?" value={writeForm.content} onChange={e => setWriteForm(f=>({...f,content:e.target.value}))} rows={5} style={{width:'100%',background:'var(--bg-1)',border:'1px solid var(--border)',borderRadius:8,padding:'8px 12px',fontSize:13,color:'var(--text-1)',outline:'none',resize:'vertical',fontFamily:'var(--sans)',boxSizing:'border-box'}}/>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
                <div>
                  <label style={{fontSize:11,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:6}}>Scope</label>
                  <select value={writeForm.scope} onChange={e => setWriteForm(f=>({...f,scope:e.target.value}))} style={{width:'100%',background:'var(--bg-1)',border:'1px solid var(--border)',borderRadius:8,padding:'8px 12px',fontSize:13,color:'var(--text-1)',outline:'none'}}>
                    <option>Global</option><option>Campaign</option><option>Segment</option><option>Channel</option>
                  </select>
                </div>
                <div>
                  <label style={{fontSize:11,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:6}}>Tags (comma-separated)</label>
                  <input placeholder="e.g. ppc, anomaly" value={writeForm.tags} onChange={e => setWriteForm(f=>({...f,tags:e.target.value}))} style={{width:'100%',background:'var(--bg-1)',border:'1px solid var(--border)',borderRadius:8,padding:'8px 12px',fontSize:13,color:'var(--text-1)',outline:'none',boxSizing:'border-box'}}/>
                </div>
              </div>
              <div style={{display:'flex',gap:8,marginTop:4}}>
                <button className="btn primary" style={{flex:1,justifyContent:'center'}} onClick={() => {
                  if (!writeForm.title.trim() || !writeForm.content.trim()) { window.alert('Title and content are required.'); return; }
                  const newItem = {
                    id: 'mem_' + Math.random().toString(36).slice(2,10),
                    type: writeForm.type, title: writeForm.title, preview: writeForm.content,
                    scope: writeForm.scope, source: 'User', conf: 0.75, vec: false, ago: 'just now',
                    tags: writeForm.tags.split(',').map(t => t.trim()).filter(Boolean),
                  };
                  setItems(prev => [newItem, ...prev]);
                  setSel(newItem.id);
                  setWriteToast('Memory saved successfully.');
                  setTimeout(() => setWriteToast(null), 3000);
                  setShowWriteModal(false);
                  setWriteForm({type:'episodic',title:'',content:'',tags:'',scope:'Global'});
                }}>Save Memory</button>
                <button className="btn ghost" onClick={() => setShowWriteModal(false)}>Cancel</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Edit Memory Modal */}
      {editItem && (
        <div style={{position:'fixed',inset:0,background:'rgba(7,9,15,0.75)',zIndex:200,display:'flex',alignItems:'center',justifyContent:'center'}} onClick={() => setEditItem(null)}>
          <div style={{width:520,background:'var(--bg-2)',border:'1px solid var(--border-strong)',borderRadius:12,padding:24,boxShadow:'0 40px 80px rgba(0,0,0,0.5)'}} onClick={e=>e.stopPropagation()}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
              <div style={{fontSize:16,fontWeight:700}}>Edit Memory Item</div>
              <button className="btn ghost" style={{padding:4}} onClick={() => setEditItem(null)}><Icon name="x" size={14}/></button>
            </div>
            <div style={{marginBottom:12}}>
              <label style={{fontSize:11,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:4}}>Title</label>
              <input value={editItem.title} onChange={e=>setEditItem(v=>({...v,title:e.target.value}))}
                style={{width:'100%',boxSizing:'border-box',padding:'8px 12px',background:'var(--bg-1)',border:'1px solid var(--border)',borderRadius:8,color:'var(--text-1)',fontSize:13,outline:'none'}}/>
            </div>
            <div style={{marginBottom:12}}>
              <label style={{fontSize:11,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:4}}>Content</label>
              <textarea rows={4} value={editItem.preview} onChange={e=>setEditItem(v=>({...v,preview:e.target.value}))}
                style={{width:'100%',boxSizing:'border-box',padding:'8px 12px',background:'var(--bg-1)',border:'1px solid var(--border)',borderRadius:8,color:'var(--text-1)',fontSize:13,outline:'none',resize:'vertical'}}/>
            </div>
            <div style={{marginBottom:16}}>
              <label style={{fontSize:11,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:4}}>Confidence</label>
              <input type="range" min="0" max="1" step="0.01" value={editItem.conf}
                onChange={e=>setEditItem(v=>({...v,conf:parseFloat(e.target.value)}))} style={{width:'100%'}}/>
              <div style={{fontSize:11,color:'var(--text-2)',marginTop:4}}>{editItem.conf.toFixed(2)}</div>
            </div>
            <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
              <button className="btn" onClick={() => setEditItem(null)}>Cancel</button>
              <button className="btn primary" onClick={() => {
                setItems(prev => prev.map(it => it.id === editItem.id ? {...it, title: editItem.title, preview: editItem.preview, conf: editItem.conf} : it));
                setEditItem(null);
                setWriteToast('✓ Memory item updated');
                setTimeout(() => setWriteToast(null), 2500);
              }}>Save Changes</button>
            </div>
          </div>
        </div>
      )}

      {/* Toast notification */}
      {writeToast && (
        <div style={{position:'fixed',bottom:24,right:24,zIndex:2000,padding:'12px 20px',background:'var(--emerald)',color:'#001',borderRadius:8,fontSize:13,fontWeight:500,boxShadow:'0 4px 20px rgba(0,0,0,0.4)'}}>
          ✓ {writeToast}
        </div>
      )}
    </div>
  );
};

window.MemoryScreen = MemoryScreen;