// Main calculator React app. Configuration form only — no pricing displayed.
// Customer selects what they need; submit fires a request for a manual quote.

const { useState, useMemo, useEffect } = React;

const initialState = {
  siteTypeId: 'corporate',
  designId: 'adapted',
  cmsId: 'bitrix',
  pages: 12,
  features: ['adaptive', 'seo'],
  extras: [],
  urgencyId: 'normal'
};

function Calculator() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [state, setState] = useState(initialState);
  const [summaryOpen, setSummaryOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);

  useEffect(() => {
    const root = document.documentElement;
    const theme = THEMES[t.theme] || THEMES.brand;
    Object.entries(theme).forEach(([k, v]) => root.style.setProperty(k, v));
    root.dataset.density = t.density;
    root.dataset.layout = t.layout;
  }, [t.theme, t.density, t.layout]);

  function setSiteType(id) {
    const st = SITE_TYPES.find((s) => s.id === id);
    if (!st) return;
    setState((s) => ({
      ...s,
      siteTypeId: id,
      pages: Math.min(st.pages.max, Math.max(st.pages.min, s.pages || st.pages.default))
    }));
  }

  function toggleFeature(id) {
    setState((s) => ({
      ...s,
      features: s.features.includes(id) ? s.features.filter((x) => x !== id) : [...s.features, id]
    }));
  }
  function toggleExtra(id) {
    setState((s) => ({
      ...s,
      extras: s.extras.includes(id) ? s.extras.filter((x) => x !== id) : [...s.extras, id]
    }));
  }

  const selection = useMemo(() => buildSelection(state), [state]);
  const siteType = selection.siteType;

  return (
    <div className={`app density-${t.density} layout-${t.layout}`}>

      <main className="shell">
        <section className="form">
          <Intro />

          <Step index={1} title="Какой сайт нужен" hint="Выберите тип, ближе всего к вашей задаче">
            <div className="grid-cards">
              {SITE_TYPES.map((s) =>
              <ChoiceCard
                key={s.id}
                active={state.siteTypeId === s.id}
                onClick={() => setSiteType(s.id)}
                icon={<SiteIcon id={s.id} />}
                title={s.name}
                sub={s.desc} />

              )}
            </div>
          </Step>

          <Step index={2} title="Дизайн" hint="От готового шаблона до полностью индивидуального">
            <div className="grid-cards grid-cards--3">
              {DESIGN_OPTIONS.map((d) =>
              <ChoiceCard
                key={d.id}
                active={state.designId === d.id}
                onClick={() => setState((s) => ({ ...s, designId: d.id }))}
                title={d.name}
                sub={d.desc} />

              )}
            </div>
          </Step>

          <Step index={3} title="Платформа" hint="На какой CMS или фреймворке делаем">
            <div className="pill-row">
              {CMS_OPTIONS.map((c) =>
              <Pill
                key={c.id}
                active={state.cmsId === c.id}
                onClick={() => setState((s) => ({ ...s, cmsId: c.id }))}>
                
                  {c.name}
                </Pill>
              )}
            </div>
          </Step>

          <Step index={4} title="Объём сайта" hint="Сколько страниц должно быть на сайте">
            <PagesSlider
              value={state.pages}
              min={siteType.pages.min}
              max={siteType.pages.max}
              defaultIncluded={siteType.pages.default}
              onChange={(v) => setState((s) => ({ ...s, pages: v }))} />
            
          </Step>

          <Step index={5} title="Функциональность" hint="Что должно быть на сайте">
            <div className="tiles">
              {FEATURES.map((f) =>
              <FeatureTile
                key={f.id}
                active={state.features.includes(f.id)}
                onClick={() => toggleFeature(f.id)}
                name={f.name}
                desc={f.desc} />

              )}
            </div>
          </Step>

          <Step index={6} title="Дополнительные услуги" hint="К проекту можно добавить">
            <div className="tiles">
              {EXTRAS.map((e) =>
              <FeatureTile
                key={e.id}
                active={state.extras.includes(e.id)}
                onClick={() => toggleExtra(e.id)}
                name={e.name}
                desc={e.desc} />

              )}
            </div>
          </Step>

          <Step index={7} title="Сроки" hint="Хотите ускорить выпуск проекта">
            <div className="grid-cards grid-cards--3">
              {URGENCY.map((u) =>
              <ChoiceCard
                key={u.id}
                active={state.urgencyId === u.id}
                onClick={() => setState((s) => ({ ...s, urgencyId: u.id }))}
                title={u.name}
                sub={u.desc} />

              )}
            </div>
          </Step>

          <div className="form-foot">
            <p>
              Это ваш краткий бриф. Менеджер изучит выбранные параметры, при необходимости задаст
              уточняющие вопросы и подготовит точную смету и сроки.
            </p>
          </div>
        </section>

        <aside className="summary">
          <Summary
            selection={selection}
            onContact={() => setContactOpen(true)} />
          
        </aside>
      </main>

      <MobileBar
        selection={selection}
        onOpen={() => setSummaryOpen(true)}
        onContact={() => setContactOpen(true)} />
      

      {summaryOpen &&
      <div className="sheet-backdrop" onClick={() => setSummaryOpen(false)}>
          <div className="sheet" onClick={(e) => e.stopPropagation()}>
            <button className="sheet-close" onClick={() => setSummaryOpen(false)} aria-label="Закрыть">✕</button>
            <Summary
            selection={selection}
            onContact={() => {setSummaryOpen(false);setContactOpen(true);}} />
          
          </div>
        </div>
      }

      {contactOpen &&
      <ContactModal
        selection={selection}
        onClose={() => setContactOpen(false)} />

      }

      <TweaksUI t={t} setTweak={setTweak} />
    </div>);

}

function Header({ onReset }) {
  return (
    <div className="topbar">
    </div>);

}

function Intro() {
  return (
    <section className="intro">
      <div className="intro-eyebrow">Калькулятор</div>
      <h1 className="intro-h1">
        Рассчитайте&nbsp;стоимость <span className="hl" style={{ color: "rgb(255, 14, 58)" }}>разработки сайта</span>
      </h1>
      <p className="intro-lede">
        Ответьте на 7 коротких шагов — мы изучим, что именно вам нужно,
        и подготовим персональный расчёт с фиксированной стоимостью и сроками.
        Заявка ни к чему не обязывает.
      </p>
      <ul className="intro-marks">
        <li><Glyph name="check" size={14} /> Без шаблонных цен — расчёт под задачу</li>
        <li><Glyph name="check" size={14} /> Ответ в течение 30 минут</li>
        <li><Glyph name="check" size={14} /> Бриф остаётся у вас</li>
      </ul>
    </section>);

}

function Step({ index, title, hint, children }) {
  return (
    <section className="step">
      <SectionHead index={index} title={title} hint={hint} />
      <div className="step-body">{children}</div>
    </section>);

}

Object.assign(window, { Calculator });