/* 心灵鸡汤：学生励志 / 家长教育治愈，全部走后端 API */
function Soup() {
  const { state, dispatch, activeChild:c } = useStore();
  const audience = state.role==='parent' ? 'parent' : 'student';
  const [tab,setTab] = React.useState('rec');
  const [quotes,setQuotes] = React.useState([]);
  const [collections,setCollections] = React.useState([]);
  const [favIds,setFavIds] = React.useState([]);
  const [curIndex,setCurIndex] = React.useState(0);
  const [toastMsg,setToastMsg] = React.useState(null);

  const loadData = React.useCallback(async ()=>{
    if (!state.token) return;
    try {
      const headers = { Authorization: `Bearer ${state.token}` };
      const [qwRes, clRes] = await Promise.all([
        fetch('/api/soup', { headers }),
        fetch('/api/soup/collections', { headers })
      ]);
      const qwData = await qwRes.json();
      const clData = await clRes.json();
      if (qwData.success) {
        const filtered = qwData.data.filter(q=>(q.role_type===audience || q.role_type==='both'));
        setQuotes(filtered);
        setCurIndex(0);
      }
      if (clData.success) {
        setCollections(clData.data || []);
        setFavIds((clData.data || []).map(q=>q.id));
      }
    } catch(e) {}
  }, [state.token, audience]);

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

  const showLocalToast = (msg)=>{ setToastMsg(msg); setTimeout(()=>setToastMsg(null), 2600); };

  const curQuote = quotes[curIndex];
  const displayedQuotes = tab==='fav' ? collections : quotes;

  const isFav = (id)=>favIds.includes(id);

  const toggleFav = async (quoteId)=>{
    if (!quoteId) return;
    try {
      const resp = await fetch('/api/soup/collections', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${state.token}` },
        body: JSON.stringify({ soupId: quoteId })
      });
      const result = await resp.json();
      if (resp.ok && result.success) {
        if (result.data.collected) {
          setFavIds([...favIds, quoteId]);
          if (!collections.find(x=>x.id===quoteId)) {
            const q = quotes.find(x=>x.id===quoteId);
            if (q) setCollections([q, ...collections]);
          }
        } else {
          setFavIds(favIds.filter(x=>x!==quoteId));
          setCollections(collections.filter(x=>x.id!==quoteId));
        }
        dispatch({type:'TOGGLE_FAV',childId:c.id,quoteId});
      }
    } catch(e) {}
  };

  const nextQuote = ()=>{ setCurIndex((curIndex+1) % Math.max(1,quotes.length)); dispatch({type:'NEXT_QUOTE',audience}); };

  const Heart = ({on})=> <Ico d={Icons.heart} size={19} fill={on?'currentColor':'none'}/>;

  if (audience==='parent') {
    const cases = [
      { ic:'🌱', t:'那次"退步"，其实是转折点', c:'孩子月考下滑 15 名，我没有责备，而是和他一起看错题。后来才发现，是他主动挑战了更难的题。一个学期后，他稳定进了年级前十。', m:'— 关键词：允许试错' },
      { ic:'🤝', t:'把"你怎么又考这样"换成"我们一起看看"', c:'孩子在被理解时，大脑更容易进入学习状态。少一句指责，多一次陪伴，往往比补习更有效。', m:'— 关键词：情绪安全' },
      { ic:'📈', t:'关注趋势，而不是单次分数', c:'单次考试受太多偶然因素影响。把目光放在三个月、半年的趋势上，你会更平静，也更能看见孩子真实的成长。', m:'— 关键词：长期视角' },
    ];
    return <>
      <div className="soup-hero par">
        <span className="blob"></span>
        <div className="lbl">今日鸡汤 · 家长</div>
        {curQuote ? <>
          <div className="q"><span className="mk">“</span>{curQuote.content}<span className="mk">”</span></div>
          <div className="act">
            <Button className="bw" icon={<Ico d={Icons.refresh} size={18}/>} onClick={nextQuote}>换一句</Button>
            <Button className="bgl" onClick={()=>toggleFav(curQuote.id)}><Heart on={isFav(curQuote.id)}/>{isFav(curQuote.id)?'已收藏':'收藏这句'}</Button>
          </div>
        </> : <div className="q" style={{opacity:.6}}>暂无鸡汤</div>}
      </div>
      <div className="two-col-15">
        <Card>
          <div className="card-head"><h3>真实教育案例</h3><span className="sub">来自一线家长与老师</span></div>
          {cases.map((cs,i)=><div className="case" key={i}><div className="ci">{cs.ic}</div><div><div className="ct">{cs.t}</div><div className="cc2">{cs.c}</div><div className="cm">{cs.m}</div></div></div>)}
        </Card>
        <div>
          {displayedQuotes.map(q=>(
            <Card key={q.id} style={{marginBottom:14}}>
              <div className="qcard" style={{border:'none',padding:0,background:'none'}}>
                <div className="qt"><span className="mk" style={{color:'var(--orange-400)'}}>“</span>{q.content}</div>
                <div className="foot"><span className={'theme bg-orange-soft'}>{q.category || '治愈'}</span>
                  <span className={'fav '+(isFav(q.id)?'on':'')} onClick={()=>toggleFav(q.id)}><Heart on={isFav(q.id)}/></span></div>
              </div>
            </Card>
          ))}
        </div>
      </div>

      {toastMsg && <div style={{position:'fixed', top:22, left:'50%', transform:'translateX(-50%)', zIndex:999,
        background:'#fff', border:'1px solid var(--line)', borderLeft:'4px solid #5fcfa0', borderRadius:12,
        padding:'13px 20px', boxShadow:'var(--shadow-lg)', display:'flex', alignItems:'center', gap:10, fontWeight:700, fontSize:13.5, animation:'toastIn .3s'}}>
        <span style={{width:20,height:20,borderRadius:'50%',background:'#5fcfa0',color:'#fff',display:'grid',placeItems:'center'}}><Ico d={Icons.check} size={13} sw={3.5}/></span>
        {toastMsg}
      </div>}
    </>;
  }

  return <>
    <div className="soup-hero stu">
      <span className="blob"></span>
      <div className="lbl">今日鸡汤 · 为{c.name}推送</div>
      {curQuote ? <>
        <div className="q"><span className="mk">“</span>{curQuote.content}<span className="mk">”</span></div>
        <div className="act">
          <Button className="bw" icon={<Ico d={Icons.refresh} size={18}/>} onClick={nextQuote}>换一句</Button>
          <Button className="bgl" onClick={()=>toggleFav(curQuote.id)}><Heart on={isFav(curQuote.id)}/>{isFav(curQuote.id)?'已收藏':'收藏这句'}</Button>
        </div>
      </> : <div className="q" style={{opacity:.6}}>暂无鸡汤</div>}
    </div>
    <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:14}}>
      <div className="section-title" style={{margin:0}}><span className="bar"></span>更多励志</div>
      <div className="seg">
        <span className={tab==='rec'?'on':''} onClick={()=>setTab('rec')}>推荐</span>
        <span className={tab==='fav'?'on':''} onClick={()=>setTab('fav')}>我的收藏 {favIds.length?`(${favIds.length})`:''}</span>
      </div>
    </div>
    {displayedQuotes.length===0 ? <div className="empty">{tab==='fav'?'还没有收藏的句子，点 ♥ 收藏喜欢的励志内容吧。':'暂无鸡汤'}</div> :
      <div className="quote-grid">
        {displayedQuotes.map(q=>(
          <div className="qcard" key={q.id}>
            <div className="qt"><span className="mk">“</span>{q.content}</div>
            <div className="foot"><span className={'theme bg-blue-soft'}>{q.category || '成长'}</span>
              <span className={'fav '+(isFav(q.id)?'on':'')} onClick={()=>toggleFav(q.id)}><Heart on={isFav(q.id)}/></span></div>
          </div>
        ))}
      </div>}

    {toastMsg && <div style={{position:'fixed', top:22, left:'50%', transform:'translateX(-50%)', zIndex:999,
      background:'#fff', border:'1px solid var(--line)', borderLeft:'4px solid #5fcfa0', borderRadius:12,
      padding:'13px 20px', boxShadow:'var(--shadow-lg)', display:'flex', alignItems:'center', gap:10, fontWeight:700, fontSize:13.5, animation:'toastIn .3s'}}>
      <span style={{width:20,height:20,borderRadius:'50%',background:'#5fcfa0',color:'#fff',display:'grid',placeItems:'center'}}><Ico d={Icons.check} size={13} sw={3.5}/></span>
      {toastMsg}
    </div>}
  </>;
}
Object.assign(window, { Soup });