// View: Today — "the shape of your day"
// PRODUCTION-READY: checkboxes funcionales, empty states, Quick Log activo.

const { useState: useState_today, useMemo: useMemo_today } = React;

function ViewToday() {
  const { lang, setView } = window.useApp();
  const t = window.I18N[lang];
  const DATA = window.DATA;
  const Icon = window.Icon;

  const [showAddTx, setShowAddTx] = useState_today(false);
  const [showHabitPick, setShowHabitPick] = useState_today(false);
  const [showWorkoutLog, setShowWorkoutLog] = useState_today(false);
  const [, force_today] = React.useReducer((x) => x + 1, 0);

  React.useEffect(() => {
    const unsubs = [
      window.Store.subscribe("transactions", force_today),
      window.Store.subscribe("habits", force_today),
      window.Store.subscribe("workouts", force_today),
    ];
    return () => unsubs.forEach(u => u && u());
  }, []);

  const startH = 6, endH = 22, totalH = endH - startH;
  const pxPerHour = 56;
  const trackHeight = totalH * pxPerHour;
  const nowH = DATA.TODAY.getHours() + DATA.TODAY.getMinutes() / 60;
  const nowOk = nowH >= startH && nowH <= endH;
  const nowY = (nowH - startH) * pxPerHour;

  const hours = useMemo_today(() => {
    const list = [];
    for (let h = startH; h <= endH; h++) {
      const ampm = h < 12 ? "AM" : "PM";
      const h12 = h === 12 ? 12 : h > 12 ? h - 12 : h;
      list.push({ h, label: `${String(h12).padStart(2, " ")} ${ampm}` });
    }
    return list;
  }, []);

  const todayEvents = DATA.todayEvents;
  const upcoming = todayEvents.filter(e => e.t > nowH).slice(0, 3);
  const sortedHabits = [...DATA.habits].sort((a, b) => (b.streak || 0) - (a.streak || 0));
  const topHabit = sortedHabits[0];
  const todaySession = DATA.todaySession;
  const settings = window.Storage.get("settings") || {};
  const mainCurrency = settings.currency || "PEN";

  function handleToggleHabit(h) {
    window.HabitOps.toggle(h);
  }

  return (
    <div className="content">
      <div className="grid" style={{ gridTemplateColumns: "1.4fr 1fr 1fr" }}>
        <div className="card" style={{ overflow: "hidden", position: "relative" }}>
          <div className="kicker">{t.streak_label}</div>
          {topHabit ? (
            <>
              <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginTop: 6 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 72, lineHeight: 0.9, letterSpacing: "-0.02em" }}>
                  {topHabit.streak || 0}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                  <div style={{ fontSize: 14 }}>{t.streak_days}</div>
                  <div className="meta">{t.streak_best}: {topHabit.best || 0}</div>
                </div>
                <div style={{ marginLeft: "auto", textAlign: "right" }}>
                  <div style={{ fontSize: 22 }}>{topHabit.emoji}</div>
                  <div className="caption" style={{ marginTop: 4 }}>{lang === "es" ? topHabit.name_es : topHabit.name_en}</div>
                </div>
              </div>
              <div className="chain-deco" aria-hidden="true"/>
              <div className="italic" style={{ position: "absolute", right: 22, bottom: 14, fontFamily: "var(--font-display)", fontSize: 14, color: "var(--ink-3)" }}>
                {lang === "es" ? "no rompas la cadena" : "don't break the chain"}
              </div>
            </>
          ) : (
            <div style={{ padding: "12px 0" }}>
              <div className="serif italic" style={{ fontSize: 22, color: "var(--ink-3)", marginBottom: 8 }}>
                {lang === "es" ? "Aún sin hábitos" : "No habits yet"}
              </div>
              <button className="btn warm" onClick={() => setView("habits")}>
                <Icon name="plus" size={14}/> {lang === "es" ? "Crear primer hábito" : "Create first habit"}
              </button>
            </div>
          )}
        </div>

        <div className="kpi">
          <div className="label">{t.spent_today}</div>
          <div className="value">{window.fmtMoney(DATA.metrics.todaySpent, mainCurrency)}</div>
          <div className="meta">{window.fmtMoney(DATA.metrics.todayBudget - DATA.metrics.todaySpent, mainCurrency)} {t.budget_left}</div>
          <div style={{ marginTop: 10, height: 4, background: "var(--paper-sunk)", borderRadius: 4, overflow: "hidden" }}>
            <div style={{ width: `${Math.min(100, (DATA.metrics.todaySpent / Math.max(1, DATA.metrics.todayBudget)) * 100)}%`, height: "100%", background: "var(--terracotta)" }} />
          </div>
        </div>

        <div className="card" style={{ padding: 18 }}>
          <div className="kicker">{t.workout_today}</div>
          {todaySession ? (
            <>
              <div className="serif" style={{ fontSize: 22, marginTop: 6, lineHeight: 1.15 }}>
                {lang === "es" ? todaySession.name_es : todaySession.name_en}
              </div>
              <div className="meta" style={{ marginTop: 6 }}>
                {todaySession.blocks.length} {lang === "es" ? "ejercicios" : "movements"}
              </div>
              <div className="row" style={{ marginTop: 10 }}>
                {todaySession.blocks.slice(0, 3).map((b, i) => (
                  <span className="pill" key={i}>{lang === "es" ? b.ex_es : b.ex_en}</span>
                ))}
                {todaySession.blocks.length > 3 && <span className="pill">+{todaySession.blocks.length - 3}</span>}
              </div>
            </>
          ) : (
            <div style={{ marginTop: 8 }}>
              <div className="serif italic" style={{ fontSize: 18, color: "var(--ink-3)", marginBottom: 8 }}>
                {lang === "es" ? "Sin entreno hoy" : "No training today"}
              </div>
              <button className="btn" onClick={() => setShowWorkoutLog(true)}>
                <Icon name="plus" size={14}/> {t.log_workout}
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.6fr 1fr" }}>
        <div className="card" style={{ paddingTop: 18, position: "relative", overflow: "hidden" }}>
          <div className="hero-watermark today" aria-hidden="true"/>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 12 }}>
            <h2 className="card-h">{lang === "es" ? "La forma del día" : "The shape of the day"}</h2>
            <div className="meta italic" style={{ fontFamily: "var(--font-display)", fontSize: 14 }}>
              {lang === "es" ? "amanecer 6:08 · ocaso 20:11" : "sunrise 6:08 · sunset 20:11"}
            </div>
          </div>
          <div className="horizon">
            <div className="hours" style={{ position: "relative" }}>
              {hours.map(({ h, label }) => (
                <div className="hour mono" key={h}>{label}</div>
              ))}
            </div>
            <div className="track" style={{ height: trackHeight, position: "relative" }}>
              <svg className="sun-arc" viewBox={`0 0 100 ${trackHeight}`} preserveAspectRatio="none">
                <defs>
                  <linearGradient id="sunArc" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0" stopColor="oklch(80% 0.12 70 / 0.6)" />
                    <stop offset="0.5" stopColor="oklch(70% 0.13 50 / 0.4)" />
                    <stop offset="1" stopColor="oklch(60% 0.08 280 / 0.2)" />
                  </linearGradient>
                </defs>
                <path d={`M 50 0 Q 90 ${trackHeight/2} 50 ${trackHeight}`} fill="none" stroke="url(#sunArc)" strokeWidth="40" strokeLinecap="round" />
                <circle cx="50" cy={(nowH - startH) * pxPerHour} r="4" fill="oklch(75% 0.13 60)" opacity="0.6" />
              </svg>
              {todayEvents.length === 0 && (
                <div style={{ position: "absolute", top: trackHeight / 2 - 30, left: 0, right: 0, textAlign: "center" }}>
                  <div className="serif italic" style={{ fontSize: 18, color: "var(--ink-3)" }}>
                    {lang === "es" ? "el día está libre — moldéalo" : "the day is open — shape it"}
                  </div>
                </div>
              )}
              {todayEvents.map((e, i) => {
                const top = (e.t - startH) * pxPerHour;
                const h = Math.max(36, e.d * pxPerHour - 6);
                const hr = Math.floor(e.t);
                const mn = Math.round((e.t - hr) * 60);
                const tStr = `${String(hr).padStart(2, "0")}:${String(mn).padStart(2, "0")}`;
                const endHval = e.t + e.d;
                const ehr = Math.floor(endHval);
                const emn = Math.round((endHval - ehr) * 60);
                const tEnd = `${String(ehr).padStart(2, "0")}:${String(emn).padStart(2, "0")}`;
                return (
                  <div key={i} className={"horizon-event " + e.kind} style={{ top, height: h }}>
                    <div className="t">{tStr} – {tEnd} · {e.meta}</div>
                    <div className="title">{lang === "es" ? e.title_es : e.title_en}</div>
                  </div>
                );
              })}
              {nowOk && (
                <div className="horizon-now" style={{ top: nowY }}>
                  <span className="meta" style={{ position: "absolute", left: 14, top: -6, color: "var(--terracotta)" }}>{t.now}</span>
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="grid" style={{ gridTemplateRows: "auto auto 1fr", gap: 16 }}>
          <div className="card">
            <h2 className="card-h">{t.habits_today}</h2>
            {DATA.habits.length === 0 ? (
              <div style={{ padding: "16px 0", textAlign: "center" }}>
                <div className="serif italic" style={{ fontSize: 16, color: "var(--ink-3)", marginBottom: 10 }}>
                  {lang === "es" ? "sin hábitos creados" : "no habits yet"}
                </div>
                <button className="btn" onClick={() => setView("habits")} style={{ fontSize: 13 }}>
                  <Icon name="plus" size={12}/> {t.new_habit}
                </button>
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 12 }}>
                {DATA.habits.slice(0, 6).map((h) => (
                  <div key={h.id} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <button
                      onClick={() => handleToggleHabit(h)}
                      aria-label={`toggle ${h.name_es}`}
                      style={{
                        width: 22, height: 22, borderRadius: 5,
                        border: `1.5px solid ${h.color}`,
                        background: h.doneToday ? h.color : "transparent",
                        display: "inline-flex", alignItems: "center", justifyContent: "center",
                        flex: "0 0 22px", cursor: "pointer", padding: 0,
                      }}
                    >
                      {h.doneToday && <Icon name="check" size={12} color="var(--paper)" />}
                    </button>
                    <span style={{ flex: 1 }}>
                      <span style={{ marginRight: 6 }}>{h.emoji}</span>
                      {lang === "es" ? h.name_es : h.name_en}
                    </span>
                    <span className="meta" style={{ marginLeft: "auto" }}>{h.streak || 0}d</span>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div className="card-flat" style={{ padding: 18 }}>
            <div className="kicker" style={{ marginBottom: 10 }}>{t.quick_log}</div>
            <div className="row">
              <button className="btn warm" onClick={() => setShowAddTx(true)}>
                <Icon name="plus" size={14}/> {t.add_expense}
              </button>
              <button className="btn" onClick={() => setShowHabitPick(true)} disabled={DATA.habits.length === 0}>
                <Icon name="leaf" size={14}/> {t.log_habit}
              </button>
              <button className="btn" onClick={() => setShowWorkoutLog(true)}>
                <Icon name="dumbbell" size={14}/> {t.log_workout}
              </button>
            </div>
          </div>

          <div className="card" style={{ background: "var(--terracotta-soft)", borderColor: "transparent", position: "relative", overflow: "hidden" }}>
            <div className="kicker" style={{ color: "var(--rust)" }}>{lang === "es" ? "Frase del día" : "Daily note"}</div>
            <div className="serif italic" style={{ fontSize: 24, lineHeight: 1.2, marginTop: 8, color: "var(--rust)" }}>
              {t.today_quote}
            </div>
            <div className="meta" style={{ marginTop: 12, color: "var(--rust)", opacity: 0.7 }}>
              — {lang === "es" ? "anónimo" : "anonymous"}
            </div>
          </div>
        </div>
      </div>

      {upcoming.length > 0 && (
        <div className="card-flat">
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
            <h2 className="card-h">{t.upcoming}</h2>
            <span className="meta">{upcoming.length} {lang === "es" ? "más hoy" : "more today"}</span>
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
            {upcoming.map((e, i) => {
              const hr = Math.floor(e.t);
              const mn = Math.round((e.t - hr) * 60);
              const tStr = `${String(hr).padStart(2, "0")}:${String(mn).padStart(2, "0")}`;
              return (
                <div key={i} style={{ borderLeft: `2px solid var(--${e.kind === "ink" ? "ink" : e.kind === "sage" ? "sage" : e.kind === "ochre" ? "ochre" : "terracotta"})`, paddingLeft: 14 }}>
                  <div className="meta">{tStr}</div>
                  <div className="serif" style={{ fontSize: 19, marginTop: 4 }}>{lang === "es" ? e.title_es : e.title_en}</div>
                  <div className="caption" style={{ marginTop: 4 }}>{e.meta}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {showAddTx && window.AddTransactionModal && (
        <window.AddTransactionModal onClose={() => setShowAddTx(false)} />
      )}
      {showHabitPick && (
        <HabitPickerSheet onClose={() => setShowHabitPick(false)} />
      )}
      {showWorkoutLog && window.WorkoutLogModal && (
        <window.WorkoutLogModal onClose={() => setShowWorkoutLog(false)} />
      )}
    </div>
  );
}

function HabitPickerSheet({ onClose }) {
  const { lang } = window.useApp();
  const Icon = window.Icon;
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => {
    const unsub = window.Store.subscribe("habits", force);
    return unsub;
  }, []);

  const habits = window.Storage.get("habits");

  function handleToggle(h) {
    window.HabitOps.toggle(h);
  }

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal-card" style={{ maxWidth: 420, padding: 24 }} onClick={(e) => e.stopPropagation()}>
        <button className="ob-close" onClick={onClose} aria-label="close">
          <Icon name="x" size={14} />
        </button>
        <div className="kicker">{lang === "es" ? "Registro rápido" : "Quick log"}</div>
        <div className="h2" style={{ marginBottom: 20, marginTop: 4 }}>{lang === "es" ? "Marcar hábitos de hoy" : "Mark today's habits"}</div>
        {habits.length === 0 ? (
          <div style={{ textAlign: "center", padding: 24 }}>
            <div className="serif italic" style={{ color: "var(--ink-3)" }}>
              {lang === "es" ? "Crea hábitos primero" : "Create habits first"}
            </div>
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {habits.map(h => (
              <button
                key={h.id}
                onClick={() => handleToggle(h)}
                style={{
                  display: "flex", alignItems: "center", gap: 12,
                  padding: "12px 14px",
                  border: `1px solid ${h.doneToday ? h.color : "var(--line)"}`,
                  background: h.doneToday ? "var(--paper-2)" : "var(--paper)",
                  borderRadius: 10, cursor: "pointer", textAlign: "left",
                }}
              >
                <span style={{
                  width: 22, height: 22, borderRadius: 5,
                  border: `1.5px solid ${h.color}`,
                  background: h.doneToday ? h.color : "transparent",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  flex: "0 0 22px",
                }}>
                  {h.doneToday && <Icon name="check" size={12} color="var(--paper)" />}
                </span>
                <span style={{ fontSize: 20 }}>{h.emoji}</span>
                <span style={{ flex: 1, fontSize: 15 }}>{lang === "es" ? h.name_es : h.name_en}</span>
                <span className="meta">{h.streak || 0}d</span>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

window.ViewToday = ViewToday;