/* =========================================================================
   Çevik Yaşam — ÖNCELİK (önceliklendirme · proje/marka önceliği + hızlı triyaj)
   1) Proje & marka önceliklerini ayarla (bunlar triyajı hızlandırır)
   2) Triyaj kartı: her görev için çoktan-seçmeli sorular → "kesinlikle yap" kararı
   ========================================================================= */

/* ---- proje/marka öncelik düzenleyici ---- */
function ProjectPriorityBoard() {
  const seed = CY.projects.map((p) => ({ id: p.id, name: p.name, group: p.group, priority: p.priority }));
  const [projects, setProjects] = useStore("cfg-projects", seed);
  const [subPrio, setSubPrio] = useStore("cfg-subprio", {});
  const [openP, setOpenP] = useState({});
  const list = Array.isArray(projects) ? projects : seed;
  const setPrio = (id, v) => setProjects(list.map((p) => (p.id === id ? { ...p, priority: v } : p)));
  const kindOrder = { esas: 0, ilgi: 1, takip: 2 };
  const byGroup = CY.groups.map((g) => ({ g, items: list.filter((p) => p.group === g.key) })).filter((x) => x.items.length);

  const MiniPrio = ({ value, onSet }) => (
    <div className="cy-seg" style={{ flex: "none" }}>
      {CY.prioLevels.map((lvl) => (
        <button key={lvl.v} className="cy-prio-mini-btn" title={lvl.label} onClick={() => onSet(lvl.v)}
          style={value === lvl.v ? { background: lvl.color, borderColor: lvl.color, color: "#fff" } : { "--c": lvl.color }}>{lvl.v}</button>
      ))}
    </div>
  );

  return (
    <Card>
      <Eyebrow>Öncelik haritası · proje + alt proje</Eyebrow>
      <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 6, marginBottom: 16, lineHeight: 1.5 }}>
        Önce projeye bir öncelik ver. Alt projeleri görmek için projeyi aç — <b style={{ color: "var(--ml-red)" }}>★ esas</b> olanlar üstte. Triyaj bu iki önceliği birleştirir.
      </div>
      {byGroup.map(({ g, items }) => (
        <div key={g.key} style={{ marginBottom: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 9 }}>
            <i style={{ width: 10, height: 10, borderRadius: 3, background: g.color }} />
            <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: "0.02em", textTransform: "uppercase", color: "var(--ml-ink-3)" }}>{g.label}</span>
          </div>
          <div className="cy-stack" style={{ gap: 7 }}>
            {items.map((p) => {
              const subs = CY.subsOf(p.id).slice().sort((a, b) => (kindOrder[a.kind] ?? 1) - (kindOrder[b.kind] ?? 1));
              const isOpen = openP[p.id];
              return (
                <div key={p.id}>
                  <div className="cy-between" style={{ gap: 10 }}>
                    <button style={{ display: "flex", alignItems: "center", gap: 6, border: 0, background: "transparent", minWidth: 0, padding: 0, cursor: subs.length ? "pointer" : "default" }} onClick={() => subs.length && setOpenP((o) => ({ ...o, [p.id]: !o[p.id] }))}>
                      {subs.length > 0 && <Icon name="chevronDown" style={{ width: 13, color: "var(--ml-ink-4)", transform: isOpen ? "none" : "rotate(-90deg)", transition: "transform .2s" }} />}
                      <span style={{ fontSize: 13.5, fontWeight: 600 }}>{p.name}</span>
                      {subs.length > 0 && <span className="cy-mono cy-muted" style={{ fontSize: 11 }}>{subs.length}</span>}
                    </button>
                    <MiniPrio value={p.priority} onSet={(v) => setPrio(p.id, v)} />
                  </div>
                  {isOpen && subs.map((s) => {
                    const sk = CY.subKind(s.kind);
                    return (
                      <div key={s.id} className="cy-between" style={{ gap: 10, paddingLeft: 22, marginTop: 6 }}>
                        <span style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
                          <span className="cy-tag-mini" style={{ fontSize: 9.5, color: sk.color, background: sk.color + "14", fontWeight: 700 }}>{sk.short}</span>
                          <span style={{ fontSize: 12.5, color: "var(--ml-ink-2)" }}>{s.name}</span>
                        </span>
                        <MiniPrio value={subPrio[s.id] ?? (s.kind === "esas" ? 1 : s.kind === "takip" ? 4 : 3)} onSet={(v) => setSubPrio((m) => ({ ...m, [s.id]: v }))} />
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        </div>
      ))}
    </Card>
  );
}

/* ---- triyaj: çoktan-seçmeli sorular → karar ---- */
const TRIAGE_Q = [
  { key: "value", q: "Değerlerinle ne kadar uyumlu?", opts: [{ l: "Çok — tam yönümde", s: 2 }, { l: "Biraz", s: 1 }, { l: "Pek değil", s: 0 }] },
  { key: "benefit", q: "Faydası ne kadar yüksek?", opts: [{ l: "Yüksek — iğne deler", s: 2 }, { l: "Orta", s: 1 }, { l: "Düşük", s: 0 }] },
  { key: "ease", q: "Yapması ne kadar kolay?", opts: [{ l: "Kolay — yükte hafif", s: 2 }, { l: "Orta", s: 1 }, { l: "Zor — küçültmeli", s: 0 }] },
  { key: "urgency", q: "Zaman baskısı var mı?", opts: [{ l: "Evet — kaçırılırsa gider", s: 2 }, { l: "Bir miktar", s: 1 }, { l: "Yok — bekler", s: 0 }] },
  { key: "cost", q: "Yapmazsan ne olur?", opts: [{ l: "Ciddi sıkıntı birikir", s: 2 }, { l: "Biraz", s: 1 }, { l: "Hiçbir şey", s: 0 }] },
];

function verdictOf(score, projPrio) {
  // 0..10 puan + proje önceliği etkisi
  const adj = score + (projPrio === 1 ? 1.5 : projPrio === 2 ? 0.5 : projPrio >= 4 ? -1 : 0);
  if (adj >= 7.5) return { key: "kesin", label: "Kesinlikle yap", color: "#FF2939", prio: 1, msg: "Bu iş değerlerinle uyumlu, faydalı ve bekleyemez. Bugüne çek, ilk adımı şimdi at." };
  if (adj >= 5) return { key: "yap", label: "Yap — plana al", color: "#C2410C", prio: 2, msg: "Güçlü bir aday. Bu haftaya bir deney olarak gir." };
  if (adj >= 3) return { key: "belki", label: "Küçült ya da beklet", color: "#B07300", prio: 3, msg: "Faydası var ama zor/acil değil. Yükte hafif bir dilimini al ya da sıraya koy." };
  return { key: "birak", label: "Salla / bırak", color: "#8A8A90", prio: 4, msg: "Düşük getiri. Bilinçle bırak — 'beklemede' listesi seni yormasın." };
}

function TriageCard({ task, onApply, onSkip }) {
  const [ans, setAns] = useState({});
  const [dl, setDl] = useState({ date: "", critical: false, teamWait: false, buffer: "" });
  const proj = CY.proj(task.project);
  const all = TRIAGE_Q.every((q) => ans[q.key] != null);
  const score = TRIAGE_Q.reduce((a, q) => a + (ans[q.key] != null ? q.opts[ans[q.key]].s : 0), 0);
  const timePressure = ans.urgency === 0; // "Evet — kaçırılırsa gider"
  const verdict = all ? verdictOf(score, proj.priority) : null;
  const applyWith = (pull) => onApply(task, verdict, pull, timePressure ? dl : null);

  return (
    <Card className="cy-triage">
      <div className="cy-between" style={{ alignItems: "flex-start", marginBottom: 16 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i className="cy-proj-dot" style={{ background: proj.color }} />
            <span className="cy-muted" style={{ fontSize: 12.5, fontWeight: 600 }}>{proj.name}</span>
            <PrioMini v={proj.priority} />
          </div>
          <h3 className="cy-h3" style={{ marginTop: 8, fontSize: 19 }}>{task.title}</h3>
          {task.deferCount > 0 && <div style={{ marginTop: 8 }}><span className="cy-tag-mini" style={{ color: "var(--ml-warn)", background: "var(--ml-warn-bg)" }}>↻ {task.deferCount}× ertelendi</span></div>}
        </div>
        <button className="cy-iconbtn" onClick={onSkip} title="Atla"><Icon name="arrowRight" /></button>
      </div>

      <div className="cy-stack" style={{ gap: 14 }}>
        {TRIAGE_Q.map((q) => (
          <div key={q.key}>
            <div style={{ fontSize: 13.5, fontWeight: 600, marginBottom: 8 }}>{q.q}</div>
            <div className="cy-seg" style={{ flexWrap: "wrap" }}>
              {q.opts.map((o, i) => (
                <button key={i} className={"cy-choice" + (ans[q.key] === i ? " on" : "")} onClick={() => setAns((a) => ({ ...a, [q.key]: i }))}>{o.l}</button>
              ))}
            </div>
          </div>
        ))}
      </div>

      {timePressure && (
        <div className="cy-fade-in cy-dl-box">
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
            <Icon name="calendarHeart" style={{ width: 17, color: "var(--ml-red)" }} />
            <b style={{ fontSize: 13.5 }}>Zaman baskısı var — netleştir</b>
          </div>
          <div className="cy-field" style={{ marginBottom: 12 }}>
            <label className="cy-label">Son tarih ne zaman?</label>
            <input className="cy-input" type="date" value={dl.date} onChange={(e) => setDl((s) => ({ ...s, date: e.target.value }))} />
          </div>
          <label className="cy-dl-check" onClick={() => setDl((s) => ({ ...s, critical: !s.critical }))}>
            <span className={"cy-check" + (dl.critical ? " on" : "")} style={{ marginTop: 0 }}><Icon name="check" className="ic" /></span>
            <span><b style={{ fontSize: 13.5 }}>Son tarih kritik</b> <span className="cy-muted" style={{ fontSize: 12 }}>— kaçarsa gerçek sonuç doğurur</span></span>
          </label>
          <label className="cy-dl-check" onClick={() => setDl((s) => ({ ...s, teamWait: !s.teamWait }))}>
            <span className={"cy-check" + (dl.teamWait ? " on" : "")} style={{ marginTop: 0 }}><Icon name="check" className="ic" /></span>
            <span><b style={{ fontSize: 13.5 }}>Ekipten geri bildirim bekliyor</b> <span className="cy-muted" style={{ fontSize: 12 }}>— tek başına bitmiyor</span></span>
          </label>
          <div className="cy-field" style={{ marginTop: 12, marginBottom: 0 }}>
            <label className="cy-label">Zaman payı bırakalım mı?</label>
            <div className="cy-seg" style={{ flexWrap: "wrap" }}>
              {["Yok — son güne", "1 gün önce", "2 gün önce", "3+ gün önce"].map((b) => (
                <button key={b} className={"cy-choice" + (dl.buffer === b ? " on" : "")} onClick={() => setDl((s) => ({ ...s, buffer: b }))}>{b}</button>
              ))}
            </div>
          </div>
        </div>
      )}

      {verdict && (
        <div className="cy-fade-in" style={{ marginTop: 20, padding: 18, borderRadius: "var(--ml-r-md)", background: verdict.color + "10", border: "1px solid " + verdict.color + "33" }}>
          <div className="cy-between">
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 38, height: 38, borderRadius: 999, background: verdict.color, color: "#fff", display: "grid", placeItems: "center", flex: "none" }}>
                <Icon name={verdict.prio === 1 ? "zap" : verdict.prio === 2 ? "flag" : verdict.prio === 3 ? "scale" : "moon"} style={{ width: 19 }} />
              </span>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700, color: verdict.color }}>{verdict.label}</div>
                <div className="cy-mono cy-muted" style={{ fontSize: 11 }}>triyaj puanı: {score}/10{timePressure && dl.date ? " · son tarih " + dl.date : ""}{dl.teamWait ? " · ekip bekliyor" : ""}</div>
              </div>
            </div>
          </div>
          <p className="cy-prose" style={{ fontSize: 13.5, marginTop: 12, marginBottom: 14 }}>{verdict.msg}{dl.teamWait ? " Ekipten geri bildirim beklediği için bir bilgilendirme/hatırlatma görevi de eklenecek." : ""}</p>
          <div style={{ display: "flex", gap: 9, flexWrap: "wrap" }}>
            <Btn variant="primary" icon="check" onClick={() => applyWith(true)} style={{ background: verdict.color, borderColor: verdict.color }}>
              {verdict.prio === 1 ? "Bugüne çek" : "Önceliği uygula"}
            </Btn>
            <Btn variant="ghost" onClick={() => applyWith(false)}>Sadece önceliği yaz</Btn>
          </div>
        </div>
      )}
    </Card>
  );
}

function Oncelik() {
  const T = useCollection("tasks", CY.todayTasks);
  const [idx, setIdx] = useState(0);
  const [toast, setToast] = useState(null);

  // triyaj kuyruğu: bugüne çekilmemiş, bitmemiş, yakalanmamış işler
  const queue = T.active
    .filter((t) => !t.done && !t.today && !t.isCapture)
    .sort((a, b) => (b.deferCount || 0) - (a.deferCount || 0) || (a.prio || 3) - (b.prio || 3));
  const task = queue[idx];
  // hızlı yakalanan kırpıntılar
  const capt = T.active.filter((t) => t.isCapture && !t.done);

  const apply = (t, verdict, pull, dl) => {
    const patch = { prio: verdict.prio, today: pull ? true : t.today, parked: verdict.prio === 4 ? false : t.parked };
    if (dl && dl.date && dl.date.trim()) {
      let due = dl.date.trim();
      const buf = { "1 gün önce": 1, "2 gün önce": 2, "3+ gün önce": 3 }[dl.buffer];
      if (buf) { const d = new Date(dl.date.trim() + "T00:00:00"); d.setDate(d.getDate() - buf); due = d.toISOString().slice(0, 10); }
      patch.due = due;
      if (dl.critical) patch.prio = 1;
    }
    T.update(t.id, patch);
    if (dl && dl.teamWait) {
      const d = new Date(); d.setDate(d.getDate() + 1);
      T.add({ title: `${t.title} — ekipten geri bildirim takibi`, project: t.project, sub: t.sub || undefined, prio: 2, due: d.toISOString().slice(0, 10), today: false, done: false, block: "Normal", checklist: [], deferCount: 0, isFollowup: true, hint: "Ekip yanıtı geldi mi? Gelmezse hatırlat." });
    }
    setToast({ title: t.title, verdict });
    setTimeout(() => setToast(null), 2600);
    setIdx((i) => i); // aynı index → kuyruk kısalır, sıradaki gelir
  };
  const skip = () => setIdx((i) => i + 1);

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Önceliklendirme · triyaj"
        title="Neyi kesinlikle yapmalısın?"
        sub="Karar veremediğinde her işi birkaç çoktan-seçmeli soruyla tart. Sistem net bir karar verir: kesinlikle yap, plana al, küçült ya da bırak."
        right={<Btn variant="ghost" icon="grid" onClick={() => window.cyGoto && window.cyGoto("matris")}>Görsel matris</Btn>}
        howto={<HowTo id="oncelik" when="Haftada 1–2 · backlog şiştiğinde"
          summary="Karar veremediğinde geldiğin yer. 'Hangisini yapayım?' yerine her işi <strong>aynı 5 soruyla</strong> tartarsın; öznel kararı sisteme bırakırsın."
          steps={[
            "Üstte <strong>hızlı yakaladıkların</strong> varsa önce onları görev yap ya da çöpe at.",
            "Kuyruktaki iş için 5 soruyu yanıtla (değer · fayda · kolaylık · aciliyet · maliyet).",
            "Sistemin kararına göre <strong>Bugüne çek</strong> ya da sadece önceliği yaz.",
            "Proje & marka önceliklerini <strong>Ayarlar → Öncelik haritası</strong>'ndan ayarlarsın.",
          ]} />} />


      <div className="cy-canvas narrow" style={{ padding: 0, maxWidth: 760, margin: "0 auto" }}>
        {/* yakalanan kırpıntılar → göreve dönüştür önerisi */}
        {capt.length > 0 && (
          <Card className="tint" style={{ marginBottom: 18, borderLeft: "3px solid var(--ml-warn)" }}>
            <div className="cy-between" style={{ marginBottom: 10 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <Icon name="sparkles" style={{ width: 18, color: "var(--ml-warn)" }} />
                <h4 className="cy-h4">Hızlı yakaladıkların ({capt.length})</h4>
              </div>
              <span className="cy-muted" style={{ fontSize: 12 }}>önceliklendir ya da çöpe at</span>
            </div>
            <div className="cy-stack" style={{ gap: 7 }}>
              {capt.slice(0, 6).map((c) => (
                <div key={c.id} className="cy-between" style={{ padding: "9px 12px", background: "var(--ml-card)", borderRadius: "var(--ml-r-sm)", border: "1px solid var(--ml-line)" }}>
                  <span style={{ fontSize: 13.5, fontWeight: 500, minWidth: 0 }}>{c.title}</span>
                  <div style={{ display: "flex", gap: 4, flex: "none" }}>
                    <button className="cy-btn ghost sm" onClick={() => T.update(c.id, { isCapture: false })} title="Gerçek göreve dönüştür (triyaja al)"><Icon name="check" className="ic" /> Görev</button>
                    <button className="cy-iconbtn-sm" onClick={() => T.remove(c.id)} title="Çöpe at"><Icon name="trash" style={{ width: 15 }} /></button>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        )}

        {task ? (
          <React.Fragment>
            <div className="cy-between" style={{ marginBottom: 12 }}>
              <span className="cy-muted" style={{ fontSize: 13 }}>Triyaj kuyruğu</span>
              <span className="cy-mono cy-muted" style={{ fontSize: 12.5 }}>{Math.min(idx + 1, queue.length)} / {queue.length}</span>
            </div>
            <TriageCard key={task.id} task={task} onApply={apply} onSkip={skip} />
          </React.Fragment>
        ) : (
          <Card style={{ textAlign: "center", padding: 44 }}>
            <span style={{ width: 52, height: 52, borderRadius: 999, background: "var(--ml-success-bg)", color: "var(--ml-success)", display: "grid", placeItems: "center", margin: "0 auto 16px" }}><Icon name="check" style={{ width: 26 }} /></span>
            <h3 className="cy-h3">Triyaj tamam</h3>
            <p className="cy-muted" style={{ fontSize: 14, marginTop: 8 }}>Kuyrukta tartılacak iş kalmadı. Proje önceliklerini Ayarlar → Öncelik haritası'ndan düzenleyebilirsin.</p>
            <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 14 }}>
              <Btn variant="ghost" icon="repeat" onClick={() => setIdx(0)}>Baştan gözden geçir</Btn>
              <Btn variant="ghost" icon="settings" onClick={() => window.cyGoto && window.cyGoto("ayarlar")}>Öncelik haritası</Btn>
            </div>
          </Card>
        )}
      </div>

      {toast && (
        <div className="cy-toast">
          <span style={{ width: 30, height: 30, borderRadius: 999, background: toast.verdict.color, color: "#fff", display: "grid", placeItems: "center", flex: "none" }}><Icon name="check" style={{ width: 16 }} /></span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{toast.verdict.label}</div>
            <div className="cy-muted" style={{ fontSize: 12, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: 240 }}>{toast.title}</div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Oncelik, ProjectPriorityBoard });