/* global React, Icon, IconBtn, db */
const { useState, useEffect, useMemo, useCallback } = React;

// ============================================================
// Mood tracker — one entry per day on a 5-point scale, with
// optional note + tags. Calendar heatmap shows trends at a glance.
// State stored in kv as { entries: { [YYYY-MM-DD]: { mood, note, tags, ts } } }
// ============================================================

const MOOD_SCALE = [
  { val: 1, label: 'Awful',    emoji: '😞', color: 'hsl(8, 78%, 58%)',   bg: 'hsla(8, 78%, 58%, 0.12)' },
  { val: 2, label: 'Low',      emoji: '😕', color: 'hsl(28, 80%, 60%)',  bg: 'hsla(28, 80%, 60%, 0.12)' },
  { val: 3, label: 'Okay',     emoji: '😐', color: 'hsl(45, 70%, 55%)',  bg: 'hsla(45, 70%, 55%, 0.12)' },
  { val: 4, label: 'Good',     emoji: '🙂', color: 'hsl(155, 55%, 50%)', bg: 'hsla(155, 55%, 50%, 0.14)' },
  { val: 5, label: 'Great',    emoji: '😄', color: 'hsl(168, 65%, 48%)', bg: 'hsla(168, 65%, 48%, 0.14)' },
];

const SUGGESTED_TAGS = ['energetic','tired','focused','anxious','grateful','social','restless','calm','creative','overwhelmed','content','sick'];

function toMoodKey(ts) {
  const d = new Date(ts);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
}
function todayMoodKey() { return toMoodKey(Date.now()); }

function MoodTool() {
  const [entries, setEntries] = useState({});
  const [loaded, setLoaded] = useState(false);
  const [selected, setSelected] = useState(todayMoodKey());

  useEffect(() => {
    db.kv.get('moodTracker').then(rec => {
      if (rec?.v?.entries) setEntries(rec.v.entries);
      setLoaded(true);
    });
  }, []);

  const save = useCallback((nextEntries) => {
    setEntries(nextEntries);
    db.kv.put({ k: 'moodTracker', v: { entries: nextEntries } });
  }, []);

  const setMood = (key, mood) => {
    const cur = entries[key] || { note: '', tags: [] };
    save({ ...entries, [key]: { ...cur, mood, ts: Date.now() } });
  };
  const setNote = (key, note) => {
    const cur = entries[key];
    if (!cur) return; // can only annotate after mood is set
    save({ ...entries, [key]: { ...cur, note } });
  };
  const toggleTag = (key, tag) => {
    const cur = entries[key];
    if (!cur) return;
    const tags = cur.tags || [];
    const next = tags.includes(tag) ? tags.filter(t => t !== tag) : [...tags, tag];
    save({ ...entries, [key]: { ...cur, tags: next } });
  };
  const removeEntry = (key) => {
    const { [key]: _, ...rest } = entries;
    save(rest);
  };

  // ---- Stats ----
  const stats = useMemo(() => {
    const all = Object.entries(entries).filter(([_, v]) => v.mood);
    if (all.length === 0) return { avg: null, last7Avg: null, streak: 0, count: 0 };
    const total = all.reduce((a, [, v]) => a + v.mood, 0);
    // 7-day rolling
    const sevenAgo = new Date(); sevenAgo.setHours(0,0,0,0); sevenAgo.setDate(sevenAgo.getDate() - 6);
    const last7 = all.filter(([k]) => k >= toMoodKey(sevenAgo.getTime()));
    const last7Avg = last7.length ? last7.reduce((a, [, v]) => a + v.mood, 0) / last7.length : null;

    // Logging streak (consecutive days ending today)
    let streak = 0;
    let cur = new Date(); cur.setHours(0,0,0,0);
    // Allow today not yet logged — start from yesterday
    if (!entries[toMoodKey(cur.getTime())]) cur.setDate(cur.getDate() - 1);
    while (entries[toMoodKey(cur.getTime())]) {
      streak++;
      cur.setDate(cur.getDate() - 1);
    }

    return { avg: total / all.length, last7Avg, streak, count: all.length };
  }, [entries]);

  if (!loaded) return <div className="mood-tool mood-loading" />;

  const cur = entries[selected];
  const curMood = cur?.mood;
  const selectedLabel = (() => {
    const d = new Date(selected + 'T00:00:00');
    const today = new Date(); today.setHours(0,0,0,0);
    if (toMoodKey(today.getTime()) === selected) return 'Today';
    const yesterday = new Date(today); yesterday.setDate(today.getDate() - 1);
    if (toMoodKey(yesterday.getTime()) === selected) return 'Yesterday';
    return d.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' });
  })();

  return (
    <div className="mood-tool">
      <header className="mood-head">
        <div>
          <h1>How are you?</h1>
          <p>One small check-in a day. Look back when something feels off.</p>
        </div>
        <div className="mood-streak" title={`${stats.streak}-day logging streak`}>
          <Icon name="local_fire_department" />
          <strong>{stats.streak}</strong>
          <span>day streak</span>
        </div>
      </header>

      {/* TODAY'S CHECK-IN */}
      <section className="mood-entry">
        <div className="mood-entry-head">
          <div className="mood-entry-date">{selectedLabel}</div>
          <div className="mood-entry-iso">{selected}</div>
          {cur && (
            <button className="mood-remove" onClick={() => removeEntry(selected)} title="Remove entry">
              <Icon name="close" />
            </button>
          )}
        </div>

        <div className="mood-scale">
          {MOOD_SCALE.map(m => (
            <button
              key={m.val}
              className={`mood-option ${curMood === m.val ? 'is-active' : ''}`}
              onClick={() => setMood(selected, m.val)}
              style={curMood === m.val ? { '--mood-color': m.color, '--mood-bg': m.bg } : {}}
            >
              <span className="mood-emoji">{m.emoji}</span>
              <span className="mood-option-label">{m.label}</span>
            </button>
          ))}
        </div>

        {curMood && (
          <>
            <textarea
              className="mood-note"
              placeholder="What's on your mind? (Optional — and only you ever see this.)"
              value={cur.note || ''}
              onChange={e => setNote(selected, e.target.value)}
              rows={3}
            />
            <div className="mood-tags">
              <div className="mood-tags-label">Tags</div>
              <div className="mood-tags-row">
                {SUGGESTED_TAGS.map(t => (
                  <button
                    key={t}
                    className={`mood-tag ${(cur.tags || []).includes(t) ? 'is-on' : ''}`}
                    onClick={() => toggleTag(selected, t)}
                  >
                    {t}
                  </button>
                ))}
              </div>
            </div>
          </>
        )}
      </section>

      {/* STATS */}
      <section className="mood-stats">
        <MoodStat label="Logging streak" value={stats.streak} unit="days" />
        <MoodStat label="Days logged" value={stats.count} unit="total" />
        <MoodStat
          label="Last 7 days"
          value={stats.last7Avg ? stats.last7Avg.toFixed(1) : '—'}
          unit={stats.last7Avg ? `/ 5 · ${labelForAvg(stats.last7Avg)}` : ''}
          color={stats.last7Avg ? MOOD_SCALE[Math.round(stats.last7Avg) - 1]?.color : null}
        />
        <MoodStat
          label="All-time avg"
          value={stats.avg ? stats.avg.toFixed(1) : '—'}
          unit={stats.avg ? `/ 5 · ${labelForAvg(stats.avg)}` : ''}
          color={stats.avg ? MOOD_SCALE[Math.round(stats.avg) - 1]?.color : null}
        />
      </section>

      {/* CALENDAR HEATMAP — last 12 weeks, GitHub-style */}
      <section className="mood-calendar">
        <h3>Last 12 weeks</h3>
        <MoodCalendar entries={entries} selected={selected} onSelect={setSelected} />
      </section>
    </div>
  );
}

function labelForAvg(v) {
  return MOOD_SCALE[Math.round(v) - 1]?.label || '';
}

function MoodStat({ label, value, unit, color }) {
  return (
    <div className="mood-stat-card">
      <div className="mood-stat-value" style={color ? { color } : {}}>{value}</div>
      <div className="mood-stat-unit">{unit}</div>
      <div className="mood-stat-label">{label}</div>
    </div>
  );
}

// ============================================================
// MoodCalendar — 12 columns (weeks) × 7 rows (days), like a Github
// contribution chart but colored by mood value.
// ============================================================
function MoodCalendar({ entries, selected, onSelect }) {
  const weeks = 12;
  // Build a 12 × 7 grid; column 0 is 11 weeks ago, column 11 is this week.
  const today = new Date(); today.setHours(0,0,0,0);
  const todayDow = today.getDay(); // 0 = Sunday
  const cells = [];
  for (let w = 0; w < weeks; w++) {
    const week = [];
    for (let d = 0; d < 7; d++) {
      const offsetDays = (weeks - 1 - w) * 7 + (todayDow - d);
      const dt = new Date(today);
      dt.setDate(today.getDate() - offsetDays);
      const key = toMoodKey(dt.getTime());
      const isFuture = dt > today;
      week.push({ key, mood: entries[key]?.mood || null, isFuture, date: dt });
    }
    cells.push(week);
  }
  const monthLabels = [];
  let lastMonth = -1;
  for (let w = 0; w < weeks; w++) {
    const sampleDate = cells[w][0].date;
    const m = sampleDate.getMonth();
    if (m !== lastMonth) {
      monthLabels.push({ w, label: sampleDate.toLocaleString(undefined, { month: 'short' }) });
      lastMonth = m;
    }
  }
  const dayLabels = ['', 'Mon', '', 'Wed', '', 'Fri', ''];

  return (
    <div className="mood-cal">
      <div className="mood-cal-month-row">
        {monthLabels.map(m => (
          <span key={m.w} className="mood-cal-month" style={{ gridColumnStart: m.w + 2 }}>{m.label}</span>
        ))}
      </div>
      <div className="mood-cal-grid">
        <div className="mood-cal-day-col">
          {dayLabels.map((d, i) => <span key={i}>{d}</span>)}
        </div>
        {cells.map((week, wi) => (
          <div key={wi} className="mood-cal-week">
            {week.map((cell) => (
              <button
                key={cell.key}
                disabled={cell.isFuture}
                className={`mood-cal-cell ${cell.mood ? 'is-filled' : ''} ${cell.key === selected ? 'is-selected' : ''} ${cell.isFuture ? 'is-future' : ''}`}
                style={cell.mood ? { background: MOOD_SCALE[cell.mood - 1].color } : {}}
                onClick={() => onSelect(cell.key)}
                title={`${cell.key}${cell.mood ? ' · ' + MOOD_SCALE[cell.mood - 1].label : ' · no entry'}`}
              />
            ))}
          </div>
        ))}
      </div>
      <div className="mood-cal-legend">
        <span>Less</span>
        <span className="mood-cal-cell" />
        {MOOD_SCALE.map(m => <span key={m.val} className="mood-cal-cell is-filled" style={{ background: m.color }} title={m.label} />)}
        <span>More</span>
      </div>
    </div>
  );
}

window.MoodTool = MoodTool;