// BATONS'ON — AI-стилист (реальный Claude API) + поиск по каталогу
const { useState: useStateE, useEffect: useEffectE, useRef: useRefE } = React;

const CAT_RU = { hats: "Головные уборы", street: "Стритвир", beach: "Купальники", lounge: "Лаунж", outerwear: "Верхняя одежда" };

// компактный каталог для контекста модели
function catalogForAI() {
  return getAllProducts().map((p) =>
    `${p.id} · ${CAT_RU[p.cat] || p.cat} · «${p.name}» · ${p.sub} · ${p.price}₽`
  ).join("\n");
}

const STYLIST_SYSTEM =
`Ты — Стилист, AI-агент бренда одежды BATONS'ON (собственный бренд: головные уборы и трендовая одежда).
Общайся тепло, кратко и по делу, на русском, как модный стилист-консультант. Без эмодзи.
Собирай образы ТОЛЬКО из товаров каталога ниже — используй их точные id.
Правила образа: 2–4 вещи, желательно с головным убором (это сердце бренда), логично сочетающиеся по случаю и стилю.
Всегда, когда советуешь вещи, вызывай инструмент present_look. Короткое intro (1–2 предложения) — живой совет, почему этот образ. У каждой вещи note — 3–6 слов, зачем она.

КАТАЛОГ:
`;

const STYLIST_CHIPS = [
  { ic: "01", t: "Что надеть на вечер в городе" },
  { ic: "02", t: "Собери пляжный образ на отпуск" },
  { ic: "03", t: "Уличный лук на каждый день" },
  { ic: "04", t: "Тепло и уютно дома" },
];

function AIStylist({ onAdd, go }) {
  const [open, setOpen] = useStateE(false);
  const [msgs, setMsgs] = useStateE([]); // {role:'me'|'ai', text, look?:[{id,note}]}
  const [busy, setBusy] = useStateE(false);
  const [input, setInput] = useStateE("");
  const scrollRef = useRefE(null);
  const taRef = useRefE(null);

  useEffectE(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [msgs, busy]);

  useEffectE(() => {
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  async function ask(text) {
    const q = (text || "").trim();
    if (!q || busy) return;
    setInput("");
    const history = [...msgs, { role: "me", text: q }];
    setMsgs(history);
    setBusy(true);

    // контекст: последние реплики -> messages
    const apiMessages = history.slice(-6).map((m) => ({
      role: m.role === "me" ? "user" : "assistant",
      content: m.text + (m.look ? "\n[показан образ: " + m.look.map((x) => x.id).join(", ") + "]" : ""),
    }));

    let captured = null;
    try {
      const finalText = await window.claude.complete({
        model: "claude-sonnet-4-5",
        max_tokens: 900,
        system: STYLIST_SYSTEM + catalogForAI(),
        messages: apiMessages,
        tools: [{
          name: "present_look",
          description: "Показать пользователю собранный образ из товаров каталога BATONS'ON.",
          input_schema: {
            type: "object",
            properties: {
              intro: { type: "string", description: "1–2 предложения — живой совет стилиста, почему этот образ" },
              items: {
                type: "array",
                description: "2–4 товара образа",
                items: {
                  type: "object",
                  properties: {
                    id: { type: "string", description: "точный id товара из каталога" },
                    note: { type: "string", description: "3–6 слов, зачем эта вещь" },
                  },
                  required: ["id"],
                },
              },
            },
            required: ["intro", "items"],
          },
          run: async (inp) => {
            const valid = (inp.items || []).filter((x) => findProduct(x.id));
            captured = { intro: inp.intro, items: valid };
            return valid.length ? "Образ показан пользователю." : "Ни один id не найден в каталоге — попробуй другие.";
          },
        }],
      });

      if (captured && captured.items.length) {
        setMsgs((m) => [...m, { role: "ai", text: captured.intro, look: captured.items }]);
      } else {
        setMsgs((m) => [...m, { role: "ai", text: finalText || "Уточните повод или стиль — и я соберу образ." }]);
      }
    } catch (e) {
      setMsgs((m) => [...m, { role: "ai", text: "Не получилось собрать образ прямо сейчас. Попробуйте ещё раз через минуту." }]);
    } finally {
      setBusy(false);
    }
  }

  const openProduct = (id) => { const p = findProduct(id); if (p) { setOpen(false); go({ name: "product", product: p }); } };

  return (
    <>
      <button className={"ai-fab" + (open ? " hidden" : "")} onClick={() => setOpen(true)} aria-label="Открыть AI-стилиста">
        <span className="fab-dot" /> AI-стилист
      </button>

      <div className={"enh-scrim" + (open ? " on" : "")} onClick={() => setOpen(false)} />

      <aside className={"ai-panel" + (open ? " on" : "")} role="dialog" aria-label="AI-стилист BATONS'ON">
        <div className="ai-hd">
          <div className="ai-avatar">S</div>
          <div className="ai-ttl">
            <h3>Стилист</h3>
            <div className="ai-status"><span className="sp" /> AI-агент BATONS'ON · онлайн</div>
          </div>
          <button className="ai-x" onClick={() => setOpen(false)} aria-label="Закрыть">✕</button>
        </div>

        <div className="ai-scroll" ref={scrollRef}>
          {msgs.length === 0 && (
            <div className="ai-hello">
              <div className="lead">Соберу образ под ваш повод.</div>
              <div className="sub">Опишите ситуацию или настроение — подберу вещи из каталога и объясню сочетание.</div>
              <div className="ai-chips">
                {STYLIST_CHIPS.map((c) => (
                  <button key={c.ic} className="ai-chip" onClick={() => ask(c.t)}>
                    <span className="ci">{c.ic}</span> {c.t}
                  </button>
                ))}
              </div>
            </div>
          )}

          {msgs.map((m, i) => (
            m.role === "me"
              ? <div className="ai-me" key={i}>{m.text}</div>
              : (
                <div key={i}>
                  {m.text && <div className="ai-bubble">{m.text}</div>}
                  {m.look && (
                    <div className="ai-look">
                      {m.look.map((it, j) => {
                        const p = findProduct(it.id);
                        if (!p) return null;
                        return <LookItem key={j} p={p} note={it.note} onOpen={() => openProduct(p.id)} onAdd={onAdd} />;
                      })}
                      <button className="ai-look-all" onClick={() => m.look.forEach((it) => { const p = findProduct(it.id); if (p) onAdd(p); })}>
                        Добавить весь образ в корзину
                      </button>
                    </div>
                  )}
                </div>
              )
          ))}

          {busy && <div className="ai-typing"><i /><i /><i /></div>}
        </div>

        <div className="ai-compose">
          <textarea
            ref={taRef}
            value={input}
            placeholder="Например: свидание, хочу выглядеть дорого…"
            rows={1}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); ask(input); } }}
          />
          <button className="ai-send" onClick={() => ask(input)} disabled={busy || !input.trim()} aria-label="Отправить">↑</button>
        </div>
        <div className="ai-note">Стилист советует из реального каталога · подбор в один клик</div>
      </aside>
    </>
  );
}

function LookItem({ p, note, onOpen, onAdd }) {
  const [done, setDone] = useStateE(false);
  const add = (e) => { e.stopPropagation(); onAdd(p); setDone(true); setTimeout(() => setDone(false), 1400); };
  return (
    <div className="ai-look-item" onClick={onOpen} role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter") onOpen(); }}>
      <div className="li-media"><Media p={p} /></div>
      <div className="li-info">
        <div className="li-name">{p.name}</div>
        {note && <div className="li-note">{note}</div>}
        <div className="li-foot">
          <span className="li-price">{RUB(p.price)}</span>
          <button className={"li-add" + (done ? " done" : "")} onClick={add}>{done ? "в корзине ✓" : "+ в корзину"}</button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// ПОИСК
// ============================================================
const SEARCH_SUGG = ["кепка", "балаклава", "худи", "купальник", "пижама", "платье", "оверсайз"];

function SearchOverlay({ open, onClose, go }) {
  const [q, setQ] = useStateE("");
  const inputRef = useRefE(null);
  const all = getAllProducts();

  useEffectE(() => {
    if (open) { setTimeout(() => inputRef.current && inputRef.current.focus(), 120); }
    else setQ("");
  }, [open]);

  useEffectE(() => {
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  const query = q.trim().toLowerCase();
  const results = query
    ? all.filter((p) => (
        p.name.toLowerCase().includes(query) ||
        (p.sub || "").toLowerCase().includes(query) ||
        (CAT_RU[p.cat] || "").toLowerCase().includes(query) ||
        (p.badge || "").toLowerCase().includes(query)
      ))
    : [];

  const pick = (p) => { onClose(); go({ name: "product", product: p }); };

  return (
    <>
      <div className={"enh-scrim" + (open ? " on" : "")} onClick={onClose} />
      <div className={"srch-panel" + (open ? " on" : "")} role="dialog" aria-label="Поиск по каталогу">
        <div className="srch-bar">
          <span className="srch-ico">⌕</span>
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)} placeholder="Поиск по каталогу…" />
          <button className="srch-x" onClick={onClose} aria-label="Закрыть поиск">✕</button>
        </div>
        <div className="srch-body">
          {!query && (
            <div className="srch-sugg">
              <span className="lbl">Популярное:</span>
              {SEARCH_SUGG.map((s) => <button key={s} onClick={() => setQ(s)}>{s}</button>)}
            </div>
          )}
          {query && (
            <>
              <div className="srch-meta">{results.length ? results.length + " найдено по «" + q + "»" : ""}</div>
              {results.length === 0
                ? <div className="srch-empty">Ничего не нашлось по «{q}». Попробуйте другой запрос или загляните в категории.</div>
                : (
                  <div className="srch-grid">
                    {results.map((p) => (
                      <button key={p.id} className="srch-card" onClick={() => pick(p)}>
                        <div className="sc-media"><Media p={p} /></div>
                        <div className="sc-cat">{CAT_RU[p.cat]}</div>
                        <div className="sc-name">{p.name}</div>
                        <div className="sc-price">{RUB(p.price)}</div>
                      </button>
                    ))}
                  </div>
                )}
            </>
          )}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { AIStylist, SearchOverlay });