/* NeuralVault — DossierPage.jsx
   Full-screen Medium-style reading page for transaction dossiers. */

const { useState, useEffect, useRef } = React;

const CLASS_COLORS = {
  RESTRICTED:   "var(--accent)",
  CONFIDENTIAL: "#F59E0B",
  INTERNAL:     "#10B981",
};

function DossierBlock({ block }) {
  if (block.type === "heading") {
    return <h2 className="dossier-h2">{block.text}</h2>;
  }
  if (block.type === "body") {
    return <p className="dossier-text">{block.text}</p>;
  }
  if (block.type === "pullquote") {
    return (
      <blockquote className="dossier-pullquote">
        <p>{block.text}</p>
      </blockquote>
    );
  }
  if (block.type === "table") {
    return (
      <div className="dossier-table">
        {block.rows.map((row, i) => (
          <div className="dossier-table-row" key={i}>
            <span className="dossier-table-k mono">{row.k}</span>
            <span className="dossier-table-v">{row.v}</span>
          </div>
        ))}
      </div>
    );
  }
  return null;
}

function DossierPage({ dossier, onClose }) {
  const [progress, setProgress]       = useState(0);
  const [titleVisible, setTitleVisible] = useState(false);
  const scrollRef = useRef(null);
  const heroRef   = useRef(null);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = el;
      setProgress(scrollTop / Math.max(1, scrollHeight - clientHeight));
      if (heroRef.current) {
        setTitleVisible(scrollTop > heroRef.current.offsetHeight * 0.55);
      }
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = ""; };
  }, []);

  const classColor = CLASS_COLORS[dossier.classification] || "var(--fg-2)";

  return (
    <div className="dossier-overlay" ref={scrollRef}>
      {/* Reading progress */}
      <div className="dossier-progress-bar" aria-hidden="true">
        <div
          className="dossier-progress-fill"
          style={{ transform: `scaleX(${progress})` }}
        />
      </div>

      {/* Sticky header */}
      <div className="dossier-header">
        <div className="dossier-header-inner wrap">
          <button className="dossier-back" onClick={onClose}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M9 11L5 7L9 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
            </svg>
            <span>Portal</span>
          </button>

          <span className={`dossier-header-title ${titleVisible ? "visible" : ""}`}>
            {dossier.title}
          </span>

          <div className="dossier-header-right">
            <span className="dossier-header-ref mono">{dossier.ref}</span>
            <ThemeToggle />
          </div>
        </div>
      </div>

      {/* Hero */}
      <div className="dossier-hero" ref={heroRef}>
        <div className="dossier-hero-inner wrap">
          <div className="dossier-hero-meta">
            {dossier.classification && (
              <span
                className="dossier-classification mono"
                style={{ color: classColor, borderColor: classColor }}
              >
                {dossier.classification}
              </span>
            )}
            <span className="dossier-ref-tag mono">{dossier.ref}</span>
            <span className="dossier-tag-chip mono">{dossier.tag}</span>
          </div>

          <h1 className="dossier-title">{dossier.title}</h1>
          <p className="dossier-subtitle">{dossier.subtitle}</p>

          <div className="dossier-byline">
            <span className="mono">{dossier.author}</span>
            <span className="dossier-byline-sep" aria-hidden="true" />
            <span className="mono">{dossier.date}</span>
            <span className="dossier-byline-sep" aria-hidden="true" />
            <span className="mono">{String(dossier.minutes).padStart(2, "0")} MIN READ</span>
          </div>
        </div>
      </div>

      {/* Body */}
      <div className="dossier-body">
        <div className="dossier-body-inner">
          {dossier.sections.map((block, i) => (
            <DossierBlock key={i} block={block} />
          ))}
        </div>

        <div className="dossier-footer">
          <button className="btn btn-ghost" onClick={onClose}>
            <svg width="12" height="12" viewBox="0 0 14 14" fill="none" aria-hidden="true" className="arrow">
              <path d="M9 11L5 7L9 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/>
            </svg>
            Back to Portal
          </button>
          <span className="dossier-footer-ref mono">{dossier.ref} · {dossier.date}</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DossierPage });