// Trends screen — stacked bar chart across Week/Month/3mo/Year

function TrendsScreen({ state, dispatch, palette }) {
  const [range, setRange] = React.useState('week');
  const { history, goal } = state;

  const ranges = {
    week:  { days: 7,   label: 'Week',   bucketDays: 1 },
    month: { days: 30,  label: 'Month',  bucketDays: 1 },
    '3mo': { days: 90,  label: '3 Months', bucketDays: 7 },
    year:  { days: 365, label: 'Year',   bucketDays: 30 },
  };

  const cfg = ranges[range];
  const slice = history.slice(0, cfg.days);

  // Bucket into groups
  const buckets = [];
  for (let i = 0; i < slice.length; i += cfg.bucketDays) {
    const group = slice.slice(i, i + cfg.bucketDays);
    const n = group.length;
    buckets.push({
      idx: i,
      date: group[0].date,
      nat: Math.round(group.reduce((s, g) => s + g.nat, 0) / n),
      add: Math.round(group.reduce((s, g) => s + g.add, 0) / n),
      over: group.filter(g => g.overGoal).length,
      count: n,
    });
  }
  buckets.reverse(); // oldest → newest for chart

  // Stats
  const avgAdd = Math.round(slice.reduce((s, d) => s + d.add, 0) / slice.length);
  const avgNat = Math.round(slice.reduce((s, d) => s + d.nat, 0) / slice.length);
  const daysUnder = slice.filter(d => d.add <= goal).length;
  const pctUnder = Math.round(daysUnder / slice.length * 100);

  // Previous period for delta
  const prevSlice = history.slice(cfg.days, cfg.days * 2);
  const prevAvg = prevSlice.length > 0
    ? Math.round(prevSlice.reduce((s, d) => s + d.add, 0) / prevSlice.length)
    : avgAdd;
  const delta = avgAdd - prevAvg;

  // Chart geometry
  const chartH = 170;
  const maxVal = Math.max(goal * 1.5, ...buckets.map(b => b.nat + b.add));

  const rangeBtn = (key, label) => (
    <button
      key={key}
      onClick={() => setRange(key)}
      style={{
        flex: 1, padding: '7px 0',
        border: 'none', borderRadius: 8,
        background: range === key ? 'var(--surface-1)' : 'transparent',
        color: range === key ? 'var(--text-1)' : 'var(--text-2)',
        fontFamily: 'inherit', fontSize: 13, fontWeight: 500, cursor: 'pointer',
        boxShadow: range === key ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
      }}
    >{label}</button>
  );

  return (
    <div style={{ padding: '0 0 120px' }}>
      {/* Header */}
      <div style={{ padding: '70px 20px 8px' }}>
        <div style={{
          fontSize: 12, fontWeight: 500, letterSpacing: 0.4,
          color: 'var(--text-3)', textTransform: 'uppercase',
        }}>Trends</div>
        <div style={{
          fontSize: 30, fontWeight: 700, color: 'var(--text-1)',
          letterSpacing: -0.8, marginTop: 2,
        }}>Over time</div>
      </div>

      {/* Range picker */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{
          display: 'flex', gap: 4, padding: 4,
          background: 'var(--surface-2)', borderRadius: 10,
        }}>
          {rangeBtn('week', 'Week')}
          {rangeBtn('month', 'Month')}
          {rangeBtn('3mo', '3 Months')}
          {rangeBtn('year', 'Year')}
        </div>
      </div>

      {/* Summary card */}
      <div style={{
        margin: '12px 16px 0', padding: '16px 18px',
        background: 'var(--surface-1)', borderRadius: 20,
        border: '1px solid var(--border)',
      }}>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
          color: 'var(--text-2)', textTransform: 'uppercase',
        }}>Avg. added sugar per day</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 40, fontWeight: 600,
            color: 'var(--text-1)', letterSpacing: -1.2, lineHeight: 1,
          }}>{avgAdd}g</span>
          {delta !== 0 && (
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500,
              color: delta > 0 ? palette.red : palette.green,
              display: 'flex', alignItems: 'center', gap: 2,
            }}>
              {delta > 0 ? '▲' : '▼'} {Math.abs(delta)}g
              <span style={{ color: 'var(--text-3)', marginLeft: 2, fontWeight: 400 }}>
                vs. prev. {cfg.label.toLowerCase()}
              </span>
            </span>
          )}
        </div>

        {/* Chart */}
        <div style={{ marginTop: 18, position: 'relative', height: chartH + 30 }}>
          {/* Goal line */}
          <div style={{
            position: 'absolute', left: 0, right: 0,
            top: chartH - (goal / maxVal * chartH),
            borderTop: `1px dashed ${palette.amber}`,
            zIndex: 1,
          }}>
            <span style={{
              position: 'absolute', right: 0, top: -16,
              fontFamily: 'var(--font-mono)', fontSize: 10,
              color: palette.amber, fontWeight: 600,
              background: 'var(--surface-1)', padding: '0 4px',
            }}>GOAL {goal}g</span>
          </div>

          {/* Bars */}
          <div style={{
            position: 'absolute', inset: 0, display: 'flex',
            alignItems: 'flex-end', gap: buckets.length > 30 ? 1 : buckets.length > 12 ? 2 : 4,
            height: chartH, zIndex: 2,
          }}>
            {buckets.map((b, i) => {
              const natH = b.nat / maxVal * chartH;
              const addH = b.add / maxVal * chartH;
              return (
                <div key={i} style={{
                  flex: 1, height: '100%', display: 'flex', flexDirection: 'column',
                  justifyContent: 'flex-end', position: 'relative',
                }}>
                  <div style={{
                    height: addH, background: palette.added,
                    borderTopLeftRadius: 3, borderTopRightRadius: 3,
                    transition: 'height 0.3s',
                  }}/>
                  <div style={{
                    height: natH, background: palette.natural,
                  }}/>
                </div>
              );
            })}
          </div>

          {/* X-axis labels */}
          <div style={{
            position: 'absolute', left: 0, right: 0, top: chartH + 6,
            display: 'flex', gap: 0,
            fontFamily: 'var(--font-mono)', fontSize: 10,
            color: 'var(--text-3)', justifyContent: 'space-between',
          }}>
            {range === 'week' && ['S','M','T','W','T','F','S'].map((d, i) => {
              const bk = buckets[i];
              if (!bk) return null;
              const dObj = new Date(bk.date);
              const names = ['S','M','T','W','T','F','S'];
              return (
                <span key={i} style={{ flex: 1, textAlign: 'center' }}>
                  {names[dObj.getDay()]}
                </span>
              );
            })}
            {range === 'month' && [0, 7, 14, 21, 29].map(i => {
              const bk = buckets[i]; if (!bk) return null;
              const d = new Date(bk.date);
              return (
                <span key={i} style={{
                  position: 'absolute', left: `${i / buckets.length * 100}%`,
                }}>{d.getMonth() + 1}/{d.getDate()}</span>
              );
            })}
            {range === '3mo' && buckets.map((bk, i) => i % 2 === 0 && (
              <span key={i} style={{ flex: 2 }}>
                {new Date(bk.date).getMonth() + 1}/{new Date(bk.date).getDate()}
              </span>
            ))}
            {range === 'year' && buckets.map((bk, i) => (
              <span key={i} style={{ flex: 1, textAlign: 'center' }}>
                {['J','F','M','A','M','J','J','A','S','O','N','D'][new Date(bk.date).getMonth()]}
              </span>
            ))}
          </div>
        </div>

        {/* Legend */}
        <div style={{
          display: 'flex', gap: 16, marginTop: 12,
          paddingTop: 12, borderTop: '1px solid var(--border)',
          fontSize: 11, color: 'var(--text-2)',
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 10, height: 10, borderRadius: 2, background: palette.added }}/>
            Added
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 10, height: 10, borderRadius: 2, background: palette.natural }}/>
            Natural
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{
              width: 14, height: 0, borderTop: `1.5px dashed ${palette.amber}`,
            }}/>
            Daily limit
          </span>
        </div>
      </div>

      {/* Stat grid */}
      <div style={{
        margin: '12px 16px 0', display: 'grid',
        gridTemplateColumns: '1fr 1fr', gap: 10,
      }}>
        <StatCard label="Days under limit" value={daysUnder} unit={`of ${slice.length}`}
          pct={pctUnder} palette={palette}/>
        <StatCard label="Avg. natural" value={avgNat} unit="g/day"
          accent={palette.natural} palette={palette}/>
        <StatCard label="Highest day" value={Math.max(...slice.map(d => d.add))} unit="g added"
          accent={palette.red} palette={palette}/>
        <StatCard label="Best streak" value={computeStreak(slice, goal)} unit="days clean"
          accent={palette.green} palette={palette}/>
      </div>

      {/* Weekday breakdown */}
      {range !== 'year' && (
        <div style={{
          margin: '12px 16px 0', padding: '16px 18px',
          background: 'var(--surface-1)', borderRadius: 20,
          border: '1px solid var(--border)',
        }}>
          <div style={{
            fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
            color: 'var(--text-2)', textTransform: 'uppercase', marginBottom: 12,
          }}>By day of week · avg. added</div>
          {[0,1,2,3,4,5,6].map(d => {
            const names = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            const days = slice.filter(x => x.dow === d);
            const avg = days.length ? Math.round(days.reduce((s, x) => s + x.add, 0) / days.length) : 0;
            const maxAvg = Math.max(...[0,1,2,3,4,5,6].map(dd => {
              const ds = slice.filter(x => x.dow === dd);
              return ds.length ? ds.reduce((s, x) => s + x.add, 0) / ds.length : 0;
            }));
            const pct = maxAvg > 0 ? avg / maxAvg : 0;
            const color = avg > goal ? palette.red : avg > goal * 0.67 ? palette.amber : palette.green;
            return (
              <div key={d} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '5px 0',
              }}>
                <span style={{
                  width: 32, fontSize: 12, color: 'var(--text-2)', fontWeight: 500,
                }}>{names[d]}</span>
                <div style={{ flex: 1, height: 8, borderRadius: 4, background: 'var(--surface-2)', overflow: 'hidden' }}>
                  <div style={{ width: `${pct * 100}%`, height: '100%', background: color, borderRadius: 4 }}/>
                </div>
                <span style={{
                  width: 34, textAlign: 'right',
                  fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-1)', fontWeight: 600,
                }}>{avg}g</span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function computeStreak(slice, goal) {
  let best = 0, cur = 0;
  for (const d of slice) {
    if (d.add <= goal) { cur++; best = Math.max(best, cur); }
    else cur = 0;
  }
  return best;
}

function StatCard({ label, value, unit, accent, pct, palette }) {
  return (
    <div style={{
      padding: '12px 14px',
      background: 'var(--surface-1)', borderRadius: 16,
      border: '1px solid var(--border)',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 500, letterSpacing: 0.3,
        color: 'var(--text-2)', textTransform: 'uppercase',
      }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 24, fontWeight: 600,
          color: accent || 'var(--text-1)', letterSpacing: -0.8, lineHeight: 1,
        }}>{value}</span>
        <span style={{ fontSize: 11, color: 'var(--text-2)' }}>{unit}</span>
      </div>
      {pct !== undefined && (
        <div style={{
          height: 4, marginTop: 8, borderRadius: 2,
          background: 'var(--surface-2)', overflow: 'hidden',
        }}>
          <div style={{
            width: `${pct}%`, height: '100%',
            background: pct > 80 ? palette.green : pct > 50 ? palette.amber : palette.red,
          }}/>
        </div>
      )}
    </div>
  );
}

window.TrendsScreen = TrendsScreen;