// NOW · a star chart of what Youcef is currently doing
// Draggable constellation; click and drag the stars to rearrange your own sky.
const CURRENTLY = [
  { id: 'msc',  label: 'Writing the M.Sc. thesis',      x: 18, y: 22, big: true,  red: true  },
  { id: 'vue',  label: 'Shipping Vue.js @ aurologic',  x: 62, y: 18, big: true },
  { id: 'go',   label: 'Keeping up the Golang',         x: 82, y: 42, big: false },
  { id: 'net',  label: 'Networks, cloud, security',     x: 34, y: 46, big: true },
  { id: 'leet', label: 'LeetCode, for the sport',       x: 72, y: 70, big: false },
  { id: 'star', label: 'Adrift in Starfield',           x: 88, y: 78, big: false, red: true },
  { id: 'anime',label: 'Watching Classroom of the Elite', x: 22, y: 74, big: false, red: true  },
  { id: 'read', label: 'Reading on the old empires',    x: 50, y: 82, big: false },
  { id: 'lang', label: 'Learning German, steadily',     x: 10, y: 58, big: false },
];

function Constellation({ stars, setStars }) {
  const ref = React.useRef(null);
  const [dragId, setDragId] = React.useState(null);

  const onDown = (id, e) => {
    e.preventDefault();
    setDragId(id);
  };
  const onMove = (e) => {
    if (!dragId || !ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const cx = (e.touches ? e.touches[0].clientX : e.clientX);
    const cy = (e.touches ? e.touches[0].clientY : e.clientY);
    const x = Math.max(2, Math.min(98, ((cx - r.left) / r.width) * 100));
    const y = Math.max(2, Math.min(98, ((cy - r.top)  / r.height) * 100));
    setStars(s => s.map(st => st.id === dragId ? { ...st, x, y } : st));
  };
  const onUp = () => setDragId(null);

  React.useEffect(() => {
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchmove', onMove, { passive: false });
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('touchend', onUp);
    };
  });

  // connecting lines, drawn in the order they come
  const lines = [];
  for (let i = 0; i < stars.length - 1; i++) {
    lines.push([stars[i], stars[i + 1]]);
  }

  return (
    <div ref={ref}
      className="constellation"
      style={{
        position: 'relative',
        height: 480,
        background: 'var(--ink)',
        color: 'var(--paper)',
        overflow: 'hidden',
        border: '1px solid var(--ink)',
        userSelect: 'none',
      }}>
      {/* faint background stars */}
      {Array.from({length: 70}).map((_, i) => {
        const x = (i * 137.5) % 100;
        const y = ((i * 73.3) % 100);
        return <span key={i} className="star"
          style={{ left: x + '%', top: y + '%', background: 'rgba(243,237,226,.4)', width: (i%7===0?3:2)+'px', height: (i%7===0?3:2)+'px' }} />;
      })}

      {/* constellation connectors */}
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
        {lines.map(([a, b], i) => (
          <line key={i} x1={a.x + '%'} y1={a.y + '%'} x2={b.x + '%'} y2={b.y + '%'}
            stroke="rgba(243,237,226,.35)" strokeDasharray="3 4" strokeWidth="1" />
        ))}
      </svg>

      {/* stars + labels */}
      {stars.map(s => (
        <div key={s.id}
             onMouseDown={(e) => onDown(s.id, e)}
             onTouchStart={(e) => onDown(s.id, e)}
             className="draggable"
             style={{
               position: 'absolute',
               left: s.x + '%', top: s.y + '%',
               transform: 'translate(-50%,-50%)',
               zIndex: dragId === s.id ? 10 : 2,
             }}>
          <div style={{
            width: s.big ? 14 : 8, height: s.big ? 14 : 8,
            background: s.red ? 'var(--stamp)' : 'var(--paper)',
            borderRadius: '50%',
            boxShadow: s.big ? (s.red ? '0 0 20px var(--stamp)' : '0 0 16px rgba(243,237,226,.7)') : 'none',
            margin: '0 auto',
          }} />
          <div className="mono" style={{
            fontSize: 10, letterSpacing: '.12em', textTransform: 'uppercase',
            marginTop: 6, whiteSpace: 'nowrap',
            background: s.red ? 'var(--stamp)' : 'transparent',
            color: s.red ? 'var(--paper)' : 'var(--paper)',
            padding: s.red ? '2px 6px' : 0,
            textAlign: 'center',
          }}>
            {s.label}
          </div>
        </div>
      ))}

      {/* corners */}
      <span className="crop-mark" style={{ top: 8, left: 8,  filter: 'invert(1)' }} />
      <span className="crop-mark" style={{ top: 8, right: 8, filter: 'invert(1)' }} />
      <span className="crop-mark" style={{ bottom: 8, left: 8, filter: 'invert(1)' }} />
      <span className="crop-mark" style={{ bottom: 8, right: 8, filter: 'invert(1)' }} />

      <div className="mono" style={{ position: 'absolute', top: 14, left: 20, fontSize: 11, letterSpacing: '.2em' }}>
        NIGHT · POZNAŃ · 52°24′N 16°55′E
      </div>
      <div className="mono" style={{ position: 'absolute', top: 14, right: 20, fontSize: 11, letterSpacing: '.2em' }}>
        ⟡ DRAG THE STARS
      </div>
    </div>
  );
}

function Now() {
  const [stars, setStars] = React.useState(CURRENTLY);

  return (
    <section className="page" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <hr className="rule-thick" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, padding: '18px 0 6px', alignItems: 'baseline' }}>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85 }}>
          Tonight<span style={{color:'var(--stamp)'}}>,</span>
        </h2>
        <div>
          <div className="kicker">PLATE VII · A STAR CHART OF THE PRESENT</div>
          <p style={{ marginTop: 8 }}>
            Each star is a current obsession. Drag them to rearrange the constellation; the sky doesn’t mind.
          </p>
        </div>
      </div>
      <hr className="rule" />
      <div style={{ marginTop: 20 }}>
        <Constellation stars={stars} setStars={setStars} />
      </div>

      <div className="now-footer" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginTop: 20, border: '1px solid var(--ink)' }}>
        {[
          ['PLAYING', 'Starfield'],
          ['WATCHING', 'Classroom of the Elite'],
          ['READING', 'on the Rashidun'],
          ['LEARNING', 'German · Security'],
        ].map((c, i) => (
          <div key={i} style={{ padding: 16, borderRight: i < 3 ? '1px solid var(--ink)' : 0, background: i % 2 === 0 ? 'var(--paper)' : 'var(--paper-shade)' }}>
            <div className="kicker" style={{ marginBottom: 6 }}>{c[0]}</div>
            <div className="didone" style={{ fontSize: 22, lineHeight: 1.1 }}>{c[1]}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Now });