/* =========================================================================
   Çevik Yaşam — ERTELEME AKIŞI
   Bir işi ertelerken sebebini sorar. 3+ kez ertelendiyse (özellikle duygusal),
   engeli yoklar, yapıcı motivasyon verir ve mesafe uzaklaştırılıyorsa ilgili
   kişiye bildirim önerir.
   ========================================================================= */

const DEFER_REASONS = [
  { key: "belirsiz", label: "Nereden başlayacağımı bilmiyorum", emo: true, tip: "Belirsizlik. Görevi en küçük ilk adıma indir — 10 dk'lık bir parça yeter." },
  { key: "buyuk", label: "Çok büyük / ezici geliyor", emo: true, tip: "Yükte hafif pahada ağır olanı seç. Tamamını değil bir dilimini bu haftaya al." },
  { key: "korku", label: "Sonucundan / tepkiden çekiniyorum", emo: true, tip: "Dört başı mamur olmak zorunda değil. Yayınla, veriyle düzelt." },
  { key: "isteksiz", label: "Canım istemiyor / anlamsız geliyor", emo: true, tip: "Bu işi büyük bir anlama bağla — ya da gerçekten gereksizse sil/arşivle." },
  { key: "zaman", label: "Bugün vakit yok", emo: false, tip: "Sorun değil. Net bir güne taşı, takvimde yerini ayır." },
  { key: "bekliyor", label: "Başkasını/bir girdiyi bekliyorum", emo: false, tip: "Bu senin tıkanmaın değil. Kimi beklediğini not et, hatırlatıcı kur." },
];
const reasonOf = (k) => DEFER_REASONS.find((r) => r.key === k) || DEFER_REASONS[0];

function DeferSheet({ task, onClose, onDefer, onOpenBlocker }) {
  const prevCount = task.deferCount || 0;
  const [step, setStep] = useState(0);
  const [reasonKey, setReasonKey] = useState(task.deferReason ? null : null);
  const [toDay, setToDay] = useState("tomorrow");
  const [notify, setNotify] = useState(task.notify || "");
  const [doNotify, setDoNotify] = useState(false);

  const reason = reasonKey ? reasonOf(reasonKey) : null;
  const nextCount = prevCount + 1;
  const repeated = nextCount >= 3;
  const emotional = reason ? reason.emo : false;

  const dayOptions = [
    { key: "tomorrow", label: "Yarın", n: 1 },
    { key: "week", label: "Bu hafta içinde", n: 3 },
    { key: "nextweek", label: "Gelecek hafta", n: 7 },
    { key: "park", label: "Park et (tarihsiz)", n: null },
  ];

  const finish = () => {
    const sel = dayOptions.find((d) => d.key === toDay);
    let due = null, parked = false, today = false;
    if (sel.n == null) parked = true;
    else { const d = new Date(); d.setDate(d.getDate() + sel.n); due = d.toISOString().slice(0, 10); }
    onDefer({
      deferCount: nextCount,
      deferReason: reason ? reason.label : (task.deferReason || ""),
      emotional: emotional || task.emotional,
      due, parked, today,
      notify: doNotify && notify.trim() ? notify.trim() : task.notify || null,
      _notified: doNotify && notify.trim() ? notify.trim() : null,
    });
  };

  // ADIM 0: sebep
  if (step === 0) {
    return (
      <Sheet eyebrow={prevCount > 0 ? `${prevCount}. kez ertelendi` : "Erteleme"} title="Neden erteliyorsun?"
        onClose={onClose} maxWidth={540}
        footer={<React.Fragment>
          <Btn variant="ghost" onClick={onClose}>Vazgeç</Btn>
          <Btn variant="primary" iconRight="arrowRight" onClick={() => setStep(1)} style={{ opacity: reasonKey ? 1 : .45, pointerEvents: reasonKey ? "auto" : "none" }}>Devam</Btn>
        </React.Fragment>}>
        <p className="cy-prose" style={{ marginTop: 0 }}><strong>{task.title}</strong></p>
        <p className="cy-muted" style={{ fontSize: 13, marginTop: -4 }}>Dürüst ol — sebep, ne yapacağını belirler.</p>
        <div className="cy-stack" style={{ gap: 8, marginTop: 14 }}>
          {DEFER_REASONS.map((r) => (
            <button key={r.key} className={"cy-defer-reason" + (reasonKey === r.key ? " on" : "")} onClick={() => setReasonKey(r.key)}>
              <span className={"cy-radio" + (reasonKey === r.key ? " on" : "")} />
              <span style={{ flex: 1 }}>{r.label}</span>
              {r.emo && <span className="cy-tag-mini" style={{ color: "var(--ml-red)", background: "var(--ml-red-050)" }}>duygusal</span>}
            </button>
          ))}
        </div>
      </Sheet>
    );
  }

  // ADIM 1: tekrar ertelendiyse engel + motivasyon
  if (step === 1 && repeated) {
    return (
      <Sheet eyebrow={`${nextCount}. erteleme · örüntü`} title={emotional ? "Bu bir duygusal engel olabilir" : "Bu iş takılı kaldı"}
        onClose={onClose} maxWidth={540}
        footer={<React.Fragment>
          <Btn variant="ghost" onClick={() => setStep(0)}>Geri</Btn>
          {emotional && onOpenBlocker && <Btn variant="ghost" icon="shieldAlert" onClick={() => { onOpenBlocker(task, reason); }}>Engele dönüştür</Btn>}
          <Btn variant="primary" iconRight="arrowRight" onClick={() => setStep(2)}>Anladım, devam</Btn>
        </React.Fragment>}>
        <div className="cy-card" style={{ background: "var(--ml-red-050)", border: "1px solid var(--ml-red-100)", padding: 16, marginBottom: 16 }}>
          <div style={{ display: "flex", gap: 10 }}>
            <Icon name="alert" style={{ width: 19, color: "var(--ml-red)", flex: "none", marginTop: 1 }} />
            <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--ml-ink)" }}>
              Bu işi <strong>{nextCount} kez</strong> ertelediin. {emotional
                ? "Sebep duygusal görünüyor — mesele zaman değil, bir engel. Onunla savaşma; anla."
                : "Belki gerçekten şu an doğru zaman değil. Ama bir karar ver: küçült, devret ya da bilinçle bırak."}
            </div>
          </div>
        </div>
        <div className="cy-stack" style={{ gap: 10 }}>
          <div className="cy-defer-tip"><Icon name="sparkles" className="ic" /><span><strong>Yapıcı bakış:</strong> {reason ? reason.tip : ""}</span></div>
          <div className="cy-defer-tip"><Icon name="zap" className="ic" /><span><strong>İlk adım kuralı:</strong> 10 dakikalık tek bir parçaya indir. "Bitir" değil "başla" — yapmanın yolu yapmaktır, onun da yolu yapamamaktır.</span></div>
          {emotional && <div className="cy-defer-tip"><Icon name="brain" className="ic" /><span><strong>5 Neden:</strong> "Neden bu işi sürekli erteliyorum?" diye köke in. Çoğu zaman iş değil, ona yüklediğin anlam ertelenir.</span></div>}
        </div>
      </Sheet>
    );
  }

  // ADIM 2 (veya tekrar değilse doğrudan): ne zaman + kişiye bildir
  return (
    <Sheet eyebrow="Erteleme · planla" title="Ne zamana, kime?"
      onClose={onClose} maxWidth={540}
      footer={<React.Fragment>
        <Btn variant="ghost" onClick={() => setStep(repeated ? 1 : 0)}>Geri</Btn>
        <Btn variant="primary" icon="check" onClick={finish}>Ertele</Btn>
      </React.Fragment>}>
      <div className="cy-field">
        <label className="cy-label">Ne zamana taşınsın?</label>
        <div className="cy-seg" style={{ flexWrap: "wrap" }}>
          {dayOptions.map((d) => (
            <button key={d.key} className={"cy-choice" + (toDay === d.key ? " on" : "")} onClick={() => setToDay(d.key)}>{d.label}</button>
          ))}
        </div>
      </div>

      <div className="cy-card tint" style={{ padding: 14, marginTop: 6 }}>
        <label className="cy-choice" style={{ width: "100%", justifyContent: "flex-start", gap: 11, border: 0, background: "transparent", padding: 0, cursor: "pointer" }}>
          <span className={"cy-check" + (doNotify ? " on" : "")} style={{ marginTop: 0 }} onClick={(e) => { e.preventDefault(); setDoNotify(!doNotify); }}><Icon name="check" className="ic" /></span>
          <span style={{ flex: 1 }}>
            <b style={{ fontSize: 14 }}>Mesafeyi uzaklaştırıyorum — birine haber ver</b>
            <span className="cy-muted" style={{ display: "block", fontSize: 12.5, marginTop: 2 }}>Bu işi geri ittiğinde bekleyen biri varsa, onu bilgilendir.</span>
          </span>
        </label>
        {doNotify && (
          <input className="cy-input" style={{ marginTop: 12 }} placeholder="Kime? (örn. Sevdin, GSO ekibi, müşteri…)" value={notify} onChange={(e) => setNotify(e.target.value)} autoFocus />
        )}
      </div>

      {doNotify && notify.trim() && (
        <div className="cy-defer-tip" style={{ marginTop: 12 }}>
          <Icon name="bell" className="ic" />
          <span><strong>{notify.trim()}</strong> için bir bildirim taslağı oluşturulacak: "{task.title}" işini şu an ileri bir tarihe aldım; gecikmeyle ilgili sana haber vermek istedim.</span>
        </div>
      )}
    </Sheet>
  );
}

Object.assign(window, { DeferSheet, DEFER_REASONS, reasonOf });