// View: Calendar — calm month grid.
function ViewCalendar() {
  const { lang } = window.useApp();
  const t = window.I18N[lang];
  const DATA = window.DATA;
  const Icon = window.Icon;

  // Build May 2026 (month 4). Today = May 25.
  const today = DATA.TODAY;
  const year = today.getFullYear();
  const month = today.getMonth();
  const monthStart = new Date(year, month, 1);
  const firstDow = monthStart.getDay(); // Sun=0
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const daysInPrev = new Date(year, month, 0).getDate();

  const dowES = ["DOM","LUN","MAR","MIÉ","JUE","VIE","SÁB"];
  const dowEN = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
  const dow = lang === "es" ? dowES : dowEN;

  const monthNamesES = ["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"];
  const monthNamesEN = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  const monthName = (lang === "es" ? monthNamesES : monthNamesEN)[month];

  // Synthetic events by day-of-month
  const events = {
    1:  [{ k: "money",   text_en: "Rent due",     text_es: "Renta" }],
    3:  [{ k: "training",text_en: "Push",         text_es: "Empuje" }],
    5:  [{ k: "training",text_en: "Legs",         text_es: "Pierna" }],
    7:  [{ k: "deadline",text_en: "Q2 review",    text_es: "Revisión Q2" }],
    10: [{ k: "training",text_en: "Long run",     text_es: "Carrera larga" }],
    12: [{ k: "training",text_en: "Push",         text_es: "Empuje" }],
    14: [{ k: "deadline",text_en: "Tax filing",   text_es: "Declaración" }],
    15: [{ k: "money",   text_en: "Subs",         text_es: "Suscripciones" }],
    17: [{ k: "habit",   text_en: "Book club",    text_es: "Club de lectura" }],
    20: [{ k: "training",text_en: "Z2 run",       text_es: "Z2 carrera" }],
    21: [{ k: "money",   text_en: "Payday",       text_es: "Pago" }],
    24: [{ k: "training",text_en: "Push",         text_es: "Empuje" }, { k: "habit", text_en: "Date night", text_es: "Cita" }],
    25: [{ k: "training",text_en: "Pull",         text_es: "Tirón" }, { k: "habit", text_en: "Read",      text_es: "Leer" }],
    27: [{ k: "deadline",text_en: "Half-mara reg.",text_es: "Insc. medio" }],
    28: [{ k: "training",text_en: "Push",         text_es: "Empuje" }],
    30: [{ k: "habit",   text_en: "Plan June",    text_es: "Planear junio" }],
  };

  // marks for indicators in each cell
  const markColor = {
    deadline: "var(--terracotta)",
    training: "oklch(60% 0.10 220)",
    habit: "var(--sage)",
    money: "var(--ochre)",
  };

  // build 6 weeks worth of cells
  const cells = [];
  for (let i = 0; i < firstDow; i++) {
    cells.push({ d: daysInPrev - firstDow + i + 1, faded: true });
  }
  for (let d = 1; d <= daysInMonth; d++) {
    cells.push({ d, faded: false, isToday: d === today.getDate(), events: events[d] || [] });
  }
  while (cells.length < 42) {
    cells.push({ d: cells.length - daysInMonth - firstDow + 1, faded: true });
  }

  return (
    <div className="content">
      {/* header bar */}
      <div className="card-flat" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "14px 18px" }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
          <button className="icon-btn"><Icon name="chev" size={14} style={{ transform: "rotate(180deg)" }}/></button>
          <div className="serif" style={{ fontSize: 26, letterSpacing: "-0.01em", textTransform: "capitalize" }}>
            {monthName} <span className="italic" style={{ color: "var(--ink-3)" }}>{year}</span>
          </div>
          <button className="icon-btn"><Icon name="chev" size={14}/></button>
        </div>
        <div className="row" style={{ gap: 12, alignItems: "center" }}>
          <div className="row" style={{ gap: 10 }}>
            <span className="pill"><span style={{ width: 6, height: 6, borderRadius: 99, background: markColor.deadline }}/> {t.cal_legend_deadline}</span>
            <span className="pill"><span style={{ width: 6, height: 6, borderRadius: 99, background: markColor.training }}/> {t.cal_legend_training}</span>
            <span className="pill"><span style={{ width: 6, height: 6, borderRadius: 99, background: markColor.habit }}/> {t.cal_legend_habit}</span>
            <span className="pill"><span style={{ width: 6, height: 6, borderRadius: 99, background: markColor.money }}/> {t.cal_legend_money}</span>
          </div>
          <button className="btn primary" style={{ padding: "6px 14px" }}>{t.today_btn}</button>
        </div>
      </div>

      <div className="card">
        <div className="month" style={{ marginBottom: 8 }}>
          {dow.map(d => <div key={d} className="dow">{d}</div>)}
        </div>
        <div className="month">
          {cells.map((c, i) => (
            <div key={i} className={"cell-day " + (c.faded ? "faded " : "") + (c.isToday ? "today" : "")}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span className="d">{c.d}</span>
                {c.isToday && <span className="meta" style={{ color: "var(--terracotta)", fontSize: 9.5 }}>HOY</span>}
              </div>
              {(c.events || []).slice(0, 2).map((e, j) => (
                <div key={j} className={"ev " + (e.k === "deadline" ? "warm" : e.k === "habit" ? "sage" : e.k === "money" ? "ochre" : "")}>
                  {lang === "es" ? e.text_es : e.text_en}
                </div>
              ))}
              {(c.events || []).length > 2 && (
                <div className="meta" style={{ fontSize: 10 }}>+{c.events.length - 2}</div>
              )}
              {(c.events || []).length > 0 && (c.events || []).length <= 0 && (
                <div className="marks">
                  {(c.events || []).slice(0, 3).map((e, j) => <span key={j} className="mark" style={{ background: markColor[e.k] }}/>)}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.ViewCalendar = ViewCalendar;