/* ============================================================
   Paella — Добавить блюдо (fake UGC form)
   ============================================================ */

const ADD_TAGS = ["Очень вкусно","Большая порция","Красиво подали","Хорошее цена/качество","Must try","Пересолено","Жирновато","Сладко","Остро","Маленькая порция","Долго ждать","Цена выше ожиданий"];
const ADD_CATS = ["Паста","Завтраки","Бургеры","Стейки","Суши","Рамен","Супы","Десерты","Кофе","Салаты","Пицца","Морепродукты","Грузинская кухня","Авторская кухня"];
const CRIT_DEFS = [
  { key: "taste", label: "Вкус", icon: "flame", weight: 0.4 },
  { key: "portion", label: "Порция", icon: "utensils", weight: 0.2 },
  { key: "plating", label: "Подача", icon: "sparkles", weight: 0.15 },
  { key: "value", label: "Цена / качество", icon: "wallet", weight: 0.25 },
];

function StarRow({ def, value, onSet }) {
  const [hover, setHover] = useState(0);
  return (
    <div className="crit-row">
      <div className="ch">
        <span className="nm"><Icon name={def.icon} size={15} style={{ color: "var(--olive)" }} />{def.label}</span>
        <span className={"vl" + (value ? " set" : "")}>{value ? value + " / 5" : "—"}</span>
      </div>
      <div className="stars" onMouseLeave={() => setHover(0)}>
        {[1, 2, 3, 4, 5].map((s) => (
          <button key={s} className={"starbtn" + ((hover || value) >= s ? " on" : "")}
            onMouseEnter={() => setHover(s)} onClick={() => onSet(def.key, value === s ? 0 : s)} aria-label={def.label + " " + s}>
            <Icon name="star" size={26} fill={(hover || value) >= s ? "currentColor" : "none"} sw={1.6} />
          </button>
        ))}
      </div>
    </div>
  );
}

function critScore(crit) {
  let sum = 0, wsum = 0;
  CRIT_DEFS.forEach((d) => { if (crit[d.key]) { sum += crit[d.key] * d.weight; wsum += d.weight; } });
  if (!wsum) return null;
  return Math.round((sum / wsum) * 10) / 10;
}

function AddScreen({ ctx }) {
  const [done, setDone] = useState(false);
  const [name, setName] = useState("");
  const [rest, setRest] = useState("");
  const [cat, setCat] = useState("Паста");
  const [price, setPrice] = useState("");
  const [rating, setRating] = useState(null);
  const [tags, setTags] = useState([]);
  const [text, setText] = useState("");
  const [showCrit, setShowCrit] = useState(false);
  const [crit, setCrit] = useState({ taste: 0, portion: 0, plating: 0, value: 0 });

  const setStar = (k, v) => setCrit((p) => ({ ...p, [k]: v }));
  const cScore = critScore(crit);
  const toggleTag = (t) => setTags((p) => p.includes(t) ? p.filter((x) => x !== t) : [...p, t]);
  const valid = name.trim() && rating;

  const submit = () => {
    if (!valid) return;
    ctx.addContribution({ name, rest, cat, price, rating, tags, text, crit, cScore });
    setDone(true);
    paellaScrollTo(0);
  };
  const reset = () => {
    setDone(false); setName(""); setRest(""); setCat("Паста"); setPrice(""); setRating(null); setTags([]); setText("");
    setShowCrit(false); setCrit({ taste: 0, portion: 0, plating: 0, value: 0 });
  };

  if (done) {
    return (
      <div className="fadein wrap" style={{ maxWidth: 620 }}>
        <div className="panel" style={{ marginTop: 30 }}>
          <div className="success">
            <div className="ring"><Icon name="check" size={42} /></div>
            <h2 style={{ fontSize: 24, fontWeight: 800, letterSpacing: "-0.02em", margin: "0 0 8px" }}>Спасибо!</h2>
            <p className="muted" style={{ fontSize: 15.5, maxWidth: 380, margin: "0 auto 22px", lineHeight: 1.5 }}>
              Твой отзыв поможет другим выбрать блюдо лучше. Каждый сигнал делает Paella Score точнее.
            </p>
            {cScore != null && (
              <div className="row" style={{ justifyContent: "center", gap: 10, marginBottom: 18 }}>
                <span className="score lg"><Icon name="star" size={16} fill="var(--gold)" sw={0} />{cScore.toFixed(1)}</span>
                <span className="muted" style={{ fontSize: 13.5, fontWeight: 600 }}>ваша оценка блюда по критериям</span>
              </div>
            )}
            <div className="wrap-g" style={{ justifyContent: "center", marginBottom: 24 }}>
              {tags.map((t, i) => <span className="badge b-coral" key={i}>{t}</span>)}
            </div>
            <div className="row" style={{ justifyContent: "center", gap: 10, flexWrap: "wrap" }}>
              <button className="btn btn-pri" onClick={reset}><Icon name="plus" size={18} />Добавить ещё</button>
              <button className="btn btn-soft" onClick={() => ctx.go("profile")}><Icon name="user" size={18} />Мой профиль</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="fadein wrap" style={{ maxWidth: 640 }}>
      <div className="pintro">
        <span className="eyebrow"><Icon name="plus" size={13} style={{ verticalAlign: "-2px", marginRight: 4 }} />Вклад сообщества</span>
        <h1>Добавить блюдо</h1>
        <p>Помоги другим понять, что действительно стоит заказать. Быстрый отзыв в Paella занимает 10–20 секунд.</p>
      </div>

      <div className="panel" style={{ padding: 22, marginTop: 22, display: "flex", flexDirection: "column", gap: 20 }}>
        <div className="field">
          <label>Название блюда *</label>
          <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Например: Паста с трюфельным кремом" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <div className="field"><label>Ресторан</label><input value={rest} onChange={(e) => setRest(e.target.value)} placeholder="Osteria Milano" /></div>
          <div className="field"><label>Цена, ₽</label><input value={price} onChange={(e) => setPrice(e.target.value.replace(/\D/g, ""))} placeholder="690" inputMode="numeric" /></div>
        </div>
        <div className="field">
          <label>Категория</label>
          <select value={cat} onChange={(e) => setCat(e.target.value)}>{ADD_CATS.map((c) => <option key={c}>{c}</option>)}</select>
        </div>

        <div className="field">
          <label>Оценка *</label>
          <div className="rate-row">
            {[["🔥", "Взял бы ещё", "fire"], ["🙂", "Нормально", "ok"], ["👎", "Не рекомендую", "no"]].map((r) => (
              <button key={r[2]} className={"rate-opt" + (rating === r[2] ? " on" : "")} onClick={() => setRating(r[2])}>
                <span className="em">{r[0]}</span><span className="t">{r[1]}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="field">
          <label>Быстрые теги</label>
          <div className="tagpick">
            {ADD_TAGS.map((t) => <button key={t} className={"tagopt" + (tags.includes(t) ? " on" : "")} onClick={() => toggleTag(t)}>{t}</button>)}
          </div>
        </div>

        {/* optional detailed scoring */}
        <div className="field">
          <button className="rate-toggle" onClick={() => setShowCrit((v) => !v)}>
            <span className="tt"><Icon name="sliders" size={16} style={{ color: "var(--olive)" }} />Оценить по баллам</span>
            <span className="row" style={{ gap: 10 }}>
              <span className="opt">необязательно</span>
              <Icon name="arrowDown" size={17} style={{ transform: showCrit ? "rotate(180deg)" : "none", transition: ".2s", color: "var(--ink-3)" }} />
            </span>
          </button>
          {showCrit && (
            <div className="crit" style={{ marginTop: 12 }}>
              <p className="muted" style={{ fontSize: 13, margin: "0 0 2px", lineHeight: 1.45 }}>
                Поставьте оценки по критериям — они формируют <b>Paella Score</b> блюда. Вкус и цена/качество весят больше всего.
              </p>
              {CRIT_DEFS.map((def) => <StarRow key={def.key} def={def} value={crit[def.key]} onSet={setStar} />)}
              {cScore != null && (
                <div className="crit-score">
                  <span className="big">{cScore.toFixed(1)}</span>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 800, color: "var(--olive-deep)" }}>Ваша оценка блюда</div>
                    <div className="muted" style={{ fontSize: 12.5 }}>взвешенная по критериям · влияет на рейтинг</div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>

        <div className="field">
          <label>Короткий отзыв</label>
          <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder="Например: паста насыщенная, порция большая, но немного жирная…"></textarea>
        </div>

        <button className="btn btn-pri btn-block" disabled={!valid} style={{ opacity: valid ? 1 : 0.5, cursor: valid ? "pointer" : "not-allowed" }} onClick={submit}>
          <Icon name="sparkles" size={18} />Опубликовать
        </button>
        <p className="muted center" style={{ fontSize: 12.5, margin: 0 }}>Прототип сбора отзывов сообщества: запись сохраняется только в этой сессии и пока не отправляется на сервер.</p>
      </div>
    </div>
  );
}

Object.assign(window, { AddScreen });