// 赛博宝宝前端（2026-10-21 从 index.html 的内联 <script type="text/babel"> 原样搬出）：聊天、哄哄、喂饭。
// index.html 按顺序加载 app/*.jsx，前面文件定义的全局（函数、常量、组件）后面的文件直接用。
// ═══════════════ 聊天面板 ═══════════════
function ChatPanel({ day, stage, parentName, babyName, onClose }) {
  const greetings = [
    '嘻嘻～你来啦！今天想聊什么呀？',
    '哇！是你！快来快来～',
    '你终于来找我玩啦～想我了吗？',
    '嗯嗯！我在呢！你说～',
  ];
  // 2026-10-15：一打开先让宝宝自己起个话头（/chat/opener），拿不到才用上面的老招呼
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(true);
  const msgsEnd = useRef(null);

  useEffect(() => {
    let alive = true;
    api('/chat/opener', 'POST', {})
      .then(res => res && res.text ? res.text : null)
      .catch(() => null)
      .then(text => {
        if (!alive) return;
        setMessages([{ role: 'baby', text: text || greetings[Math.floor(Math.random() * greetings.length)] }]);
        setLoading(false);
      });
    return () => { alive = false; };
  }, []);

  useEffect(() => { msgsEnd.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);

  async function send() {
    if (!input.trim() || loading) return;
    const userMsg = input.trim();
    setInput('');
    setMessages(prev => [...prev, { role: 'user', text: userMsg }]);
    setLoading(true);

    try {
      const res = await api('/chat/smart', 'POST', { message: userMsg });
      const parts = [{ role: 'baby', text: res.text || '嘻嘻~' }];
      if (res.moodChange && res.moodChange !== 0) {
        const moodText = res.moodChange > 0 ? `心情 +${res.moodChange}` : `心情 ${res.moodChange}`;
        const moodEmoji = res.moodChange > 5 ? '🥰' : res.moodChange > 0 ? '😊' : res.moodChange > -3 ? '😐' : '😢';
        parts.push({ role: 'system', text: `${moodEmoji} ${moodText}` });
      }
      if (res.coinReward > 0) parts.push({ role: 'system', text: `✨ 今天第一次聊天 +${res.coinReward}金币` });
      setMessages(prev => [...prev, ...parts]);
    } catch (e) {
      setMessages(prev => [...prev, { role: 'baby', text: '嗯……我脑子转不过来了……' }]);
    }
    setLoading(false);
  }

  return (
    <div className="panel-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="panel-content chat-panel">
        <div className="panel-header">
          <span className="panel-title">聊天</span>
          <button className="panel-close" onClick={onClose}>×</button>
        </div>
        <div className="chat-messages">
          {messages.map((m, i) => (
            <div key={i} className={`chat-msg ${m.role}`}>
              <div className="chat-bubble">{m.text}</div>
            </div>
          ))}
          {loading && <div className="chat-msg baby"><div className="chat-bubble">想想中……</div></div>}
          <div ref={msgsEnd} />
        </div>
        <div className="chat-input-row">
          <input className="chat-input" value={input} onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send()} placeholder="跟宝宝说说话～" />
          <button className="chat-send" onClick={send} disabled={loading}>➤</button>
        </div>
      </div>
    </div>
  );
}

// ═══════════════ 哄哄面板 ═══════════════
function ComfortPanel({ babyName, youAre, yourName, partnerName, comfortProgress, onClose, onComforted }) {
  const [messages, setMessages] = useState([
    { role: 'baby', text: `哼！${yourName || '你'}不理我！我不要！😤` },
  ]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [streak, setStreak] = useState(comfortProgress || 0);
  const [done, setDone] = useState(false);
  const msgsEnd = useRef(null);

  useEffect(() => { msgsEnd.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);

  async function send() {
    if (!input.trim() || loading || done) return;
    const userMsg = input.trim();
    setInput('');
    setMessages(prev => [...prev, { role: 'user', text: userMsg }]);
    setLoading(true);

    try {
      const res = await api('/comfort', 'POST', { message: userMsg });
      if (res.error) {
        setMessages(prev => [...prev, { role: 'system', text: res.error }]);
      } else {
        const scoreEmoji = res.passed ? '💚' : '💔';
        setMessages(prev => [...prev,
          { role: 'baby', text: res.reply || '哼……' },
          { role: 'system', text: `${scoreEmoji} 得分：${res.score}/10${res.passed ? ` ✓ 连续${res.streak}/3` : ' ✗ 连续归零'}` },
        ]);
        setStreak(res.streak);
        if (res.comforted) {
          setDone(true);
          const cheerMsg = res.bothComforted
            ? `🎉 ${yourName || '你'}和${partnerName || '另一位家长'}都哄好啦！${babyName}开心了！`
            : `✅ ${yourName || '你'}这边哄好啦！等${partnerName || '另一位家长'}也来哄哄~`;
          setMessages(prev => [...prev, { role: 'system', text: cheerMsg }]);
          if (res.bothComforted && onComforted) setTimeout(onComforted, 1500);
        }
      }
    } catch (e) {
      setMessages(prev => [...prev, { role: 'system', text: '连接失败……' }]);
    }
    setLoading(false);
  }

  return (
    <div className="panel-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="panel-content chat-panel">
        <div className="panel-header">
          <span className="panel-title">哄哄{babyName} 😤</span>
          <span style={{ fontSize: 12, color: '#e88', marginLeft: 8 }}>进度 {streak}/3</span>
          <button className="panel-close" onClick={onClose}>×</button>
        </div>
        <div className="chat-messages">
          {messages.map((m, i) => (
            <div key={i} className={`chat-msg ${m.role}`}>
              <div className="chat-bubble" style={m.role === 'system' ? { background: '#fff3e0', color: '#a67', fontSize: 12, textAlign: 'center' } : undefined}>
                {m.text}
              </div>
            </div>
          ))}
          {loading && <div className="chat-msg baby"><div className="chat-bubble">……</div></div>}
          <div ref={msgsEnd} />
        </div>
        <div className="chat-input-row">
          <input className="chat-input" value={input} onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send()}
            placeholder={done ? '已经哄好啦~' : '用心哄哄宝宝……'} disabled={done} />
          <button className="chat-send" onClick={send} disabled={loading || done}>哄</button>
        </div>
      </div>
    </div>
  );
}

// ═══════════════ 喂饭盘子 ═══════════════
// 2026-10-15 小玉定：一瓶奶是买的正餐（花金币、饱腹 +30）；自家做的菜是加餐，4 小时一个。
// 加餐不给 buff：饱腹 +5 心情 +10；皮皮在聊天里说过想吃的那道（status.craving）心情 +25。
function FeedPanel({ inventory, coins, babyName, boughtMealName, craving, nextSnackAt, onClose, onFeed }) {
  const [busy, setBusy] = useState(false);
  // 奶瓶图带 ?v=：图还没画好那阵有人点过盘子，Pages 对不存在的文件回 index.html（200、缓存 4 小时），
  // 浏览器把这个网址记成了网页，图换上了也看不到（2026-10-15 小玉「我这里没有换上啊」）。换图就改版本号
  const [bottleOk, setBottleOk] = useState(true);
  const dishes = (inventory || [])
    .filter(i => i.item_type === 'meal' && i.quantity > 0 && RECIPES[i.item_id])
    .sort((a, b) => (b.item_id === craving?.id) - (a.item_id === craving?.id));
  const hasCraved = !!craving && dishes.some(d => d.item_id === craving.id);
  const [picked, setPicked] = useState(hasCraved ? craving.id : null);
  const pickedDish = dishes.find(d => d.item_id === picked);
  const hoursLeft = (until) => {
    const ms = until - Date.now();
    if (ms < 3600000) return `${Math.max(1, Math.round(ms / 60000))} 分钟`;
    const h = Math.floor(ms / 3600000), m = Math.round((ms % 3600000) / 60000);
    return m ? `${h} 小时 ${m} 分` : `${h} 小时`;
  };
  // 四小时只能吃一次加餐（2026-10-15 小玉：宝宝不可以吃太多零食）
  const snackWait = nextSnackAt && nextSnackAt > Date.now() ? nextSnackAt : 0;

  async function feed(mealId) {
    if (busy) return;
    setBusy(true);
    const res = await onFeed(mealId);
    setBusy(false);
    if (res && !res.error) onClose();
  }

  const r = pickedDish && RECIPES[pickedDish.item_id];
  const pickedCraved = pickedDish && pickedDish.item_id === craving?.id;

  return (
    <div className="panel-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="panel-content feed-panel">
        <div className="panel-header">
          <span className="panel-title">给{babyName}吃点什么</span>
          <button className="panel-close" onClick={onClose}>×</button>
        </div>

        <div className="feed-card feed-milk">
          {bottleOk
            ? <img className="feed-milk-icon" src={`${ASSETS}/food/sprites/milk_bottle.png?v=2`} alt="" draggable={false} onError={() => setBottleOk(false)} />
            : <span className="feed-milk-icon">🍼</span>}
          <div className="feed-milk-text">
            <div className="feed-name">冲{boughtMealName || '一瓶奶'}</div>
            <div className="feed-muted">{coins < 10 ? '金币不够啦' : '饱腹 +30'}</div>
          </div>
          <button className="feed-pill" disabled={busy || coins < 10} onClick={() => feed(null)}>10 💰</button>
        </div>

        <div className="feed-card">
          <div className="feed-card-head">
            <span className="feed-name">加餐</span>
            {craving && <span className="feed-crave-bubble">我想吃{craving.name}！</span>}
          </div>

          {dishes.length === 0 ? (
            <div className="feed-hint">厨房做的菜会摆在这里</div>
          ) : (
            <div className="feed-chips">
              {dishes.map(d => (
                <button key={d.item_id}
                  className={`feed-chip${picked === d.item_id ? ' on' : ''}${d.item_id === craving?.id ? ' crave' : ''}`}
                  onClick={() => setPicked(picked === d.item_id ? null : d.item_id)}>
                  {d.item_id === craving?.id && <span className="feed-heart">♥</span>}
                  {RECIPES[d.item_id].name}
                </button>
              ))}
            </div>
          )}

          {r ? (
            <div className="feed-detail">
              <div className="feed-detail-text">
                <div className="feed-detail-buff">饱腹 +5 · 心情 +{pickedCraved ? 25 : 10}{pickedCraved && <span className="feed-crave-tag">正想吃这个</span>}</div>
                {r.note && <div className="feed-muted">{r.note}</div>}
              </div>
              {snackWait > 0
                ? <span className="feed-wait">{hoursLeft(snackWait)}<br />后能再吃</span>
                : <button className="feed-pill" disabled={busy} onClick={() => feed(pickedDish.item_id)}>喂{babyName}</button>}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}