/* =========================================================================
   Çevik Yaşam — ODAK (temiz odak sayfası: sayaç + bugünün işleri)
   Dağınıklık yok. Tek sayaç, tek liste. ADHD için sade çalışma ekranı.
   ========================================================================= */

function Odak() {
  const T = useCollection("tasks", CY.todayTasks);
  const [activeTask, setActiveTask] = useStore("active-task", null);
  const [preset, setPreset] = useStore("odak-preset", 25);
  // sayaç durumu DB'de saklanır (base = birikmiş sn, startedAt = başlangıç ms)
  // → yenileme/cihaz değişiminde doğru yerden devam eder
  const [timer, setTimer] = useStore("odak-timer", { running: false, base: 0, startedAt: null });
  const [complete, setComplete] = useState(null);
  const [, setTick] = useState(0);

  const running = timer.running;
  const elapsed = (timer.running && timer.startedAt)
    ? (timer.base || 0) + Math.floor((Date.now() - timer.startedAt) / 1000)
    : (timer.base || 0);

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

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

  const list = T.active.filter((t) => t.today).sort((a, b) => (a.done ? 1 : 0) - (b.done ? 1 : 0) || (a.prio || 3) - (b.prio || 3));
  const open = list.filter((t) => !t.done);
  const done = list.filter((t) => t.done).length;
  const active = list.find((t) => t.id === activeTask) || null;

  const targetSec = preset * 60;
  const remaining = preset ? Math.max(0, targetSec - elapsed) : elapsed;
  const finished = 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 reset = () => { setTimer({ running: false, base: 0, startedAt: null }); };
  const logTime = () => {
    if (active && elapsed > 0) { const mins = Math.round(elapsed / 60); if (mins > 0) T.update(active.id, { spentMin: (active.spentMin || 0) + mins }); }
  };
  const finishTask = () => { logTime(); if (active) setComplete(active); reset(); };

  const PRESETS = [{ k: 25, l: "25" }, { k: 50, l: "50" }, { k: 15, l: "15" }, { k: 0, l: "∞" }];

  return (
    <div className="cy-odak">
      <div className="cy-odak-left">
        <div className="cy-odak-eyebrow">Odak · {CY.today.label}</div>
        {active ? (
          <div className="cy-odak-active">
            <span className="cy-proj-dot" style={{ background: CY.proj(active.project).color, width: 9, height: 9 }} />
            <span>{active.title}</span>
          </div>
        ) : <div className="cy-odak-active dim">Soldan bir işe odaklan ya da serbest çalış</div>}

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

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

        <div className="cy-odak-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 && active && <Btn variant="ghost" icon="check" onClick={finishTask} style={{ color: "#fff", borderColor: "var(--ml-on-night-line)" }}>İşi bitir</Btn>}
          {elapsed > 0 && <Btn variant="ghost" onClick={() => { logTime(); reset(); }} style={{ color: "var(--ml-on-night-2)", borderColor: "transparent" }}>Süreyi kaydet & sıfırla</Btn>}
        </div>
      </div>

      <div className="cy-odak-right">
        <div className="cy-between" style={{ marginBottom: 14 }}>
          <h3 className="cy-h3" style={{ fontSize: 18 }}>Bugünün işleri</h3>
          <span className="cy-muted cy-mono" style={{ fontSize: 12.5 }}>{done}/{list.length}</span>
        </div>
        <div className="cy-stack" style={{ gap: 8 }}>
          {list.map((t) => (
            <div key={t.id} className={"cy-odak-task" + (t.done ? " done" : "") + (t.id === activeTask ? " focus" : "")}>
              <button className={"cy-check" + (t.done ? " on" : "")} style={{ marginTop: 0 }} onClick={() => { if (!t.done) setComplete(t); else T.update(t.id, { done: false }); }}><Icon name="check" className="ic" /></button>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 500, lineHeight: 1.35 }}>{t.title}</div>
                <div className="cy-muted" style={{ fontSize: 11.5, marginTop: 2, display: "flex", alignItems: "center", gap: 5 }}>
                  <i className="cy-proj-dot" style={{ background: CY.proj(t.project).color, width: 7, height: 7 }} />{CY.proj(t.project).name}
                  {t.spentMin > 0 && <span style={{ color: "var(--ml-success)" }}>· ⏱ {t.spentMin} dk</span>}
                </div>
              </div>
              {!t.done && <button className={"cy-btn sm" + (t.id === activeTask ? " primary" : " ghost")} onClick={() => { setActiveTask(t.id === activeTask ? null : t.id); reset(); }} title="Bu işe odaklan"><Icon name="target" className="ic" /></button>}
            </div>
          ))}
          {!list.length && <div className="cy-empty">Bugün için iş yok. Bugün ya da Planlama'dan ekle.</div>}
        </div>
        {!!open.length && <Btn variant="ghost" size="sm" iconRight="arrowRight" onClick={() => window.cyGoto("bugun")} style={{ marginTop: 14, color: "var(--ml-red)" }}>Bugün'e dön</Btn>}
      </div>

      {complete && <CompleteSheet task={complete}
        onClose={() => setComplete(null)}
        onDone={() => { T.update(complete.id, { done: true }); setComplete(null); }}
        onAddFollowup={(f) => T.add(f)} />}
    </div>
  );
}

Object.assign(window, { Odak });