// ============================================================================
//  Простая администраторская панель
//  — Добавление товаров и правка цен. Изменения хранятся в браузере
//    (localStorage) и сразу попадают в конструктор, пакеты, КП и заявки.
//  — Доступ по коду (по умолчанию ниже). Код можно сменить в ADMIN_PASS.
// ============================================================================
const ADMIN_PASS = "razum2025"; // ← код доступа в админ-панель

// Доступ к админке только по секретной ссылке /changes (замаскировано — не /admin).
// Работает как https://razumdom38.ru/changes (на боевом домене), так и через
// #changes / ?changes в превью и на статике.
function rdAdminAllowed() {
  try {
    const path = location.pathname.replace(/\/+$/, "").toLowerCase();
    const hash = (location.hash || "").toLowerCase();
    const search = (location.search || "").toLowerCase();
    return path.endsWith("/changes") || path.endsWith("/changes.html") ||
           hash.includes("changes") || search.includes("changes");
  } catch (e) { return false; }
}

const AdminPanel = () => {
  const RD = window.RD;
  const allowed = rdAdminAllowed();
  const [open, setOpen] = React.useState(allowed); // по ссылке /changes — открыта сразу
  const [unlocked, setUnlocked] = React.useState(() => {
    try { return sessionStorage.getItem("rd_admin_ok") === "1"; } catch (e) { return false; }
  });
  const [pass, setPass] = React.useState("");
  const [passErr, setPassErr] = React.useState(false);
  const [, force] = React.useReducer((x) => x + 1, 0);

  // живой список при правках
  React.useEffect(() => RD.onCatalogChange(force), []);

  const tryUnlock = (e) => {
    e.preventDefault();
    if (pass.trim() === ADMIN_PASS) {
      setUnlocked(true); setPassErr(false);
      try { sessionStorage.setItem("rd_admin_ok", "1"); } catch (e2) {}
    } else { setPassErr(true); }
  };

  const groups = RD.groupOrder();
  const sensors = RD.SENSORS;

  // ——— форма добавления ———
  const [f, setF] = React.useState({ name: "", desc: "", group: groups[0] || "", newGroup: "", price: "", icon: "bulb" });
  const upd = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const addNow = () => {
    const grp = f.group === "__new__" ? f.newGroup.trim() : f.group;
    if (!f.name.trim() || !grp || !(Number(f.price) > 0)) return;
    RD.addProduct({ name: f.name, desc: f.desc, group: grp, price: f.price, icon: f.icon });
    setF({ name: "", desc: "", group: grp, newGroup: "", price: "", icon: "bulb" });
  };

  // Для обычных посетителей админка полностью скрыта (нет даже кнопки).
  // Доступ — только по секретной ссылке /changes.
  if (!allowed) return null;

  return (
    <>
      {/* Триггер */}
      <button onClick={() => setOpen(true)} title="Админ-панель" style={{
        position: "fixed", left: 18, bottom: 18, zIndex: 9000,
        height: 44, padding: "0 16px", display: "inline-flex", alignItems: "center", gap: 9,
        background: "var(--ink-2)", color: "#EEF3FA", border: "1px solid rgba(238,243,250,0.16)",
        borderRadius: 999, cursor: "pointer", boxShadow: "var(--shadow-lg)",
        fontSize: 13, fontFamily: "var(--font)", fontWeight: 500,
      }}>
        <RDIcon name="gear" size={16} /> Админ
      </button>

      {!open ? null : (
        <div onClick={() => setOpen(false)} style={{
          position: "fixed", inset: 0, zIndex: 9001,
          background: "rgba(12,18,33,0.55)", backdropFilter: "blur(4px)",
          display: "grid", placeItems: "center", padding: 20,
        }}>
          <div onClick={(e) => e.stopPropagation()} style={{
            width: "min(840px, 96vw)", maxHeight: "90vh", display: "flex", flexDirection: "column",
            background: "var(--surface)", border: "1px solid var(--line-2)", borderRadius: 22,
            overflow: "hidden", boxShadow: "var(--shadow-lg)",
          }}>
            {/* header */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "20px 24px", borderBottom: "1px solid var(--line-2)", background: "var(--ink-2)", color: "#EEF3FA" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <RDIcon name="gear" size={22} />
                <div>
                  <div style={{ fontSize: 17, fontWeight: 500 }}>Админ-панель · каталог</div>
                  <div className="mono" style={{ fontSize: 11, opacity: 0.65, marginTop: 2 }}>Товары и цены · сохраняется в этом браузере</div>
                </div>
              </div>
              <button onClick={() => setOpen(false)} style={{ width: 36, height: 36, borderRadius: 10, border: "1px solid rgba(238,243,250,0.2)", background: "transparent", color: "#EEF3FA", cursor: "pointer", display: "grid", placeItems: "center" }}>
                <RDIcon name="x" size={18} />
              </button>
            </div>

            {!unlocked ? (
              <form onSubmit={tryUnlock} style={{ padding: 36, display: "grid", gap: 14, placeItems: "center", textAlign: "center" }}>
                <div style={{ width: 56, height: 56, borderRadius: 16, background: "var(--bg-2)", color: "var(--ink-2)", display: "grid", placeItems: "center" }}>
                  <RDIcon name="key" size={24} />
                </div>
                <div className="h-card" style={{ fontSize: 18 }}>Введите код доступа</div>
                <input type="password" autoFocus value={pass} onChange={(e) => { setPass(e.target.value); setPassErr(false); }}
                  placeholder="Код" style={{ ...adminInput, width: 220, textAlign: "center" }} />
                {passErr && <div style={{ color: "var(--bad, #C2603C)", fontSize: 13 }}>Неверный код</div>}
                <button type="submit" className="btn btn-primary">Войти <RDIcon name="arrow-right" size={15} /></button>
                <div className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>Код можно сменить в коде (ADMIN_PASS)</div>
              </form>
            ) : (
              <div style={{ overflow: "auto", padding: 22 }}>
                {/* Добавление товара */}
                <div style={{ border: "1px solid var(--line-2)", borderRadius: 16, padding: 18, background: "var(--bg-2)" }}>
                  <div className="label" style={{ marginBottom: 12 }}>Добавить товар</div>
                  <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 130px 120px", gap: 10 }} className="adm-add">
                    <input placeholder="Название" value={f.name} onChange={(e) => upd("name", e.target.value)} style={adminInput} />
                    <input placeholder="Описание" value={f.desc} onChange={(e) => upd("desc", e.target.value)} style={adminInput} />
                    <input type="number" placeholder="Цена, ₽" value={f.price} onChange={(e) => upd("price", e.target.value)} style={adminInput} />
                    <select value={f.icon} onChange={(e) => upd("icon", e.target.value)} style={adminInput}>
                      {RD.ICON_OPTIONS.map((ic) => <option key={ic} value={ic}>{ic}</option>)}
                    </select>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: f.group === "__new__" ? "1fr 1fr auto" : "1fr auto", gap: 10, marginTop: 10 }} className="adm-add2">
                    <select value={f.group} onChange={(e) => upd("group", e.target.value)} style={adminInput}>
                      {groups.map((g) => <option key={g} value={g}>{g}</option>)}
                      <option value="__new__">+ Новая группа…</option>
                    </select>
                    {f.group === "__new__" && (
                      <input placeholder="Название новой группы" value={f.newGroup} onChange={(e) => upd("newGroup", e.target.value)} style={adminInput} />
                    )}
                    <button onClick={addNow} className="btn btn-accent" style={{ height: 44, whiteSpace: "nowrap" }}>
                      <RDIcon name="plus" size={16} /> Добавить
                    </button>
                  </div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 8 }}>Новые группы появляются в конструкторе свёрнутыми.</div>
                </div>

                {/* Список товаров */}
                <div style={{ marginTop: 18 }}>
                  {groups.map((g) => {
                    const rows = sensors.filter((s) => s.group === g);
                    if (rows.length === 0) return null;
                    return (
                      <div key={g} style={{ marginBottom: 18 }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                          <span className="label" style={{ color: "var(--ink-2)", textTransform: "none", letterSpacing: "-0.01em", fontWeight: 600, fontFamily: "var(--font)", fontSize: 14 }}>{g}</span>
                          {!RD.MAIN_GROUPS.includes(g) && <span className="mono" style={{ fontSize: 9.5, letterSpacing: "0.08em", textTransform: "uppercase", background: "var(--bg-2)", color: "var(--muted)", padding: "3px 7px", borderRadius: 999 }}>доп.</span>}
                        </div>
                        <div style={{ display: "grid", gap: 8 }}>
                          {rows.map((s) => (
                            <div key={s.id} style={{ display: "grid", gridTemplateColumns: "40px 1fr 150px 44px", gap: 12, alignItems: "center", padding: "10px 12px", border: "1px solid var(--line)", borderRadius: 12, background: "var(--surface)" }} className="adm-row">
                              <div style={{ width: 36, height: 36, borderRadius: 9, background: "var(--bg-2)", color: "var(--ink-2)", display: "grid", placeItems: "center" }}>
                                <RDIcon name={s.icon} size={18} />
                              </div>
                              <input key={s.id + ":n:" + s.name} defaultValue={s.name}
                                onBlur={(e) => { const v = e.target.value.trim(); if (v && v !== s.name) RD.updateProduct(s.id, { name: v }); }}
                                style={{ ...adminInput, padding: "9px 11px" }} />
                              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                                <input key={s.id + ":p:" + s.price} type="number" defaultValue={s.price}
                                  onBlur={(e) => { const v = Math.max(0, Math.round(Number(e.target.value) || 0)); if (v !== s.price) RD.updateProduct(s.id, { price: v }); }}
                                  style={{ ...adminInput, padding: "9px 11px", textAlign: "right" }} />
                                <span className="mono" style={{ fontSize: 13, color: "var(--muted)" }}>₽</span>
                              </div>
                              <button onClick={() => { if (confirm("Удалить «" + s.name + "» из каталога?")) RD.deleteProduct(s.id); }}
                                title="Удалить" style={{ width: 40, height: 40, borderRadius: 10, border: "1px solid var(--line)", background: "var(--bg-2)", color: "var(--muted)", cursor: "pointer", display: "grid", placeItems: "center" }}>
                                <RDIcon name="trash" size={17} />
                              </button>
                            </div>
                          ))}
                        </div>
                      </div>
                    );
                  })}
                </div>

                {/* Footer actions */}
                <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginTop: 6, paddingTop: 16, borderTop: "1px solid var(--line-2)" }}>
                  <button onClick={() => { if (confirm("Сбросить каталог к заводским ценам и товарам? Все правки удалятся.")) RD.resetCatalog(); }}
                    className="btn btn-ghost">Сбросить к заводским</button>
                  <span className="mono" style={{ alignSelf: "center", fontSize: 11, color: "var(--muted)" }}>Изменения сохраняются автоматически</span>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 680px) {
          .adm-add { grid-template-columns: 1fr 1fr !important; }
          .adm-add2 { grid-template-columns: 1fr !important; }
          .adm-row { grid-template-columns: 36px 1fr 110px 40px !important; }
        }
      `}</style>
    </>
  );
};

const adminInput = {
  width: "100%",
  background: "var(--surface)",
  border: "1px solid var(--line)",
  borderRadius: 10,
  padding: "11px 13px",
  color: "var(--ink-2)",
  fontSize: 14,
  fontFamily: "var(--font)",
  outline: "none",
};

window.AdminPanel = AdminPanel;