/* ============================================================
   Onboarding — Опросник при регистрации питомца (6 шагов)
   ============================================================ */

function StepHead({ label, pct }) {
  return (
    <div style={{ padding: "4px 4px 16px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 15, fontWeight: 600, color: "var(--gray)", marginBottom: 9, whiteSpace: "nowrap" }}>
        <span style={{ color: "var(--ink)" }}>{label}</span><span>{pct}%</span>
      </div>
      <div className="track"><i style={{ width: pct + "%" }} /></div>
    </div>);

}

function FieldRow({ icon, label, value, ok, chev, q }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 0", borderTop: "1px solid var(--line)" }}>
      <div style={{ width: 40, height: 40, borderRadius: 12, background: "var(--card-gray)", display: "flex",
        alignItems: "center", justifyContent: "center", color: "var(--ink)", flex: "none" }}>{icon}</div>
      <div className="col" style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: "var(--gray-2)", textTransform: "lowercase" }}>{label}</div>
        <div style={{ fontSize: 17, fontWeight: 600, color: q ? "var(--gray)" : "var(--ink)", marginTop: 1 }}>{value}</div>
      </div>
      {ok && <div style={{ color: "#fff", background: "var(--green)", width: 26, height: 26, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><Icon.check s={15} /></div>}
      {chev && <Icon.chevD s={20} style={{ color: "var(--gray)" }} />}
      {q && <Icon.qmark s={22} style={{ color: "var(--gray-2)" }} />}
    </div>);

}

function Chip({ icon, label, selected, two }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "12px 14px", borderRadius: 16,
      background: selected ? "var(--green-soft)" : "var(--card-gray)",
      border: selected ? "1.5px solid var(--green)" : "1.5px solid transparent",
      color: selected ? "var(--green-text)" : "var(--ink)", fontSize: 14, fontWeight: 600, flex: "0 0 auto", minWidth: 0, whiteSpace: "nowrap" }}>
      <span style={{ color: selected ? "var(--green)" : "var(--gray)", flex: "none" }}>{icon}</span>
      <span style={{ lineHeight: 1.15 }}>{label}</span>
    </div>);

}

function Section({ n, title }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
      <div style={{ fontSize: 20, fontWeight: 700, color: "var(--ink)" }}>{n}. {title}</div>
      <Icon.chevD s={20} style={{ color: "var(--gray)" }} />
    </div>);

}

/* ---------- Step 1: Фото питомца ---------- */
function Onboard1({ go }) {
  return (
    <div className="screen screen--grad screen-enter">
      <StatusBar />
      <AppBar onBack={() => go("ownerAuth")} />
      <div style={{ padding: "14px 22px 0" }}>
        <div className="h1" style={{ fontSize: 32, marginTop: 4 }}>Давайте<br />познакомимся</div>
        <div className="sub" style={{ marginTop: 8 }}>Заполним профиль питомца за 2 минуты</div>
        <div style={{ marginTop: 20 }}><StepHead label="Шаг 1 из 6" pct={18} /></div>
      </div>
      <div style={{ padding: "4px 22px 0" }}>
        <div className="card" style={{ padding: 24 }}>
          <div className="h2" style={{ fontSize: 22 }}>1. Фото питомца</div>
          <div className="muted" style={{ fontSize: 15, marginTop: 6, lineHeight: 1.35 }}>Загрузите фото — часть полей заполним автоматически</div>
          <div style={{ position: "relative", marginTop: 18 }}>
            <image-slot id="onb-photo" placeholder="фото питомца" src="pet-photo.jpg"
            style={{ width: "100%", height: 220, borderRadius: 20 }} shape="rounded" radius="20"></image-slot>
            <button className="iconbtn" style={{ position: "absolute", right: 12, bottom: 12, background: "#fff", boxShadow: "var(--shadow-soft)", width: 44, height: 44 }}><Icon.camera s={22} /></button>
          </div>
          <div className="row" style={{ marginTop: 14, gap: 10 }}>
            <button className="btn btn--ghost btn--sm" style={{ flex: 1, gap: 8 }}><Icon.camera s={18} style={{ color: "var(--green)" }} /> Снять фото</button>
            <button className="btn btn--ghost btn--sm" style={{ flex: 1, gap: 8 }}><Icon.share s={18} style={{ color: "var(--green)" }} /> Загрузить</button>
          </div>
          <div style={{ marginTop: 14, textAlign: "center" }}><Tag><Icon.sparkle s={15} /> AI-анализ породы и параметров</Tag></div>
        </div>
      </div>
      <div className="dock"><button className="btn" onClick={() => go("onboard2")}>Продолжить</button></div>
      <div className="homebar" />
    </div>);

}

/* ---------- Step 2: Быстрая проверка ---------- */
function Onboard2({ go }) {
  return (
    <div className="screen screen--grad screen-enter">
      <StatusBar />
      <AppBar onBack={() => go("onboard1")} />
      <div style={{ padding: "0 22px" }}><StepHead label="Шаг 2 из 6" pct={35} /></div>
      <div style={{ padding: "4px 22px 0" }}>
        <div className="card" style={{ padding: 24 }}>
          <div className="h2">2. Быстрая проверка</div>
          <div className="muted" style={{ fontSize: 15, marginTop: 6, lineHeight: 1.35 }}>Мы определили основные параметры питомца</div>
          <div style={{ margin: "16px 0 4px" }}><Tag><Icon.sparkle s={15} /> Определено автоматически</Tag></div>
          <FieldRow icon={<Icon.paw s={20} />} label="тип" value="Собака" ok />
          <FieldRow icon={<Icon.paw s={20} />} label="порода" value="Корги" ok />
          <FieldRow icon={<Icon.fork s={20} />} label="длина шерсти" value="Короткая" ok />
          <FieldRow icon={<Icon.ruler s={20} />} label="примерный размер" value="Средний" ok />
          <div style={{ marginTop: 18, textAlign: "center" }}>
            <button className="tag tag--gray" style={{ padding: "10px 16px" }}><Icon.qmark s={16} /> Не знаю</button>
          </div>
        </div>
      </div>
      <div className="dock"><button className="btn" onClick={() => go("onboard3")}>Дальше</button></div>
      <div className="homebar" />
    </div>);

}

/* ---------- Step 3: Основное ---------- */
function Onboard3({ go }) {
  return (
    <div className="screen screen--grad screen-enter">
      <StatusBar />
      <AppBar onBack={() => go("onboard2")} />
      <div style={{ padding: "0 22px" }}><StepHead label="Шаг 3 из 6" pct={52} /></div>
      <div style={{ padding: "4px 22px 0" }}>
        <div className="card" style={{ padding: 24 }}>
          <div className="h2">3. Основное</div>
          <div className="muted" style={{ fontSize: 15, marginTop: 6, lineHeight: 1.35 }}>Заполните базовую информацию о питомце</div>
          <div style={{ margin: "16px 0 4px" }}><Tag><Icon.sparkle s={15} /> Автозаполнение</Tag></div>
          <FieldRow icon={<Icon.person s={20} />} label="имя" value="Лилу" ok />
          <FieldRow icon={<Icon.gender s={20} />} label="пол" value="Мальчик" chev />
          <FieldRow icon={<Icon.cake s={20} />} label="дата рождения / возраст" value="15.05.2021 (3 года)" ok />
          <FieldRow icon={<Icon.scale s={20} />} label="вес" value="28 кг" ok />
          <FieldRow icon={<Icon.ruler s={20} />} label="рост" value="55 см" ok />
          <FieldRow icon={<Icon.scissors s={20} />} label="кастрация / стерилизация" value="Кастрирован · 02.2024" chev />
          <FieldRow icon={<Icon.bowl s={20} />} label="питание" value="Сухой корм (гипоаллергенный)" chev />
          <FieldRow icon={<Icon.chip s={20} />} label="чип" value="Не знаю" q />
          <div style={{ marginTop: 18, textAlign: "center" }}>
            <button className="tag tag--gray" style={{ padding: "10px 16px" }}><Icon.qmark s={16} /> Не знаю</button>
          </div>
        </div>
      </div>
      <div className="dock"><button className="btn" onClick={() => go("onboard4")}>Дальше</button></div>
      <div className="homebar" />
    </div>);

}

/* ---------- Step 4-6: Образ жизни / Здоровье / Профилактика ---------- */
function Onboard4({ go }) {
  return (
    <div className="screen screen--grad screen-enter">
      <StatusBar />
      <AppBar onBack={() => go("onboard3")} />
      <div style={{ padding: "0 22px" }}><StepHead label="Шаг 4–6 из 6" pct={85} /></div>
      <div style={{ padding: "4px 22px 0", display: "flex", flexDirection: "column", gap: 14 }}>
        <div className="card" style={{ padding: 22 }}>
          <Section n="4" title="Образ жизни" />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
            <Chip icon={<Icon.home s={18} />} label="где живёт" />
            <Chip icon={<Icon.tree s={18} />} label="условия содержания" />
            <Chip icon={<Icon.globe s={18} />} label="происхождение" />
            <Chip icon={<Icon.bowl s={18} />} label="питание" />
          </div>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <Section n="5" title="Здоровье" />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            <Chip icon={<Icon.checkC s={18} />} label="Нет особенностей" selected />
            <Chip icon={null} label="аллергия" />
            <Chip icon={null} label="диабет" />
            <Chip icon={null} label="эпилепсия" />
          </div>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <Section n="6" title="Профилактика" />
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
            <Chip icon={<Icon.scissors s={18} />} label="кастрация" />
            <Chip icon={<Icon.pen s={18} />} label="дегельминтизация" />
            <Chip icon={<Icon.bug s={18} />} label="блохи / клещи" />
            <Chip icon={<Icon.syringe s={18} />} label="вакцинации" />
          </div>
        </div>
      </div>
      <div className="dock"><button className="btn" onClick={() => go("home")}>Сохранить профиль</button></div>
      <div className="homebar" />
    </div>);

}

Object.assign(window, { Onboard1, Onboard2, Onboard3, Onboard4 });