import { BackendPanel } from "./BackendPanel";

// One of the NWB files in DANDI dandiset 000986 (mouse auditory cortex).
// This is the same asset shown at:
// https://neurosift.app/nwb?url=https%3A%2F%2Fapi.dandiarchive.org%2Fapi%2Fassets%2Faacd1c8a-73f7-469e-bf08-0afd5c1052f9%2Fdownload%2F&dandisetId=000986
const DOWNLOAD_URL =
  "https://api.dandiarchive.org/api/assets/aacd1c8a-73f7-469e-bf08-0afd5c1052f9/download/";
const DANDISET_ID = "000986";

export const Demo = () => {
  return (
    <div>
      <h2>Live demo</h2>
      <p style={{ fontSize: 14, color: "#444", maxWidth: 800 }}>
        Both panels below read the <em>same</em> remote NWB file lazily, entirely
        in your browser — nothing is downloaded in full and there is no server.
        The left panel reads the raw HDF5 over HTTP range requests (h5wasm); the
        right panel reads through a precomputed LINDI JSON index. Open your
        browser's network tab to watch the partial range requests.
      </p>
      <div
        style={{
          fontSize: 12,
          fontFamily: "monospace",
          background: "#f0f0f0",
          padding: "8px 10px",
          borderRadius: 6,
          marginBottom: 16,
          wordBreak: "break-all",
        }}
      >
        dandiset {DANDISET_ID} · {DOWNLOAD_URL}
        <br />
        <a
          href={`https://neurosift.app/nwb?url=${encodeURIComponent(DOWNLOAD_URL)}&dandisetId=${DANDISET_ID}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          open this file in neurosift ↗
        </a>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 16 }}>
        <BackendPanel
          title="Direct HDF5 (h5wasm + range requests)"
          description="Resolves the DANDI redirect, then reads the raw .nwb HDF5 with h5wasm in a web worker. Each group/dataset/slice triggers HTTP Range requests for just those bytes."
          mode="direct"
          downloadUrl={DOWNLOAD_URL}
          dandisetId={DANDISET_ID}
        />
        <BackendPanel
          title="LINDI (JSON reference index)"
          description="Loads a precomputed JSON index that maps every group/dataset/attribute to byte ranges. Metadata is read from the index; only chunk data is range-requested from the original HDF5."
          mode="lindi"
          downloadUrl={DOWNLOAD_URL}
          dandisetId={DANDISET_ID}
        />
      </div>
    </div>
  );
};