// screens/ai.jsx — AI Answer / Search results
const AIAnswerScreen = ({ locale, onNavigate }) => {
  const a = AI_ANSWER;
  const [q, setQ] = useState(a.question);
  const [typing, setTyping] = useState(false);
  const [shown, setShown] = useState(true);

  const ask = (newQ) => {
    setQ(newQ);
    setShown(false);
    setTyping(true);
    setTimeout(() => { setTyping(false); setShown(true); }, 900);
  };

  return (
    <div className="page" style={{ paddingTop: 'var(--s-10)', paddingBottom: 'var(--s-12)' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <div style={{ marginBottom: 'var(--s-6)' }}>
          <span className="eyebrow"><Icon name="sparkle" size={11} /> AI Sous-Chef</span>
          <h1 className="display" style={{ fontSize: 'clamp(28px, 3vw, 40px)', margin: '8px 0 6px' }}>
            {t(locale, 'ai_title')}
          </h1>
          <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0 }}>
            {t(locale, 'ai_sub')}
          </p>
        </div>

        {/* Search box */}
        <form onSubmit={(e)=>{e.preventDefault(); ask(q);}}
              style={{
                display: 'flex', alignItems: 'center', gap: 8,
                background: 'var(--bg-elevated)', borderRadius: 'var(--r-pill)',
                border: '1px solid var(--line-strong)',
                padding: '8px 8px 8px 20px', marginBottom: 'var(--s-8)',
                boxShadow: 'var(--shadow-sm)',
              }}>
          <Icon name="sparkle" size={16} />
          <input value={q} onChange={e=>setQ(e.target.value)}
                 style={{
                   flex: 1, border: 0, outline: 0, background: 'transparent',
                   font: 'inherit', fontSize: 16, color: 'var(--ink)', padding: '12px 0',
                 }} />
          <button type="submit" className="btn btn-primary btn-sm">
            Ask <Icon name="arrowR" size={12} />
          </button>
        </form>

        {/* Typing state */}
        {typing && (
          <div className="row" style={{ gap: 8, color: 'var(--ink-mute)', fontSize: 14, padding: '0 0 var(--s-4)' }}>
            <span className="row" style={{ gap: 4 }}>
              {[0,1,2].map(i => (
                <span key={i} style={{
                  width: 6, height: 6, borderRadius: 999, background: 'var(--accent)',
                  animation: `pulse 1.2s ${i*.2}s infinite`,
                }} />
              ))}
            </span>
            Searching 8,420 tested recipes…
          </div>
        )}

        {/* Answer */}
        {shown && (
          <div className="fade-in">
            {/* AI Answer card */}
            <div style={{
              background: 'var(--accent-tint)',
              border: '1px solid var(--accent-soft)',
              borderRadius: 'var(--r-5)',
              padding: 'var(--s-6) var(--s-7)',
              marginBottom: 'var(--s-6)',
            }}>
              <div className="row between" style={{ marginBottom: 'var(--s-4)' }}>
                <div className="row" style={{ gap: 8 }}>
                  <span style={{
                    width: 26, height: 26, borderRadius: 999, background: 'var(--accent)',
                    color: 'var(--accent-ink)', display: 'grid', placeItems: 'center',
                  }}><Icon name="sparkle" size={13} /></span>
                  <div className="eyebrow" style={{ color: 'var(--accent)' }}>Answer · Cites real recipes</div>
                </div>
                <div className="row" style={{ gap: 6, fontSize: 11, color: 'var(--ink-mute)', fontFamily: 'var(--font-mono)' }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--success)' }} />
                  3 SOURCES · 1.2 s
                </div>
              </div>

              <p className="display" style={{
                fontSize: 'clamp(18px, 1.8vw, 22px)', lineHeight: 1.45,
                margin: '0 0 var(--s-5)', color: 'var(--ink-strong)',
                fontWeight: 'inherit',
              }}>
                {a.summary}
              </p>

              <ol style={{
                padding: 0, margin: 0, listStyle: 'none',
                display: 'flex', flexDirection: 'column', gap: 12,
              }}>
                {a.bullets.map((b, i) => (
                  <li key={i} className="row" style={{ alignItems: 'flex-start', gap: 12, fontSize: 14.5, lineHeight: 1.6 }}>
                    <span style={{
                      flex: '0 0 auto', width: 22, height: 22, borderRadius: 999,
                      background: 'var(--accent)', color: 'var(--accent-ink)',
                      display: 'grid', placeItems: 'center',
                      fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
                    }}>{i + 1}</span>
                    <span>
                      {b} <sup style={{
                        color: 'var(--accent)', fontWeight: 600, fontSize: 11,
                        fontFamily: 'var(--font-mono)',
                      }}>[{Math.min(a.sources.length, i + 1)}]</sup>
                    </span>
                  </li>
                ))}
              </ol>
            </div>

            {/* Sources */}
            <div style={{ marginBottom: 'var(--s-8)' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Sources cited</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {a.sources.map((s, i) => (
                  <a key={i} href="#" onClick={e=>{e.preventDefault(); onNavigate(`/${locale}/r/${RECIPE.slug}`);}}
                     className="card"
                     style={{
                       padding: 'var(--s-4) var(--s-5)',
                       display: 'flex', alignItems: 'center', gap: 14,
                       textDecoration: 'none', color: 'inherit',
                       transition: 'all .18s var(--ease)',
                     }}>
                    <span style={{
                      flex: '0 0 auto', width: 26, height: 26, borderRadius: 999,
                      background: 'var(--accent-tint)', color: 'var(--accent)',
                      display: 'grid', placeItems: 'center',
                      fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700,
                    }}>{i + 1}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-strong)' }}>{s.title}</div>
                      <div className="row" style={{ gap: 8, marginTop: 3, fontSize: 12, color: 'var(--ink-mute)' }}>
                        <span>{s.by}</span>
                        <span>·</span>
                        <span><Stars value={s.rating} size={11} /> <span className="num">{s.rating}</span></span>
                        <span>·</span>
                        <span className="num">{s.year}</span>
                      </div>
                    </div>
                    <span className="chip chip-outline" style={{ fontSize: 11 }}>{s.cite}</span>
                    <Icon name="arrowR" size={14} />
                  </a>
                ))}
              </div>
            </div>

            {/* Follow-up questions */}
            <div style={{ marginBottom: 'var(--s-8)' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Continue asking</div>
              <div className="row wrap" style={{ gap: 8 }}>
                {a.followups.map((f, i) => (
                  <button key={i} className="chip chip-outline" onClick={()=>ask(f)}
                          style={{ cursor: 'pointer', fontSize: 13, padding: '8px 14px' }}
                          onMouseEnter={e=>e.currentTarget.style.borderColor='var(--accent)'}
                          onMouseLeave={e=>e.currentTarget.style.borderColor='var(--line-strong)'}>
                    {f} <Icon name="arrowR" size={11} />
                  </button>
                ))}
              </div>
            </div>

            {/* Top matching recipes */}
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>Top matching recipes</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }} className="ai-rel">
                {TRENDING.slice(0, 3).map((r, i) => (
                  <RecipeCard key={i} recipe={r} locale={locale}
                              onClick={()=>onNavigate(`/${locale}/r/${RECIPE.slug}`)} />
                ))}
              </div>
            </div>
          </div>
        )}

        <style>{`
          @keyframes pulse { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
          @media (max-width: 720px){ .ai-rel { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </div>
  );
};

Object.assign(window, { AIAnswerScreen });