/* =========================================================================
   Çevik Yaşam — TARİHLER (kritik tarihler · müşteri/program teslimleri)
   Yaklaşan tarihler ilgili projenin görevlerini öne çıkarır.
   ========================================================================= */

const DATE_KINDS = ["Teslim", "Etkinlik", "Lansman", "Sunum", "Deadline", "Kampanya", "Toplantı", "Kişisel"];
const fmtDate = (iso) => {
  const d = new Date(iso + "T00:00:00");
  const M = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"];
  const D = ["Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cmt"];
  return `${d.getDate()} ${M[d.getMonth()]} ${d.getFullYear()} · ${D[d.getDay()]}`;
};

const DATE_FIELDS = [
  { name: "title", label: "Ne / kim", placeholder: "örn. Müşteri sunumu · GSO heyeti" },
  { name: "date", label: "Tarih", type: "date", placeholder: CY.today.iso },
  { name: "project", label: "İlgili proje", type: "dropdown", optgroups: CY.projectOptgroups, default: "kisisel" },
  { name: "kind", label: "Tür", type: "select", options: DATE_KINDS, default: "Teslim" },
  { name: "note", label: "Not", type: "textarea", placeholder: "Detay / hazırlık", optional: true },
];

function urgencyOf(d) {
  if (d < 0) return { label: "geçti", color: "var(--ml-ink-4)", tone: "" };
  if (d === 0) return { label: "Bugün", color: "var(--ml-red)", tone: "red" };
  if (d === 1) return { label: "Yarın", color: "var(--ml-red)", tone: "red" };
  if (d <= 3) return { label: d + " gün", color: "var(--ml-red)", tone: "red" };
  if (d <= 7) return { label: d + " gün", color: "var(--ml-warn)", tone: "warn" };
  if (d <= 14) return { label: d + " gün", color: "var(--ml-info)", tone: "info" };
  return { label: d + " gün", color: "var(--ml-ink-3)", tone: "" };
}

function Tarihler() {
  const D = useCollection("critical-dates", CY.criticalDatesDefault);
  const T = useCollection("tasks", CY.todayTasks);
  const [edit, setEdit] = useState(null);
  const [del, setDel] = useState(null);

  const dated = D.active.map((d) => ({ ...d, d: CY.daysUntil(d.date) })).sort((a, b) => a.d - b.d);
  const upcoming = dated.filter((d) => d.d >= 0);
  const past = dated.filter((d) => d.d < 0);

  // bir tarihe ≤7 gün kala o projenin bitmemiş işlerini öne çıkar
  const hotProjects = {};
  upcoming.filter((d) => d.d <= 7).forEach((d) => { hotProjects[d.project] = Math.min(hotProjects[d.project] ?? 99, d.d); });
  const pullToToday = (projectId) => {
    T.items.filter((t) => t.project === projectId && !t.done && !t.today).forEach((t) => T.update(t.id, { today: true, prio: Math.min(t.prio || 3, 2) }));
  };

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Kritik tarihler · takvim baskısı"
        title="Tarihler"
        sub="Müşteri teslimleri, etkinlikler, program. Bir tarih yaklaştıkça ilgili projenin işleri kendiliğinden öne çıkar — sürpriz olmasın."
        right={<Btn variant="primary" icon="plus" onClick={() => setEdit({})}>Tarih ekle</Btn>} />

      <HowTo id="tarihler" when="Kurulumda + tarih geldikçe"
        summary="Kafanda taşıdığın tüm <strong>kritik tarihleri</strong> buraya yaz. Sistem her tarihi ilgili projeye bağlar; yaklaştıkça o projenin işlerini Bugün'e taşımanı hatırlatır."
        steps={[
          "Bir müşteri teslimi, etkinlik ya da deadline'ı <strong>Tarih ekle</strong> ile gir — projesini seç.",
          "Liste <strong>en yakın tarihe</strong> göre dizilir; renk uzaklığı gösterir (kırmızı = bu hafta).",
          "≤7 güne giren tarihlerde <strong>'İşleri öne çek'</strong> ile o projenin işlerini bugüne taşı.",
          "Bugün ekranındaki 'Yaklaşan tarihler' kartı da hep gözünün önünde olur.",
        ]} />

      {!!Object.keys(hotProjects).length && (
        <Card className="tint" style={{ marginBottom: 20, borderLeft: "3px solid var(--ml-red)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12 }}>
            <Icon name="alert" style={{ width: 18, color: "var(--ml-red)" }} />
            <h4 className="cy-h4">Takvim baskısı altındaki projeler</h4>
          </div>
          <div className="cy-stack" style={{ gap: 9 }}>
            {Object.entries(hotProjects).sort((a, b) => a[1] - b[1]).map(([pid, d]) => {
              const open = T.active.filter((t) => t.project === pid && !t.done).length;
              return (
                <div key={pid} 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(pid).color }} />
                    <span style={{ fontSize: 13.5, fontWeight: 600 }}>{CY.proj(pid).name}</span>
                    <span className="cy-tag-mini" style={{ color: "var(--ml-red)", background: "var(--ml-red-050)" }}>{d === 0 ? "bugün" : d + " gün"}</span>
                    <span className="cy-muted" style={{ fontSize: 12 }}>{open} açık iş</span>
                  </div>
                  {open > 0 && <Btn variant="ghost" size="sm" icon="arrowUp" onClick={() => pullToToday(pid)} style={{ color: "var(--ml-red)" }}>İşleri öne çek</Btn>}
                </div>
              );
            })}
          </div>
        </Card>
      )}

      <div className="cy-stack" style={{ gap: 10 }}>
        {upcoming.map((d) => {
          const u = urgencyOf(d.d);
          const open = T.active.filter((t) => t.project === d.project && !t.done).length;
          return (
            <Card key={d.id} className="flat" style={{ padding: 0, overflow: "hidden", display: "flex" }}>
              <div style={{ width: 5, background: u.color, flex: "none" }} />
              <div style={{ flex: 1, padding: "15px 18px", minWidth: 0 }}>
                <div className="cy-between" style={{ alignItems: "flex-start", gap: 10 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                      <span style={{ fontSize: 15, fontWeight: 600 }}>{d.title}</span>
                      <span className="cy-tag-mini">{d.kind}</span>
                    </div>
                    <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 5, display: "flex", alignItems: "center", gap: 7, flexWrap: "wrap" }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><i className="cy-proj-dot" style={{ background: CY.proj(d.project).color, width: 7, height: 7 }} />{CY.proj(d.project).name}</span>
                      <span>·</span><span>{fmtDate(d.date)}</span>
                      {open > 0 && <React.Fragment><span>·</span><span>{open} açık iş</span></React.Fragment>}
                    </div>
                    {d.note && <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 6, lineHeight: 1.45 }}>{d.note}</div>}
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, flex: "none" }}>
                    <span className="cy-date-badge" style={{ color: u.color, background: u.tone === "red" ? "var(--ml-red-050)" : u.tone === "warn" ? "var(--ml-warn-bg)" : u.tone === "info" ? "var(--ml-info-bg)" : "var(--ml-paper-2)" }}>{u.label}</span>
                    <RowMenu onEdit={() => setEdit(d)} onDelete={() => setDel(d)} />
                  </div>
                </div>
              </div>
            </Card>
          );
        })}
        {!upcoming.length && <div className="cy-empty">Yaklaşan kritik tarih yok. Bir tane ekle.</div>}
      </div>

      {!!past.length && (
        <div style={{ marginTop: 24 }}>
          <Eyebrow style={{ marginBottom: 12 }}>Geçmiş tarihler</Eyebrow>
          <div className="cy-stack" style={{ gap: 8 }}>
            {past.map((d) => (
              <div key={d.id} className="cy-between" style={{ padding: "10px 14px", opacity: .6, border: "1px solid var(--ml-line)", borderRadius: "var(--ml-r-md)" }}>
                <span style={{ fontSize: 13.5, textDecoration: "line-through", textDecorationColor: "var(--ml-ink-5)" }}>{d.title}</span>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span className="cy-muted" style={{ fontSize: 12 }}>{fmtDate(d.date)}</span>
                  <RowMenu onEdit={() => setEdit(d)} onDelete={() => setDel(d)} />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {edit && <EditSheet eyebrow={edit.id ? "Tarihi düzenle" : "Yeni tarih"} title={edit.id ? "Kritik tarihi düzenle" : "Kritik tarih ekle"}
        fields={DATE_FIELDS} initial={edit.id ? edit : null} onClose={() => setEdit(null)}
        onSave={(v) => { edit.id ? D.update(edit.id, v) : D.add(v); setEdit(null); }} />}
      {del && <ConfirmSheet body={`"${del.title}" silinecek.`} onClose={() => setDel(null)} onConfirm={() => { D.remove(del.id); setDel(null); }} />}
    </div>
  );
}

Object.assign(window, { Tarihler });