/* =========================================================================
   Çevik Yaşam — ENGELLER (zihinsel modeller + 5 Neden kök-neden aracı)
   ========================================================================= */

function AnlaAyiklaEkleTool() {
  const cases = useCollection("aae-cases", []);
  const [anla, setAnla] = useStore("aae-anla", "");
  const [ayikla, setAyikla] = useStore("aae-ayikla", [""]);
  const [ekle, setEkle] = useStore("aae-ekle", [""]);

  const setList = (setter) => (i, v) => setter((a) => a.map((x, j) => (j === i ? v : x)));
  const addTo = (setter, arr) => () => { if (arr[arr.length - 1].trim()) setter((a) => [...a, ""]); };
  const reset = () => { setAnla(""); setAyikla([""]); setEkle([""]); };
  const ayklFilled = ayikla.filter((x) => x.trim());
  const ekleFilled = ekle.filter((x) => x.trim());

  const save = () => {
    cases.add({ anla: anla.trim(), ayikla: ayklFilled, ekle: ekleFilled, date: CY.today.iso });
    reset();
  };

  return (
    <Card>
      <div className="cy-between">
        <div><Eyebrow>Sadeleştirme aracı</Eyebrow><h4 className="cy-h4" style={{ marginTop: 8 }}>Anla – Ayıkla – Ekle</h4></div>
        {(anla || ayklFilled.length || ekleFilled.length) ? <button className="cy-iconbtn-sm" onClick={reset} title="Temizle"><Icon name="repeat" style={{ width: 15 }} /></button> : null}
      </div>
      <p className="cy-muted" style={{ fontSize: 12.5, marginTop: 8, lineHeight: 1.5 }}>
        En büyük engel <b style={{ color: "var(--ml-ink-2)" }}>refleksif ekleme</b>dir — yaşamın zaten kalabalık. Sıra hep aynı: önce anla, sonra ayıkla, en son (gerekirse) ekle.
      </p>

      {/* sıra göstergesi */}
      <div className="cy-aae-flow">
        <span className="cy-aae-pill on"><Icon name="eye" className="ic" />Anla</span>
        <Icon name="arrowRight" style={{ width: 14, color: "var(--ml-ink-5)" }} />
        <span className={"cy-aae-pill" + (anla.trim() ? " on" : "")}><Icon name="scale" className="ic" />Ayıkla</span>
        <Icon name="arrowRight" style={{ width: 14, color: "var(--ml-ink-5)" }} />
        <span className={"cy-aae-pill" + (anla.trim() && ayklFilled.length ? " on" : "")}><Icon name="plus" className="ic" />Ekle</span>
      </div>

      {/* 1 ANLA */}
      <div className="cy-aae-step">
        <div className="cy-aae-steptag" style={{ background: "var(--ml-info-bg)", color: "var(--ml-info)" }}><Icon name="eye" style={{ width: 14 }} /> 1 · Anla</div>
        <textarea className="cy-textarea" rows={2} style={{ marginTop: 8 }} placeholder="Sorun yaşadığın alan / durum ne? Ne değişti, ne oluyor? (uzun analiz değil — hipotez kuracak kadar)" value={anla} onChange={(e) => setAnla(e.target.value)} />
      </div>

      {anla.trim() && (
        <div className="cy-aae-step">
          <div className="cy-aae-steptag" style={{ background: "var(--ml-warn-bg)", color: "var(--ml-warn)" }}><Icon name="scale" style={{ width: 14 }} /> 2 · Ayıkla <span style={{ fontWeight: 400, opacity: .8 }}>· önce buna bak</span></div>
          <div className="cy-muted" style={{ fontSize: 12, margin: "6px 0 8px" }}>Buradan çıkarabileceğin ne var? (eklemeden önce — çoğu zaman ayıklayınca iş zaten olur)</div>
          {ayikla.map((v, i) => (
            <div key={i} style={{ display: "flex", gap: 7, marginBottom: 6, alignItems: "center" }}>
              <Icon name="x" style={{ width: 14, color: "var(--ml-warn)", flex: "none" }} />
              <input className="cy-input" style={{ padding: "8px 11px", fontSize: 13.5 }} placeholder="Çıkarılacak / azaltılacak…" value={v} onChange={(e) => setList(setAyikla)(i, e.target.value)} />
            </div>
          ))}
          {ayikla[ayikla.length - 1].trim() && <Btn variant="ghost" size="sm" icon="plus" onClick={addTo(setAyikla, ayikla)}>Bir ayıklama daha</Btn>}
        </div>
      )}

      {anla.trim() && ayklFilled.length > 0 && (
        <div className="cy-aae-step">
          <div className="cy-aae-steptag" style={{ background: "var(--ml-success-bg)", color: "var(--ml-success)" }}><Icon name="plus" style={{ width: 14 }} /> 3 · Ekle <span style={{ fontWeight: 400, opacity: .8 }}>· en son</span></div>
          <div className="cy-muted" style={{ fontSize: 12, margin: "6px 0 8px" }}>Anlayıp ayıkladıktan sonra gerçekten gerekli olan ne? Boş bırakabilirsin — eklemeye gerek olmayabilir.</div>
          {ekle.map((v, i) => (
            <div key={i} style={{ display: "flex", gap: 7, marginBottom: 6, alignItems: "center" }}>
              <Icon name="plus" style={{ width: 14, color: "var(--ml-success)", flex: "none" }} />
              <input className="cy-input" style={{ padding: "8px 11px", fontSize: 13.5 }} placeholder="Eklenecek (gerekiyorsa)…" value={v} onChange={(e) => setList(setEkle)(i, e.target.value)} />
            </div>
          ))}
          {ekle[ekle.length - 1].trim() && <Btn variant="ghost" size="sm" icon="plus" onClick={addTo(setEkle, ekle)}>Bir ekleme daha</Btn>}
          <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
            <Btn variant="primary" size="sm" icon="check" onClick={save}>Kaydet</Btn>
            <Btn variant="ghost" size="sm" icon="repeat" onClick={reset}>Temizle</Btn>
          </div>
        </div>
      )}

      {!!cases.active.length && (
        <div style={{ marginTop: 16 }}>
          <div className="cy-divider" style={{ marginBottom: 12 }} />
          <Eyebrow>Sadeleştirdiklerin · {cases.active.length}</Eyebrow>
          <div className="cy-stack" style={{ gap: 8, marginTop: 10 }}>
            {cases.active.map((c) => (
              <div key={c.id} className="cy-card flat" style={{ padding: 12 }}>
                <div className="cy-between" style={{ alignItems: "flex-start", gap: 8 }}>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.4 }}>{c.anla}</div>
                    {!!c.ayikla.length && <div style={{ fontSize: 12, marginTop: 5, color: "var(--ml-warn)" }}><b>Ayıkla:</b> <span style={{ color: "var(--ml-ink-3)" }}>{c.ayikla.join(" · ")}</span></div>}
                    {!!c.ekle.length && <div style={{ fontSize: 12, marginTop: 3, color: "var(--ml-success)" }}><b>Ekle:</b> <span style={{ color: "var(--ml-ink-3)" }}>{c.ekle.join(" · ")}</span></div>}
                    <div className="cy-mono cy-muted" style={{ fontSize: 10.5, marginTop: 5 }}>{c.date}</div>
                  </div>
                  <RowMenu onDelete={() => cases.remove(c.id)} />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </Card>
  );
}

function BesNeden() {
  const saved = useCollection("why-chains", []);
  const [seed, setSeed] = useStore("why-seed", "");
  const [answers, setAnswers] = useStore("why-answers", [""]);
  const [root, setRoot] = useStore("why-root", "");
  const [saving, setSaving] = useState(false);

  const setA = (i, v) => setAnswers((a) => a.map((x, j) => (j === i ? v : x)));
  const addWhy = () => { if (answers.length < 7) setAnswers((a) => [...a, ""]); };
  const reset = () => { setSeed(""); setAnswers([""]); setRoot(""); };
  const filled = answers.filter((a) => a.trim()).length;
  const canRoot = seed.trim() && filled >= 1;

  const saveChain = () => {
    saved.add({ seed: seed.trim(), steps: answers.filter((a) => a.trim()), root: root.trim(), date: CY.today.iso });
    reset();
    setSaving(false);
  };

  return (
    <Card>
      <div className="cy-between">
        <div><Eyebrow>Kök-neden aracı</Eyebrow><h4 className="cy-h4" style={{ marginTop: 8 }}>Niçin → Nasıl → Ne</h4></div>
        {(seed || filled > 0) && <button className="cy-iconbtn-sm" onClick={reset} title="Temizle"><Icon name="repeat" style={{ width: 15 }} /></button>}
      </div>

      <div className="cy-field" style={{ marginTop: 14, marginBottom: 10 }}>
        <label className="cy-label">Yaşadığın olumsuzluk</label>
        <input className="cy-input" placeholder="örn. Bir işi bitirince boşluk hissediyorum…" value={seed} onChange={(e) => setSeed(e.target.value)} />
      </div>

      {seed.trim() && (
        <div style={{ marginTop: 6 }}>
          <div className="cy-why-step">
            <div className="cy-why-num" style={{ background: "var(--ml-ink-3)" }}><Icon name="circleDot" style={{ width: 14 }} /></div>
            <div className="cy-why-q">Başlangıç</div>
            <div className="cy-why-a" style={{ fontWeight: 600 }}>{seed}</div>
          </div>
          {answers.map((a, i) => (
            <div className="cy-why-step" key={i}>
              <div className="cy-why-num">{i + 1}</div>
              <div className="cy-why-q">Neden? {i > 0 && "(bir önceki yüzünden)"}</div>
              <input className="cy-input" style={{ marginTop: 5, fontSize: 14 }} placeholder="Çünkü…" value={a}
                onChange={(e) => setA(i, e.target.value)} autoFocus={i === answers.length - 1 && i > 0} />
            </div>
          ))}
          <div style={{ display: "flex", gap: 8, marginTop: 4, marginBottom: 4 }}>
            {answers.length < 7 && answers[answers.length - 1].trim() && (
              <Btn variant="ghost" size="sm" icon="plus" onClick={addWhy}>Tekrar "neden?" sor ({filled})</Btn>
            )}
          </div>

          {canRoot && (
            <div className="cy-root-box" style={{ marginTop: 10 }}>
              <Pill tone="red" dot>Kök neden</Pill>
              <div className="cy-field" style={{ marginTop: 10, marginBottom: 0 }}>
                <textarea className="cy-textarea" rows={2} placeholder="En dipteki neden ne? Asıl çalışılması gereken model…" value={root} onChange={(e) => setRoot(e.target.value)} />
              </div>
              <div className="cy-defer-tip" style={{ marginTop: 12, background: "var(--ml-card)" }}>
                <Icon name="sparkles" className="ic" />
                <span><strong>Şimdi: Nasıl davranmalı?</strong> Kök neden stratejiyi verir; taktik küçük bir deneydir. Bunu bir engele ya da haftalık deneye çevir.</span>
              </div>
              <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
                <Btn variant="primary" size="sm" icon="check" onClick={saveChain} style={{ opacity: root.trim() ? 1 : .5, pointerEvents: root.trim() ? "auto" : "none" }}>Zincirі kaydet</Btn>
                <Btn variant="ghost" size="sm" icon="shieldAlert" onClick={() => window.cyEngelEkle && window.cyEngelEkle(root.trim() || seed.trim())}>Engele çevir</Btn>
              </div>
            </div>
          )}
        </div>
      )}

      {!!saved.active.length && (
        <div style={{ marginTop: 18 }}>
          <div className="cy-divider" style={{ marginBottom: 14 }} />
          <Eyebrow>Çözdüğün zincirler · {saved.active.length}</Eyebrow>
          <div className="cy-stack" style={{ gap: 8, marginTop: 10 }}>
            {saved.active.map((c) => (
              <div key={c.id} className="cy-card flat" style={{ padding: 12 }}>
                <div className="cy-between" style={{ alignItems: "flex-start", gap: 8 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.4 }}>{c.seed}</div>
                    <div className="cy-muted" style={{ fontSize: 12, marginTop: 4, lineHeight: 1.45 }}><b style={{ color: "var(--ml-red)" }}>Kök:</b> {c.root || "—"}</div>
                    <div className="cy-mono cy-muted" style={{ fontSize: 10.5, marginTop: 4 }}>{c.steps.length} adım · {c.date}</div>
                  </div>
                  <RowMenu onDelete={() => saved.remove(c.id)} />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </Card>
  );
}

function BlockerCard({ b, onEdit, onArchive, onRestore, onDelete }) {
  const [open, setOpen] = useState(false);
  const statusTone = { "Aktif": "red", "Çalışılıyor": "warn", "Çözüldü": "green" };
  return (
    <Card className="flat" style={{ padding: 0, overflow: "visible" }}>
      <div className="cy-between" style={{ padding: "18px 20px", cursor: "pointer", alignItems: "flex-start" }} onClick={() => setOpen(!open)}>
        <div style={{ minWidth: 0 }}>
          <div className="cy-h4" style={{ fontSize: 16, color: "var(--ml-ink)" }}>{b.model}</div>
          <div style={{ display: "flex", gap: 7, marginTop: 10, flexWrap: "wrap", alignItems: "center" }}>
            <Pill dot>{b.area}</Pill>
            <Pill tone={statusTone[b.status]} dot>{b.status}</Pill>
            <span style={{ display: "flex", gap: 3, alignItems: "center", marginLeft: 4 }}>
              {[1, 2, 3, 4, 5].map((n) => (
                <i key={n} style={{ width: 6, height: 12, borderRadius: 2, background: n <= b.impact ? "var(--ml-red)" : "var(--ml-line)" }} />
              ))}
              <span className="cy-muted" style={{ fontSize: 11, marginLeft: 4 }}>etki</span>
            </span>
          </div>
        </div>
        <div style={{ display: "flex", gap: 2, flex: "none" }} onClick={(e) => e.stopPropagation()}>
          <RowMenu onEdit={onEdit} onArchive={onArchive} onRestore={onRestore} onDelete={onDelete} archived={b.archived} />
          <button className="cy-iconbtn-sm" onClick={() => setOpen(!open)}>
            <Icon name="chevronDown" style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform .2s" }} />
          </button>
        </div>
      </div>
      {open && (
        <div style={{ padding: "0 20px 20px", animation: "cy-fadein .25s ease" }}>
          <div className="cy-divider" style={{ marginBottom: 16 }} />
          <div className="cy-grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div>
              <div className="cy-why-q" style={{ color: "var(--ml-ink-4)" }}>Kanıt / belirti</div>
              <div className="cy-prose" style={{ fontSize: 13.5, marginTop: 6 }}>{b.evidence}</div>
            </div>
            <div>
              <div className="cy-why-q" style={{ color: "var(--ml-success)" }}>Yeniden çerçeveleme</div>
              <div className="cy-prose" style={{ fontSize: 13.5, marginTop: 6 }}>{b.reframe}</div>
            </div>
          </div>
          <Btn variant="ghost" size="sm" iconRight="arrowRight" style={{ marginTop: 14, color: "var(--ml-red)" }}>Bu engeli haftalık deneye çevir</Btn>
        </div>
      )}
    </Card>
  );
}

const BLOCKER_FIELDS = [
  { name: "model", label: "Zihinsel model", type: "text", placeholder: '"Dinlenmek verimsizliktir."' },
  { name: "area", label: "Alan", type: "select", options: ["Başlayamamak", "Genel rahatlık", "Özel rahatlık", "Park mesafeleri", "Muhabbetli çatışma"], default: "Genel rahatlık" },
  { name: "status", label: "Durum", type: "select", options: ["Aktif", "Çalışılıyor", "Çözüldü"], default: "Aktif" },
  { name: "evidence", label: "Kanıt / belirti", type: "textarea", placeholder: "Bu modeli nereden anlıyorsun?" },
  { name: "reframe", label: "Yeniden çerçeveleme", type: "textarea", placeholder: "Daha işe yarar bakış ne olabilir?" },
  { name: "impact", label: "Etki (1–5)", type: "number", min: 1, max: 5, default: 3 },
];

function Engeller() {
  const B = useCollection("blockers", CY.blockers);
  const [edit, setEdit] = useState(null);
  const [del, setDel] = useState(null);
  const [showArc, setShowArc] = useState(false);
  const active = B.active.filter((b) => b.status === "Aktif").length;

  useEffect(() => {
    window.cyEngelEkle = (modelText) => setEdit({ model: modelText || "", _seed: true });
    return () => { delete window.cyEngelEkle; };
  }, []);

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Zihinsel modeller defteri"
        title="Engellerim — frenlerim"
        sub="Davranış değişmez; zihinsel model değişir. Engel her zaman önceliklidir. Frenler değerli ama gereğince gevşetmek gerekir."
        right={<Btn variant="primary" icon="plus" onClick={() => setEdit({})}>Engel yakala</Btn>} />

      <HowTo id="engeller" when="Gerektiğinde · takıldığında"
        summary="Bir şeyi sürekli erteliyor, yapamıyor ya da aynı hataya düşüyorsan — ardındaki <strong>zihinsel modeli</strong> bulup gevşettiğin yer. Davranış değişmez; model değişir."
        steps={[
          "Tekrar eden bir tıkanma fark ettiğinde <strong>Engel yakala</strong> ile kendine söylediğin cümleyi yaz (örn. 'Dinlenmek verimsizliktir.').",
          "Sağdaki <strong>5 Neden</strong> aracıyla köke in: 'neden?' diye 5 kez sor.",
          "Bir işi sürekli erteliyor/yapamıyorsan <strong>Anla–Ayıkla–Ekle</strong> ile sadeleştir: önce anla, sonra çıkar, en son ekle.",
          "Kök nedeni görünce kanıtını ve daha işe yarar bir <strong>yeniden çerçeveleme</strong> ekle; engeli haftalık deneye çevir.",
        ]} />

      <div className="cy-grid" style={{ gridTemplateColumns: "1.4fr 1fr", alignItems: "start" }}>
        <div className="cy-stack" style={{ gap: 12 }}>
          <div className="cy-between" style={{ marginBottom: 2 }}>
            <span className="cy-muted" style={{ fontSize: 13 }}>{B.active.length} model · {active} aktif</span>
            <span className="cy-muted" style={{ fontSize: 12.5 }}>Kartı aç → kanıt & çerçeveleme</span>
          </div>
          {B.active.map((b) => <BlockerCard key={b.id} b={b}
            onEdit={() => setEdit(b)} onArchive={() => B.archive(b.id)} onDelete={() => setDel(b)} />)}
          {!B.active.length && <div className="cy-empty">Henüz engel yok. Bir tane yakala.</div>}
          <button className="cy-addbtn-dashed" onClick={() => setEdit({})}><Icon name="plus" className="ic" /> Engel yakala</button>

          <ArchiveToggle count={B.archived.length} show={showArc} onToggle={() => setShowArc((s) => !s)} />
          {showArc && B.archived.map((b) => <BlockerCard key={b.id} b={b} onRestore={() => B.restore(b.id)} onDelete={() => setDel(b)} />)}
        </div>
        <div className="cy-stack" style={{ gap: 16 }}>
          <BesNeden />
          <AnlaAyiklaEkleTool />
          <Card className="tint">
            <Icon name="rocket" style={{ width: 20, color: "var(--ml-red)" }} />
            <div className="cy-prose" style={{ fontSize: 13.5, marginTop: 10 }}>
              <strong>Yapmanın yolu yapmaktır. Onun da yolu yapamamaktır.</strong> Yapamama durumların değerli — her biri seni bir engeline çıkarır.
            </div>
          </Card>
        </div>
      </div>

      {edit && <EditSheet eyebrow={edit.id ? "Engeli düzenle" : "Yeni engel"} title={edit.id ? "Zihinsel modeli düzenle" : "Engel yakala"}
        fields={BLOCKER_FIELDS} initial={edit.id ? edit : (edit._seed ? edit : null)}
        onClose={() => setEdit(null)}
        onSave={(v) => { edit.id ? B.update(edit.id, v) : B.add(v); setEdit(null); }} />}
      {del && <ConfirmSheet body={`"${del.model}" silinecek.`} onClose={() => setDel(null)} onConfirm={() => { B.remove(del.id); setDel(null); }} />}
    </div>
  );
}

Object.assign(window, { Engeller });