/* =========================================================================
   Çevik Yaşam — ÖĞRENME (bilmek değil yapabilmek · seviyeler · J-eğrisi)
   ========================================================================= */

function JCurve({ data, onSetPoint }) {
  const W = 540, H = 240, pad = 34;
  const svgRef = useRef(null);
  const dragIdx = useRef(null);
  const min = Math.min(...data, 0), max = Math.max(...data, 100);
  const x = (i) => pad + (i / (data.length - 1 || 1)) * (W - pad * 2);
  const y = (v) => H - pad - ((v - min) / (max - min || 1)) * (H - pad * 2);
  const pts = data.map((v, i) => [x(i), y(v)]);
  let d = `M ${pts[0][0]} ${pts[0][1]}`;
  for (let i = 0; i < pts.length - 1; i++) {
    const [x0, y0] = pts[i], [x1, y1] = pts[i + 1];
    const cx = (x0 + x1) / 2;
    d += ` C ${cx} ${y0}, ${cx} ${y1}, ${x1} ${y1}`;
  }
  const area = pts.length > 1 ? d + ` L ${pts[pts.length - 1][0]} ${H - pad} L ${pts[0][0]} ${H - pad} Z` : "";
  const lowIdx = data.indexOf(Math.min(...data));

  useEffect(() => {
    if (!onSetPoint) return;
    const mv = (e) => {
      if (dragIdx.current == null) return;
      const r = svgRef.current.getBoundingClientRect();
      const cy = e.touches ? e.touches[0].clientY : e.clientY;
      const ry = (cy - r.top) / r.height * H;
      let v = min + (1 - (ry - pad) / (H - pad * 2)) * (max - min);
      v = Math.round(Math.max(0, Math.min(100, v)));
      onSetPoint(dragIdx.current, v);
    };
    const up = () => (dragIdx.current = null);
    window.addEventListener("mousemove", mv); window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", mv); window.addEventListener("touchend", up);
    return () => { window.removeEventListener("mousemove", mv); window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", mv); window.removeEventListener("touchend", up); };
  }, [data, min, max, onSetPoint]);

  return (
    <svg ref={svgRef} className="cy-chart" viewBox={`0 0 ${W} ${H}`} role="img">
      <defs>
        <linearGradient id="jfill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--ml-red)" stopOpacity="0.14" />
          <stop offset="100%" stopColor="var(--ml-red)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <line x1={pad} y1={H - pad} x2={W - pad} y2={H - pad} stroke="var(--ml-line)" />
      <line x1={pad} y1={pad - 6} x2={pad} y2={H - pad} stroke="var(--ml-line)" />
      {area && <path d={area} fill="url(#jfill)" />}
      <path d={d} fill="none" stroke="var(--ml-red)" strokeWidth="2.5" strokeLinecap="round" />
      {pts.map((p, i) => (
        <circle key={i} cx={p[0]} cy={p[1]} r={i === data.length - 1 ? 6 : 4.5}
          fill={i === data.length - 1 ? "var(--ml-red)" : "var(--ml-card)"} stroke="var(--ml-red)" strokeWidth="2"
          style={{ cursor: onSetPoint ? "ns-resize" : "default" }}
          onMouseDown={() => onSetPoint && (dragIdx.current = i)}
          onTouchStart={() => onSetPoint && (dragIdx.current = i)} />
      ))}
      <text x={x(lowIdx)} y={y(Math.min(...data)) + 22} textAnchor="middle" fontSize="11" fill="var(--ml-ink-4)" fontFamily="var(--ml-font-mono)">dip</text>
      <text x={pad} y={H - 8} fontSize="10.5" fill="var(--ml-ink-4)" fontFamily="var(--ml-font-mono)">hafta 1</text>
      <text x={W - pad} y={H - 8} textAnchor="end" fontSize="10.5" fill="var(--ml-ink-4)" fontFamily="var(--ml-font-mono)">hafta {data.length}</text>
    </svg>
  );
}

const TRACK_FIELDS = [
  { name: "topic", label: "Öğrenme konusu", placeholder: "örn. Belirsizliğe tahammül" },
];
const LEVEL_FIELDS = [
  { name: "t", label: "Seviye başlığı", placeholder: "örn. Kontrol ≠ güvenlik" },
  { name: "d", label: "Açıklama", type: "textarea", placeholder: "Bu seviyede ne değişir?" },
];

function Ogrenme() {
  const TR = useCollection("learning-tracks", CY.learningTracksDefault);
  const [activeId, setActiveId] = useStore("learning-active", null);
  const ladder = ["Veri", "Malumat", "Bilgi", "Bilgelik"];
  const [editTrack, setEditTrack] = useState(null);
  const [delTrack, setDelTrack] = useState(null);
  const [editLevel, setEditLevel] = useState(null); // {trackId, level?}
  const [delLevel, setDelLevel] = useState(null);

  const tracks = TR.active;
  const lt = tracks.find((t) => t.id === activeId) || tracks[0];

  const setCurrent = (n) => TR.update(lt.id, { current: n });
  const recordPoint = () => {
    const last = lt.jcurve[lt.jcurve.length - 1] ?? 50;
    TR.update(lt.id, { jcurve: [...lt.jcurve, Math.min(100, Math.max(0, last)) ] });
  };
  const setPoint = (idx, val) => {
    const j = lt.jcurve.map((p, i) => (i === idx ? val : p));
    TR.update(lt.id, { jcurve: j });
  };
  const addLevel = (v) => {
    const levels = [...(lt.levels || []), { id: uid("l"), ...v }];
    TR.update(lt.id, { levels });
  };
  const updateLevel = (lid, v) => TR.update(lt.id, { levels: lt.levels.map((l) => (l.id === lid ? { ...l, ...v } : l)) });
  const removeLevel = (lid) => {
    const levels = lt.levels.filter((l) => l.id !== lid);
    TR.update(lt.id, { levels, current: Math.min(lt.current, levels.length) });
  };

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Bilmek değil, yapabilmek"
        title="Öğrenme = görece kalıcı yaşantı değişikliği"
        sub="Bilgi olarak kalan öğrenme kısıtlı. Yaşamımda gerçekten değişiklik üretiyor mu? Daha derin öğrenme, dalga dalga yayılır."
        right={<Btn variant="primary" icon="plus" onClick={() => setEditTrack({})}>İzlek ekle</Btn>} />

      <HowTo id="ogrenme" when="Gerektiğinde · derinleşmek için"
        summary="Bir konuda gerçekten <strong>değiştin mi</strong>, yoksa sadece biliyor musun? Öğrenmenin yaşamına geçtiğini takip ettiğin yer. Bilmek ≠ yapabilmek."
        steps={[
          "<strong>İzlek ekle</strong> ile üzerinde çalıştığın bir konu aç (örn. belirsizliğe tahammül).",
          "Seviye satırlarına tıklayarak şu an <strong>nerede olduğunu</strong> işaretle; seviyeleri kendin düzenle.",
          "Her hafta <strong>'Bu haftayı işle'</strong> ile yetkinliğini kaydet — J-eğrin oluşur (baştaki düşüş normal).",
          "Bir öğrenme yaşam tarzını değiştirdiyse gerçektir. 'Biliyorum' diyorsan henüz yapamıyorsun demektir.",
        ]} />

      {/* izlek sekmeleri */}
      <div className="cy-track-tabs">
        {tracks.map((t) => (
          <button key={t.id} className={"cy-track-tab" + (lt && t.id === lt.id ? " on" : "")} onClick={() => setActiveId(t.id)}>
            {t.topic}<span className="cy-mono" style={{ opacity: .6, marginLeft: 7 }}>L{t.current}</span>
          </button>
        ))}
      </div>

      {!lt ? (
        <div className="cy-empty">Henüz öğrenme izleği yok. "İzlek ekle" ile başla.</div>
      ) : (
      <React.Fragment>
      <div className="cy-grid" style={{ gridTemplateColumns: "1fr 1fr", alignItems: "start", marginBottom: 22 }}>
        <Card>
          <div className="cy-between">
            <div>
              <Eyebrow>J-eğrisi · {lt.topic}</Eyebrow>
              <div className="cy-muted" style={{ fontSize: 13, marginTop: 6 }}>Yaşam doğrusal değil. Dip sonrası yetkinlik hızlanır.</div>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <button className="cy-iconbtn-sm" onClick={() => setEditTrack(lt)} title="İzleği düzenle"><Icon name="pen" style={{ width: 15 }} /></button>
              <button className="cy-iconbtn-sm" onClick={() => setDelTrack(lt)} title="İzleği sil"><Icon name="trash" style={{ width: 15 }} /></button>
            </div>
          </div>
          <div style={{ marginTop: 14 }}><JCurve data={lt.jcurve} onSetPoint={setPoint} /></div>
          <div className="cy-between" style={{ marginTop: 12 }}>
            <span className="cy-muted" style={{ fontSize: 12.5 }}>{lt.jcurve.length} hafta kayıtlı · noktaları sürükle</span>
            <Btn variant="ghost" size="sm" icon="plus" onClick={recordPoint}>Bu haftayı işle</Btn>
          </div>
        </Card>

        <Card>
          <Eyebrow>Veriden bilgeliğe</Eyebrow>
          <h4 className="cy-h4" style={{ marginTop: 8 }}>Çıkarım merdiveni</h4>
          <div className="cy-stack" style={{ gap: 0, marginTop: 14 }}>
            {ladder.map((l, i) => (
              <div key={l} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 0", borderBottom: i < 3 ? "1px solid var(--ml-line)" : 0 }}>
                <div className="cy-level-num" style={i === 3 ? { background: "var(--ml-red)", color: "#fff", borderColor: "var(--ml-red)" } : null}>{i + 1}</div>
                <div style={{ flex: 1 }}>
                  <b style={{ fontSize: 14.5 }}>{l}</b>
                  <span className="cy-muted" style={{ fontSize: 12.5, marginLeft: 8 }}>
                    {["ham gözlem", "anlamlı cümle", "örüntü & bağlam", "davranışı değiştiren"][i]}
                  </span>
                </div>
                {i < 3 && <Icon name="arrowDown" style={{ width: 14, color: "var(--ml-ink-5)" }} />}
              </div>
            ))}
          </div>
          <div className="cy-card tint" style={{ marginTop: 14, padding: 13, fontSize: 12.5, lineHeight: 1.5, color: "var(--ml-ink-3)" }}>
            Bilgelik = öğrendiğin konunun <b style={{ color: "var(--ml-ink-2)" }}>yapmak</b> haline gelmesi. Yaşamda kalıcı, güzel bir değişiklik üretmesi.
          </div>
        </Card>
      </div>

      {/* meta-öğrenme seviyeleri — tıklanabilir + CRUD */}
      <Card>
        <div className="cy-between" style={{ marginBottom: 6 }}>
          <div>
            <Eyebrow>Meta-öğrenme seviyeleri</Eyebrow>
            <h4 className="cy-h4" style={{ marginTop: 8 }}>"{lt.topic}" üzerinde ne kadar derine indim?</h4>
          </div>
          <Pill tone="info" dot>Şu an: Seviye {lt.current}</Pill>
        </div>
        <div className="cy-muted" style={{ fontSize: 12.5, marginBottom: 4 }}>Bir satıra tıkla → şu anki seviyen olarak işaretle.</div>
        <div style={{ marginTop: 8 }}>
          {(lt.levels || []).map((lv, i) => {
            const n = i + 1;
            const cls = n === lt.current ? "current" : n < lt.current ? "reached" : "";
            return (
              <div className={"cy-level-row clickable " + cls} key={lv.id} onClick={() => setCurrent(n)}>
                <div className="cy-level-num">{n}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: "flex", gap: 9, alignItems: "center", flexWrap: "wrap" }}>
                    <b style={{ fontSize: 14.5 }}>{lv.t}</b>
                    {n < lt.current && <Icon name="check" style={{ width: 14, color: "var(--ml-success)" }} />}
                    {n === lt.current && <Pill tone="red" dot>burada</Pill>}
                  </div>
                  <div className="cy-muted" style={{ fontSize: 13, marginTop: 4, lineHeight: 1.45 }}>{lv.d}</div>
                </div>
                <div onClick={(e) => e.stopPropagation()} style={{ flex: "none" }}>
                  <RowMenu onEdit={() => setEditLevel({ level: lv })} onDelete={() => setDelLevel(lv)} />
                </div>
              </div>
            );
          })}
          {!(lt.levels || []).length && <div className="cy-empty">Bu izlekte henüz seviye yok.</div>}
        </div>
        <button className="cy-addbtn-dashed" style={{ marginTop: 12 }} onClick={() => setEditLevel({})}><Icon name="plus" className="ic" /> Seviye ekle</button>
        <div className="cy-card tint" style={{ marginTop: 16, padding: 14, display: "flex", gap: 10 }}>
          <Icon name="sparkles" style={{ width: 18, color: "var(--ml-red)", flex: "none", marginTop: 1 }} />
          <div style={{ fontSize: 13.5, lineHeight: 1.5, color: "var(--ml-ink-2)" }}>
            Yüzeysel öğrenme sadece o sorunu çözer. Daha derin öğrenme benzer sorunları <strong>kendiliğinden</strong> çözmeye başlar.
          </div>
        </div>
      </Card>
      </React.Fragment>
      )}

      {editTrack && <EditSheet eyebrow={editTrack.id ? "İzleği düzenle" : "Yeni izlek"} title={editTrack.id ? "Öğrenme izleğini düzenle" : "Öğrenme izleği ekle"}
        fields={TRACK_FIELDS} initial={editTrack.id ? editTrack : null} onClose={() => setEditTrack(null)}
        onSave={(v) => { if (editTrack.id) TR.update(editTrack.id, v); else { const id = uid("lt"); TR.add({ id, ...v, current: 1, levels: [], jcurve: [50] }); setActiveId(id); } setEditTrack(null); }} />}
      {delTrack && <ConfirmSheet body={`"${delTrack.topic}" izleği silinecek.`} onClose={() => setDelTrack(null)} onConfirm={() => { TR.remove(delTrack.id); setActiveId(null); setDelTrack(null); }} />}
      {editLevel && <EditSheet eyebrow={editLevel.level ? "Seviyeyi düzenle" : "Yeni seviye"} title={editLevel.level ? "Seviyeyi düzenle" : "Seviye ekle"}
        fields={LEVEL_FIELDS} initial={editLevel.level || null} onClose={() => setEditLevel(null)}
        onSave={(v) => { editLevel.level ? updateLevel(editLevel.level.id, v) : addLevel(v); setEditLevel(null); }} />}
      {delLevel && <ConfirmSheet body={`"${delLevel.t}" seviyesi silinecek.`} onClose={() => setDelLevel(null)} onConfirm={() => { removeLevel(delLevel.id); setDelLevel(null); }} />}
    </div>
  );
}

Object.assign(window, { Ogrenme });