/* =========================================================================
   Çevik Yaşam — MESAFELER (genel + özel rahatlık)
   Deneyim kainatı · park mesafeleri · yörünge yönetimi
   ========================================================================= */

const ORBIT_LABELS = { 1: "1 · yanımda", 2: "2 · yakın çalışma", 3: "3 · normal", 4: "4 · uzak bakış", 5: "5 · park" };

const CONCERN_ICONS = [
  { value: "heart", label: "İlişki" }, { value: "workflow", label: "İş/otomasyon" }, { value: "fileText", label: "Rapor/belge" },
  { value: "lightbulb", label: "Fikir" }, { value: "trendingUp", label: "Büyüme" }, { value: "lineChart", label: "Metrik" },
  { value: "stethoscope", label: "Sağlık" }, { value: "graduationCap", label: "Öğrenme" }, { value: "moon", label: "Dinlenme" },
  { value: "users", label: "İnsanlar" }, { value: "target", label: "Hedef" }, { value: "leaf", label: "Sürdürülebilirlik" },
];
const CONCERN_FIELDS = [
  { name: "label", label: "Konu", type: "text", placeholder: "Zihninde yer kaplayan ne?" },
  { name: "icon", label: "Simge", type: "dropdown", options: CONCERN_ICONS, default: "target" },
  { name: "ideal", label: "İdeal yörünge (1 yakın → 5 uzak)", type: "number", min: 1, max: 5, default: 3 },
];

function DeneyimKainati() {
  const [mode, setMode] = useStore("orbit-mode", "proje"); // 'proje' | 'altproje' | 'serbest'
  const wk = CY.today.week;

  // moda göre tohum: projeler / alt-projeler / serbest konular
  const seedFor = (m) => {
    if (m === "serbest") return CY.concerns.map((c, i) => ({ ...c, angle: (i / Math.max(1, CY.concerns.length)) * Math.PI * 2 - Math.PI / 2 }));
    const src = m === "altproje"
      ? CY.subprojects.map((s) => ({ id: s.id, label: s.name, icon: s.kind === "esas" ? "target" : s.kind === "takip" ? "eye" : "circleDot", color: CY.proj(s.project).color, ideal: s.kind === "esas" ? 2 : s.kind === "takip" ? 5 : 3 }))
      : CY.projects.map((p) => ({ id: p.id, label: p.name, icon: "layoutGrid", color: p.color, ideal: p.priority <= 1 ? 2 : p.priority === 2 ? 3 : 4 }));
    return src.map((c, i) => ({ ...c, orbit: c.ideal, angle: (i / Math.max(1, src.length)) * Math.PI * 2 - Math.PI / 2 }));
  };
  const init = useMemo(() => seedFor(mode), [mode]);
  // hafta + mod bazlı: her hafta yeniden konumlandırılabilir
  const C = useCollection("orbits-" + mode + "-" + wk, init);
  const items = C.active;
  const stageRef = useRef(null);
  const dragId = useRef(null);
  const [edit, setEdit] = useState(null);
  const maxR = 44; // %

  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;
      const dx = (cx - (r.left + r.width / 2)) / r.width * 100;
      const dy = (cy - (r.top + r.height / 2)) / r.height * 100;
      const dist = Math.sqrt(dx * dx + dy * dy);
      let orbit = Math.round((dist / maxR) * 5);
      orbit = Math.max(1, Math.min(5, orbit));
      const angle = Math.atan2(dy, dx);
      C.update(dragId.current, { orbit, angle });
    };
    const up = () => (dragId.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); };
  }, []);

  const pressure = useMemo(() => {
    let p = 0;
    items.forEach((c) => { if (c.orbit < c.ideal) p += (c.ideal - c.orbit); });
    return p;
  }, [C.items]);

  const pushAll = () => C.setItems((it) => it.map((c) => ({ ...c, orbit: 5 })));
  const reset = () => C.setItems(init);

  return (
    <div>
      <div className="cy-between" style={{ marginBottom: 12, flexWrap: "wrap", gap: 10 }}>
        <div className="cy-seg" style={{ flexWrap: "wrap" }}>
          {[{ k: "proje", l: "Projeler" }, { k: "altproje", l: "Alt projeler" }, { k: "serbest", l: "Serbest" }].map((o) => (
            <button key={o.k} className={"cy-choice" + (mode === o.k ? " on" : "")} onClick={() => setMode(o.k)}>{o.l}</button>
          ))}
        </div>
        <span className="cy-mono cy-muted" style={{ fontSize: 11.5 }}>{wk} · haftalık</span>
      </div>
      <div className="cy-between" style={{ marginBottom: 14, flexWrap: "wrap", gap: 10 }}>
        <div style={{ display: "flex", gap: 9, flexWrap: "wrap" }}>
          <Btn variant="ghost" size="sm" icon="wind" onClick={pushAll}>Toplu uzaklaştır</Btn>
          {mode === "serbest" && <Btn variant="ghost" size="sm" icon="plus" onClick={() => setEdit({})}>Konu ekle</Btn>}
          <Btn variant="ghost" size="sm" icon="repeat" onClick={reset}>Bu haftayı sıfırla</Btn>
        </div>
        <Pill tone={pressure > 6 ? "red" : pressure > 2 ? "warn" : "green"} dot>
          Zihinsel baskı: {pressure > 6 ? "yüksek" : pressure > 2 ? "orta" : "düşük"}
        </Pill>
      </div>

      <div className="cy-orbit-stage" ref={stageRef}>
        {[1, 2, 3, 4, 5].map((o) => {
          const d = (o / 5) * maxR * 2;
          return (
            <div key={o} className="cy-orbit-ring" style={{ width: d + "%", height: d + "%" }}>
              <span className="rl">{o}</span>
            </div>
          );
        })}
        <div className="cy-self">BEN</div>
        {items.map((c) => {
          const rad = (c.orbit / 5) * maxR;
          const left = 50 + Math.cos(c.angle) * rad;
          const top = 50 + Math.sin(c.angle) * rad;
          const hot = c.orbit < c.ideal;
          return (
            <div key={c.id} className={"cy-concern" + (hot ? " hot" : "")} style={{ left: left + "%", top: top + "%" }}
              onMouseDown={() => (dragId.current = c.id)}
              onTouchStart={() => (dragId.current = c.id)}>
              <div className="bubble" style={c.color && !hot ? { background: c.color + "30", borderColor: c.color } : null}><Icon name={c.icon} className="ic" /></div>
              <div className="lbl">{c.label}</div>
            </div>
          );
        })}
      </div>
      <div className="cy-muted" style={{ fontSize: 12.5, textAlign: "center", marginTop: 12, lineHeight: 1.5 }}>
        Merkezde sen varsın. Konuları sürükle. <b style={{ color: "var(--ml-red)" }}>Kırmızı</b> olanlar gereğinden yakın — <b style={{ color: "var(--ml-ink-2)" }}>mesafe olmadan görüş olmaz.</b>
      </div>

      {/* konu listesi · kaldır */}
      <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginTop: 14 }}>
        {items.map((c) => (
          <span key={c.id} className="cy-concern-chip">
            <i className="cy-proj-dot" style={{ background: c.orbit < c.ideal ? "var(--ml-red)" : "var(--ml-ink-4)", width: 7, height: 7 }} />
            {c.label}
            <button className="cy-chip-x" onClick={() => C.remove(c.id)} aria-label="kaldır"><Icon name="x" style={{ width: 12 }} /></button>
          </span>
        ))}
      </div>

      {edit && <EditSheet eyebrow="Yeni konu" title="Deneyim kainatına konu ekle" fields={CONCERN_FIELDS}
        onClose={() => setEdit(null)}
        onSave={(v) => { C.add({ ...v, orbit: v.ideal, angle: Math.random() * Math.PI * 2 }); setEdit(null); }} />}
    </div>
  );
}

const WD_ICONS = [
  { value: "eye", label: "Göz (kuş bakışı)" }, { value: "layoutGrid", label: "Izgara" }, { value: "target", label: "Hedef (yakın)" },
  { value: "compass", label: "Pusula" }, { value: "search", label: "Mercek" }, { value: "zap", label: "Şimşek" }, { value: "brain", label: "Beyin" },
];
const WD_FIELDS = [
  { name: "t", label: "Mesafe adı", placeholder: "örn. Kuş bakışı" },
  { name: "d", label: "Ne zaman / ne için", type: "textarea", placeholder: "Bu mesafeyi hangi işte kullanırsın?" },
  { name: "ic", label: "Simge", type: "dropdown", options: WD_ICONS, default: "target" },
];

function WorkDistances() {
  const W = useCollection("workdist", CY.workDistancesDefault);
  const [edit, setEdit] = useState(null);
  const [del, setDel] = useState(null);
  return (
    <Card className="flat">
      <div className="cy-between">
        <Eyebrow>Çalışma mesafeleri</Eyebrow>
        <button className="cy-iconbtn-sm" onClick={() => setEdit({})} title="Mesafe ekle"><Icon name="plus" style={{ width: 16 }} /></button>
      </div>
      <div className="cy-stack" style={{ gap: 6, marginTop: 12 }}>
        {W.active.map((m) => (
          <div key={m.id} className="cy-wd-row">
            <div className="cy-rem-ic"><Icon name={m.ic} className="ic" /></div>
            <div style={{ flex: 1, minWidth: 0 }}><b style={{ fontSize: 13.5 }}>{m.t}</b><div className="cy-muted" style={{ fontSize: 12.5, marginTop: 2 }}>{m.d}</div></div>
            <RowMenu onEdit={() => setEdit(m)} onDelete={() => setDel(m)} />
          </div>
        ))}
        {!W.active.length && <div className="cy-empty">Mesafe yok. Bir tane ekle.</div>}
      </div>
      <p className="cy-muted" style={{ fontSize: 12.5, marginTop: 12, lineHeight: 1.5 }}>Sadece yakından bakarsan doğruyu bulma ihtimalin düşer. Mesafeler arasında geçiş yap.</p>
      {edit && <EditSheet eyebrow={edit.id ? "Mesafeyi düzenle" : "Yeni mesafe"} title={edit.id ? "Çalışma mesafesini düzenle" : "Çalışma mesafesi ekle"}
        fields={WD_FIELDS} initial={edit.id ? edit : null} onClose={() => setEdit(null)}
        onSave={(v) => { edit.id ? W.update(edit.id, v) : W.add(v); setEdit(null); }} />}
      {del && <ConfirmSheet body={`"${del.t}" silinecek.`} onClose={() => setDel(null)} onConfirm={() => { W.remove(del.id); setDel(null); }} />}
    </Card>
  );
}

function Mesafe() {
  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Genel & özel rahatlık"
        title="Deneyim kainatımı yönetiyorum"
        sub="Her şeyi bilinçle yönetemem — jonglör 5 topu zor çevirir. Mesafe yönetimiyle Satürn olurum: yüz binlerce parçayı yormadan döndürürüm." />

      <HowTo id="mesafe" when="Gerektiğinde · kafan dolduğunda"
        summary="Stresin yükseldiğinde, zihnin kalabalıklaştığında geldiğin yer. Bir konuyu fazla yakın tutmak (önemli diye) seni felç eder — <strong>mesafe olmadan görüş olmaz.</strong>"
        steps={[
          "Stresin 6'nın üstüne çıktığında ya da iki iş arasında buraya gel.",
          "<strong>Toplu uzaklaştır</strong> ile her şeyi geriye it; sonra konuları tek tek sürükle.",
          "<strong>Kırmızı</strong> olanlar gereğinden yakın (örn. gelir belirsizliği). Onları ideal yörüngelerine geri gönder.",
          "Bir işe otururken doğru çalışma mesafesini seç: kuş bakışı (genel) · normal · odaklı yakın (tek hata).",
        ]} />

      <div className="cy-grid" style={{ gridTemplateColumns: "1.25fr 1fr", alignItems: "start" }}>
        <Card><DeneyimKainati /></Card>

        <div className="cy-stack" style={{ gap: 16 }}>
          <Card>
            <Eyebrow>Park mesafeleri</Eyebrow>
            <h4 className="cy-h4" style={{ marginTop: 8 }}>Önemli ≠ yakın</h4>
            <p className="cy-prose" style={{ fontSize: 13.5, marginTop: 8 }}>
              "Çok önemli, unutmayayım" diye konuyu yakına çekmek ters teper. <strong>EBRD raporu</strong> ve <strong>gelir belirsizliği</strong> şu an 1. yörüngede — masada otururken her işine sızıyorlar. İdeal park yörüngelerine geri gönder.
            </p>
          </Card>

          <WorkDistances />

          <Card className="tint">
            <Eyebrow>Olgusal ayrıştırma</Eyebrow>
            <p className="cy-prose" style={{ fontSize: 13.5, marginTop: 8 }}>
              "Kariyerim sorunlu" yumruğunu parmaklara ayır: gelir modeli · odak · DEHB · lojistik. Ayrıştır ama kökte birlikte — sonra yeniden bütünleştir.
            </p>
          </Card>

          <Card className="tint">
            <Eyebrow>Olgusal ayrıştırma</Eyebrow>
            <p className="cy-prose" style={{ fontSize: 13.5, marginTop: 8 }}>
              "Kariyerim sorunlu" yumruğunu parmaklara ayır: gelir modeli · odak · DEHB · lojistik. Ayrıştır ama kökte birlikte — sonra yeniden bütünleştir.
            </p>
          </Card>
        </div>
      </div>

      {/* muhabbetli çatışma şeridi */}
      <Card style={{ marginTop: 22, display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap" }}>
        <div className="cy-rem-ic" style={{ width: 46, height: 46, background: "var(--ml-red-050)", color: "var(--ml-red)" }}>
          <Icon name="users" style={{ width: 22 }} />
        </div>
        <div style={{ flex: 1, minWidth: 260 }}>
          <Eyebrow>Muhabbetli çatışma</Eyebrow>
          <div className="cy-prose" style={{ fontSize: 14, marginTop: 6 }}>
            "Her şeyi tek başıma taşımalıyım." Başarısızlık ihtimalini en yakınınla bile konuşamamak bir engel. Çatışmaları — kendinle, Ahmet'le, ortakla — daha muhabbetli, daha üretken hale getir.
          </div>
        </div>
        <Btn variant="ghost" iconRight="arrowRight" style={{ color: "var(--ml-red)" }}>Engellere git</Btn>
      </Card>
    </div>
  );
}

Object.assign(window, { Mesafe, DeneyimKainati });