/* ============================================================
   INDIC LEAGUE NEWS — Deep Dive Sheet (bottom sheet)
   Pull-down-to-close at scrollTop=0, backdrop tap, Esc.
   ============================================================ */

function Sheet({ open, article, onClose }) {
  const sheetRef = React.useRef(null);
  const scrollRef = React.useRef(null);
  const dragRef = React.useRef({ startY: 0, dragging: false, offset: 0 });

  // Escape to close
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  // Reset scroll on open
  React.useEffect(() => {
    if (open && scrollRef.current) scrollRef.current.scrollTop = 0;
  }, [open, article && article.id]);

  // Pull-down-to-close
  const onPointerDown = (e) => {
    if (!scrollRef.current) return;
    if (scrollRef.current.scrollTop > 0) return;
    dragRef.current = { startY: e.clientY, dragging: true, offset: 0 };
    e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e) => {
    if (!dragRef.current.dragging) return;
    const dy = e.clientY - dragRef.current.startY;
    if (dy > 0 && sheetRef.current) {
      dragRef.current.offset = dy;
      sheetRef.current.style.transform = `translateY(${dy}px)`;
      sheetRef.current.style.transition = 'none';
    }
  };
  const onPointerUp = () => {
    if (!dragRef.current.dragging) return;
    const dy = dragRef.current.offset;
    if (sheetRef.current) {
      sheetRef.current.style.transition = '';
      sheetRef.current.style.transform = '';
    }
    dragRef.current.dragging = false;
    if (dy > 110) {
      window.IL_Sounds && window.IL_Sounds.tap();
      onClose();
    }
  };

  if (!article) return null;

  return (
    <>
      <div
        className={'sheet-backdrop' + (open ? ' open' : '')}
        onClick={onClose}
        aria-hidden="true"
      />
      <aside
        ref={sheetRef}
        className={'sheet' + (open ? ' open' : '')}
        role="dialog"
        aria-modal="true"
        aria-label={article.headline}
      >
        <div
          className="sheet-handle-zone"
          style={{ padding: '8px 0 12px', cursor: 'grab', touchAction: 'none' }}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          onPointerCancel={onPointerUp}
        >
          <div className="sheet-handle" />
        </div>

        <div className="sheet-content" ref={scrollRef}>
          <img src={article.image} alt="" className="sheet-image" />
          <div className="sheet-cat">{article.category}</div>
          <h1 className="sheet-title">{article.headline}</h1>
          <div className="sheet-meta">
            <span>{article.publishedAt}</span>
            <span className="sheet-meta-dot" />
            <span>By {article.author}</span>
            <span className="sheet-meta-dot" />
            <span>1 min read</span>
            {article.politicalConfidence >= 0.4 && (
              <>
                <span className="sheet-meta-dot" />
                <span>{article.politicalLabel}</span>
              </>
            )}
          </div>
          <hr />
          {article.deepDive.map((p, i) => (
            <p key={i}>{p}</p>
          ))}
          <div className="our-take">
            <div className="our-take-label">
              <Icon name="sparkle" size={11} stroke={2} color="var(--coral)" /> Our Take
            </div>
            <p>{article.ourTake}</p>
          </div>
        </div>

        <div className="sheet-source">
          <span>Original reporting by Indic League News</span>
          <a href="#" onClick={(e) => e.preventDefault()}>Read Source ↗</a>
        </div>
      </aside>
    </>
  );
}

Object.assign(window, { Sheet });