// View: Habits — garden of growing stems + heatmap.
// PRODUCTION-READY: checkboxes funcionales, CRUD de hábitos, empty state.

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

  const [editing, setEditing] = React.useState(null);
  const [, force] = React.useReducer((x) => x + 1, 0);

  React.useEffect(() => {
    const unsub = window.Store.subscribe("habits", force);
    return unsub;
  }, []);

  const habits = DATA.habits;
  const maxStreak = Math.max(1, ...habits.map(h => h.best || 0));
  const stemH = (s) => 48 + (s / maxStreak) * 140;

  const months = lang === "es"
    ? ["jun","jul","ago","sep","oct","nov","dic","ene","feb","mar","abr","may"]
    : ["Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan","Feb","Mar","Apr","May"];

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

  function computePerfectDays() {
    if (habits.length === 0) return 0;
    const allDates = new Set();
    habits.forEach(h => (h.log || []).forEach(l => l.completed && allDates.add(l.date)));
    let perfect = 0;
    allDates.forEach(date => {
      const allDone = habits.every(h => (h.log || []).some(l => l.date === date && l.completed));
      if (allDone) perfect++;
    });
    return perfect;
  }

  function computeBestMonth() {
    if (habits.length === 0) return null;
    const monthCounts = {};
    habits.forEach(h => (h.log || []).forEach(l => {
      if (!l.completed) return;
      const ym = l.date.slice(0, 7);
      monthCounts[ym] = (monthCounts[ym] || 0) + 1;
    }));
    let best = null, bestCount = 0;
    Object.entries(monthCounts).forEach(([ym, c]) => {
      if (c > bestCount) { best = ym; bestCount = c; }
    });
    return best ? { ym: best, count: bestCount } : null;
  }

  const perfectDays = computePerfectDays();
  const bestMonth = computeBestMonth();
  const wateredToday = habits.filter(h => window.HabitOps.isDoneToday(h)).length;

  if (habits.length === 0) {
    return (
      <div className="content">
        <div className="card" style={{ padding: 60, textAlign: "center" }}>
          <div style={{ fontSize: 64, marginBottom: 16 }}>🌱</div>
          <div className="serif" style={{ fontSize: 28, marginBottom: 8 }}>
            {lang === "es" ? "Tu jardín está vacío" : "Your garden is empty"}
          </div>
          <div className="meta" style={{ fontSize: 15, marginBottom: 24, maxWidth: 380, margin: "0 auto 24px" }}>
            {lang === "es"
              ? "Los hábitos pequeños construidos a diario son cómo crecen las cosas grandes. Empieza con uno."
              : "Small habits, done daily, are how big things grow. Start with one."}
          </div>
          <button className="btn warm" onClick={() => setEditing("new")} style={{ fontSize: 15 }}>
            <Icon name="plus" size={14}/> {lang === "es" ? "Crear primer hábito" : "Create first habit"}
          </button>
        </div>
        {editing && <HabitEditModal habit={editing === "new" ? null : editing} onClose={() => setEditing(null)} />}
      </div>
    );
  }

  return (
    <div className="content">
      <div className="card" style={{ padding: 0, overflow: "hidden" }}>
        <div style={{ padding: "22px 22px 0" }}>
          <div className="kicker">{t.your_garden}</div>
          <h2 className="card-h" style={{ marginTop: 4, marginBottom: 2 }}>
            {habits.length} {lang === "es" ? (habits.length === 1 ? "tallo, " : "tallos, ") : (habits.length === 1 ? "stem, " : "stems, ")}
            <span className="italic" style={{ color: "var(--ink-3)" }}>
              {lang === "es" ? `${wateredToday} regados hoy` : `${wateredToday} watered today`}
            </span>
          </h2>
        </div>

        <div className="garden" style={{
          background: "linear-gradient(to top, oklch(58% 0.07 145 / 0.07), transparent 50%), linear-gradient(to bottom, oklch(80% 0.08 60 / 0.05), transparent 30%)",
          padding: "40px 28px 24px",
          minHeight: 260,
        }}>
          {habits.map(h => {
            const height = stemH(h.streak || 0);
            const bloomed = window.HabitOps.isDoneToday(h);
            const name = lang === "es" ? h.name_es : h.name_en;
            return (
              <button
                key={h.id}
                onClick={() => handleToggle(h)}
                className="stem"
                style={{ position: "relative", background: "transparent", border: "none", cursor: "pointer", padding: 0 }}
                title={lang === "es" ? "Click para marcar/desmarcar" : "Click to toggle"}
              >
                <div className="streak" style={{ color: h.color }}>{h.streak || 0}</div>
                <div className="leaf" style={{ marginBottom: -4, opacity: bloomed ? 1 : 0.55, transform: bloomed ? "rotate(0)" : "rotate(-6deg)", transition: "transform 300ms" }}>
                  {h.emoji}
                </div>
                <div className="stalk" style={{ height, background: `linear-gradient(to top, oklch(45% 0.06 100), ${h.color})` }}/>
                <div className="ground" style={{ background: `oklch(45% 0.05 60 / ${bloomed ? 0.7 : 0.3})` }}/>
                <div className="label" style={{ marginTop: 6, maxWidth: 80 }}>{name}</div>
              </button>
            );
          })}
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
        {habits.map(h => {
          const done = window.HabitOps.isDoneToday(h);
          return (
            <div key={h.id} className="card" style={{ padding: 16, position: "relative", cursor: "pointer" }}
                 onClick={(e) => { if (e.target.closest("[data-checkbox]")) return; setEditing(h); }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                <span style={{ fontSize: 22 }}>{h.emoji}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{lang === "es" ? h.name_es : h.name_en}</div>
                  <div className="meta">{lang === "es" ? "diario" : "daily"}</div>
                </div>
                <button
                  data-checkbox="1"
                  onClick={(e) => { e.stopPropagation(); handleToggle(h); }}
                  aria-label={`toggle ${h.name_es}`}
                  style={{
                    width: 26, height: 26, borderRadius: 6,
                    background: done ? h.color : "transparent",
                    border: `1.5px solid ${done ? "transparent" : "var(--line)"}`,
                    display: "grid", placeItems: "center", cursor: "pointer", padding: 0,
                  }}
                >
                  {done && <Icon name="check" size={14} color="var(--paper)"/>}
                </button>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div>
                  <div className="meta">{t.streak_label}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 26, color: h.color }}>{h.streak || 0}<span style={{ fontSize: 13, color: "var(--ink-3)" }}> {t.streak_days}</span></div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div className="meta">{t.streak_best}</div>
                  <div className="num" style={{ fontSize: 16 }}>{h.best || 0}</div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 4, marginTop: 12 }}>
                {Array.from({ length: 7 }, (_, i) => {
                  const d = new Date();
                  d.setDate(d.getDate() - (6 - i));
                  const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
                  const dayDone = (h.log || []).some(l => l.date === iso && l.completed);
                  const isToday = i === 6;
                  return (
                    <span key={i} style={{
                      flex: 1, height: 5, borderRadius: 4,
                      background: dayDone ? h.color : "var(--paper-sunk)",
                      opacity: dayDone ? (isToday ? 1 : 0.85) : 1,
                      outline: isToday ? `1px solid ${h.color}` : "none",
                      outlineOffset: 1,
                    }}/>
                  );
                })}
              </div>
            </div>
          );
        })}
        <button className="card" onClick={() => setEditing("new")} style={{ padding: 16, border: "1.5px dashed var(--line)", background: "transparent", display: "grid", placeItems: "center", color: "var(--ink-3)", fontFamily: "var(--font-display)", fontSize: 17, fontStyle: "italic", cursor: "pointer" }}>
          <div>+ <span style={{ textDecoration: "underline", textDecorationStyle: "dotted", textUnderlineOffset: 4 }}>{t.new_habit}</span></div>
        </button>
      </div>

      <div className="card" style={{ position: "relative", overflow: "hidden", paddingTop: 28 }}>
        <div className="hero-watermark habits" aria-hidden="true"/>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14, position: "relative" }}>
          <div>
            <h2 className="card-h" style={{ marginBottom: 2 }}>{t.year_at_glance}</h2>
            <div className="meta italic" style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--ink-3)" }}>
              {lang === "es" ? "365 días, mirados al mismo tiempo" : "365 days, looked at at once"}
            </div>
          </div>
          <div className="row" style={{ alignItems: "center", gap: 8 }}>
            <span className="meta">{t.fewer}</span>
            <div style={{ display: "flex", gap: 3 }}>
              {[0,1,2,3,4].map(l => <div key={l} className={`cell l${l}`} style={{ width: 12, height: 12, borderRadius: 2 }}/>)}
            </div>
            <span className="meta">{t.more}</span>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", marginBottom: 6, paddingLeft: 4 }}>
          {months.map((m, i) => <div key={i} className="meta" style={{ fontSize: 10 }}>{m}</div>)}
        </div>
        <div className="heatmap">
          {DATA.heatmap.map((lvl, i) => (
            <div key={i} className={`cell l${lvl}`} title={`day ${i}`}/>
          ))}
        </div>
        <div style={{ marginTop: 14, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <div className="row" style={{ gap: 18 }}>
            <div>
              <div className="meta">{lang === "es" ? "Mejor mes" : "Best month"}</div>
              <div className="serif" style={{ fontSize: 18 }}>
                {bestMonth ? `${formatYM(bestMonth.ym, lang)} · ${bestMonth.count}` : "—"}
              </div>
            </div>
            <div>
              <div className="meta">{lang === "es" ? "Total completados" : "Total completed"}</div>
              <div className="serif" style={{ fontSize: 18 }}>{DATA.metrics.habitsDone.toLocaleString()}</div>
            </div>
            <div>
              <div className="meta">{lang === "es" ? "Días perfectos" : "Perfect days"}</div>
              <div className="serif" style={{ fontSize: 18 }}>{perfectDays}</div>
            </div>
          </div>
        </div>
      </div>

      {editing && <HabitEditModal habit={editing === "new" ? null : editing} onClose={() => setEditing(null)} />}
    </div>
  );
}

function formatYM(ym, lang) {
  const [y, m] = ym.split("-");
  const monthNames = lang === "es"
    ? ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"]
    : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  return `${monthNames[parseInt(m, 10) - 1]} ${y}`;
}

function HabitEditModal({ habit, onClose }) {
  const { lang } = window.useApp();
  const Icon = window.Icon;
  const isEdit = !!habit;

  const [name_es, setNameEs] = React.useState(habit ? habit.name_es || "" : "");
  const [name_en, setNameEn] = React.useState(habit ? habit.name_en || "" : "");
  const [emoji, setEmoji] = React.useState(habit ? habit.emoji || "🌱" : "🌱");
  const [color, setColor] = React.useState(habit ? habit.color || "var(--terracotta)" : "var(--terracotta)");
  const [reminder, setReminder] = React.useState(habit ? habit.reminder || "" : "");
  const [error, setError] = React.useState(null);

  const EMOJI_OPTIONS = ["🌱","📖","🏃","🧘","💧","🌙","✒️","🗣️","🏋️","🍎","☕","🧠","💪","🌞","🎯","📚","🎵","🌿"];

  function handleSubmit(e) {
    e.preventDefault();
    setError(null);
    if (!name_es.trim()) { setError(lang === "es" ? "Pon un nombre en español" : "Add a Spanish name"); return; }
    const payload = {
      name_es: name_es.trim(),
      name_en: name_en.trim() || name_es.trim(),
      emoji,
      color,
      frequency: "daily",
      reminder: reminder || null,
    };
    if (isEdit) {
      window.Storage.update("habits", habit.id, payload);
    } else {
      window.Storage.add("habits", Object.assign({
        streak: 0, best: 0, log: [], doneToday: false,
      }, payload));
    }
    onClose();
  }

  function handleDelete() {
    if (!isEdit) return;
    const msg = lang === "es" ? `Borrar "${habit.name_es}"? Esto borra también su historial.` : `Delete "${habit.name_en}"? This also deletes its history.`;
    if (window.confirm(msg)) {
      window.Storage.remove("habits", habit.id);
      onClose();
    }
  }

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal-card" style={{ maxWidth: 460, padding: 24 }} onClick={(e) => e.stopPropagation()}>
        <button className="ob-close" onClick={onClose} aria-label="close">
          <Icon name="x" size={14} />
        </button>
        <div className="kicker">{isEdit ? (lang === "es" ? "Editar hábito" : "Edit habit") : (lang === "es" ? "Nuevo hábito" : "New habit")}</div>
        <div className="h2" style={{ marginBottom: 20, marginTop: 4 }}>
          {emoji} {name_es || (lang === "es" ? "Hábito" : "Habit")}
        </div>

        <form onSubmit={handleSubmit}>
          <div className="form-row">
            <label className="form-label">{lang === "es" ? "Nombre (es)" : "Name (es)"}</label>
            <input type="text" className="input" value={name_es} onChange={(e) => setNameEs(e.target.value)} placeholder={lang === "es" ? "Leer 20 min" : "Read 20 min"} required autoFocus/>
          </div>
          <div className="form-row">
            <label className="form-label">{lang === "es" ? "Nombre (en)" : "Name (en)"}</label>
            <input type="text" className="input" value={name_en} onChange={(e) => setNameEn(e.target.value)} placeholder="Read 20 min (optional)"/>
          </div>
          <div className="form-row">
            <label className="form-label">{lang === "es" ? "Ícono" : "Icon"}</label>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {EMOJI_OPTIONS.map(e => (
                <button type="button" key={e} onClick={() => setEmoji(e)}
                  style={{
                    fontSize: 22, padding: 6, width: 38, height: 38,
                    border: emoji === e ? "1.5px solid var(--terracotta)" : "1px solid var(--line)",
                    background: emoji === e ? "var(--terracotta-soft)" : "var(--paper)",
                    borderRadius: 8, cursor: "pointer",
                  }}>{e}</button>
              ))}
            </div>
          </div>
          <div className="form-row">
            <label className="form-label">{lang === "es" ? "Color" : "Color"}</label>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {window.HABIT_COLORS.map(c => (
                <button type="button" key={c.key} onClick={() => setColor(c.value)}
                  style={{
                    width: 32, height: 32, borderRadius: 8,
                    background: c.value,
                    border: color === c.value ? "2px solid var(--ink)" : "1px solid var(--line)",
                    cursor: "pointer",
                  }} aria-label={c.key}/>
              ))}
            </div>
          </div>
          <div className="form-row">
            <label className="form-label">{lang === "es" ? "Recordatorio (opcional)" : "Reminder (optional)"}</label>
            <input type="time" className="input" value={reminder} onChange={(e) => setReminder(e.target.value)}/>
          </div>

          {error && <div className="form-error">{error}</div>}

          <div className="form-actions">
            {isEdit && (
              <button type="button" className="btn danger" onClick={handleDelete}>
                {lang === "es" ? "Borrar" : "Delete"}
              </button>
            )}
            <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
              <button type="button" className="btn" onClick={onClose}>{lang === "es" ? "Cancelar" : "Cancel"}</button>
              <button type="submit" className="btn warm">{isEdit ? (lang === "es" ? "Guardar" : "Save") : (lang === "es" ? "Crear" : "Create")}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

window.ViewHabits = ViewHabits;
window.HabitEditModal = HabitEditModal;