/* =========================================================================
   Çevik Yaşam — SEYİR DEFTERİ (Kaptanın Seyir Defteri · günlük takip)
   Her 3–4 saatte 1–2 dk log: kırpıntı/erteleme/patinaj/beklenmedik/savrulma/
   baskı/özlem + vites + yaşam rengi. Analiz değil, log. → Hafta'ya gözlem olur.
   ========================================================================= */

function GearPicker({ value, onChange }) {
  return (
    <div className="cy-gear-grid">
      {CY.gears.map((g) => (
        <button key={g.key} className={"cy-gear" + (value === g.key ? " on" : "")} onClick={() => onChange(g.key)} title={g.desc}>
          <Icon name={g.icon} className="ic" />
          <span>{g.label}</span>
        </button>
      ))}
    </div>
  );
}

function QualityPicker({ value, onChange }) {
  return (
    <div className="cy-qual">
      {CY.qualityLevels.map((q) => (
        <button key={q.v} className={"cy-qual-opt" + (value === q.v ? " on" : "")} onClick={() => onChange(q.v)} style={{ "--qc": q.color }}>
          <i style={{ background: q.color }} />
          <span>{q.label}</span>
        </button>
      ))}
    </div>
  );
}

function LogRow({ e, onInc, onEdit, onArchive, onRestore, onDelete }) {
  const t = CY.logType(e.type);
  return (
    <div className="cy-log" style={{ borderLeftColor: t.color }}>
      <div className="cy-log-ic" style={{ background: t.color + "1A", color: t.color }}><Icon name={t.icon} className="ic" /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: t.color }}>{t.label}</span>
          {e.type === "kirpinti" && e.count > 1 && <span className="cy-log-count">×{e.count}</span>}
        </div>
        <div style={{ fontSize: 14, fontWeight: 500, marginTop: 3, lineHeight: 1.4 }}>{e.text}</div>
        {e.feeling && <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 3, fontStyle: "italic" }}>“{e.feeling}”</div>}
        {e.type === "kirpinti" && !e.archived && (
          <button className="cy-btn ghost sm" style={{ padding: "4px 0", color: t.color, marginTop: 4 }} onClick={onInc}>
            <Icon name="plus" className="ic" /> tekrar aklıma geldi
          </button>
        )}
      </div>
      <RowMenu onEdit={onEdit} onArchive={onArchive} onRestore={onRestore} onDelete={onDelete} archived={e.archived} />
    </div>
  );
}

const LOG_FIELDS = [
  { name: "type", label: "Tür", type: "dropdown", options: CY.logTypes.map((t) => ({ value: t.key, label: t.label })), default: "kirpinti" },
  { name: "text", label: "Ne oldu?", type: "text", placeholder: "Bir iki kelime yeter…" },
  { name: "feeling", label: "Duygu / not", type: "text", placeholder: "Hatırlanması gereken bir his var mı?", optional: true },
];

function SeyirDefteri() {
  const L = useCollection("seyir-log", CY.logEntries);
  const [gear, setGear] = useStore("seyir-gear", "odakli");
  const [quality, setQuality] = useStore("seyir-quality", 3);
  const [gearLog, setGearLog] = useStore("seyir-gear-log", []);
  const [qualLog, setQualLog] = useStore("seyir-qual-log", []);
  const [gearSaved, setGearSaved] = useState(false);
  const [qualSaved, setQualSaved] = useState(false);
  const _ts = () => { const d = new Date(); let h = d.getHours(); const ap = h < 12 ? "AM" : "PM"; h = h % 12 || 12; return h + ":" + String(d.getMinutes()).padStart(2, "0") + " " + ap; };
  const saveGear = () => { setGearLog((l) => [{ gear, at: new Date().toISOString(), time: _ts() }, ...l].slice(0, 80)); setGearSaved(true); setTimeout(() => setGearSaved(false), 2200); };
  const saveQual = () => { setQualLog((l) => [{ quality, at: new Date().toISOString(), time: _ts() }, ...l].slice(0, 80)); setQualSaved(true); setTimeout(() => setQualSaved(false), 2200); };
  const [activeType, setActiveType] = useState(null);
  const [text, setText] = useState("");
  const [feeling, setFeeling] = useState("");
  const [edit, setEdit] = useState(null);
  const [del, setDel] = useState(null);
  const [showArc, setShowArc] = useState(false);

  const addQuick = () => {
    if (!activeType || !text.trim()) return;
    L.add({ type: activeType, text: text.trim(), feeling: feeling.trim(), count: 1 });
    setText(""); setFeeling(""); setActiveType(null);
  };
  const inc = (e) => L.update(e.id, { count: (e.count || 1) + 1 });

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Günlük takip · Kaptanın Seyir Defteri"
        title="Bu 3–4 saat nasıl geçti?"
        sub="Ayinesi iştir kişinin. Günde 2–3 kez 1–2 dakikalık not düş — analiz etme, sadece logla. Örüntüler haftalık kapanışta kendiliğinden belirir."
        right={<Btn variant="primary" icon="plus" onClick={() => setEdit({})}>Kayıt ekle</Btn>} />

      <HowTo id="seyir" when="Günde 2–3 kez · her 3–4 saatte"
        summary="Yaşamından <strong>veri akışı</strong> oluşturduğun yer. Vaktin nereye gittiğini ve seni yavaşlatan örüntüleri burada yakalarsın; <strong>Hafta</strong>'daki gözlemler buradan beslenir."
        steps={[
          "Bir işi bitirip diğerine geçerken dur: <strong>vitesini</strong> ve geçen saatlerin <strong>değer kalitesini</strong> işaretle.",
          "Seni rahatsız eden bir şey olduysa türünü seç (kırpıntı, erteleme, patinaj…) ve bir-iki kelimeyle not düş.",
          "Aynı <strong>kırpıntı</strong> tekrar aklına geldikçe ×'le — görünce kendiliğinden azalmaya başlar.",
          "Hafta sonunda bu kayıtlara dön; en çok canını yakanları Niçin–Nasıl–Ne ile çöz.",
        ]} />

      {/* şu an: vites + renk */}
      <div className="cy-grid" style={{ gridTemplateColumns: "1.3fr 1fr", marginBottom: 20 }}>
        <Card>
          <Eyebrow>Şu anki vitesin</Eyebrow>
          <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 6, marginBottom: 12 }}>{CY.gear(gear).desc}</div>
          <GearPicker value={gear} onChange={setGear} />
          <div className="cy-between" style={{ marginTop: 12 }}>
            {gearSaved ? <span className="cy-muted cy-fade-in" style={{ fontSize: 12, color: "var(--ml-success)" }}>Vites kaydedildi ✓</span> : <span className="cy-muted" style={{ fontSize: 11.5 }}>Vitesini gün boyunca değiştir.</span>}
            <Btn variant="ghost" size="sm" icon="check" onClick={saveGear}>Vitesi kaydet</Btn>
          </div>
        </Card>
        <Card>
          <Eyebrow>Bu saatler ne kadar değerdi?</Eyebrow>
          <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 6, marginBottom: 12 }}>Geçen birkaç saatin değer kalitesi: zorunlu angaryadan, yaratıcı · katma değerli işe.</div>
          <QualityPicker value={quality} onChange={setQuality} />
          <div className="cy-between" style={{ marginTop: 12 }}>
            {qualSaved ? <span className="cy-muted cy-fade-in" style={{ fontSize: 12, color: "var(--ml-success)" }}>Kaydedildi ✓</span> : <span className="cy-muted" style={{ fontSize: 11.5 }}>Saat bloğunu değerlendir.</span>}
            <Btn variant="ghost" size="sm" icon="check" onClick={saveQual}>Değeri kaydet</Btn>
          </div>
        </Card>
      </div>

      {/* hızlı kayıt composer */}
      <Card style={{ marginBottom: 22 }}>
        <Eyebrow>Bir olay yakala</Eyebrow>
        <div style={{ display: "flex", gap: 7, flexWrap: "wrap", marginTop: 12 }}>
          {CY.logTypes.map((t) => (
            <button key={t.key} className={"cy-typechip" + (activeType === t.key ? " on" : "")}
              style={activeType === t.key ? { background: t.color, borderColor: t.color, color: "#fff" } : { "--tc": t.color }}
              onClick={() => setActiveType(activeType === t.key ? null : t.key)}>
              <i style={{ background: activeType === t.key ? "#fff" : t.color }} />{t.label}
            </button>
          ))}
        </div>
        {activeType && (
          <div className="cy-fade-in" style={{ marginTop: 14 }}>
            <div className="cy-muted" style={{ fontSize: 12.5, marginBottom: 10, lineHeight: 1.5 }}>{CY.logType(activeType).desc}</div>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <input className="cy-input" style={{ flex: "2 1 240px" }} placeholder="Ne oldu?" value={text}
                onChange={(e) => setText(e.target.value)} onKeyDown={(e) => e.key === "Enter" && addQuick()} autoFocus />
              <input className="cy-input" style={{ flex: "1 1 180px" }} placeholder="Duygu / not (ops.)" value={feeling}
                onChange={(e) => setFeeling(e.target.value)} onKeyDown={(e) => e.key === "Enter" && addQuick()} />
              <Btn variant="primary" icon="plus" onClick={addQuick} style={{ opacity: text.trim() ? 1 : .45, pointerEvents: text.trim() ? "auto" : "none" }}>Ekle</Btn>
            </div>
          </div>
        )}
      </Card>

      {/* bugünün seyri */}
      <div className="cy-between" style={{ marginBottom: 14 }}>
        <h3 className="cy-h3">Bugünün seyri</h3>
        <span className="cy-muted cy-mono" style={{ fontSize: 13 }}>{L.active.length} kayıt</span>
      </div>
      <div className="cy-stack" style={{ gap: 10 }}>
        {L.active.map((e) => (
          <LogRow key={e.id} e={e} onInc={() => inc(e)} onEdit={() => setEdit(e)} onArchive={() => L.archive(e.id)} onDelete={() => setDel(e)} />
        ))}
        {!L.active.length && <div className="cy-empty">Bugün henüz kayıt yok. Bir olay yakala.</div>}
      </div>

      <ArchiveToggle count={L.archived.length} show={showArc} onToggle={() => setShowArc((s) => !s)} />
      {showArc && (
        <div className="cy-stack" style={{ gap: 10, marginTop: 12 }}>
          {L.archived.map((e) => <LogRow key={e.id} e={e} onRestore={() => L.restore(e.id)} onDelete={() => setDel(e)} />)}
        </div>
      )}

      <Card className="tint" style={{ marginTop: 22, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
        <Icon name="repeat" style={{ width: 19, color: "var(--ml-red)" }} />
        <div style={{ flex: 1, minWidth: 240, fontSize: 13.5, lineHeight: 1.5, color: "var(--ml-ink-2)" }}>
          Bu kayıtlar ham veri. Hafta sonunda <strong>Hafta</strong>'ya taşı: en çok tekrar eden ya da canını yakan örüntüyü bir gözleme çevir.
        </div>
      </Card>

      {edit && <EditSheet eyebrow={edit.id ? "Kaydı düzenle" : "Yeni kayıt"} title={edit.id ? "Seyir kaydını düzenle" : "Seyir defterine kayıt ekle"}
        fields={LOG_FIELDS} initial={edit.id ? edit : null}
        onClose={() => setEdit(null)}
        onSave={(v) => { edit.id ? L.update(edit.id, v) : L.add({ ...v, count: 1 }); setEdit(null); }} />}
      {del && <ConfirmSheet body="Bu kayıt silinecek." onClose={() => setDel(null)} onConfirm={() => { L.remove(del.id); setDel(null); }} />}
    </div>
  );
}

Object.assign(window, { SeyirDefteri });