/* =========================================================================
   Çevik Yaşam — BUGÜN (günlük operasyon + ritüeller)
   ========================================================================= */

/* kalıcı durum: DB (window.CY_STATE / /api/state) + localStorage önbelleği
   Öncelik (ilk yükleme): DB durumu > localStorage > init
   Değişiklikte: localStorage'a yaz + DB'ye (debounce ile) gönder */
function useStore(key, init) {
  const ck = "cy:" + key;
  const [v, setV] = useState(() => {
    try { if (window.CY_STATE && Object.prototype.hasOwnProperty.call(window.CY_STATE, ck)) return window.CY_STATE[ck]; } catch (e) {}
    try { const s = localStorage.getItem(ck); if (s !== null) return JSON.parse(s); } catch (e) {}
    return init;
  });
  const first = useRef(true);
  useEffect(() => {
    try { localStorage.setItem(ck, JSON.stringify(v)); } catch (e) {}
    try { if (window.CY_STATE) window.CY_STATE[ck] = v; } catch (e) {}
    if (first.current) { first.current = false; return; } // ilk (yüklenen) değeri DB'ye geri yazma
    try { window.cySaveState && window.cySaveState(ck, v); } catch (e) {}
  }, [ck, v]);
  return [v, setV];
}

/* ----- Stres ölçeği (genel rahatlık) ----- */
function StressMeter({ value, onChange, compact }) {
  const ref = useRef(null);
  const drag = useRef(false);
  const set = (clientX) => {
    const r = ref.current.getBoundingClientRect();
    let p = (clientX - r.left) / r.width;
    p = Math.max(0, Math.min(1, p));
    onChange(Math.round(1 + p * 9));
  };
  useEffect(() => {
    const mv = (e) => { if (drag.current) set(e.touches ? e.touches[0].clientX : e.clientX); };
    const up = () => (drag.current = false);
    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 pct = ((value - 1) / 9) * 100;
  return (
    <div>
      <div ref={ref} className="cy-stress-track" style={{ marginTop: compact ? 6 : 10 }}
        onMouseDown={(e) => { drag.current = true; set(e.clientX); }}
        onTouchStart={(e) => { drag.current = true; set(e.touches[0].clientX); }}>
        <div className="cy-stress-knob" style={{ left: pct + "%" }} />
      </div>
      {!compact && (
        <div className="cy-scale-ticks">
          {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((n) => <span key={n}>{n}</span>)}
        </div>
      )}
    </div>
  );
}

/* ----- Toplu uzaklaştırma ritüeli ----- */
function TopluUzaklastirma({ onClose, stress, setStress, candidates, onPickNext }) {
  const [step, setStep] = useState(0);
  const [pre] = useState(stress);
  const [post, setPost] = useState(Math.max(1, stress - 2));
  const [pick, setPick] = useState(null);

  // gerçek önceliklerden sıradaki aday işler (bugün, bitmemiş, önceliğe göre)
  const top = (candidates || []).filter((t) => !t.done).sort((a, b) => (a.prio || 3) - (b.prio || 3)).slice(0, 5);

  const steps = [
    {
      eyebrow: "1 / 4 · Ölç", title: "Şu an stres seviyen kaç?",
      body: (
        <div>
          <p className="cy-prose" style={{ marginTop: 0 }}>Bir işi bitirdin. Hemen sıradakine geçme. Önce nerede olduğunu kaydet.</p>
          <div style={{ fontSize: 40, fontWeight: 700, letterSpacing: "-0.02em", color: stressColor(pre) }}>{pre}<span style={{ fontSize: 16, color: "var(--ml-ink-4)", fontWeight: 500 }}> / 10</span></div>
          <div className="cy-muted" style={{ fontSize: 13 }}>{stressLabel(pre)}</div>
        </div>
      ),
    },
    {
      eyebrow: "2 / 4 · Uzaklaştır", title: "Her şeyi topluca uzaklaştır",
      body: (
        <div>
          <p className="cy-prose" style={{ marginTop: 0 }}>Tek tek değil — <strong>topluca</strong>. Bir nefes al. Üzerindeki konuları, yarım kalanları, az önce bitirdiğin işi dahil hepsini zihinsel olarak geriye it. 5+ yörüngeye gönder.</p>
          <div style={{ display: "grid", placeItems: "center", padding: "22px 0" }}>
            <div className="cy-pushover-anim"><i /></div>
          </div>
          <p className="cy-muted" style={{ fontSize: 13, textAlign: "center" }}>Kalanlar kalsın. Uzaklaşabilen uzaklaşsın.</p>
        </div>
      ),
    },
    {
      eyebrow: "3 / 4 · İçeriye danış", title: "Sakinleşince ne öne çıkıyor?",
      body: (
        <div>
          <p className="cy-prose" style={{ marginTop: 0 }}>Bilinçle zorlama — içeriye sor. Boşalmış zihinle, gerçekten <strong>sıradaki</strong> olan hangisi? Önceliğe göre dizdim; birini seç ya da dinlenmeyi seç.</p>
          <div className="cy-stack" style={{ gap: 8, marginTop: 4 }}>
            <button className={"cy-next-opt" + (pick === "rest" ? " on" : "")} onClick={() => setPick("rest")}>
              <Icon name="moon" style={{ width: 17, color: "var(--ml-info)", flex: "none" }} />
              <span style={{ flex: 1 }}><b style={{ fontSize: 13.5 }}>Önce dinlen</b><span className="cy-muted" style={{ display: "block", fontSize: 12 }}>15 dk ara — stres makul aralığa insin.</span></span>
              {pick === "rest" && <Icon name="check" style={{ width: 16, color: "var(--ml-red)" }} />}
            </button>
            {top.map((t) => (
              <button key={t.id} className={"cy-next-opt" + (pick === t.id ? " on" : "")} onClick={() => setPick(t.id)}>
                <i className="cy-proj-dot" style={{ background: CY.proj(t.project).color, flex: "none" }} />
                <span style={{ flex: 1, minWidth: 0 }}><b style={{ fontSize: 13.5 }}>{t.title}</b><span className="cy-muted" style={{ display: "block", fontSize: 12 }}>{CY.proj(t.project).name} · {CY.prio(t.prio).short}</span></span>
                {pick === t.id && <Icon name="check" style={{ width: 16, color: "var(--ml-red)" }} />}
              </button>
            ))}
            {!top.length && <div className="cy-empty">Bugün için iş yok. Dinlenmeyi seçebilirsin.</div>}
          </div>
        </div>
      ),
    },
    {
      eyebrow: "4 / 4 · Yeniden ölç", title: "Şimdi nasıl hissediyorsun?",
      body: (
        <div>
          <p className="cy-prose" style={{ marginTop: 0 }}>Uzaklaştırmadan sonra seviyeni hisset. Knob'u kaydır.</p>
          <StressMeter value={post} onChange={setPost} />
          <div className="cy-between" style={{ marginTop: 14 }}>
            <Pill tone="info" dot>Önce {pre}</Pill>
            <Icon name="arrowRight" style={{ width: 16, color: "var(--ml-ink-4)" }} />
            <Pill tone={post < pre ? "green" : ""} dot>Şimdi {post}</Pill>
          </div>
          {pick && pick !== "rest" && <div className="cy-card tint" style={{ marginTop: 14, padding: 12, fontSize: 13, display: "flex", gap: 9, alignItems: "center" }}><Icon name="target" style={{ width: 16, color: "var(--ml-red)", flex: "none" }} /><span>Sıradaki odağın: <strong>{(top.find((t) => t.id === pick) || {}).title}</strong></span></div>}
          {pick === "rest" && <div className="cy-card tint" style={{ marginTop: 14, padding: 12, fontSize: 13, display: "flex", gap: 9, alignItems: "center" }}><Icon name="moon" style={{ width: 16, color: "var(--ml-info)", flex: "none" }} /><span>Önce 15 dk dinlen. İşler bekleyebilir.</span></div>}
        </div>
      ),
    },
  ];

  const last = step === steps.length - 1;
  return (
    <Sheet eyebrow={steps[step].eyebrow} title={steps[step].title} onClose={onClose}
      footer={
        <React.Fragment>
          {step > 0 && <Btn variant="ghost" onClick={() => setStep(step - 1)}>Geri</Btn>}
          {!last
            ? <Btn variant="primary" iconRight="arrowRight" onClick={() => setStep(step + 1)}>Devam</Btn>
            : <Btn variant="primary" icon="check" onClick={() => { setStress(post); if (pick && pick !== "rest" && onPickNext) onPickNext(pick); onClose(); }}>Tamam, kaydet</Btn>}
        </React.Fragment>
      }>
      {steps[step].body}
    </Sheet>
  );
}

function TaskRow({ task, active, onToggle, onStart, onDefer, onFocus, onEdit, onArchive, onRestore, onDelete }) {
  const cl = task.checklist || [];
  const clDone = cl.filter((c) => c.done).length;
  return (
    <div className={"cy-task" + (task.done ? " done" : "") + (task.archived ? " done" : "") + (active ? " active-task" : "")}>
      <button className={"cy-check" + (task.done ? " on" : "")} onClick={() => onToggle(task)} aria-label="tamamla">
        <Icon name="check" className="ic" />
      </button>
      <div className="cy-task-body">
        <div className="cy-task-title">{active && <Icon name="target" style={{ width: 14, color: "var(--ml-red)", marginRight: 6, verticalAlign: "-2px" }} />}{task.title}</div>
        <div className="cy-task-meta">
          <ProjTag id={task.project} />
          <span className="cy-tag-mini">{task.block}</span>
          {task.est && <span className="cy-tag-mini"><Icon name="clock" style={{ width: 11, marginRight: 3, verticalAlign: "-1px" }} />{task.est}</span>}
          {!!cl.length && <span className="cy-tag-mini">☑ {clDone}/{cl.length}</span>}
          {task.parked && <Pill tone="warn" dot>Park</Pill>}
          {task.deferCount > 0 && <span className="cy-tag-mini" style={{ color: task.deferCount >= 3 ? "var(--ml-red)" : "var(--ml-warn)", background: task.deferCount >= 3 ? "var(--ml-red-050)" : "var(--ml-warn-bg)" }}>↻ {task.deferCount}×</span>}
          {task.emotional && <span className="cy-tag-mini" style={{ color: "var(--ml-red)", background: "var(--ml-red-050)" }}>duygusal</span>}
          {task.notify && <span className="cy-tag-mini"><Icon name="bell" style={{ width: 10, marginRight: 3, verticalAlign: "-1px" }} />{task.notify}</span>}
        </div>
      </div>
      {!task.done && !task.archived && (
        <div style={{ display: "flex", gap: 4, flex: "none" }}>
          <button className={"cy-btn sm" + (active ? " primary" : " ghost")} onClick={() => onStart(task)} style={{ flex: "none" }} title={active ? "Odaktan çıkar" : "Bu işe odaklan"}>
            <Icon name={active ? "target" : "play"} className="ic" /> {active ? "Odakta" : "Başla"}
          </button>
          {onFocus && <button className="cy-btn sm ghost" onClick={() => onFocus(task)} title="Odak modu (pomodoro)" style={{ flex: "none", padding: "7px 9px" }}><Icon name="timer" className="ic" /></button>}
          {onDefer && <button className="cy-btn sm ghost" onClick={() => onDefer(task)} title="Ertele" style={{ flex: "none", padding: "7px 9px" }}><Icon name="snooze" className="ic" /></button>}
        </div>
      )}
      <RowMenu onEdit={onEdit} onArchive={onArchive} onRestore={onRestore} onDelete={onDelete} archived={task.archived} />
    </div>
  );
}

const TASK_FIELDS = [
  { name: "title", label: "İş", placeholder: "Ne yapılacak?" },
  { name: "project", label: "Proje", type: "dropdown", optgroups: CY.projectOptgroups, default: "tr-platform" },
  { name: "block", label: "Çalışma mesafesi", type: "select", options: ["Kuş bakışı", "Normal", "Odaklı yakın"], default: "Normal" },
  { name: "est", label: "Tahmini süre", placeholder: "örn. 30 dk", optional: true },
  { name: "hint", label: "Çevik not (ipucu)", placeholder: "örn. Dört başı mamur değil — yayınla, veriyle düzelt.", optional: true },
];

/* ADHD hızlı yakalama + günün vitesi */
function QuickCaptureBar({ T, stress }) {
  // vites artık zaman dilimine göre saklanır: öğleden önce (am) / sonra (pm)
  const period = new Date().getHours() < 12 ? "am" : "pm";
  const [gears, setGears] = useStore("gunun-vitesi", { am: "odakli", pm: "rutin" });
  const gear = gears[period] || "odakli";
  const setGear = (v) => setGears((g) => ({ ...g, [period]: v }));
  const [txt, setTxt] = useState("");
  const [proj, setProj] = useState("kisisel");

  // metrikten önerilen vites
  const hour = new Date().getHours();
  const recommend = useMemo(() => {
    if (stress >= 7) return { key: "gevseme", why: "stres yüksek" };
    if (hour >= 21 || hour < 7) return { key: "hazirlik", why: "geç saat" };
    if (hour < 11) return { key: "odakli", why: "sabah enerjisi" };
    if (hour >= 16) return { key: "rutin", why: "öğleden sonra" };
    return { key: "deneme", why: "gün ortası" };
  }, [stress, hour]);
  const recG = CY.gear(recommend.key);

  const capture = (toToday) => {
    if (!txt.trim()) return;
    T.add({ title: txt.trim(), project: proj, prio: 3, due: toToday ? CY.today.iso : null, today: toToday, done: false, block: "Normal", checklist: [], deferCount: 0, isCapture: true });
    setTxt("");
  };
  const g = CY.gear(gear);
  const periodLabel = period === "am" ? "Öğleden önce" : "Öğleden sonra";

  return (
    <Card style={{ marginBottom: 22, padding: "18px 20px" }}>
      <div className="cy-between" style={{ marginBottom: 12, flexWrap: "wrap", gap: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <Icon name="zap" style={{ width: 18, color: "var(--ml-red)" }} />
          <h4 className="cy-h4">Hızlı yakala</h4>
          <span className="cy-muted" style={{ fontSize: 12.5 }}>aklına geleni at — kaybolmasın</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span className="cy-muted" style={{ fontSize: 12 }}>{periodLabel} vitesi:</span>
          <select className="cy-input" style={{ padding: "6px 10px", fontSize: 13, width: "auto" }} value={gear} onChange={(e) => setGear(e.target.value)}>
            {CY.gears.map((x) => <option key={x.key} value={x.key}>{x.label}</option>)}
          </select>
        </div>
      </div>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <input className="cy-input" style={{ flex: "1 1 220px" }} placeholder="Anlık bir iş / fikir… (ADHD: kafandan çıkar, listeye gir)" value={txt}
          onChange={(e) => setTxt(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") capture(true); }} />
        <select className="cy-input" style={{ flex: "0 1 170px", padding: "9px 11px", fontSize: 13.5 }} value={proj} onChange={(e) => setProj(e.target.value)}>
          {CY.projectOptgroups.map((grp) => <optgroup key={grp.label} label={grp.label}>{grp.options.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}</optgroup>)}
        </select>
        <Btn variant="primary" icon="plus" onClick={() => capture(true)} style={{ opacity: txt.trim() ? 1 : .5, pointerEvents: txt.trim() ? "auto" : "none" }}>Bugüne</Btn>
        <Btn variant="ghost" icon="inbox" onClick={() => capture(false)} style={{ opacity: txt.trim() ? 1 : .5, pointerEvents: txt.trim() ? "auto" : "none" }}>Backlog'a</Btn>
      </div>
      <div className="cy-between" style={{ marginTop: 12, flexWrap: "wrap", gap: 8 }}>
        <div className="cy-muted" style={{ fontSize: 12.5, display: "flex", alignItems: "center", gap: 7 }}>
          <Icon name={g.icon} style={{ width: 14, color: "var(--ml-ink-3)" }} />
          <span><b style={{ color: "var(--ml-ink-2)" }}>{g.label}:</b> {g.desc}</span>
        </div>
        {recommend.key !== gear && (
          <button className="cy-tag-mini" style={{ color: "var(--ml-red)", background: "var(--ml-red-050)", border: 0, cursor: "pointer" }} onClick={() => setGear(recommend.key)}>
            <Icon name="target" style={{ width: 11, marginRight: 3, verticalAlign: "-1px" }} />Şu an olman gereken: {recG.label} ({recommend.why}) →
          </button>
        )}
      </div>
    </Card>
  );
}

function Bugun() {
  const [stress, setStress] = useStore("stress", CY.stressNow);
  const T = useCollection("tasks", CY.todayTasks);
  const P = useCollection("platforms", CY.platforms);
  const R = useCollection("routines-coll", CY.routines);
  const [ritual, setRitual] = useState(null); // 'toplu' | {type:'aae', task}
  const [showStress, setShowStress] = useStore("stressLogged", false);
  const [edit, setEdit] = useState(null);   // {} = yeni, {task} = düzenle
  const [del, setDel] = useState(null);
  const [showArc, setShowArc] = useState(false);
  const [grpF, setGrpF] = useState("all");
  const [defer, setDefer] = useState(null);
  const [dismissed, setDismissed] = useStore("signals-dismissed", []);
  const [activeTask, setActiveTask] = useStore("active-task", null);
  const [complete, setComplete] = useState(null);
  const [focus, setFocus] = useState(null);
  const [stressLog, setStressLog] = useStore("stress-log", []);
  const [stressSaved, setStressSaved] = useState(false);

  const saveStress = () => {
    const dt = new Date();
    let h = dt.getHours(); const ap = h < 12 ? "AM" : "PM"; h = h % 12 || 12;
    const tl = h + ":" + String(dt.getMinutes()).padStart(2, "0") + " " + ap;
    setStressLog((l) => [{ v: stress, at: dt.toISOString(), time: tl, day: CY.today.dayShort }, ...l].slice(0, 80));
    setStressSaved(true);
    setTimeout(() => setStressSaved(false), 2600);
  };
  const todayLogs = (stressLog || []).filter((e) => (e.at || "").slice(0, 10) === CY.today.iso);

  const list = T.active.filter((t) => t.today);
  // ADHD önceliklendirme: kritik/öncelikli/çok-ertelenen/esas en üstte, bitenler en altta
  const taskWeight = (t) => {
    if (t.done) return 1000;
    let w = (t.prio || 3) * 10;
    if (t.due && t.due < CY.today.iso) w -= 40;        // gecikmiş
    if ((t.deferCount || 0) >= 3) w -= 30;             // çok ertelenen
    if (t.sub && CY.subproj(t.sub) && CY.subproj(t.sub).core) w -= 15; // esas
    if (t.due === CY.today.iso) w -= 8;
    return w;
  };
  const shown = list.filter((t) => grpF === "all" || CY.proj(t.project).group === grpF)
    .sort((a, b) => taskWeight(a) - taskWeight(b));
  const done = list.filter((t) => t.done).length;
  const overdueCount = T.active.filter((t) => !t.done && t.due && t.due < CY.today.iso).length;
  const deferredCount = T.active.filter((t) => !t.done && (t.deferCount || 0) >= 3).length;
  const kesinBugun = list.filter((t) => !t.done && t.prio === 1).length;
  const greeting = CY.buildGreeting({ name: CY.user.name, stress, todayCount: list.length, doneCount: done, overdue: overdueCount, deferred: deferredCount, hour: new Date().getHours() });
  const nextDate = useMemo(() => {
    const up = (CY.criticalDates || []).map((d) => ({ ...d, d: CY.daysUntil(d.date) })).filter((d) => d.d >= 0).sort((a, b) => a.d - b.d)[0];
    return up || null;
  }, []);
  const upcomingDates = useMemo(() => (CY.criticalDates || []).map((d) => ({ ...d, d: CY.daysUntil(d.date) })).filter((d) => d.d >= 0).sort((a, b) => a.d - b.d).slice(0, 5), []);

  // ---- DİNAMİK İÇERİ SİNYALLERİ (gerçek state'ten üretilir) ----
  const signals = useMemo(() => {
    const out = [];
    const dis = (id) => dismissed.includes(id);
    // 1) yüksek stres
    if (stress >= 7 && !dis("sig-stress")) out.push({
      id: "sig-stress", icon: "gauge", tone: "red", title: "Stres makul aralığın üstünde",
      body: `Seviyen ${stress}/10. Bu modda gelecek planı yapma — önce toplu uzaklaştır, öğrenme ancak rahatken açılır.`,
      cta: "Toplu uzaklaştır", act: "toplu",
    });
    // 2) 3+ kez ertelenen (duygusal engel)
    const stuck = T.active.filter((t) => !t.done && (t.deferCount || 0) >= 3);
    stuck.slice(0, 2).forEach((t) => { if (!dis("sig-stuck-" + t.id)) out.push({
      id: "sig-stuck-" + t.id, icon: "anchor", tone: "red", title: `${t.deferCount}× ertelendi: bir engel olabilir`,
      body: `"${t.title}" defalarca ertelendi. Mesele zaman değil bir zihinsel model. Kök nedeni 5 Neden ile çöz.`,
      cta: "Engeller'e git", act: "goto:engeller",
    }); });
    // 3) gecikmiş işler
    const overdue = T.active.filter((t) => !t.done && t.due && t.due < CY.today.iso);
    if (overdue.length && !dis("sig-overdue")) out.push({
      id: "sig-overdue", icon: "clock", tone: "warn", title: `${overdue.length} işin tarihi geçti`,
      body: `Gecikmiş işleri ya bugüne çek ya da bilinçle yeni bir güne ertele — belirsizlikte bırakma.`,
      cta: "Görevler'i aç", act: "goto:gorevler",
    });
    // 4) bugünün rutinleri
    const dueRoutines = R.active.filter((r) => r.active && (r.days || []).includes(CY.today.dow));
    if (dueRoutines.length && !dis("sig-routine")) out.push({
      id: "sig-routine", icon: "repeat", tone: "info", title: `Bugün ${dueRoutines.length} rutin var`,
      body: dueRoutines.map((r) => r.title).slice(0, 3).join(" · "),
      cta: "Rutinleri aç", act: "goto:rutinler",
    });
    // 5) bugün boşsa öncelik triyajına yönlendir
    if (!list.length && !dis("sig-empty")) out.push({
      id: "sig-empty", icon: "flag", tone: "info", title: "Bugün listen boş",
      body: "Önceliklendirmeden bir-iki işi güne çek. Kuyrukta tartılmayı bekleyen işler var.",
      cta: "Öncelik'e git", act: "goto:oncelik",
    });
    // 6) gün ortası kapanış hatırlatması (her zaman, düşük öncelik)
    if (done > 0 && done >= list.length && list.length > 0 && !dis("sig-closed")) out.push({
      id: "sig-closed", icon: "wind", tone: "info", title: "Günün işleri bitti — kapanış yap",
      body: "Sıradaki belirsizliğe atlamadan önce toplu uzaklaştırma ile kapanışı parkla.",
      cta: "Ritüeli başlat", act: "toplu",
    });
    // 7) Sunsama esinli: birikmiş/eski işleri gözden geçir (haftalık temizlik dürtüsü)
    const stale = T.active.filter((t) => !t.done && !t.today && ((t.deferCount || 0) >= 1 || (t.due && t.due < CY.today.iso)));
    if (stale.length >= 3 && !dis("sig-review")) out.push({
      id: "sig-review", icon: "repeat", tone: "warn", title: `${stale.length} iş gözden geçirilmeyi bekliyor`,
      body: "Ertelenen, geciken, bir süredir yapılmayanlar birikti. Hepsini tek tek tart: yap, küçült, devret ya da bilinçle bırak.",
      cta: "Öncelik'te gözden geçir", act: "goto:oncelik",
    });
    return out;
  }, [stress, T.items, R.items, dismissed, list.length, done]);

  const runSignal = (s) => {
    if (s.act === "toplu") setRitual({ type: "toplu" });
    else if (s.act && s.act.startsWith("goto:")) window.cyGoto && window.cyGoto(s.act.slice(5));
  };

  // ---- DİNAMİK PORTFÖY (gerçek 'odak' durumundan) ----
  const focusOrder = { "Aktif odak": 0, "İzlemede": 1, "Park": 2, "Bekliyor": 3 };
  const focusTone = { "Aktif odak": "green", "İzlemede": "info", "Park": "warn", "Bekliyor": "" };
  const platSorted = [...P.active].sort((a, b) => (focusOrder[a.focus] ?? 4) - (focusOrder[b.focus] ?? 4));
  const platTop = platSorted.slice(0, 5);
  const activeFocus = P.active.filter((p) => p.focus === "Aktif odak").length;
  const toggle = (task) => {
    if (!task.done) setComplete(task);
    else T.update(task.id, { done: false });
  };
  const start = (task) => setActiveTask(activeTask === task.id ? null : task.id);

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow={CY.today.label + " · " + CY.today.week}
        title={greeting}
        sub="Hafta yaşamın anıdır. Bugün haftana ne alıyorsun, neyi uzaklaştırıyorsun?"
        howto={<HowTo id="bugun" when="Her gün"
          summary="Burası günlük üssün. <strong>Ritim şu:</strong> her gün Bugün'de çalışırsın · haftada bir <strong>Hafta</strong>'da öğrenir/tasarlarsın · önceliklerde <strong>Matris</strong> · kafan dolunca <strong>Mesafeler</strong> · takılınca <strong>Engeller</strong> · derinleşmek için <strong>Öğrenme</strong>."
          steps={[
            "Güne başlarken <strong>stres seviyeni</strong> işaretle. 7+ ise önce 'Toplu uzaklaştır' ile rahatla — stresliyken öğrenilmez.",
            "Bir işe <strong>Başla</strong> ile odaklan — aynı anda tek iş.",
            "Bir işi bitirince <strong>Toplu uzaklaştır</strong> ile zihnini boşalt.",
            "Sürekli ertelediğin işi <strong>Engeller</strong>'deki Anla–Ayıkla–Ekle ile sadeleştir.",
          ]} />} />

      {/* HIZLI YAKALAMA — selamlamanın hemen altında */}
      <QuickCaptureBar T={T} stress={stress} />

      <CriticalAlert tasks={T.active} onGoto={(id) => { T.update(id, { today: true, parked: false }); setActiveTask(id); }} onEngel={() => window.cyGoto && window.cyGoto("engeller")} />

      {/* ÜST ŞERİT: genel rahatlık + neredeyim */}
      <div className="cy-grid" style={{ gridTemplateColumns: "1.2fr 1fr", marginBottom: 22 }}>
        <Card>
          <div className="cy-between" style={{ alignItems: "flex-start" }}>
            <div>
              <Eyebrow>Genel rahatlık · stres seviyesi</Eyebrow>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 8 }}>
                <span style={{ fontSize: 44, fontWeight: 700, letterSpacing: "-0.025em", color: stressColor(stress) }}>{stress}</span>
                <span className="cy-muted" style={{ fontSize: 14 }}>/ 10 · {stressLabel(stress)}</span>
              </div>
            </div>
            <Btn variant="ghost" size="sm" icon="wind" onClick={() => setRitual({ type: "toplu" })}>Toplu uzaklaştır</Btn>
          </div>
          <StressMeter value={stress} onChange={(v) => { setStress(v); setShowStress(true); }} />
          <div className="cy-between" style={{ marginTop: 14, gap: 12 }}>
            <div className="cy-muted" style={{ fontSize: 12.5, lineHeight: 1.5, flex: 1 }}>
              Makul aralık <b style={{ color: "var(--ml-ink-2)" }}>1–6</b>. 7+ üstünde gelecek planı yapma, öğrenme kapanır — önce rahatla.
            </div>
            <Btn variant={stressSaved ? "ghost" : "primary"} size="sm" icon={stressSaved ? "check" : "gauge"} onClick={saveStress} style={{ flex: "none" }}>
              {stressSaved ? "Kaydedildi" : "Şu an buradayım"}
            </Btn>
          </div>
          {stressSaved && <div className="cy-muted cy-fade-in" style={{ fontSize: 12, marginTop: 8, color: "var(--ml-success)" }}>{stress}/10 işlendi. Gün içinde tekrar gel — istediğin kadar.</div>}
          {!stressSaved && !!todayLogs.length && (
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 10, alignItems: "center" }}>
              <span className="cy-muted" style={{ fontSize: 11.5 }}>Bugün:</span>
              {todayLogs.slice(0, 8).map((e, i) => (
                <span key={i} className="cy-stress-chip" style={{ borderColor: stressColor(e.v) }}>
                  <i style={{ background: stressColor(e.v) }} />{e.v} <span style={{ color: "var(--ml-ink-4)" }}>{e.time}</span>
                </span>
              ))}
            </div>
          )}
        </Card>

        <Card className="tint">
          <Eyebrow>Şu an neredeyim</Eyebrow>
          <div className="cy-prose" style={{ marginTop: 10, fontSize: 13.5 }}>{CY.general.whereami}</div>
          <div className="cy-now-stats">
            <div className="cy-now-stat"><b style={{ color: "var(--ml-red)" }}>{kesinBugun}</b><span>kesin · bugün</span></div>
            <div className="cy-now-stat"><b>{Math.max(0, list.length - done)}</b><span>kalan iş</span></div>
            <div className="cy-now-stat"><b>{done}/{list.length}</b><span>tamam</span></div>
            <div className="cy-now-stat"><b style={{ color: overdueCount ? "var(--ml-red)" : "var(--ml-ink)" }}>{overdueCount}</b><span>gecikmiş</span></div>
          </div>
          <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginTop: 12 }}>
            <Pill dot tone="green">{activeFocus} aktif odak</Pill>
            {deferredCount > 0 && <Pill dot tone="red">{deferredCount} duygusal engel</Pill>}
            {nextDate && <Pill dot tone={nextDate.d <= 3 ? "red" : "warn"}>{nextDate.title} · {nextDate.d}g</Pill>}
          </div>
        </Card>
      </div>

      {/* ANA İKİ KOLON */}
      <div className="cy-grid" style={{ gridTemplateColumns: "1.5fr 1fr" }}>
        {/* görevler */}
        <div>
          <div className="cy-between" style={{ marginBottom: 14 }}>
            <h3 className="cy-h3">Bugünün işleri</h3>
            <span className="cy-muted cy-mono" style={{ fontSize: 13 }}>{done}/{list.length} tamam</span>
          </div>
          <div className="cy-prog" style={{ marginBottom: 14 }}><i style={{ width: (list.length ? done / list.length * 100 : 0) + "%" }} /></div>
          <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginBottom: 14 }}>
            <button className={"cy-fchip" + (grpF === "all" ? " on" : "")} onClick={() => setGrpF("all")}>Tümü</button>
            {CY.groups.map((g) => (
              <button key={g.key} className={"cy-fchip" + (grpF === g.key ? " on" : "")} onClick={() => setGrpF(grpF === g.key ? "all" : g.key)}>
                <i className="cy-proj-dot" style={{ background: g.color, width: 8, height: 8 }} />{g.label}
              </button>
            ))}
          </div>
          <div className="cy-stack" style={{ gap: 10 }}>
            {shown.map((t) => <TaskRow key={t.id} task={t} active={activeTask === t.id} onToggle={toggle} onStart={start} onDefer={setDefer} onFocus={setFocus}
              onEdit={() => setEdit(t)} onArchive={() => T.archive(t.id)} onDelete={() => setDel(t)} />)}
            {!shown.length && <div className="cy-empty">{grpF === "all" ? "Bugün için iş yok. Görevler'den çek ya da yeni ekle." : "Bu projede bugün iş yok."}</div>}
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
            <button className="cy-addbtn-dashed" onClick={() => setEdit({})}><Icon name="plus" className="ic" /> Yeni iş</button>
            <button className="cy-addbtn-dashed" onClick={() => window.cyGoto && window.cyGoto("gorevler")} style={{ flex: "0 0 auto", paddingLeft: 16, paddingRight: 16 }}><Icon name="inbox" className="ic" /> Görevler'den çek</button>
          </div>

          <ArchiveToggle count={T.archived.length} show={showArc} onToggle={() => setShowArc((s) => !s)} />
          {showArc && (
            <div className="cy-stack" style={{ gap: 10, marginTop: 12 }}>
              {T.archived.map((t) => <TaskRow key={t.id} task={t} onToggle={toggle} onStart={start}
                onRestore={() => T.restore(t.id)} onDelete={() => setDel(t)} />)}
              {!T.archived.length && <div className="cy-empty">Arşiv boş.</div>}
            </div>
          )}
        </div>

        {/* sağ: dinamik sinyaller + portföy */}
        <div className="cy-stack" style={{ gap: 20 }}>
          <Card>
            <div className="cy-between" style={{ marginBottom: 4 }}>
              <h4 className="cy-h4">İçeri sinyalleri</h4>
              <Pill tone={signals.length ? "red" : "green"} dot>{signals.length || "sakin"}</Pill>
            </div>
            <div>
              {signals.map((r) => (
                <div className="cy-rem" key={r.id}>
                  <div className="cy-rem-ic" style={r.tone === "red" ? { background: "var(--ml-red-050)", color: "var(--ml-red)" } : r.tone === "warn" ? { background: "var(--ml-warn-bg)", color: "var(--ml-warn)" } : { background: "var(--ml-info-bg)", color: "var(--ml-info)" }}>
                    <Icon name={icoMap[r.icon] || r.icon || "info"} className="ic" />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="cy-between" style={{ gap: 6, alignItems: "flex-start" }}>
                      <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.35 }}>{r.title}</div>
                      <button className="cy-iconbtn-sm" title="Kapat" onClick={() => setDismissed((d) => [...d, r.id])} style={{ flex: "none", marginTop: -2 }}><Icon name="x" style={{ width: 13 }} /></button>
                    </div>
                    <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 3, lineHeight: 1.45 }}>{r.body}</div>
                    <button className="cy-btn ghost sm" style={{ padding: "5px 0", color: "var(--ml-red)" }} onClick={() => runSignal(r)}>{r.cta} →</button>
                  </div>
                </div>
              ))}
              {!signals.length && (
                <div style={{ display: "flex", gap: 10, alignItems: "center", padding: "14px 2px", color: "var(--ml-ink-3)" }}>
                  <Icon name="check" style={{ width: 17, color: "var(--ml-success)", flex: "none" }} />
                  <span style={{ fontSize: 13, lineHeight: 1.5 }}>Şu an aktif bir sinyal yok. Sular durgun — odaklanabilirsin.</span>
                </div>
              )}
              {!!dismissed.length && <button className="cy-btn ghost sm" style={{ marginTop: 8, color: "var(--ml-ink-4)" }} onClick={() => setDismissed([])}><Icon name="repeat" className="ic" /> Kapatılanları geri getir</button>}
            </div>
          </Card>

          <Card>
            <div className="cy-between" style={{ marginBottom: 14 }}>
              <h4 className="cy-h4">Yaklaşan kritik tarihler</h4>
              <button className="cy-pill" onClick={() => window.cyGoto && window.cyGoto("tarihler")} style={{ cursor: "pointer" }}>Tümü →</button>
            </div>
            <div className="cy-stack" style={{ gap: 11 }}>
              {upcomingDates.map((d) => (
                <div key={d.id} className="cy-between" style={{ gap: 10 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.35 }}>{d.title}</div>
                    <div className="cy-muted" style={{ fontSize: 11.5, marginTop: 2, display: "flex", alignItems: "center", gap: 6 }}>
                      <i className="cy-proj-dot" style={{ background: CY.proj(d.project).color, width: 7, height: 7 }} />{CY.proj(d.project).name}
                    </div>
                  </div>
                  <span className="cy-tag-mini" style={{ flex: "none", color: d.d <= 3 ? "var(--ml-red)" : d.d <= 7 ? "var(--ml-warn)" : "var(--ml-ink-3)", background: d.d <= 3 ? "var(--ml-red-050)" : "var(--ml-paper-2)", fontWeight: 600 }}>
                    {d.d === 0 ? "Bugün" : d.d === 1 ? "Yarın" : d.d + " gün"}
                  </span>
                </div>
              ))}
              {!upcomingDates.length && <div className="cy-empty">Yaklaşan kritik tarih yok.</div>}
            </div>
            <div className="cy-card tint" style={{ marginTop: 14, padding: 12, fontSize: 12.5, lineHeight: 1.5, color: "var(--ml-ink-3)", display: "flex", gap: 9 }}>
              <Icon name="info" style={{ width: 15, flex: "none", marginTop: 1 }} />
              Bir tarih yaklaştıkça ilgili projenin işleri kendiliğinden öne çıkar.
            </div>
          </Card>
        </div>
      </div>

      {ritual?.type === "toplu" && <TopluUzaklastirma stress={stress} setStress={setStress} candidates={list} onPickNext={(id) => setActiveTask(id)} onClose={() => setRitual(null)} />}
      {complete && <CompleteSheet task={complete}
        onClose={() => setComplete(null)}
        onDone={() => { T.update(complete.id, { done: true }); setComplete(null); }}
        onAddFollowup={(f) => T.add(f)} />}
      {focus && <FocusMode task={focus} onClose={() => setFocus(null)}
        onLog={(t, mins) => T.update(t.id, { spentMin: (t.spentMin || 0) + mins })}
        onComplete={(t) => setComplete(t)} />}
      {edit && <EditSheet eyebrow={edit.id ? "İşi düzenle" : "Yeni iş"} title={edit.id ? "İşi düzenle" : "Bugüne iş ekle"}
        fields={TASK_FIELDS} initial={edit.id ? edit : null}
        onClose={() => setEdit(null)}
        onSave={(v) => { edit.id ? T.update(edit.id, v) : T.add({ ...v, done: false, today: true, checklist: [], deferCount: 0, prio: 2 }); setEdit(null); }} />}
      {del && <ConfirmSheet body={`"${del.title}" silinecek.`} onClose={() => setDel(null)} onConfirm={() => { T.remove(del.id); setDel(null); }} />}
      {defer && <DeferSheet task={defer} onClose={() => setDefer(null)}
        onDefer={(patch) => { T.update(defer.id, { ...patch, today: false }); setDefer(null); }}
        onOpenBlocker={() => { setDefer(null); window.cyGoto && window.cyGoto("engeller"); }} />}
    </div>
  );
}

const icoMap = {
  wind: "wind", gauge: "gauge", "calendar-heart": "calendarHeart", anchor: "anchor",
};

Object.assign(window, { Bugun, StressMeter, useStore, TopluUzaklastirma });