/* =========================================================================
   Çevik Yaşam — FOCUS MODE (pomodoro + süre takibi)
   Bir işe odaklan: 25 dk pomodoro (ya da serbest), başla/duraklat/bitir.
   Geçen süre işe yazılır (spentMin). ADHD: tek iş, görünür sayaç.
   ========================================================================= */

function FocusMode({ task, onClose, onComplete, onLog }) {
  const PRESETS = [
    { k: 25, l: "25 dk", note: "Klasik pomodoro" },
    { k: 50, l: "50 dk", note: "Derin blok" },
    { k: 15, l: "15 dk", note: "Isınma / küçük iş" },
    { k: 0, l: "Serbest", note: "Sayaç yukarı sayar" },
  ];
  // oturum DB'de saklanır (görev başına) → yenilemede süreyi kaybetme, devam et
  const [sess, setSess] = useStore("focus-" + task.id, { running: false, base: 0, startedAt: null, preset: 25 });
  const [, setTick] = useState(0);
  const preset = sess.preset;
  const running = sess.running;
  const elapsed = (sess.running && sess.startedAt)
    ? (sess.base || 0) + Math.floor((Date.now() - sess.startedAt) / 1000)
    : (sess.base || 0);

  useEffect(() => {
    if (!sess.running) return;
    const id = setInterval(() => setTick((x) => x + 1), 1000);
    return () => clearInterval(id);
  }, [sess.running]);

  const setPreset = (k) => setSess((s) => ({ ...s, preset: k }));
  const start = () => setSess((s) => ({ ...s, running: true, base: s.base || 0, startedAt: Date.now() }));
  const pause = () => setSess((s) => ({ ...s, running: false, base: (s.startedAt ? (s.base || 0) + Math.floor((Date.now() - s.startedAt) / 1000) : (s.base || 0)), startedAt: null }));

  const targetSec = preset * 60;
  const remaining = preset ? Math.max(0, targetSec - elapsed) : elapsed;
  const done = preset && elapsed >= targetSec;
  const mm = String(Math.floor(remaining / 60)).padStart(2, "0");
  const ss = String(remaining % 60).padStart(2, "0");
  const pct = preset ? Math.min(100, (elapsed / targetSec) * 100) : (elapsed % 60) / 60 * 100;

  const stop = (markDone) => {
    const mins = Math.round(elapsed / 60);
    if (mins > 0) onLog(task, mins);
    if (markDone) onComplete(task);
    setSess({ running: false, base: 0, startedAt: null, preset }); // süre işlendi → sıfırla
    onClose();
  };

  return (
    <div className="cy-overlay" onClick={() => stop(false)}>
      <div className="cy-focus" onClick={(e) => e.stopPropagation()}>
        <button className="cy-iconbtn" style={{ position: "absolute", top: 16, right: 16, border: 0, background: "transparent", color: "var(--ml-on-night-2)" }} onClick={() => stop(false)}><Icon name="x" /></button>
        <div className="cy-focus-eyebrow">Odak modu</div>
        <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 6 }}>
          <i className="cy-proj-dot" style={{ background: CY.proj(task.project).color }} />
          <span style={{ fontSize: 12.5, color: "var(--ml-on-night-2)" }}>{CY.proj(task.project).name}</span>
        </div>
        <h2 className="cy-focus-title">{task.title}</h2>

        <div className="cy-focus-ring" style={{ "--pct": pct + "%", "--ring": done ? "var(--ml-success)" : "var(--ml-red)" }}>
          <div className="cy-focus-time">{preset ? `${mm}:${ss}` : `${String(Math.floor(elapsed / 60)).padStart(2, "0")}:${String(elapsed % 60).padStart(2, "0")}`}</div>
          <div className="cy-focus-sub">{done ? "Süre doldu 🎉" : running ? (preset ? "kalan" : "geçen") : "hazır"}</div>
        </div>

        {!running && elapsed === 0 && (
          <div className="cy-focus-presets">
            {PRESETS.map((p) => (
              <button key={p.k} className={"cy-focus-preset" + (preset === p.k ? " on" : "")} onClick={() => setPreset(p.k)}>
                <b>{p.l}</b><span>{p.note}</span>
              </button>
            ))}
          </div>
        )}

        <div className="cy-focus-actions">
          {!running
            ? <Btn variant="primary" icon="play" onClick={start}>{elapsed === 0 ? "Başla" : "Devam"}</Btn>
            : <Btn variant="ghost" icon="pause" onClick={pause} style={{ color: "#fff", borderColor: "var(--ml-on-night-line)" }}>Duraklat</Btn>}
          {elapsed > 0 && <Btn variant="ghost" icon="check" onClick={() => stop(true)} style={{ color: "#fff", borderColor: "var(--ml-on-night-line)" }}>Bitir & kaydet</Btn>}
          {elapsed > 0 && <Btn variant="ghost" onClick={() => stop(false)} style={{ color: "var(--ml-on-night-2)", borderColor: "transparent" }}>Sadece süreyi kaydet</Btn>}
        </div>

        <div className="cy-focus-foot">
          {task.spentMin ? `Bugüne dek bu işte ${task.spentMin} dk geçirdin.` : "ADHD ipucu: tek iş, görünür sayaç. Telefonu uzaklaştır."}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FocusMode });