/* ============================================================
   Paella — Главная «Блюда рядом» (реальные данные)
   ============================================================ */

const _normH = (s) => (s || "").toLowerCase().replace(/ё/g, "е").trim();

/* ---------- filtering helper (реальные поля) ---------- */
function applyFilters(dishes, { q, cat, special, sort }) {
  let list = dishes.slice();
  if (q && q.trim()) {
    const s = _normH(q);
    list = list.filter((d) => _normH(d.name).includes(s) || _normH(d.restaurantName).includes(s) || _normH(d.category).includes(s));
  }
  if (cat && cat !== "Все") list = list.filter((d) => d.category === cat);
  if (special === "cheap") list = list.filter((d) => d.price && d.price <= 700);
  if (special === "photo") list = list.filter((d) => d.photo);
  if (special === "guest") list = list.filter((d) => d.ratingPct != null);

  if (sort === "price") list.sort((a, b) => (a.price || 1e9) - (b.price || 1e9));
  else if (sort === "guest") list.sort((a, b) => (b.ratingPct != null ? 1 : 0) - (a.ratingPct != null ? 1 : 0) || (b.ratingPct || 0) - (a.ratingPct || 0) || b.q - a.q);
  else list.sort((a, b) => ((b.photo ? 1 : 0) - (a.photo ? 1 : 0)) || (b.q - a.q)); // best: фото-первыми, затем качество
  return list;
}

/* ---------- Featured carousel: «Лучшее рядом» (реальные блюда с фото) ---------- */
function FeaturedCarousel({ ctx }) {
  const P = window.PAELLA;
  const featured = useMemo(() =>
    P.dishes.filter((d) => d.photo).sort((a, b) => b.q - a.q).slice(0, 8)
  , []);
  const n = featured.length;
  const [idx, setIdx] = useState(0);
  const [shown, setShown] = useState(0);
  const [vis, setVis] = useState(true);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused || n <= 1) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % n), 5600);
    return () => clearInterval(t);
  }, [paused, n]);

  useEffect(() => {
    if (idx === shown) return;
    setVis(false);
    const t = setTimeout(() => { setShown(idx); setVis(true); }, 300);
    return () => clearTimeout(t);
  }, [idx]);

  const go = (delta) => setIdx((i) => (i + delta + n) % n);
  const d = featured[shown];
  if (!d) return null;
  const sub = d.reviewSnippet ? `«${d.reviewSnippet}»` : (d.grams || d.kcal) ? [d.grams && `${d.grams} г`, d.kcal && `${d.kcal} ккал`].filter(Boolean).join(" · ") : d.desc;

  return (
    <div className="fcar" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="fcar-view">
        <div className="herodish fcar-cf" style={{ opacity: vis ? 1 : 0 }}>
          <div className="herodish-media clickable" onClick={() => ctx.openDish(d)} style={{ position: "relative", background: "var(--bg-2)" }}>
            <DishPhoto src={d.photo} alt={d.name} size="lg" />
            <ScoreTag u={uOf(d)} lg float />
          </div>
          <div className="herodish-body">
            <div className="wrap-g" style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
              <span className="badge b-olive">{d.cuisine}</span>
              {d.ratingPct != null && <span className="badge b-orange"><Icon name="heart" size={11} fill="currentColor" sw={0} />оценка гостей</span>}
              {d.reviewMentions >= 3 && <span className="badge b-plum"><Icon name="message" size={11} />хвалят в отзывах</span>}
            </div>
            <div className="herodish-name">{d.name}</div>
            <div className="dcard-meta" style={{ fontSize: 14 }}>
              <span style={{ fontWeight: 600, color: "var(--ink)" }}>{d.restaurantName}</span><span className="dot"></span><span>{d.district}</span>
            </div>
            {sub && <p className="muted" style={{ fontSize: 15, lineHeight: 1.5, margin: 0, fontStyle: d.reviewSnippet ? "italic" : "normal" }}>{sub}</p>}
            <div className="row" style={{ gap: 10, marginTop: 4, flexWrap: "wrap" }}>
              <span style={{ fontSize: 24, fontWeight: 800 }}>{d.price ? `${d.price} ₽` : "—"}</span>
              <div style={{ marginLeft: "auto", display: "flex", gap: 9 }}>
                <button className="btn btn-soft btn-sm" onClick={() => ctx.toggleSave(d.id)} aria-label="Сохранить"><Icon name="bookmark" size={16} fill={ctx.saved.has(d.id) ? "currentColor" : "none"} /></button>
                <button className="btn btn-pri btn-sm" onClick={() => ctx.openDish(d)}>Подробнее <Icon name="arrowRight" size={16} /></button>
              </div>
            </div>
          </div>
        </div>
      </div>
      {n > 1 && <>
        <button className="fcar-arrow prev" onClick={() => go(-1)} aria-label="Назад"><Icon name="chevronLeft" size={22} /></button>
        <button className="fcar-arrow next" onClick={() => go(1)} aria-label="Вперёд"><Icon name="chevronRight" size={22} /></button>
        <div className="fcar-foot">
          <div className="fcar-dots">
            {featured.map((_, i) => <button key={i} className={"fcar-dot" + (i === idx ? " on" : "")} onClick={() => setIdx(i)} aria-label={"Блюдо " + (i + 1)} />)}
          </div>
        </div>
      </>}
    </div>
  );
}

/* ---------- Home ---------- */
function HomeScreen({ ctx }) {
  const P = window.PAELLA;
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("Все");
  const [special, setSpecial] = useState(null);
  const [sort, setSort] = useState("best");
  const [view, setView] = useState("feed"); // feed | map
  const [limit, setLimit] = useState(48);
  const feedRef = useRef(null);

  const list = useMemo(() => applyFilters(P.dishes, { q, cat, special, sort }), [q, cat, special, sort]);
  useEffect(() => { setLimit(48); }, [q, cat, special, sort, view]);

  const scrollToFeed = () => { if (feedRef.current) paellaScrollTo(feedRef.current.offsetTop - 64); };

  const HOW = [
    { n: "01", t: "Оцениваем блюда, а не только рестораны", d: "Рейтинг строится на уровне конкретной позиции меню." },
    { n: "02", t: "Берём реальные данные из открытых источников", d: "Фото, цены, оценки гостей и отзывы — из 2ГИС и Яндекса." },
    { n: "03", t: "Показываем, что заказать именно здесь", d: "С учётом оценки гостей, отзывов, цены и состава блюда." },
    { n: "04", t: "Никаких выдуманных фото", d: "Только реальные фото блюда — или честная пометка «нет фото»." },
  ];

  return (
    <div className="fadein">
      {/* hero */}
      <section className="wrap hero">
        <div className="hero-eyebrow">
          <span className="badge b-olive"><Icon name="sparkles" size={13} />Реальные данные · 2ГИС + Яндекс</span>
          <span className="row" style={{ gap: 6, fontSize: 13.5, fontWeight: 700, color: "var(--ink-2)" }}>
            <Icon name="pin" size={15} style={{ color: "var(--coral-ink)" }} />Москва · в центре
          </span>
        </div>
        <h1 className="hero-h1">Поиск <span className="serif-i em">блюд</span>,<br />а не ресторанов.</h1>
        <p className="hero-sub">Paella находит лучшие блюда в ресторанах Москвы — по реальным фото, ценам, оценкам гостей и тому, что пишут о блюде в отзывах. Гастрономическое приключение, которое начинается с одного блюда.</p>
        <div className="hero-cta">
          <CTA kind="pri" icon="utensils" onClick={scrollToFeed}>Найти блюдо</CTA>
          <CTA kind="dark" icon="sparkles" onClick={() => ctx.go("ai")}>Подобрать с AI</CTA>
          <CTA kind="ghost" icon="trophy" onClick={() => ctx.go("top")}>Топ Москвы</CTA>
        </div>
        <div className="hero-stats">
          <div className="hero-stat"><div className="v">{P.dishes.length.toLocaleString("ru-RU")}</div><div className="l">блюд в каталоге</div></div>
          <div className="hero-stat-div"></div>
          <div className="hero-stat"><div className="v">{P.restaurants.length}</div><div className="l">ресторанов Москвы</div></div>
          <div className="hero-stat-div"></div>
          <div className="hero-stat"><div className="v">{P.meta.withPhoto}</div><div className="l">блюд с реальным фото</div></div>
        </div>
      </section>

      {/* featured carousel */}
      <section className="wrap sec" style={{ marginTop: 34 }}>
        <div className="row" style={{ marginBottom: 14, gap: 9 }}>
          <span className="eyebrow">Лучшее рядом</span>
          <span className="badge b-orange"><Icon name="flame" size={12} />Реальные хиты</span>
        </div>
        <FeaturedCarousel ctx={ctx} />
      </section>

      {/* search + filters */}
      <section className="wrap sec" ref={feedRef} style={{ marginTop: 44 }}>
        <div className="sec-head" style={{ marginBottom: 14 }}>
          <div>
            <h2 className="sec-title">Лучшие блюда Москвы</h2>
            <p className="sec-sub">Рейтинги конкретных блюд, а не заведений</p>
          </div>
          <div className="viewtoggle">
            <button className={view === "feed" ? "on" : ""} onClick={() => setView("feed")}><Icon name="grid" size={15} />Лента</button>
            <button className={view === "map" ? "on" : ""} onClick={() => setView("map")}><Icon name="pin" size={15} />Карта</button>
          </div>
        </div>
        <div className="search" style={{ marginBottom: 14 }}>
          <span className="sic"><Icon name="search" size={19} /></span>
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Паста, хачапури, тартар, завтрак, десерт…" />
        </div>
        <div className="chips" style={{ marginBottom: 10 }}>
          {P.FILTERS.map((f) => (
            <button key={f} className={"chip" + (cat === f && !special ? " on" : "")} onClick={() => { setCat(f); setSpecial(null); }}>{f}</button>
          ))}
        </div>
        <div className="row" style={{ justifyContent: "space-between", flexWrap: "wrap", gap: 10 }}>
          <div className="chips" style={{ flex: 1 }}>
            {P.SPECIAL_FILTERS.map((f) => (
              <button key={f.key} className={"chip" + (special === f.key ? " on" : "")} onClick={() => { setSpecial(special === f.key ? null : f.key); }}>{f.label}</button>
            ))}
          </div>
          {view === "feed" && (
            <select className="chip" style={{ fontWeight: 600, paddingRight: 30 }} value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="best">Сначала лучшие</option>
              <option value="guest">Оценка гостей</option>
              <option value="price">Сначала дешевле</option>
            </select>
          )}
        </div>

        <div style={{ margin: "10px 0 18px", fontSize: 13.5, color: "var(--ink-2)", fontWeight: 600 }}>
          {view === "feed" ? `${list.length.toLocaleString("ru-RU")} блюд найдено` : `${P.restaurants.length} ресторанов на карте · нажмите на метку`}
        </div>

        {view === "map" ? (
          <MapView ctx={ctx} dishes={list} />
        ) : list.length === 0 ? (
          <EmptyState emoji="🔍" title="Ничего не нашлось" text="Попробуй изменить запрос или сбросить фильтры — рядом точно есть что-то вкусное." />
        ) : (
          <>
            <div className="dgrid">
              {list.slice(0, limit).map((d) => <DishCard key={d.id} dish={d} saved={ctx.saved.has(d.id)} onSave={ctx.toggleSave} onOpen={ctx.openDish} />)}
            </div>
            {list.length > limit && (
              <div style={{ textAlign: "center", marginTop: 22 }}>
                <button className="btn btn-soft" onClick={() => setLimit((l) => l + 48)}>Показать ещё {Math.min(48, list.length - limit)} <Icon name="arrowDown" size={16} /></button>
              </div>
            )}
          </>
        )}
      </section>

      {/* how it works */}
      <section className="wrap sec">
        <div className="sec-head"><div><h2 className="sec-title">Как работает Paella</h2><p className="sec-sub">Люди могут идти не просто в ресторан, а за конкретным блюдом</p></div></div>
        <div className="how-grid">
          {HOW.map((h) => (
            <div className="how-card" key={h.n}>
              <div className="how-num">{h.n}</div>
              <h4>{h.t}</h4>
              <p>{h.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* AI teaser */}
      <section className="wrap sec">
        <div className="ai-hero" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 20, alignItems: "center" }}>
          <div>
            <span className="pill"><Icon name="sparkles" size={15} />AI-подбор</span>
            <h2 style={{ fontSize: 30, fontWeight: 800, letterSpacing: "-0.03em", color: "#fff", margin: "14px 0 0", lineHeight: 1.1 }}>AI-подбор блюд под ваш вкус</h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.55, opacity: .92, margin: "12px 0 0", maxWidth: 560 }}>
              Расскажите, что любите и в каком вы настроении — Paella предложит реальные блюда с объяснением, <b>почему они подойдут именно вам</b>. По вкусу, бюджету, оценкам гостей и отзывам.
            </p>
            <button className="btn" style={{ background: "#fff", color: "var(--olive-deep)", marginTop: 20 }} onClick={() => ctx.go("ai")}>
              <Icon name="sparkles" size={18} />Попробовать AI-подбор
            </button>
          </div>
        </div>
      </section>

      {/* methodology + about teaser cards */}
      <section className="wrap sec">
        <div className="how-grid" style={{ gridTemplateColumns: "1fr" }}>
          <div style={{ display: "grid", gap: 14, gridTemplateColumns: "1fr" }}>
            <div className="m-compare">
              <div className="m-col hot" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 18 }}>
                <div>
                  <span className="badge b-olive" style={{ background: "rgba(255,255,255,.6)" }}><Icon name="sparkles" size={12} />Методика</span>
                  <h3 className="serif" style={{ fontSize: 27, margin: "12px 0 8px", letterSpacing: "-0.01em" }}>Как Paella оценивает блюдо</h3>
                  <p style={{ fontSize: 14.5, color: "var(--ink-2)", margin: 0, lineHeight: 1.5 }}>Сначала — реальная оценка гостей и отзывы. Где их нет — прозрачная AI-модель: вкус, цена, подача, порция.</p>
                </div>
                <button className="btn btn-dark" style={{ alignSelf: "flex-start" }} onClick={() => ctx.go("methodology")}>Изучить методику <Icon name="arrowRight" size={17} /></button>
              </div>
              <div className="m-col dim" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 18 }}>
                <div>
                  <span className="badge b-plum"><Icon name="user" size={12} />Об авторе</span>
                  <h3 className="serif" style={{ fontSize: 27, margin: "12px 0 8px", letterSpacing: "-0.01em" }}>Проект Ольги Витальевны Орловой</h3>
                  <p style={{ fontSize: 14.5, color: "var(--ink-2)", margin: 0, lineHeight: 1.5 }}>Автор идеи и концепции цифровой платформы Paella — сервиса для оценки и рекомендации конкретных блюд.</p>
                </div>
                <button className="btn btn-soft" style={{ alignSelf: "flex-start" }} onClick={() => ctx.go("about")}>Об авторе проекта <Icon name="arrowRight" size={17} /></button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen, FeaturedCarousel, applyFilters });