/* global React, useInViewProgress, clamp, lerp, easeOut */
const { useRef: _tRef } = React;

function Today({ highlight }) {
  const ref = _tRef(null);
  const p = useInViewProgress(ref, { enterAt: 0.85, exitAt: 0.2 });

  const tasks = [
    { name: 'Draft §2.1 — related work', meta: 'THESIS · DUE FRI', pct: 68, accent: 'structure' },
    { name: 'Morning run — 5 km', meta: 'TRAINING · HABIT', pct: 100, check: true, accent: 'habits' },
    { name: 'Read 1 paper — causal inference', meta: 'READING · 4 / 12', pct: 0, accent: 'habits' },
    { name: 'Lab app — Princeton AI4All', meta: 'APPS · 3 / 5', pct: 35, accent: 'accountability' },
  ];

  return (
    <section className="sec page" id="today" ref={ref}>
      <div className="phase-num" style={{ top: '10%', left: '-3%' }}>06</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 48 }}>
        <div className="section-label"><span className="dot"></span><span className="mono">Phase / 06 · Micro</span></div>
        <div className="mono mono-sm">TODAY · THU OCT 22</div>
      </div>

      <h2 className="display" style={{ fontSize: 'clamp(36px, 4.2vw, 56px)', margin: '0 0 56px', maxWidth: '18ch' }}>
        Today is a <span className="serif-it" style={{ color: 'var(--olive)' }}>negotiation</span><br/>with the semester.
      </h2>

      <div className="dash">
        <div className="dash-toolbar">
          <div className="dash-dots"><span/><span/><span/></div>
          <div className="mono mono-sm">today · thu oct 22 · week 07</div>
          <div className="mono mono-sm" style={{ color: 'var(--olive)' }}>● 4 THINGS</div>
        </div>
        <div className="dash-main" style={{ padding: '24px 28px' }}>
          <div className="dash-h">
            <div>
              <div className="title">Four things today.</div>
              <div className="mono mono-sm" style={{ marginTop: 6 }}>Semester arc · 47% complete · on track</div>
            </div>
            <div className="date">DAY 04 / 7</div>
          </div>
          {tasks.map((t, i) => {
            const reveal = clamp((p * 1.3) * 4 - i, 0, 1);
            const fill = t.pct * easeOut(reveal);
            const isHi = highlight && t.accent === highlight;
            return (
              <div key={i} className="task-row" style={{ opacity: 0.4 + reveal * 0.6, transform: `translateY(${(1-reveal)*6}px)`, transition: 'opacity 300ms, transform 300ms', background: isHi ? 'rgba(203,255,61,0.10)' : 'transparent', margin: isHi ? '0 -28px' : 0, padding: isHi ? '10px 28px' : '10px 0', borderRadius: isHi ? 2 : 0 }}>
                <div>
                  <div className="t-name">{t.name}</div>
                  <div className="t-meta">{t.meta}</div>
                </div>
                <div className="progress">
                  <div className="fill" style={{ width: `${fill}%`, background: t.pct === 0 ? 'transparent' : 'var(--accent)' }}></div>
                </div>
                <div className={`t-pct ${t.pct === 0 ? 'zero' : ''} ${t.check ? 'done' : ''}`}>
                  {t.check ? '✓' : `${Math.round(fill)}%`}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Today });