/* global React */

// Maps slider level (1-5) ↔ raw API penalty/reward values
const SLIDER_SCALES = {
  no_gaps:      { field: "group_gap_penalty",       levels: [500, 2000, 5000, 10000, 20000] },
  balance:      { field: "load_balance_penalty",     levels: [200, 700,  1500,  3000,   6000] },
  home_dept:    { field: "dept_building_reward",     levels: [0,   1000, 3000,  6000,  10000] },
  shift_strict: { field: "shift_preference_penalty", levels: [200, 700,  1500,  3000,   6000] },
};

function rawToSlider(key, raw) {
  const levels = SLIDER_SCALES[key].levels;
  let best = 0, bestDiff = Math.abs(raw - levels[0]);
  for (let i = 1; i < levels.length; i++) {
    const d = Math.abs(raw - levels[i]);
    if (d < bestDiff) { bestDiff = d; best = i; }
  }
  return best + 1;
}
function sliderToRaw(key, val) { return SLIDER_SCALES[key].levels[val - 1]; }

function SettingsScreen() {
  const [sliders, setSliders] = useState({ no_gaps: 3, balance: 3, home_dept: 4, shift_strict: 3 });
  const [iterations, setIterations] = useState(10);
  const [pairDisc, setPairDisc] = useState("");
  const [buildingGap, setBuildingGap] = useState(true);
  const [exceptions, setExceptions] = useState("арх-15о,арх-15ао,нд-15о,нд-17о,нд-19о,юр-17о,юр-19о");
  const [courseShifts, setCourseShifts] = useState({ course1: 1, course2: 2, course3: 1 });
  const [saving, setSaving] = useState(false);
  const [saveMsg, setSaveMsg] = useState("");
  const [rawSettings, setRawSettings] = useState(null);

  useEffect(() => {
    window.API.get("/api/settings").then(s => {
      setRawSettings(s);
      setSliders({
        no_gaps:      rawToSlider("no_gaps",      s.group_gap_penalty),
        balance:      rawToSlider("balance",      s.load_balance_penalty),
        home_dept:    rawToSlider("home_dept",    s.dept_building_reward),
        shift_strict: rawToSlider("shift_strict", s.shift_preference_penalty),
      });
      setIterations(s.iterations);
      setPairDisc(s.pair_disciplines || "");
      setBuildingGap(s.require_building_gap !== false);
      setExceptions(s.course1_exceptions || "");
      setCourseShifts({ course1: s.course1_shift || 1, course2: s.course2_shift || 2, course3: s.course3_shift || 1 });
    }).catch(() => {});
  }, []);

  async function handleSave() {
    setSaving(true);
    setSaveMsg("");
    try {
      const base = rawSettings || {};
      await window.API.put("/api/settings", {
        ...base,
        iterations,
        pair_disciplines: pairDisc,
        require_building_gap: buildingGap,
        course1_exceptions: exceptions,
        course1_shift: courseShifts.course1,
        course2_shift: courseShifts.course2,
        course3_shift: courseShifts.course3,
        group_gap_penalty:       sliderToRaw("no_gaps",      sliders.no_gaps),
        load_balance_penalty:    sliderToRaw("balance",      sliders.balance),
        dept_building_reward:    sliderToRaw("home_dept",    sliders.home_dept),
        shift_preference_penalty:sliderToRaw("shift_strict", sliders.shift_strict),
      });
      setSaveMsg("Настройки сохранены.");
    } catch (e) {
      setSaveMsg("Ошибка: " + e.message);
    } finally {
      setSaving(false);
    }
  }

  function handleReset() {
    setSliders({ no_gaps: 3, balance: 3, home_dept: 4, shift_strict: 3 });
    setIterations(10);
    setBuildingGap(true);
    setSaveMsg("");
  }

  return (
    <div style={{ padding: "32px 40px", maxWidth: 1200, margin: "0 auto", width: "100%", overflow: "auto" }}>
      <div className="sectionHeader">
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 10 }}>— НАСТРОЙКИ · оптимизатор</div>
          <div className="sectionHeader__title">Что важно <em>именно вам.</em></div>
          <div className="sectionHeader__sub">Каждая ручка влияет на веса в функции потерь. Изменения применятся при следующей генерации — старое расписание не пострадает.</div>
        </div>
        <div className="sectionHeader__actions">
          {saveMsg && (
            <span style={{ fontSize: 12, color: saveMsg.startsWith("Ошибка") ? "var(--danger)" : "var(--success)" }}>
              {saveMsg}
            </span>
          )}
          <button className="btn btn--ghost" onClick={handleReset} disabled={saving}>Сбросить</button>
          <button className="btn btn--primary" onClick={handleSave} disabled={saving}>
            {saving ? "Сохранение…" : "Сохранить"}
          </button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 20 }}>
        {[
          { id: "no_gaps",      label: "Без окошек",       hint: "Как строго избегать «окошек» в расписании групп и преподавателей" },
          { id: "balance",      label: "Баланс нагрузки",  hint: "Равномерное распределение предметов по дням" },
          { id: "home_dept",    label: "Родная кафедра",   hint: "Ставить занятия в корпусе кафедры преподавателя" },
          { id: "shift_strict", label: "Соблюдение смен",  hint: "Насколько строго соблюдать привязку курсов к сменам" },
        ].map(s => (
          <div key={s.id} className="card">
            <div style={{ padding: "22px 24px" }}>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 8 }}>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.1, whiteSpace: "nowrap" }}>{s.label}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--accent)", whiteSpace: "nowrap" }}>
                  {["слабо", "мягко", "умеренно", "строго", "очень строго"][sliders[s.id] - 1]}
                </div>
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 20, lineHeight: 1.5 }}>{s.hint}</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6, marginBottom: 12 }}>
                {[1, 2, 3, 4, 5].map(i => (
                  <button key={i} onClick={() => setSliders({ ...sliders, [s.id]: i })}
                    style={{
                      height: 36,
                      borderRadius: 4,
                      border: "1px solid " + (sliders[s.id] >= i ? "var(--accent)" : "var(--line-strong)"),
                      background: sliders[s.id] >= i ? "var(--accent)" : "var(--surface)",
                      color: sliders[s.id] >= i ? "#fff" : "var(--ink-3)",
                      fontFamily: "var(--font-mono)",
                      fontSize: 12,
                      fontWeight: 600,
                      transition: "all 0.12s",
                    }}>{i}</button>
                ))}
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--ink-4)", fontFamily: "var(--font-mono)", letterSpacing: "0.08em" }}>
                <span>СЛАБО</span><span>СТРОГО</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="card" style={{ marginBottom: 20 }}>
        <div className="card__header">
          <div className="card__title"><span className="num">i.</span> Смены по курсам</div>
        </div>
        <div style={{ padding: "22px 24px", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {[
            { c: "1 курс", key: "course1" },
            { c: "2 курс", key: "course2" },
            { c: "3 курс", key: "course3" },
          ].map(x => (
            <div key={x.c} className="field">
              <label className="field__label">{x.c}</label>
              <div style={{ display: "flex", background: "var(--paper)", border: "1px solid var(--line-strong)", borderRadius: 6, padding: 3 }}>
                {[1, 2].map(sh => (
                  <button key={sh}
                    onClick={() => setCourseShifts({ ...courseShifts, [x.key]: sh })}
                    style={{
                      flex: 1, padding: "8px 0", fontSize: 12, fontWeight: 500,
                      background: courseShifts[x.key] === sh ? "var(--ink)" : "transparent",
                      color: courseShifts[x.key] === sh ? "var(--paper)" : "var(--ink-3)",
                      borderRadius: 4,
                    }}>
                    {sh === 1 ? "I · утро (09–13)" : "II · день (14–18)"}
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: "0 24px 22px" }}>
          <div className="field">
            <label className="field__label">Исключения для 1 курса</label>
            <input className="input" value={exceptions} onChange={e => setExceptions(e.target.value)} />
            <div className="field__hint">Группы через запятую — для них будет использоваться 2 смена</div>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 40 }}>
        <div className="card">
          <div className="card__header">
            <div className="card__title"><span className="num">ii.</span> Парные предметы</div>
          </div>
          <div style={{ padding: "22px 24px" }}>
            <div className="field">
              <label className="field__label">Дисциплины</label>
              <input className="input" value={pairDisc} onChange={e => setPairDisc(e.target.value)} />
              <div className="field__hint">Ставятся по 2 пары в день, не более. Через запятую.</div>
            </div>
            <label style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 16, cursor: "pointer" }}>
              <input type="checkbox" checked={buildingGap} onChange={e => setBuildingGap(e.target.checked)} style={{ width: 16, height: 16 }} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>Окошко при смене корпуса</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Обязательный промежуток между парами в разных корпусах</div>
              </div>
            </label>
          </div>
        </div>

        <div className="card">
          <div className="card__header">
            <div className="card__title"><span className="num">iii.</span> Оптимизация</div>
          </div>
          <div style={{ padding: "22px 24px" }}>
            <div className="field" style={{ marginBottom: 20 }}>
              <label className="field__label">Итерации генерации</label>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <input type="number" className="input" min={1} max={100} value={iterations}
                  onChange={e => setIterations(Number(e.target.value))} style={{ width: 100 }} />
                <div style={{ fontSize: 12, color: "var(--ink-3)" }}>≈ {Math.round(iterations * 0.7)}с</div>
              </div>
            </div>
            <div style={{ padding: 14, background: "var(--accent-soft)", borderRadius: 6 }}>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 15, fontStyle: "italic", color: "var(--accent)", marginBottom: 6 }}>
                Профиль «текущий»
              </div>
              <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5 }}>
                Оптимизатор работает с текущим набором данных.
                Больше итераций — лучше результат, но дольше.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SettingsScreen = SettingsScreen;