/* Curio — Object catalog: browse scannable objects per museum/quest */
const {useState:useCatState} = React;

function ObjectCatalogScreen(){
  const{t,lang,nav,route}=useApp();
  const L=(v)=>pick(v,lang);
  const de=lang==='de';
  const focusQuest=route.p.questId||null;
  const[expanded,setExpanded]=useCatState(focusQuest);

  return <div data-screen-label="Object Catalog" className="cu-scroll" style={{flex:1,overflowY:'auto',background:T.bg}}>
    <BackRow title={t('objectCatalog')}/>
    <div style={{padding:`8px ${SP.safe}px 0`}}>
      <p style={{color:T.muted,fontSize:fz(15),fontFamily:F,margin:'0 0 24px',lineHeight:1.6}}>{t('objectCatalogSub')}</p>
    </div>
    <div style={{padding:`0 ${SP.safe}px`,display:'flex',flexDirection:'column',gap:14}}>
      {window.DATA.QUESTS.length===0
        ?<EmptyState icon={<Ic k="search" size={22}/>} title={de?'Noch keine Objekte':'No objects yet'} message={de?'Schau sp\u00e4ter noch einmal vorbei.':'Check back soon for scannable exhibits.'}/>
        :window.DATA.QUESTS.map(q=>{
        const open=expanded===q.id;
        return <div key={q.id} style={{borderRadius:18,background:T.card,border:`0.5px solid ${T.line}`,boxShadow:SH,overflow:'hidden'}}>
          <button type="button" onClick={()=>setExpanded(open?null:q.id)} className="cu-press" style={{display:'flex',gap:14,alignItems:'center',width:'100%',textAlign:'left',padding:'16px',border:'none',background:'transparent',cursor:'pointer'}}>
            <Thumb src={q.img} alt="" size={56} radius={14}/>
            <div style={{flex:1,minWidth:0}}>
              <div style={{color:T.text,fontSize:fz(16),fontWeight:700,fontFamily:F,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{q.venue}</div>
              <div style={{display:'flex',alignItems:'baseline',gap:4,marginTop:4}}>
                <span style={{color:T.muted,fontSize:fz(13),fontFamily:F,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',minWidth:0}}>{L(q.title)}</span>
                <span style={{color:T.muted,fontSize:fz(13),fontFamily:F,flexShrink:0}}>· {q.stops.length} {de?'Objekte':'objects'}</span>
              </div>
            </div>
            <Ic k={open?'chevD':'chevR'} size={18} color={T.muted} style={{flexShrink:0}}/>
          </button>
          {open&&(q.stops.length>0
            ?<div style={{padding:'0 16px 16px',display:'flex',flexDirection:'column',gap:10}}>
              {q.stops.map((stop,i)=>
                <button key={stop.id||i} type="button" onClick={()=>nav.push('object-detail',{questId:q.id,stopIndex:i})} className="cu-press" style={{display:'flex',gap:12,alignItems:'center',width:'100%',textAlign:'left',padding:'12px 14px',borderRadius:14,border:`0.5px solid ${T.line}`,background:T.cardAlt,cursor:'pointer'}}>
                  <Thumb src={stop.img} alt="" size={52} radius={12}/>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{color:T.text,fontSize:fz(15),fontWeight:700,fontFamily:F,lineHeight:1.3,overflow:'hidden',textOverflow:'ellipsis',display:'-webkit-box',WebkitLineClamp:2,WebkitBoxOrient:'vertical'}}>{L(stop)}</div>
                    {stop.where&&<div style={{color:T.muted,fontSize:fz(13),fontFamily:F,marginTop:4,display:'flex',gap:4,alignItems:'center',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}><Ic k="location" size={12} color={T.muted} style={{flexShrink:0}}/><span style={{overflow:'hidden',textOverflow:'ellipsis'}}>{L(stop.where)}</span></div>}
                  </div>
                  <Ic k="chevR" size={16} color={T.muted} style={{flexShrink:0}}/>
                </button>
              )}
              <Btn label={de?'Quest starten':'Start this quest'} variant="secondary" sm onClick={()=>nav.push('event-detail',{questId:q.id})} style={{marginTop:4}}/>
            </div>
            :<div style={{padding:'0 16px 16px'}}><EmptyState emoji="🖼️" title={de?'Noch keine Objekte':'No objects yet'} message={de?'F\u00fcr dieses Museum sind noch keine Exponate hinterlegt.':'No scannable exhibits added for this museum yet.'}/></div>)}
        </div>;
      })}
    </div>
    <Gap n={36}/>
  </div>;
}

function ObjectDetailScreen(){
  const{t,lang,state,nav,route}=useApp();
  const L=(v)=>pick(v,lang);
  const de=lang==='de';
  const q=window.DATA.questById(route.p.questId)||window.DATA.QUESTS[0];
  const stopIdx=route.p.stopIndex||0;
  const stop=q.stops[stopIdx];
  const[showImg,setShowImg]=useCatState(false);
  const[showMap,setShowMap]=useCatState(false);
  const liveProg=state.activeQuestId===q.id?state.questProgress[q.id]:null;

  return <div data-screen-label="Object Detail" className="cu-scroll" style={{flex:1,overflowY:'auto',background:T.bg}}>
    <button type="button" onClick={()=>setShowImg(true)} style={{display:'block',width:'100%',padding:0,border:'none',cursor:'pointer',position:'relative'}}>
      <Photo src={stop.img} alt={L(stop)} h={280} radius={0} overlay="linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))">
        
        <div style={{position:'absolute',top:'calc(12px + var(--cu-safe-top))',left:14}}><IconBtn k="arrowL" onDark onClick={e=>{e.stopPropagation();nav.pop();}} ariaLabel={t('back')}/></div>
        <div style={{position:'absolute',left:20,right:20,bottom:20}}>
          <Chip label={q.venue} kind="onDark"/>
          <h1 style={{display:'-webkit-box',WebkitLineClamp:2,WebkitBoxOrient:'vertical',overflow:'hidden',color:'#fff',fontSize:fz(26),fontWeight:700,fontFamily:FD,letterSpacing:'-0.5px',margin:'10px 0 6px',lineHeight:1.2}}>{L(stop)}</h1>
          {stop.where&&<button type="button" onClick={e=>{e.stopPropagation();setShowMap(true);}} style={{background:'rgba(255,255,255,.16)',border:'none',borderRadius:100,padding:'6px 12px 6px 6px',display:'inline-flex',alignItems:'center',gap:6,cursor:'pointer',maxWidth:'100%'}}>
            <span style={{width:22,height:22,borderRadius:'50%',background:'rgba(255,255,255,.22)',display:'inline-flex',alignItems:'center',justifyContent:'center',flexShrink:0}}><Ic k="location" size={12} color="#fff"/></span>
            <span style={{color:'#fff',fontSize:fz(13),fontWeight:600,fontFamily:F,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{L(stop.where)}</span>
          </button>}
        </div>
      </Photo>
    </button>
    <div style={{padding:`20px ${SP.safe}px 0`}}>
      {stop.look&&<div style={{padding:'16px',borderRadius:16,background:tint(8),border:`0.5px solid ${tint(24)}`,marginBottom:20}}>
        <div style={{color:T.muted,fontSize:fz(11),fontWeight:700,fontFamily:F,textTransform:'uppercase',letterSpacing:'.4px',marginBottom:8}}>{t('lookForLabel')}</div>
        <p style={{color:T.text,fontSize:fz(15),fontFamily:F,lineHeight:1.6,margin:0}}>{L(stop.look)}</p>
      </div>}
      {stop.story&&<>
        <h2 style={{color:T.text,fontSize:fz(17),fontWeight:700,fontFamily:FD,margin:'0 0 12px'}}>{t('aboutThis')}</h2>
        <p style={{color:T.sub,fontSize:fz(15),fontFamily:F,lineHeight:1.65,margin:'0 0 28px'}}>{L(stop.story)}</p>
      </>}
    </div>
    <div style={{padding:`0 ${SP.safe}px 32px`,display:'flex',flexDirection:'column',gap:10}}>
      <Btn label={t('scanObject')} icon={<Ic k="scan" size={18}/>} onClick={()=>nav.push('object-scan',{objectId:stop.id,questId:q.id,stopIndex:route.p.stopIndex})}/>
    </div>
    {showImg&&<ImageViewer src={stop.img} alt={L(stop)} onClose={()=>setShowImg(false)}/>}
    {showMap&&<MapOverlay q={q} prog={liveProg||{stop:stopIdx,total:q.stops.length,completed:false}} lang={lang} nav={nav} onClose={()=>setShowMap(false)}/>}
  </div>;
}

Object.assign(window,{ObjectCatalogScreen,ObjectDetailScreen});