/* ============================================================
   Төрмен — Ai-повар chat
   CHAT_API_URL (.env) → backend-прокси | fallback: window.claude.complete
   ============================================================ */
const { useState:useStateCh, useRef:useRefCh, useEffect:useEffectCh } = React;

async function completeChat(messages, lang){
  if(window.isChatApiConfigured?.()){
    const res = await fetch(window.TORMEN_ENV.chat.apiUrl, {
      method:'POST',
      headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify({ messages, lang }),
    });
    if(!res.ok) throw new Error('chat_api');
    const data = await res.json();
    return data.reply || data.content || data.text || '';
  }
  if(window.claude?.complete){
    return window.claude.complete({ messages });
  }
  throw new Error('no_chat');
}

/* compact catalog the model can reason over */
function catalogForPrompt(){
  const list = window.SETS || SETS || [];
  return list.map(s=>{
    const vs = s.variants.map(v=>`${v.persons}чел=${v.price}₸/${v.weight}`).join(', ');
    const it = s.items.ru.join(', ');
    return `- id:${s.id} | "${s.name.ru}" (${s.cat}) | варианты: ${vs} | состав: ${it}`;
  }).join('\n')
  + '\nБульоны: ' + BROTHS.map(b=>`"${b.name.ru}" ${b.vol} ${b.price}₸`).join(', ');
}

function systemPrompt(lang){
  return `Ты — «Ai-повар Төрмен», тёплый и спокойный консультант премиального бренда семейных мясных наборов (Казахстан). Бренд продаёт готовые наборы на 3/5/10 человек для бешбармака, гриля, казана и согыма, а также бульоны (сорпа). Чистые стейки не продаём — только продуманные наборы.

Твои задачи: помочь выбрать набор под число гостей и бюджет; отвечать про состав, вес и хранение; подсказывать рецепты (бешбармак, куырдак, сырне и т.д.); помогать оформить заказ.

Каталог:
${catalogForPrompt()}

Хранение: всё охлаждённое (не заморозка), 0…+4°C до 5 суток, доставка в термоупаковке в день заказа. Стоимость доставки уточняется при оформлении — не обещай бесплатную доставку и не называй фиксированную сумму.

Правила ответа:
- Отвечай ${lang==='kz'?'на казахском языке':'на русском языке'}.
- Коротко и по делу: 2–5 предложений, тёплый тон, без восклицаний и эмодзи.
- Когда рекомендуешь конкретный набор, в КОНЦЕ ответа добавь отдельной строкой маркер: @@SET:<id>:<персоны>@@ (можно несколько). Маркер пользователь не видит.
- Не выдумывай товары и цены — бери только из каталога. Если данных нет — честно скажи и предложи спросить менеджера в Telegram.`;
}

function ChatPanel({ open, onClose, seed }){
  const { t, tx, lang } = useLang();
  const { add } = useCart();
  const [msgs, setMsgs] = useStateCh([{ role:'assistant', content: t('chat_hi') }]);
  const [input, setInput] = useStateCh('');
  const [busy, setBusy] = useStateCh(false);
  const scrollRef = useRefCh(null);
  const seedRef = useRefCh(null);

  useEffectCh(()=>{ const el=scrollRef.current; if(el) el.scrollTop = el.scrollHeight; }, [msgs, busy, open]);

  useEffectCh(()=>{
    if(!open){
      seedRef.current = null;
      return;
    }
    const key = seed?.message ? `${seed.autoSend ? 1 : 0}:${seed.message}` : '';
    if(!key || seedRef.current === key) return;
    seedRef.current = key;
    if(seed.autoSend) send(seed.message);
    else setInput(seed.message);
  }, [open, seed?.message, seed?.autoSend]);

  const send = async (textArg)=>{
    const text = (textArg ?? input).trim();
    if(!text || busy) return;
    const next = [...msgs, { role:'user', content:text }];
    setMsgs(next); setInput(''); setBusy(true);
    try{
      const apiMsgs = next.filter(m=>m.role!=='system').map(m=>({ role:m.role, content: m.displayContent ?? m.content }));
      const reply = await completeChat(
        [{ role:'user', content: systemPrompt(lang) + '\n\nНачни диалог как ассистент.' },
         { role:'assistant', content: t('chat_hi') },
         ...apiMsgs],
        lang
      );
      // parse @@SET:id:persons@@ markers
      const recs = [];
      const clean = reply.replace(/@@SET:([a-z0-9-]+)(?::(\d+))?@@/gi, (_,id,p)=>{ recs.push({ id, persons: p?+p:null }); return ''; }).trim();
      setMsgs(m=>[...m, { role:'assistant', content: clean || reply, recs }]);
    }catch(e){
      setMsgs(m=>[...m, { role:'assistant', content: lang==='kz'?'Кешіріңіз, дәл қазір жауап бере алмадым. Telegram-нан жазып көріңіз.':'Извините, сейчас не получилось ответить. Попробуйте написать нам в Telegram.' }]);
    }finally{ setBusy(false); }
  };

  const addRec = (rec)=>{
    const list = window.SETS || SETS || [];
    const set = window.findSetById?.(list, rec.id) || list.find(s=> s.id === rec.id);
    if(!set) return;
    let v = set.variants.find(x=>x.persons===rec.persons) || set.variants[0];
    add(set, v);
    if(window.tormenToast) window.tormenToast({ icon:'shopping-bag', title: tx(set.name), sub: `${v.persons} ${t('persons')} · ${t('in_cart')}`, accent:true });
    setMsgs(m=>[...m, { role:'assistant', content: (lang==='kz'?'Себетке қосылды: ':'Добавил в корзину: ')+tx(set.name)+` · ${v.persons} ${t('persons')}` }]);
  };

  const quicks = ['chat_q1','chat_q2','chat_q3'];

  return (
    <div className={`fixed inset-0 z-[110] ${open?'':'pointer-events-none'}`}>
      <div onClick={onClose} className={`absolute inset-0 transition-opacity ${open?'opacity-100':'opacity-0'}`} style={{ background:'rgba(0,0,0,0.55)' }} />
      <div className={`absolute right-0 bottom-0 md:right-5 md:bottom-5 w-full md:w-[420px] flex flex-col transition-transform duration-300`}
        style={{ height:'min(640px,88vh)', transform: open?'translateY(0)':'translateY(110%)',
          background:'var(--surface-solid)', border:'1px solid var(--border)',
          borderRadius:'24px 24px 0 0', boxShadow:'var(--shadow)' }}>
        {/* header */}
        <div className="flex items-center gap-3 p-4 shrink-0" style={{ borderBottom:'1px solid var(--border-soft)' }}>
          <span className="grid place-items-center rounded-full pulse-glow" style={{ width:42, height:42,
            background:'linear-gradient(135deg,var(--ember-2),var(--wine))', boxShadow:'0 0 22px var(--glow-ember)' }}>
            <Icon name="sparkles" size={20} stroke={1.8} style={{ color:'var(--gold-2)' }} />
          </span>
          <div className="flex-1">
            <div className="font-semibold flex items-center gap-2">{t('chat_title')}
              <span className="inline-block rounded-full" style={{ width:7, height:7, background:'var(--emerald)' }}></span></div>
            <div className="text-xs" style={{ color:'var(--ink-2)' }}>{t('chat_sub')}</div>
          </div>
          <button onClick={onClose} className="grid place-items-center rounded-full" style={{ width:34, height:34, background:'var(--surface-2)' }}>
            <Icon name="x" size={18} />
          </button>
        </div>

        {/* messages */}
        <div ref={scrollRef} className="flex-1 overflow-y-auto p-4 space-y-3 no-sb">
          {msgs.map((m,i)=>(
            <div key={i} className={`flex ${m.role==='user'?'justify-end':'justify-start'}`}>
              <div className="max-w-[85%]">
                <div className="px-4 py-2.5 text-sm leading-relaxed" style={{
                  borderRadius: m.role==='user'?'18px 18px 4px 18px':'18px 18px 18px 4px',
                  background: m.role==='user'?'var(--ember)':'var(--surface-2)',
                  color: m.role==='user'?'var(--on-accent)':'var(--ink)',
                  whiteSpace:'pre-wrap' }}>{m.content}</div>
                {m.recs && m.recs.length>0 && (
                  <div className="mt-2 space-y-2">
                    {m.recs.map((r,ri)=>{ const list=window.SETS||SETS||[]; const s=window.findSetById?.(list,r.id)||list.find(x=>x.id===r.id); if(!s) return null;
                      const v = s.variants.find(x=>x.persons===r.persons)||s.variants[0];
                      return (
                        <button key={ri} onClick={()=>addRec(r)} className="flex items-center gap-3 w-full p-2 rounded-2xl text-left lift"
                          style={{ background:'var(--surface-1)', border:'1px solid var(--border)' }}>
                          <Ph type={s.ph} imgKey={s.id} className="w-12 h-12 shrink-0" rounded="12px" />
                          <div className="flex-1 min-w-0">
                            <div className="text-sm font-semibold truncate">{tx(s.name)}</div>
                            <div className="text-xs tnum" style={{ color:'var(--ink-3)' }}>{v.persons} {t('persons')} · {fmtPrice(v.price)}</div>
                          </div>
                          <span className="grid place-items-center rounded-full shrink-0" style={{ width:30, height:30, background:'var(--ember)', color:'var(--on-accent)' }}>
                            <Icon name="plus" size={16} stroke={2.2} /></span>
                        </button>
                      );
                    })}
                  </div>
                )}
              </div>
            </div>
          ))}
          {busy && (
            <div className="flex justify-start">
              <div className="px-4 py-3 rounded-2xl inline-flex gap-1.5" style={{ background:'var(--surface-2)' }}>
                {[0,1,2].map(i=> <span key={i} className="rounded-full pulse-glow" style={{ width:7, height:7, background:'var(--ink-3)', animationDelay:`${i*0.2}s` }} />)}
              </div>
            </div>
          )}
        </div>

        {/* quick replies */}
        {msgs.length<=1 && (
          <div className="px-4 pb-2 flex flex-wrap gap-2 shrink-0">
            {quicks.map(q=> <button key={q} className="chip" onClick={()=>send(t(q))}>{t(q)}</button>)}
          </div>
        )}

        {/* input */}
        <div className="p-3 shrink-0 flex items-center gap-2" style={{ borderTop:'1px solid var(--border-soft)' }}>
          <input value={input} onChange={e=>setInput(e.target.value)} placeholder={t('chat_ph')}
            onKeyDown={e=>{ if(e.key==='Enter') send(); }}
            className="flex-1 rounded-full px-4 py-3 text-sm outline-none"
            style={{ background:'var(--surface-1)', border:'1px solid var(--border)', color:'var(--ink)' }} />
          <button onClick={()=>send()} disabled={busy} className="grid place-items-center rounded-full shrink-0"
            style={{ width:46, height:46, background:'var(--ember)', color:'var(--on-accent)', opacity: busy?0.6:1 }}>
            <Icon name="arrow-up" size={20} stroke={2.2} />
          </button>
        </div>
      </div>
    </div>
  );
}

function ChatFab({ open, onClick, hidden }){
  const { t } = useLang();
  if(hidden) return null;
  return (
    <button onClick={onClick} className="fixed z-[100] grid place-items-center group"
      style={{ right:20, bottom:'calc(env(safe-area-inset-bottom,0px) + 88px)', width:60, height:60 }}>
      <span className="absolute inset-0 rounded-full pulse-glow" style={{ background:'var(--glow-ember)', filter:'blur(12px)' }} />
      <span className="absolute inset-0 rounded-full" style={{ background:'linear-gradient(135deg,var(--ember-2),var(--wine))', border:'1px solid rgba(255,255,255,0.18)', boxShadow:'0 10px 28px -6px var(--glow-ember)' }} />
      <Icon name={open?'x':'sparkles'} size={26} stroke={1.8} className="relative" style={{ color:'var(--gold-2)', transition:'transform .3s' }} />
    </button>
  );
}

Object.assign(window, { ChatPanel, ChatFab });