/* =========================================================================
   Çevik Yaşam — MATRİS (yükte hafif, pahada ağır)
   x = uygulanabilirlik (zor→kolay) · y = fayda (düşük→yüksek)
   ========================================================================= */

function quadOf(n) {
  const easy = n.x >= 50, high = n.y >= 50;
  if (easy && high) return "sweet";   // odaklan
  if (!easy && high) return "shrink";  // küçült / hile
  if (easy && !high) return "snack";   // çerez
  return "skip";                       // salla
}
const QUAD_META = {
  sweet: { label: "Önce buraya", tone: "green", desc: "Yapabileceklerim + faydalı. Sonuç buradan gelir." },
  shrink: { label: "Küçült / hile yap", tone: "warn", desc: "Faydası yüksek ama zor. Küçük ölçeklisini yap ya da engelini çöz." },
  snack: { label: "Çerez · boşlukta", tone: "info", desc: "Kolay ama düşük fayda. Zaman boşluğunda dinlene dinlene." },
  skip: { label: "Salla · ama dikkat", tone: "", desc: "Düşük fayda + zor. Sallа — gizli kritikleri (regülasyon, biriken sıkıntı) kaçırma." },
};

const MATRIX_FIELDS = [
  { name: "label", label: "Aday konu", type: "text", placeholder: "Hangi iş/konu?" },
  { name: "project", label: "Proje", type: "dropdown", optgroups: CY.projectOptgroups, default: "tr-platform" },
];

function Matris() {
  const M = useCollection("matrix", CY.matrix);
  const nodes = M.active;
  const stageRef = useRef(null);
  const dragId = useRef(null);
  const [edit, setEdit] = useState(null);
  const [del, setDel] = useState(null);

  useEffect(() => {
    const mv = (e) => {
      if (!dragId.current) return;
      const r = stageRef.current.getBoundingClientRect();
      const cx = e.touches ? e.touches[0].clientX : e.clientX;
      const cy = e.touches ? e.touches[0].clientY : e.clientY;
      let x = ((cx - r.left) / r.width) * 100;
      let y = (1 - (cy - r.top) / r.height) * 100;
      x = Math.max(4, Math.min(96, x)); y = Math.max(4, Math.min(96, y));
      M.update(dragId.current, { x: Math.round(x), y: Math.round(y) });
    };
    const up = () => (dragId.current = null);
    window.addEventListener("mousemove", mv); window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", mv, { passive: false }); window.addEventListener("touchend", up);
    return () => { window.removeEventListener("mousemove", mv); window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", mv); window.removeEventListener("touchend", up); };
  }, []);

  const grouped = useMemo(() => {
    const g = { sweet: [], shrink: [], snack: [], skip: [] };
    nodes.forEach((n) => g[quadOf(n)].push(n));
    return g;
  }, [M.items]);

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Önceliklendirme"
        title="Yükte hafif, pahada ağır"
        sub="Tek olumsuzluğa saplanma. 8–10 adayı çıkar, iki boyutta tart: uygulanabilirlik × fayda. Kartları sürükle, yerlerini sen belirle."
        right={<div style={{ display: "flex", gap: 8 }}><Btn variant="ghost" size="sm" icon="repeat" onClick={() => M.setItems(CY.matrix)}>Sıfırla</Btn><Btn variant="primary" size="sm" icon="plus" onClick={() => setEdit({})}>Aday ekle</Btn></div>} />

      <HowTo id="matris" when="Haftada 1 · önceliklendirirken"
        summary="'Önce neyi yapayım?' kararını verdiğin yer. Tek bir işe (özellikle çözemediğin büyük derde) saplanmak yerine, birçok adayı iki boyutta tartarsın."
        steps={[
          "Aklındaki işleri <strong>aday</strong> olarak ekle — 8–10 tane çıkar, az değil.",
          "Her kartı sürükle: <strong>sağa</strong> = yapması kolay, <strong>yukarı</strong> = faydası yüksek.",
          "<strong>Sağ-üst (yeşil)</strong> köşedekilere önce odaklan — sonuç buradan, en az çabayla gelir.",
          "Sol-üst (faydalı ama zor) işleri küçült/parçala; sağ-alttaki 'çerez'leri boş vaktinde yap; sol-alttakileri salla.",
        ]} />

      <div className="cy-grid" style={{ gridTemplateColumns: "1.4fr 1fr", alignItems: "start" }}>
        {/* matris */}
        <div>
          <div className="cy-axislabel" style={{ justifyContent: "center", marginBottom: 8 }}>
            <Icon name="arrowUp" style={{ width: 14 }} /> Fayda yüksek
          </div>
          <div className="cy-row" style={{ gap: 10, alignItems: "stretch" }}>
            <div style={{ display: "flex", alignItems: "center" }}>
              <div className="cy-axislabel" style={{ writingMode: "vertical-rl", transform: "rotate(180deg)", color: "var(--ml-ink-4)" }}>uygulanabilirlik zor ←</div>
            </div>
            <div className="cy-matrix" ref={stageRef} style={{ flex: 1 }}>
              <div className="axis-x" /><div className="axis-y" />
              <div className="cy-quad tl"><div className="ql">Küçült / hile</div><div className="qd">faydalı ama zor</div></div>
              <div className="cy-quad tr sweet"><div className="ql" style={{ color: "var(--ml-success)" }}>Önce buraya ✦</div><div className="qd right">yapabilir + faydalı</div></div>
              <div className="cy-quad bl"><div className="ql">Salla (dikkat)</div><div className="qd">düşük + zor</div></div>
              <div className="cy-quad br"><div className="ql">Çerez</div><div className="qd right">kolay + düşük</div></div>
              {nodes.map((n) => {
                const p = CY.proj(n.project);
                return (
                  <div key={n.id} className="cy-node" style={{ left: n.x + "%", top: (100 - n.y) + "%" }}
                    onMouseDown={() => (dragId.current = n.id)}
                    onTouchStart={(e) => { dragId.current = n.id; }}>
                    <i className="nd" style={{ background: p.color }} />
                    {n.label}
                  </div>
                );
              })}
            </div>
          </div>
          <div className="cy-axislabel" style={{ justifyContent: "center", marginTop: 8, color: "var(--ml-ink-4)" }}>
            uygulanabilirlik kolay → <Icon name="arrowRight" style={{ width: 14 }} />
          </div>
        </div>

        {/* öneri listesi */}
        <div className="cy-stack" style={{ gap: 14 }}>
          {["sweet", "shrink", "snack", "skip"].map((q) => {
            const m = QUAD_META[q];
            return (
              <Card key={q} className={q === "sweet" ? "" : "flat"} style={q === "sweet" ? { borderLeft: "3px solid var(--ml-success)" } : null}>
                <div className="cy-between">
                  <Pill tone={m.tone} dot>{m.label}</Pill>
                  <span className="cy-mono cy-muted" style={{ fontSize: 12 }}>{grouped[q].length}</span>
                </div>
                <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 8, lineHeight: 1.45 }}>{m.desc}</div>
                {grouped[q].length > 0 && (
                  <div className="cy-stack" style={{ gap: 4, marginTop: 12 }}>
                    {grouped[q].map((n) => (
                      <div key={n.id} className="cy-between" style={{ fontSize: 13 }}>
                        <span style={{ display: "flex", gap: 8, alignItems: "center", minWidth: 0 }}>
                          <i className="cy-proj-dot" style={{ background: CY.proj(n.project).color }} />
                          <span style={{ fontWeight: 500 }}>{n.label}</span>
                        </span>
                        <RowMenu onEdit={() => setEdit(n)} onDelete={() => setDel(n)} />
                      </div>
                    ))}
                  </div>
                )}
              </Card>
            );
          })}
        </div>
      </div>

      {edit && <EditSheet eyebrow={edit.id ? "Adayı düzenle" : "Yeni aday"} title={edit.id ? "Adayı düzenle" : "Matrise aday ekle"}
        fields={MATRIX_FIELDS} initial={edit.id ? edit : null}
        onClose={() => setEdit(null)}
        onSave={(v) => { edit.id ? M.update(edit.id, v) : M.add({ ...v, x: 50, y: 50 }); setEdit(null); }} />}
      {del && <ConfirmSheet body={`"${del.label}" matristen silinecek.`} onClose={() => setDel(null)} onConfirm={() => { M.remove(del.id); setDel(null); }} />}
    </div>
  );
}

Object.assign(window, { Matris });