// BeHueman — Detail screens part 2: Profile (rich), Library (rich), Settings (full), Author/Partner panels
const Detail2 = {};

// ================ AUTHOR / MEMBER PROFILE (full, with tabs + send msg) ================
Detail2.AuthorProfile = function AuthorProfile({ authorId, isMe, isAuthor, onBack }) {
  const a = authorId ? getAuthor(authorId) : { id:'me', name: 'Anna Hueman', handle: 'anna.h', verified:isAuthor, avatar:['#E8B872','#E8A4A0'], bio:'Joga, oddech, świadome rodzicielstwo. Czasem pisanie.', followers:'241', role: isAuthor ? 'autor' : 'member' };
  const [tab, setTab] = useState('posts');
  const [following, setFollowing] = useState(false);
  const reels = [
    { id:'r1', title:'Oddech 4-7-8 · 30s', cover:['#E8A4A0','#E8B872'], views:'2.4k' },
    { id:'r2', title:'Yin · krzyż lędźwiowy', cover:['#9FB89A','#1F1B16'], views:'1.1k' },
    { id:'r3', title:'Mantra dnia',           cover:['#B5A0CC','#E8B872'], views:'870'  },
    { id:'r4', title:'Mała ceremonia herbaty', cover:['#1F1B16','#E8B872'], views:'1.8k' },
    { id:'r5', title:'Pranayama dla snu',     cover:['#8AAFC8','#B5A0CC'], views:'3.2k' },
    { id:'r6', title:'Krótka medytacja świtu',cover:['#E8B872','#9FB89A'], views:'490'  },
  ];
  return (
    <div>
      <div style={{height:200, background: `linear-gradient(110deg, ${a.avatar[0]}, ${a.avatar[1]} 50%, var(--hue-sky) 100%)`}}/>
      <div className="page" style={{paddingTop:0, marginTop:-60}}>
        {!isMe && onBack && (
          <button className="btn btn-soft btn-sm mb-12" onClick={onBack} style={{marginTop:12}}><I name="Chevron" size={12}/> Wróć</button>
        )}
        <div className="card" style={{padding:24}}>
          <div className="row gap-16" style={{alignItems:'flex-start'}}>
            <div className="avatar" style={{width:104, height:104, fontSize:34, marginTop:-60, border:'4px solid var(--bg-elev)', background:`linear-gradient(135deg, ${a.avatar[0]}, ${a.avatar[1]})`}}>
              {a.name.split(' ').map(s=>s[0]).slice(0,2).join('')}
            </div>
            <div style={{flex:1, minWidth:0}}>
              <div className="row gap-8" style={{alignItems:'center'}}>
                <h1 style={{fontFamily:'var(--font-serif)', fontWeight:400, fontSize:30, letterSpacing:'-0.02em'}}>{a.name}</h1>
                {a.verified && <VerifiedBadge/>}
                {a.role === 'autor' && <span className="chip chip-hue-rose">Autor</span>}
                {a.role === 'partner' && <span className="chip chip-hue-sky">Partner</span>}
              </div>
              <div className="muted" style={{fontSize:13}}>@{a.handle}</div>
              <div className="mt-12" style={{maxWidth:580, lineHeight:1.55, fontSize:14}}>{a.bio}</div>
              <div className="row gap-16 mt-12" style={{fontSize:13, flexWrap:'wrap'}}>
                <span><b>28</b> postów</span>
                <span><b>{a.followers || '—'}</b> obserwujących</span>
                <span><b>87</b> obserwowanych</span>
                <span className="row gap-4">
                  {domains.slice(0,3).map(d => <span key={d.id} className={`chip chip-hue-${d.hue}`} style={{padding:'2px 8px', fontSize:11}}>{d.label}</span>)}
                </span>
              </div>
            </div>
            <div className="col gap-8" style={{minWidth:200}}>
              {isMe ? (
                <>
                  <button className="btn btn-primary"><I name="User" size={14}/> Edytuj profil</button>
                  <button className="btn btn-ghost"><I name="Share" size={14}/> Udostępnij profil</button>
                </>
              ) : (
                <>
                  <button className={`btn ${following?'btn-soft':'btn-primary'}`} onClick={()=>setFollowing(!following)}>
                    <I name={following?'Check':'Plus'} size={14}/> {following ? 'Obserwujesz' : 'Obserwuj'}
                  </button>
                  <button className="btn btn-accent" onClick={()=>{ window.openChat && window.openChat(a.id); }}>
                    <I name="Send" size={14}/> Wyślij wiadomość
                  </button>
                  <button className="btn btn-ghost btn-sm"><I name="Bell" size={13}/> Powiadom o nowych</button>
                </>
              )}
            </div>
          </div>
        </div>

        <div className="tabs mt-24">
          {[['posts','Posty'],['reels','Reels'],['recs','Polecajki'],['libs','Biblioteki publ.'],['about','O '+ (isMe?'mnie':'autorze')]].map(([k,l]) => (
            <button key={k} className={`tab ${tab===k?'active':''}`} onClick={()=>setTab(k)}>{l}</button>
          ))}
        </div>

        {tab === 'posts' && (
          <div className="card">
            {posts.slice(0,3).map(p => <PostCard key={p.id} post={{...p, authorId: a.id}}/>)}
          </div>
        )}
        {tab === 'reels' && (
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(180px, 1fr))', gap:12}}>
            {reels.map(r => (
              <div key={r.id} className="reel-tile" style={{aspectRatio:'9/14', borderRadius:'var(--r-2)', overflow:'hidden', position:'relative', cursor:'pointer', background: coverBg(r.cover)}}
                   onClick={()=>{ window.__app && window.__app.set({ reelsViewer: { authorId: a.id, index: 0 } }); }}>
                <div style={{position:'absolute', top:8, right:8, background:'rgba(0,0,0,0.45)', color:'white', borderRadius:'var(--r-pill)', padding:'2px 8px', fontSize:10.5, fontWeight:600}}>
                  <I name="Eye" size={10}/> {r.views}
                </div>
                <div style={{position:'absolute', left:0, right:0, bottom:0, padding:'30px 12px 12px', background:'linear-gradient(to top, rgba(0,0,0,0.65), transparent)', color:'white', fontSize:12, fontWeight:600, lineHeight:1.25}}>{r.title}</div>
              </div>
            ))}
          </div>
        )}
        {tab === 'recs' && (
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(220px, 1fr))', gap:14}}>
            {eduTiles.slice(0,8).map(t => <Tile key={t.id} tile={t}/>)}
          </div>
        )}
        {tab === 'libs' && (
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(260px, 1fr))', gap:14}}>
            {[
              { name: 'TCM dla codziennych', count: 12, hues: ['#94463F','#E8B872','#1F1B16','#9FB89A'] },
              { name: 'Joga niedziele',     count: 8,  hues: ['#9FB89A','#E8A4A0','#B5A0CC','#E8B872'] },
              { name: 'Książki o ciszy',    count: 24, hues: ['#1F1B16','#E8B872','#8AAFC8','#9FB89A'] },
            ].map(lib => (
              <div key={lib.name} className="lib-card">
                <div className="lib-stack">{lib.hues.map((h,i) => <div key={i} style={{background:h}}/>)}</div>
                <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500}}>{lib.name}</div>
                <div className="row" style={{justifyContent:'space-between', marginTop:6}}>
                  <span style={{fontSize:12, color:'var(--ink-3)'}}>{lib.count} pozycji · publiczna</span>
                  <button className="btn btn-ghost btn-sm">Subskrybuj</button>
                </div>
              </div>
            ))}
          </div>
        )}
        {tab === 'about' && (
          <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}}>
            <div className="card" style={{padding:24}}>
              <div className="form-group"><div className="form-label">Bio</div><div>{a.bio}</div></div>
              <div className="form-group"><div className="form-label">Lokalizacja</div><div>Kraków, Polska</div></div>
              <div className="form-group"><div className="form-label">Praktykuje od</div><div>2014 (12 lat)</div></div>
              <div className="form-group"><div className="form-label">Linki</div>
                <div className="row gap-8" style={{flexWrap:'wrap', marginTop:6}}>
                  <span className="chip"><I name="Globe" size={11}/> hannawojcik.pl</span>
                  <span className="chip"><I name="Link" size={11}/> Substack · Hanna pisze</span>
                </div>
              </div>
              <div className="form-group"><div className="form-label">Wideo intro</div>
                <div style={{aspectRatio:'16/9', background:'linear-gradient(135deg, #1F1B16, #94463F)', borderRadius:'var(--r-2)', display:'grid', placeItems:'center', color:'white'}}>▷ 1:24</div>
              </div>
            </div>
            <div className="col gap-16">
              <div className="card" style={{padding:18}}>
                <div className="section-eyebrow mb-12">Specjalizacje</div>
                <div className="row gap-8" style={{flexWrap:'wrap'}}>
                  {['TCM','Pranayama','Yin yoga','Święta geometria','Cykl miesięczny','Sen'].map(t => (
                    <span key={t} className="chip">{t}</span>
                  ))}
                </div>
              </div>
              <div className="card" style={{padding:18}}>
                <div className="section-eyebrow mb-12">Współpraca</div>
                <div className="muted" style={{fontSize:12.5, lineHeight:1.55}}>
                  Otwarta na wywiady i podcasty. Konsultacje TCM po wcześniejszym kontakcie.
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

// ================ LIBRARY (rich): system, custom, purchases, create/edit ================
Detail2.LibraryRich = function LibraryRich({ phase }) {
  const [section, setSection] = useState('all');
  const [editing, setEditing] = useState(null);
  const [creating, setCreating] = useState(false);
  const [activeLib, setActiveLib] = useState(null);

  const systemLibs = [
    { id:'sys-read',  name: 'Do przeczytania', count: 14, hues: ['#E8A4A0','#E8B872','#9FB89A','#8AAFC8'], system: true, icon:'Bookmark' },
    { id:'sys-fav',   name: 'Ulubione', count: 8, hues: ['#8AAFC8','#B5A0CC','#E8A4A0','#E8B872'], system: true, icon:'Heart' },
    { id:'sys-watch', name: 'Obejrzane', count: 32, hues: ['#9FB89A','#1F1B16','#B5A0CC','#E8A4A0'], system: true, icon:'Eye' },
    { id:'sys-events',name: 'Nadchodzące wydarzenia', count: 3, hues: ['#E8B872','#9FB89A','#E8A4A0','#B5A0CC'], system: true, icon:'Calendar' },
  ];
  const customLibs = [
    { id:'l1', name: 'Święta geometria', count: 5, hues: ['#1F1B16','#B5A0CC','#E8B872','#94463F'], pub:false, color:'rose' },
    { id:'l2', name: 'Fizyka kwantowa',  count: 12, hues: ['#8AAFC8','#1F1B16','#B5A0CC','#E8A4A0'], pub:true, color:'sky' },
    { id:'l3', name: 'Joga rano',        count: 7, hues: ['#E8B872','#9FB89A','#E8A4A0','#B5A0CC'], pub:false, color:'amber' },
    { id:'l4', name: 'Bio-dynamika dziecka', count: 4, hues: ['#9FB89A','#B5A0CC','#E8A4A0','#1F1B16'], pub:false, color:'sage' },
  ];
  const purchases = [
    { id:'pur1', kind:'Kurs',  title:'8 tygodni medytacji uważności', author:'J. Kabat-Zinn', date:'14 mar 2026', price:'180 zł', cover:['#9FB89A','#1F1B16'], status:'aktywny' },
    { id:'pur2', kind:'Książka', title:'Kobiety, które biegają z wilkami', author:'C. P. Estés', date:'2 lut 2026', price:'68 zł', cover:['#94463F','#E8B872'], status:'pobrana' },
    { id:'pur3', kind:'Wydarzenie', title:'Yin yoga · Studio Mokshana', author:'Studio Mokshana', date:'11 maj 2026', price:'120 zł', cover:['#9FB89A','#E8A4A0'], status:'nadchodzące' },
    { id:'pur4', kind:'Produkt', title:'Olej z czarnuszki', author:'Agroturystyka Pasieka', date:'21 kwi 2026', price:'58 zł', cover:['#9FB89A','#1F1B16'], status:'wysłany' },
  ];
  const sections = [
    { id:'all',     label:'Wszystko' },
    { id:'system',  label:'Domyślne' },
    { id:'custom',  label:'Twoje biblioteki' },
    { id:'purchases', label:'Zakupy' },
  ];

  const renderLibCard = (lib, custom) => (
    <div key={lib.id} className="lib-card" onClick={()=>setActiveLib(lib)} style={{cursor:'pointer'}}>
      <div className="lib-stack">
        {lib.hues.map((h,i) => <div key={i} style={{background:h}}/>)}
      </div>
      <div className="row" style={{justifyContent:'space-between', alignItems:'flex-start'}}>
        <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500}}>{lib.name}</div>
        {custom && (
          <button className="icon-btn" style={{width:28, height:28, border:'none', background:'transparent'}}
                  onClick={(e)=>{e.stopPropagation(); setEditing(lib);}}>
            <I name="More" size={14}/>
          </button>
        )}
      </div>
      <div className="row" style={{justifyContent:'space-between', marginTop:6}}>
        <span style={{fontSize:12, color:'var(--ink-3)'}}>{lib.count} pozycji</span>
        {lib.system && <span style={{fontSize:11, color:'var(--ink-4)'}}>systemowa</span>}
        {lib.pub && <span className="chip chip-hue-sage active" style={{fontSize:10, padding:'1px 7px'}}>publiczna</span>}
      </div>
    </div>
  );

  return (
    <div className="page">
      <PageHeader
        eyebrow="Twoja biblioteka"
        title="Wszystko, co zachowałaś"
        subtitle="Działają jak playlisty. Posty, polecajki, kursy, wydarzenia — w Twoich kolekcjach."
        ff={phase}
        action={<button className="btn btn-accent" onClick={()=>setCreating(true)}><I name="Plus" size={14}/> Nowa biblioteka</button>}
      />
      <div className="tabs">
        {sections.map(s => (
          <button key={s.id} className={`tab ${section===s.id?'active':''}`} onClick={()=>setSection(s.id)}>{s.label}</button>
        ))}
      </div>

      {(section==='all' || section==='system') && (
        <>
          <div className="section-eyebrow mb-12" style={{marginTop:8}}>Domyślne · automatyczne</div>
          <div className="lib-grid mb-24">
            {systemLibs.map(l => renderLibCard(l, false))}
          </div>
        </>
      )}
      {(section==='all' || section==='custom') && (
        <>
          <div className="section-eyebrow mb-12">Twoje biblioteki</div>
          <div className="lib-grid mb-24">
            {customLibs.map(l => renderLibCard(l, true))}
            <div className="lib-card" style={{display:'grid', placeItems:'center', cursor:'pointer', minHeight:200, border:'2px dashed var(--line)', background:'transparent'}}
                 onClick={()=>setCreating(true)}>
              <div style={{textAlign:'center', color:'var(--ink-3)'}}>
                <I name="Plus" size={28}/>
                <div style={{fontSize:13, fontWeight:600, marginTop:8}}>Nowa biblioteka</div>
              </div>
            </div>
          </div>
        </>
      )}
      {(section==='all' || section==='purchases') && (
        <>
          <div className="row mb-12" style={{justifyContent:'space-between', alignItems:'center'}}>
            <div className="section-eyebrow">Zakupy</div>
            <span className="muted" style={{fontSize:12}}>4 zakupy · 426 zł łącznie</span>
          </div>
          <div className="card">
            {purchases.map((p,i) => (
              <div key={p.id} className="row" style={{padding:'16px 20px', borderTop:i?'1px solid var(--line-soft)':'', gap:16, alignItems:'center'}}>
                <div style={{width:56, height:56, borderRadius:'var(--r-2)', background: coverBg(p.cover), flexShrink:0}}/>
                <div style={{flex:1, minWidth:0}}>
                  <div className="row gap-8 mb-4">
                    <span className="chip" style={{fontSize:10, padding:'1px 7px'}}>{p.kind}</span>
                    <span className="chip chip-hue-sage active" style={{fontSize:10, padding:'1px 7px'}}>{p.status}</span>
                  </div>
                  <div style={{fontWeight:600, fontSize:14}}>{p.title}</div>
                  <div className="muted" style={{fontSize:12, marginTop:2}}>{p.author} · {p.date}</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:18, fontWeight:500}}>{p.price}</div>
                  <button className="btn btn-ghost btn-sm" style={{marginTop:4}}>Faktura</button>
                </div>
                <button className="btn btn-soft btn-sm">Otwórz</button>
              </div>
            ))}
          </div>
        </>
      )}

      {/* Library detail modal */}
      {activeLib && (
        <Modal title={activeLib.name} wide onClose={()=>setActiveLib(null)} footer={
          <>
            {!activeLib.system && <button className="btn btn-ghost" onClick={()=>{setEditing(activeLib); setActiveLib(null);}}>Edytuj</button>}
            <button className="btn btn-soft"><I name="Share" size={13}/> Udostępnij</button>
            <button className="btn btn-accent">Otwórz pełny widok</button>
          </>
        }>
          <div className="row gap-16 mb-16">
            <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', width:96, height:96, gap:2, borderRadius:'var(--r-2)', overflow:'hidden'}}>
              {activeLib.hues.map((h,i) => <div key={i} style={{background:h}}/>)}
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:13, color:'var(--ink-3)'}}>{activeLib.count} pozycji {activeLib.system && '· systemowa'} {activeLib.pub && '· publiczna'}</div>
              <div className="muted mt-4" style={{fontSize:12.5, lineHeight:1.55}}>Domyślna biblioteka jest tworzona automatycznie. Możesz ją czyścić, ale nie usunąć.</div>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(180px, 1fr))', gap:12}}>
            {eduTiles.slice(0, Math.min(activeLib.count,6)).map(t => <Tile key={t.id} tile={t}/>)}
          </div>
        </Modal>
      )}

      {/* Edit modal */}
      {editing && (
        <Modal title={`Edytuj · ${editing.name}`} onClose={()=>setEditing(null)} footer={
          <>
            <button className="btn btn-ghost" style={{color:'var(--accent)'}}>Usuń bibliotekę</button>
            <div style={{flex:1}}/>
            <button className="btn btn-soft" onClick={()=>setEditing(null)}>Anuluj</button>
            <button className="btn btn-accent" onClick={()=>setEditing(null)}>Zapisz</button>
          </>
        }>
          <div className="form-group"><div className="form-label">Nazwa</div><input className="input" defaultValue={editing.name}/></div>
          <div className="form-group"><div className="form-label">Opis (opcjonalnie)</div><textarea className="textarea" rows={2} placeholder="Dla Ciebie i ewentualnie subskrybentów"/></div>
          <div className="form-group"><div className="form-label">Kolor okładki</div>
            <div className="row gap-8">{['rose','amber','sage','sky','violet'].map(c => (
              <button key={c} className={`chip chip-hue-${c} ${c===editing.color?'active':''}`}>{c}</button>
            ))}</div>
          </div>
          <div className="form-group">
            <div className="row" style={{justifyContent:'space-between'}}>
              <div><div className="form-label">Publiczna biblioteka</div><div className="muted" style={{fontSize:12}}>Inni mogą subskrybować i widzieć Twoje dodania.</div></div>
              <Toggle on={editing.pub} onChange={()=>{}}/>
            </div>
          </div>
          <div className="form-group">
            <div className="row" style={{justifyContent:'space-between'}}>
              <div><div className="form-label">Współtwórcy (po Go-Live)</div><div className="muted" style={{fontSize:12}}>Pozwól wybranym dodawać pozycje.</div></div>
              <Toggle on={false} onChange={()=>{}}/>
            </div>
          </div>
        </Modal>
      )}

      {/* Create modal */}
      {creating && (
        <Modal title="Nowa biblioteka" onClose={()=>setCreating(false)} footer={
          <>
            <button className="btn btn-soft" onClick={()=>setCreating(false)}>Anuluj</button>
            <button className="btn btn-accent" onClick={()=>setCreating(false)}>Utwórz</button>
          </>
        }>
          <div className="form-group"><div className="form-label">Nazwa</div><input className="input" placeholder="np. Recepty na sen"/></div>
          <div className="form-group"><div className="form-label">Opis</div><textarea className="textarea" rows={2} placeholder="Co tu zbierasz?"/></div>
          <div className="form-group"><div className="form-label">Kolor</div>
            <div className="row gap-8">{['rose','amber','sage','sky','violet'].map((c,i) => (
              <button key={c} className={`chip chip-hue-${c} ${i===0?'active':''}`}>{c}</button>
            ))}</div>
          </div>
          <div className="form-group">
            <div className="row" style={{justifyContent:'space-between'}}>
              <div><div className="form-label">Publiczna od razu</div><div className="muted" style={{fontSize:12}}>Możesz to zmienić później.</div></div>
              <Toggle on={false} onChange={()=>{}}/>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
};

window.Detail2Screens = Detail2;