/* =========================================================================
   Çevik Yaşam — ONBOARDING (değerler + ilk hafta kurulumu)
   ========================================================================= */

function Onboarding({ onDone }) {
  const [step, setStep] = useState(0);
  const [vals, setVals] = useState(["ozerklik", "huzur", "baglar"]);
  const [obs, setObs] = useState("");
  const [stress, setStress] = useState(6);
  const [focus, setFocus] = useState(["toolcompared", "investorverdict"]);

  const toggle = (arr, set, id, max) => {
    if (arr.includes(id)) set(arr.filter((x) => x !== id));
    else if (!max || arr.length < max) set([...arr, id]);
  };

  const steps = [
    {
      key: "intro",
      render: (
        <div style={{ textAlign: "center", maxWidth: 560 }}>
          <div style={{ display: "inline-flex", padding: "6px 14px", borderRadius: 999, background: "var(--ml-red-050)", color: "var(--ml-red-700)", fontSize: 12.5, fontWeight: 600, marginBottom: 24 }}>
            Çevik Yaşam · kurulum
          </div>
          <h1 className="cy-h2" style={{ fontSize: 38 }}>Neden dönüşmek istiyorsun?</h1>
          <p className="cy-prose" style={{ fontSize: 16, marginTop: 16, textWrap: "balance" }}>
            Eğer yaşamından memnunsan yapacak bir şey yok. Ama bir geçiş dönemindeysin — saat satan yapıdan kendi varlıklarına. Bu sistem sana <strong>nasıl</strong>'ı veriyor; <strong>neden</strong> sende.
          </p>
          <p className="cy-muted" style={{ fontSize: 13.5, marginTop: 18 }}>
            Vaat: <b style={{ color: "var(--ml-ink-2)" }}>değerlerimle uyumlu, tatminli yaşam.</b> Sonuç değil, süreç.
          </p>
        </div>
      ),
      valid: true,
    },
    {
      key: "values",
      title: "Değerlerin neler?",
      sub: "Tatmini bunlarla uyum belirler. 3–5 tane seç.",
      render: (
        <div style={{ width: "100%", maxWidth: 620 }}>
          <div className="cy-stack" style={{ gap: 10 }}>
            {CY.values.map((v) => (
              <button key={v.id} className={"cy-card flat"} onClick={() => toggle(vals, setVals, v.id, 5)}
                style={{ textAlign: "left", display: "flex", gap: 14, alignItems: "center", borderColor: vals.includes(v.id) ? "var(--ml-red)" : "var(--ml-line)", background: vals.includes(v.id) ? "var(--ml-red-050)" : "var(--ml-card)", cursor: "pointer", padding: "16px 18px" }}>
                <div className={"cy-check" + (vals.includes(v.id) ? " on" : "")} style={{ marginTop: 0 }}><Icon name="check" className="ic" /></div>
                <div><b style={{ fontSize: 15 }}>{v.label}</b><div className="cy-muted" style={{ fontSize: 13, marginTop: 2 }}>{v.note}</div></div>
              </button>
            ))}
          </div>
        </div>
      ),
      valid: vals.length >= 3,
    },
    {
      key: "obs",
      title: "İlk gözlemin",
      sub: "Temkinli iyimserlik: şu an çözebileceğin bir olumsuzluk. Kendin · ortam/ilişki · yöntemlerin.",
      render: (
        <div style={{ width: "100%", maxWidth: 580 }}>
          <textarea className="cy-textarea" rows={4} placeholder="örn. Bir işi bitirince sevinç yerine boşluk hissediyorum; metrikleri kompulsif kontrol ediyorum…" value={obs} onChange={(e) => setObs(e.target.value)} />
          <div style={{ display: "flex", gap: 8, marginTop: 14, flexWrap: "wrap" }}>
            {["Kendim", "Ortam/ilişki", "Yöntemlerim"].map((a) => <span key={a} className="cy-choice">{a}</span>)}
          </div>
        </div>
      ),
      valid: true,
    },
    {
      key: "stress",
      title: "Şu an genel rahatlığın?",
      sub: "Stres seviyeni işaretle. Makul aralık 1–6.",
      render: (
        <div style={{ width: "100%", maxWidth: 520 }}>
          <div style={{ textAlign: "center", marginBottom: 18 }}>
            <span style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.03em", color: stressColor(stress) }}>{stress}</span>
            <div className="cy-muted" style={{ fontSize: 14 }}>{stressLabel(stress)}</div>
          </div>
          <StressMeter value={stress} onChange={setStress} />
        </div>
      ),
      valid: true,
    },
    {
      key: "focus",
      title: "İlk haftan: 2 platform kuralı",
      sub: "Hepsini aynı anda taşıma. 2 platformu 2. yörüngeye al, gerisi park.",
      render: (
        <div style={{ width: "100%", maxWidth: 620 }}>
          <div className="cy-grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 10 }}>
            {CY.projects.filter((p) => p.kind === "Platform").map((p) => (
              <button key={p.id} className="cy-card flat" onClick={() => toggle(focus, setFocus, p.id, 2)}
                style={{ textAlign: "left", display: "flex", gap: 11, alignItems: "center", cursor: "pointer", padding: "14px 16px", borderColor: focus.includes(p.id) ? "var(--ml-ink)" : "var(--ml-line)" }}>
                <i className="cy-proj-dot" style={{ background: p.color, width: 10, height: 10 }} />
                <div style={{ flex: 1, minWidth: 0 }}><b style={{ fontSize: 14 }}>{p.name}</b><div className="cy-muted" style={{ fontSize: 12 }}>{p.note}</div></div>
                {focus.includes(p.id) ? <Pill tone="green" dot>odak</Pill> : <Pill dot>park</Pill>}
              </button>
            ))}
          </div>
          <div className="cy-muted" style={{ fontSize: 13, marginTop: 16, textAlign: "center" }}>{focus.length}/2 seçildi</div>
        </div>
      ),
      valid: focus.length === 2,
    },
  ];

  const cur = steps[step];
  const last = step === steps.length - 1;

  return (
    <div style={{ minHeight: "100vh", background: "var(--ml-paper)", display: "flex", flexDirection: "column" }}>
      {/* üst bar */}
      <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "20px 32px", borderBottom: "1px solid var(--ml-line)" }}>
        <img src="assets/logo.png" alt="Multiligo" style={{ height: 20 }} />
        <span className="cy-eyebrow" style={{ borderLeft: "1px solid var(--ml-line-2)", paddingLeft: 14 }}>Çevik Yaşam</span>
        <div style={{ flex: 1 }} />
        <button className="cy-btn ghost sm" onClick={onDone}>Atla</button>
      </div>
      {/* ilerleme */}
      <div style={{ display: "flex", gap: 6, padding: "16px 32px 0" }}>
        {steps.map((s, i) => (
          <div key={s.key} className="cy-prog" style={{ flex: 1 }}><i style={{ width: i <= step ? "100%" : "0%", background: i <= step ? "var(--ml-red)" : "var(--ml-line)", transition: "width .3s ease" }} /></div>
        ))}
      </div>
      {/* gövde */}
      <div className="cy-fade-in" key={cur.key} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "40px 24px", textAlign: cur.key === "intro" ? "center" : "left" }}>
        {cur.title && (
          <div style={{ textAlign: "center", marginBottom: 28, maxWidth: 620 }}>
            <Eyebrow style={{ marginBottom: 12 }}>Adım {step} / {steps.length - 1}</Eyebrow>
            <h2 className="cy-h2">{cur.title}</h2>
            {cur.sub && <p className="cy-muted" style={{ fontSize: 15, marginTop: 10, lineHeight: 1.5 }}>{cur.sub}</p>}
          </div>
        )}
        {cur.render}
      </div>
      {/* alt */}
      <div style={{ display: "flex", justifyContent: "space-between", padding: "20px 32px", borderTop: "1px solid var(--ml-line)" }}>
        <Btn variant="ghost" icon="chevronLeft" onClick={() => (step > 0 ? setStep(step - 1) : onDone())}>{step > 0 ? "Geri" : "Vazgeç"}</Btn>
        <Btn variant="primary" iconRight={last ? "check" : "arrowRight"} onClick={() => (last ? onDone() : setStep(step + 1))} style={{ opacity: cur.valid ? 1 : 0.45, pointerEvents: cur.valid ? "auto" : "none" }}>
          {last ? "Panoyu aç" : "Devam"}
        </Btn>
      </div>
    </div>
  );
}

Object.assign(window, { Onboarding });