/* =========================================================================
   Çevik Yaşam — PLANLAMA & DEĞERLENDİRME (Sunsama esinli, sakin ritüel)
   Günü planla (sabah) · Günü kapat (akşam) · Haftayı planla/değerlendir.
   ADHD dostu: az adım, net çıktı, yargısız.
   ========================================================================= */

function PlanStep({ n, total, title, sub, children }) {
  return (
    <div className="cy-fade-in">
      <Eyebrow style={{ marginBottom: 10 }}>Adım {n} / {total}</Eyebrow>
      <h3 className="cy-h3" style={{ marginBottom: 6 }}>{title}</h3>
      {sub && <p className="cy-muted" style={{ fontSize: 13.5, lineHeight: 1.5, marginBottom: 18 }}>{sub}</p>}
      {children}
    </div>
  );
}

/* GÜNÜ PLANLA — sakin, 4 adım */
function GunPlanla({ onClose }) {
  const T = useCollection("tasks", CY.todayTasks);
  const [stress, setStress] = useStore("stress", CY.stressNow);
  const [step, setStep] = useState(0);
  const [intent, setIntent] = useStore("plan-intent-" + CY.today.iso, "");
  const [limitHrs, setLimitHrs] = useStore("plan-limit-hrs", 5.5);

  const estMin = (t) => parseInt((t.est || "").replace(/\D/g, "")) || 30;
  // tüm aday işler: bugün + backlog (bitmemiş) — esas/öncelik üstte, bugündekiler önce
  const candidates = T.active.filter((t) => !t.done).sort((a, b) => {
    const ea = a.sub && CY.subproj(a.sub) && CY.subproj(a.sub).kind === "esas" ? 0 : 1;
    const eb = b.sub && CY.subproj(b.sub) && CY.subproj(b.sub).kind === "esas" ? 0 : 1;
    return (a.prio || 3) - (b.prio || 3) || ea - eb;
  });
  const todayList = T.active.filter((t) => t.today && !t.done);
  const estTotal = todayList.reduce((s, t) => s + estMin(t), 0);
  const hrs = Math.round(estTotal / 6) / 10;
  const overload = hrs > limitHrs;
  const isEsas = (t) => t.sub && CY.subproj(t.sub) && CY.subproj(t.sub).kind === "esas";

  const steps = [
    { t: "Dünü geride bırak", s: "Dün biten/bitmeyenler geçti. Bugün temiz bir sayfa — kendine yargısız yaklaş.",
      body: (
        <Card className="tint">
          <div style={{ display: "flex", gap: 10 }}><Icon name="sun" style={{ width: 20, color: "var(--ml-red)", flex: "none" }} />
            <div className="cy-prose" style={{ fontSize: 13.5, marginTop: 0 }}>Geçmiş günün yükünü taşımana gerek yok. Yapılmayanlar backlog'da güvende. Bugün ne <strong>başaracağına</strong> odaklan, ne kaçırdığına değil.</div></div>
        </Card>
      ) },
    { t: "Bugünün niyeti", s: "Tek cümle. Bugünü iyi kılacak şey ne?",
      body: <input className="cy-input" placeholder="örn. toolcompared kümesini bitirip rahatlamak" value={intent} onChange={(e) => setIntent(e.target.value)} autoFocus /> },
    { t: "Güne işleri çek", s: "Aç/kapa serbest — istediğini ekle, istediğini çıkar. ★ esas ve kesin işler işaretli. Zaman limitine dikkat et.",
      body: (
        <div>
          <div className="cy-between" style={{ marginBottom: 10, padding: "9px 12px", background: overload ? "var(--ml-red-050)" : "var(--ml-paper-2)", borderRadius: "var(--ml-r-md)", border: overload ? "1px solid var(--ml-red-100)" : "1px solid var(--ml-line)" }}>
            <span style={{ fontSize: 12.5, fontWeight: 600, color: overload ? "var(--ml-red)" : "var(--ml-ink-2)" }}>
              {todayList.length} iş seçili · ~{hrs} sa / {limitHrs} sa limit
            </span>
            <div className="cy-prog" style={{ width: 110, flex: "none" }}><i style={{ width: Math.min(100, hrs / limitHrs * 100) + "%", background: overload ? "var(--ml-red)" : "var(--ml-success)" }} /></div>
          </div>
          <div className="cy-stack cy-scroll" style={{ gap: 7, maxHeight: 360, overflowY: "auto", paddingRight: 4 }}>
            {candidates.map((t) => {
              const running = t.today;
              return (
                <button key={t.id} className={"cy-plan-pick" + (running ? " on" : "")} onClick={() => T.update(t.id, { today: !t.today })}>
                  <span className={"cy-check" + (running ? " on" : "")} style={{ marginTop: 0 }}><Icon name="check" className="ic" /></span>
                  <span style={{ flex: 1, minWidth: 0 }}>
                    <span style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
                      <span style={{ fontSize: 13.5, fontWeight: 500 }}>{t.title}</span>
                      {t.prio === 1 && <span className="cy-tag-mini" style={{ color: "var(--ml-red)", background: "var(--ml-red-050)", fontWeight: 700 }}>KESİN</span>}
                      {isEsas(t) && <span className="cy-tag-mini" style={{ color: "var(--ml-red-700)", background: "var(--ml-red-050)" }}>★ ESAS</span>}
                      {t.deferCount >= 2 && <span className="cy-tag-mini" style={{ color: "var(--ml-warn)", background: "var(--ml-warn-bg)" }}>↻ {t.deferCount}×</span>}
                    </span>
                    <span className="cy-muted" style={{ display: "block", fontSize: 11.5 }}>
                      <i className="cy-proj-dot" style={{ background: CY.proj(t.project).color, width: 7, height: 7, display: "inline-block", marginRight: 5, verticalAlign: "0" }} />
                      {CY.proj(t.project).name} · {CY.prio(t.prio).short} · {estMin(t)} dk
                    </span>
                  </span>
                </button>
              );
            })}
            {!candidates.length && <div className="cy-empty">İş yok. Görevler'den ekleyebilirsin.</div>}
          </div>
        </div>
      ) },
    { t: "Yükü kontrol et", s: "Bugünkü tahmini yük ile gerçekçi kapasiteni karşılaştır.",
      body: (
        <Card className={overload ? "" : "tint"} style={overload ? { borderLeft: "3px solid var(--ml-red)" } : null}>
          <div className="cy-between">
            <div><Eyebrow>Planlanan yük</Eyebrow><div style={{ fontSize: 30, fontWeight: 700, marginTop: 6, color: overload ? "var(--ml-red)" : "var(--ml-ink)" }}>~{hrs} sa</div></div>
            <div style={{ textAlign: "right" }}>
              <Eyebrow>Günlük limit</Eyebrow>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 6, justifyContent: "flex-end" }}>
                <button className="cy-iconbtn-sm" onClick={() => setLimitHrs((h) => Math.max(1, Math.round((h - 0.5) * 10) / 10))}><Icon name="x" style={{ width: 13 }} /></button>
                <span style={{ fontSize: 26, fontWeight: 700, color: "var(--ml-ink-3)", minWidth: 56, textAlign: "center" }}>{limitHrs} sa</span>
                <button className="cy-iconbtn-sm" onClick={() => setLimitHrs((h) => Math.round((h + 0.5) * 10) / 10)}><Icon name="plus" style={{ width: 13 }} /></button>
              </div>
            </div>
          </div>
          <div className="cy-prog" style={{ marginTop: 14 }}><i style={{ width: Math.min(100, hrs / limitHrs * 100) + "%", background: overload ? "var(--ml-red)" : "var(--ml-success)" }} /></div>
          <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 12, lineHeight: 1.5 }}>
            {overload ? <span><b style={{ color: "var(--ml-red)" }}>Fazla yüklü.</b> Önceki adıma dön, 1–2 işi geri bırak — gerçekçi ol. ADHD'de yeni başlayanlar limiti düşük tutmalı.</span>
              : <span>{todayList.length} iş bugünde. Makul görünüyor. Stres seviyen {stress}/10.</span>}
          </div>
        </Card>
      ) },
  ];
  const last = step === steps.length - 1;
  const cur = steps[step];

  return (
    <Sheet eyebrow="Günü planla" title={cur.t} onClose={onClose} maxWidth={560}
      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={onClose}>Planı bitir & başla</Btn>}
      </React.Fragment>}>
      <PlanStep n={step + 1} total={steps.length} title={cur.t} sub={cur.s}>{cur.body}</PlanStep>
    </Sheet>
  );
}

/* HAFTAYI DEĞERLENDİR — kısa review */
function HaftaReview({ onClose }) {
  const T = useCollection("tasks", CY.todayTasks);
  const arch = useCollection("week-archive", []);
  const done = T.active.filter((t) => t.done).length;
  const open = T.active.filter((t) => !t.done).length;
  const [wins, setWins] = useState("");
  const [lessons, setLessons] = useState("");
  return (
    <Sheet eyebrow="Haftayı değerlendir" title="Geçen hafta nasıldı?" onClose={onClose} maxWidth={560}
      footer={<React.Fragment>
        <Btn variant="ghost" onClick={onClose}>Kapat</Btn>
        <Btn variant="primary" icon="check" onClick={() => { arch.add({ week: CY.today.week, range: CY.today.range, intent: "", learned: lessons.trim(), simplify: "", braindump: wins.trim() }); onClose(); }}>Değerlendirmeyi kaydet</Btn>
      </React.Fragment>}>
      <div className="cy-week-strip" style={{ marginBottom: 18 }}>
        <div><b>{done}</b><span>tamamlanan</span></div>
        <div><b>{open}</b><span>açık</span></div>
        <div><b>{arch.active.length}</b><span>geçmiş hafta</span></div>
      </div>
      <div className="cy-field"><label className="cy-label">Bu haftanın kazançları</label>
        <textarea className="cy-textarea" rows={2} placeholder="Neyle gurur duyuyorsun? Küçük de olsa…" value={wins} onChange={(e) => setWins(e.target.value)} /></div>
      <div className="cy-field" style={{ marginBottom: 0 }}><label className="cy-label">Dersler / dikkat dağıtanlar</label>
        <textarea className="cy-textarea" rows={2} placeholder="Ne öğrendin? Vakit nereye kaçtı?" value={lessons} onChange={(e) => setLessons(e.target.value)} /></div>
    </Sheet>
  );
}

function Planlama() {
  const [modal, setModal] = useState(null);
  const hour = new Date().getHours();
  const evening = hour >= 17;

  const cards = [
    { id: "gun", icon: "sun", tone: "var(--ml-red)", title: "Günü planla", desc: "Sabah ritüeli: dünü bırak, niyetini koy, işleri çek, yükü kontrol et. Sakin ve gerçekçi bir gün kur.", cta: "Günü planla", when: "Her sabah" },
    { id: "hafta", icon: "repeat", tone: "var(--ml-info)", title: "Haftayı değerlendir", desc: "Hafta sonu ritüeli: kazançlar, dersler, vakit dağılımı. Yargısız bir bakış, bir sonraki haftaya hazırlık.", cta: "Değerlendir", when: "Hafta sonu" },
    { id: "haftaplan", icon: "target", tone: "var(--ml-success)", title: "Haftayı planla", desc: "Hafta başı: bu haftanın 1–3 niyetini belirle. Görevleri değil, yönü seç. Detay günlük planda gelir.", cta: "Hafta Değerlendirme'ye git", when: "Hafta başı", go: "hafta" },
  ];

  return (
    <div className="cy-canvas narrow cy-fade-in">
      <SectionHead eyebrow="Ritüeller · Sunsama esinli"
        title="Planlama & Değerlendirme"
        sub="Günü ve haftayı niyetle aç, yargısız kapat. ADHD'de en çok işe yarayan şey küçük, tekrar eden, sakin ritüeller." />

      <Card className="tint" style={{ marginBottom: 20, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
        <Icon name={evening ? "moon" : "sun"} style={{ width: 22, color: "var(--ml-red)" }} />
        <div style={{ flex: 1, minWidth: 220, fontSize: 14, color: "var(--ml-ink-2)" }}>
          {evening ? "Akşam oldu — günü kapatıp yarını hafifçe planlamanın tam zamanı." : "Güne niyetle başla. 3 dakikalık planlama, dağınık bir günden korur."}
        </div>
        <Btn variant="primary" icon="sun" onClick={() => setModal("gun")}>Günü planla</Btn>
      </Card>

      <div className="cy-plan-grid">
        {cards.map((c) => (
          <Card key={c.id}>
            <div style={{ width: 40, height: 40, borderRadius: "var(--ml-r-md)", background: c.tone + "18", color: c.tone, display: "grid", placeItems: "center", marginBottom: 14 }}><Icon name={c.icon} style={{ width: 20 }} /></div>
            <div className="cy-between" style={{ marginBottom: 6 }}><h4 className="cy-h4">{c.title}</h4><span className="cy-tag-mini">{c.when}</span></div>
            <p className="cy-prose" style={{ fontSize: 13.5, minHeight: 66 }}>{c.desc}</p>
            <Btn variant="ghost" iconRight="arrowRight" onClick={() => c.go ? window.cyGoto(c.go) : setModal(c.id)} style={{ color: "var(--ml-red)", marginTop: 4 }}>{c.cta}</Btn>
          </Card>
        ))}
      </div>

      {modal === "gun" && <GunPlanla onClose={() => setModal(null)} />}
      {modal === "hafta" && <HaftaReview onClose={() => setModal(null)} />}
    </div>
  );
}

Object.assign(window, { Planlama });