/* =========================================================================
   Çevik Yaşam — RUTİNLER (haftalık tekrarlayan işler)
   Belirli günlerde otomatik Bugün'e düşer. Çevik ritmin iskeleti.
   ========================================================================= */

const DOW = ["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"]; // gösterim sırası
const DOW_IDX = [1, 2, 3, 4, 5, 6, 0]; // pzt..paz → JS getDay()

function RoutineRow({ r, coll, onEdit, onDelete }) {
  const proj = CY.proj(r.project);
  const toggleDay = (jsIdx) => {
    const days = r.days.includes(jsIdx) ? r.days.filter((d) => d !== jsIdx) : [...r.days, jsIdx];
    coll.update(r.id, { days });
  };
  return (
    <div className={"cy-routine" + (r.active ? "" : " off")}>
      <button className={"cy-switch" + (r.active ? " on" : "")} onClick={() => coll.update(r.id, { active: !r.active })} title={r.active ? "Aktif" : "Pasif"} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontSize: 14.5, fontWeight: 600 }}>{r.title}</span>
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: 6, alignItems: "center", flexWrap: "wrap" }}>
          <span className="cy-proj-tag"><i className="cy-proj-dot" style={{ background: proj.color }} />{proj.name}</span>
          {r.time && <span className="cy-tag-mini"><Icon name="clock" style={{ width: 10, marginRight: 3, verticalAlign: "-1px" }} />{r.time}</span>}
          {r.note && <span className="cy-muted" style={{ fontSize: 12 }}>{r.note}</span>}
        </div>
        <div className="cy-routine-days">
          {r.freq === "aylik"
            ? <span className="cy-tag-mini" style={{ color: "var(--ml-info)", background: "var(--ml-info-bg)" }}>Her ayın {r.dom}'i</span>
            : DOW.map((d, i) => {
                const jsIdx = DOW_IDX[i];
                return <button key={d} className={"cy-day-pill" + ((r.days || []).includes(jsIdx) ? " on" : "")} onClick={() => toggleDay(jsIdx)}>{d}</button>;
              })}
        </div>
      </div>
      <RowMenu onEdit={() => onEdit(r)} onDelete={() => onDelete(r)} />
    </div>
  );
}

const ROUTINE_FIELDS = [
  { name: "title", label: "Rutin", placeholder: "örn. Haftalık döngü kapanışı" },
  { name: "project", label: "Proje", type: "dropdown", optgroups: CY.projectOptgroups, default: "kisisel" },
  { name: "freq", label: "Sıklık", type: "select", options: [{ value: "haftalik", label: "Haftalık" }, { value: "aylik", label: "Aylık" }], default: "haftalik" },
  { name: "dom", label: "Ayın günü (aylıksa)", type: "number", min: 1, max: 31, default: 1 },
  { name: "time", label: "Saat", placeholder: "örn. 20:00", optional: true },
  { name: "note", label: "Not", placeholder: "Kısa açıklama", optional: true },
];

function Rutinler() {
  const R = useCollection("routines-coll", CY.routines);
  const [edit, setEdit] = useState(null);
  const [del, setDel] = useState(null);

  const todayDow = CY.today.dow;
  const todayDom = new Date().getDate();
  const dueToday = R.active.filter((r) => r.active && (r.freq === "aylik" ? r.dom === todayDom : (r.days || []).includes(todayDow)));
  const weekly = R.active.filter((r) => r.freq !== "aylik");
  const monthly = R.active.filter((r) => r.freq === "aylik");

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Haftalık rutinler"
        title="Çevik ritmin iskeleti"
        sub="Tekrar eden işleri bir kez tanımla; belirli günlerde Bugün listene kendiliğinden düşsünler. Rutinler dağınıklığı azaltır, zihinsel yükü düşürür."
        right={<Btn variant="primary" icon="plus" onClick={() => setEdit({})}>Rutin ekle</Btn>} />

      <HowTo id="rutinler" when="Bir kez kur · her hafta işler"
        summary="Tekrar eden işleri her hafta yeniden düşünmek zihinsel yük. Burada bir kez tanımlarsın; <strong>seçtiğin günlerde Bugün'e otomatik düşer.</strong>"
        steps={[
          "Düzenli yaptığın işleri <strong>Rutin ekle</strong> ile gir (döngü kapanışı, metrik özeti, Ahmet ile akşam…).",
          "Her rutin için <strong>günleri</strong> işaretle — gün baloncuklarına tıkla.",
          "Anahtarla rutini geçici olarak <strong>duraklat</strong> ya da yeniden başlat.",
          "Bugün geçerli olan rutinler aşağıda; istersen tek tıkla güne eklersin.",
        ]} />

      {!!dueToday.length && (
        <Card className="tint" style={{ marginBottom: 20, borderLeft: "3px solid var(--ml-red)" }}>
          <div className="cy-between" style={{ marginBottom: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
              <Icon name="sun" style={{ width: 18, color: "var(--ml-red)" }} />
              <h4 className="cy-h4">Bugün ({CY.today.dayShort}) geçerli rutinler</h4>
            </div>
            <Pill tone="red" dot>{dueToday.length}</Pill>
          </div>
          <div className="cy-stack" style={{ gap: 8 }}>
            {dueToday.map((r) => (
              <div key={r.id} className="cy-between" style={{ padding: "9px 12px", background: "var(--ml-card)", borderRadius: "var(--ml-r-sm)", border: "1px solid var(--ml-line)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
                  <i className="cy-proj-dot" style={{ background: CY.proj(r.project).color }} />
                  <span style={{ fontSize: 13.5, fontWeight: 500 }}>{r.title}</span>
                  {r.time && <span className="cy-tag-mini">{r.time}</span>}
                </div>
                <Icon name="check" style={{ width: 16, color: "var(--ml-ink-4)" }} />
              </div>
            ))}
          </div>
        </Card>
      )}

      <div className="cy-between" style={{ marginBottom: 14 }}>
        <h3 className="cy-h3">Haftalık rutinler</h3>
        <span className="cy-muted cy-mono" style={{ fontSize: 13 }}>{weekly.filter((r) => r.active).length} aktif / {weekly.length}</span>
      </div>
      <div className="cy-stack" style={{ gap: 10 }}>
        {weekly.map((r) => <RoutineRow key={r.id} r={r} coll={R} onEdit={setEdit} onDelete={setDel} />)}
        {!weekly.length && <div className="cy-empty">Haftalık rutin yok.</div>}
      </div>

      <div className="cy-between" style={{ margin: "24px 0 14px" }}>
        <h3 className="cy-h3">Aylık rutinler</h3>
        <span className="cy-muted cy-mono" style={{ fontSize: 13 }}>{monthly.filter((r) => r.active).length} aktif / {monthly.length}</span>
      </div>
      <div className="cy-stack" style={{ gap: 10 }}>
        {monthly.map((r) => <RoutineRow key={r.id} r={r} coll={R} onEdit={setEdit} onDelete={setDel} />)}
        {!monthly.length && <div className="cy-empty">Aylık rutin yok — örn. ayın 28'i muhasebe evrakları.</div>}
      </div>

      {edit && <EditSheet eyebrow={edit.id ? "Rutini düzenle" : "Yeni rutin"} title={edit.id ? "Rutini düzenle" : "Haftalık rutin ekle"}
        fields={ROUTINE_FIELDS} initial={edit.id ? edit : null}
        onClose={() => setEdit(null)}
        onSave={(v) => { const rec = { ...v, dom: Number(v.dom) || 1 }; edit.id ? R.update(edit.id, rec) : R.add({ ...rec, days: rec.freq === "aylik" ? [] : [1], active: true }); setEdit(null); }} />}
      {del && <ConfirmSheet body={`"${del.title}" rutini silinecek.`} onClose={() => setDel(null)} onConfirm={() => { R.remove(del.id); setDel(null); }} />}
    </div>
  );
}

Object.assign(window, { Rutinler });