// Decentralized Storage Dapp — IPFS clusters, encrypted datasets, access keys.

function StorageDapp() {
  const sidebar = (
    <>
      <NavGroup label="My data">
        <NavItem icon={Icon.storage} label="Datasets" badge="42" active />
        <NavItem icon={Icon.doc} label="Papers" />
        <NavItem icon={Icon.cube} label="Models" />
        <NavItem icon={Icon.shield} label="Encrypted" badge="6" />
      </NavGroup>
      <NavGroup label="Marketplace">
        <NavItem icon={Icon.search} label="Browse data" />
        <NavItem icon={Icon.bank} label="Access revenue" />
      </NavGroup>
      <NavGroup label="Provide">
        <NavItem icon={Icon.plus} label="Run a node" />
      </NavGroup>
    </>
  );

  return (
    <Dapp>
      <ChromeBar dapp="STORAGE" code="DePIN·IPFS" />
      <Layout rail={sidebar}>
        <PageHead
          eyebrow="Decentralized storage · 142 nodes"
          title="My datasets"
          sub="ZK-gated access · FAIR-compliant · pay-per-query without exposing raw data."
          actions={<>
            <Btn small icon={Icon.search}>Search</Btn>
            <Btn small primary icon={Icon.plus}>Upload</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 16 }}>
          <Card title="Datasets" code="42 · 1.84 TB" pad={false}>
            <Row head cells={[
              { v: 'CID', w: '120px' }, { v: 'Name' },
              { v: 'Size', w: '70px' }, { v: 'Replicas', w: '70px' },
              { v: 'Access', w: '90px' }, { v: 'Yield', w: '70px' },
            ]} />
            {[
              ['Qmf8…2c3a', 'murine-cortex-2P-cohort1', '482 GB', '14×', 'PUBLIC', '+82', 'ok'],
              ['QmZ7…91fe', 'glia-pruning-rawimg-v3', '128 GB', '8×', 'ZK-GATED', '+340', 'accent'],
              ['QmA1…d804', 'astro-ablation-electrophys', '64 GB', '12×', 'PUBLIC', '+12', 'ok'],
              ['QmD3…ff21', 'patient-cohort-mri (HIPAA)', '92 GB', '6×', 'ENCRYPTED', '+1,240', 'warn'],
              ['QmK9…0b78', 'open-spike-sort-bench', '14 GB', '24×', 'PUBLIC', '+4', 'ok'],
              ['QmP2…7e10', 'ml-checkpoints/v3', '380 GB', '4×', 'TEAM', '0', 'default'],
              ['QmH4…aa18', 'preprint-figures-archive', '8 GB', '14×', 'PUBLIC', '+1', 'ok'],
              ['QmN0…8c44', 'rnaseq-2026q1', '210 GB', '8×', 'ZK-GATED', '+92', 'accent'],
            ].map((r, i) => (
              <Row key={i} cells={[
                { v: r[0], style: { color: UB.ink3 }, w: '120px' },
                { v: <span style={{ color: UB.ink, fontFamily: UB.sans, fontSize: 12 }}>{r[1]}</span> },
                { v: r[2], w: '70px' },
                { v: r[3], w: '70px', style: { color: UB.ink3 } },
                { v: <Tag tone={r[6]}>{r[4]}</Tag>, w: '90px' },
                { v: <span style={{ color: UB.accent }}>{r[5]} UBR</span>, w: '70px', style: { textAlign: 'right' } },
              ]} />
            ))}
          </Card>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title="Access revenue · 30d" code="ZK-QUERIES">
              <div style={{ fontFamily: UB.serif, fontSize: 44, lineHeight: 1, marginBottom: 4 }}>1,772 <span style={{ fontFamily: UB.mono, fontSize: 13, color: UB.ink3 }}>UBR</span></div>
              <div style={{ fontSize: 11, color: UB.ink3, marginBottom: 14 }}>↑ 38% vs prior 30d · 412 unique queries · 8 datasets earning</div>
              <MiniBars values={[20, 32, 28, 45, 52, 41, 60, 72, 68, 81, 78, 94, 102, 98, 112, 118, 124]} h={48} color={UB.ink} />
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginTop: 4, letterSpacing: '0.1em' }}>
                <span>APR 5</span><span>MAY 5</span>
              </div>
            </Card>

            <Card title="Selected · QmZ7…91fe" action={<Btn small>Manage</Btn>}>
              <div style={{ fontFamily: UB.mono, fontSize: 11, marginBottom: 8 }}>glia-pruning-rawimg-v3</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
                <Stat label="Size" value="128 GB" />
                <Stat label="Replicas" value="8" sub="across 6 nodes" />
                <Stat label="Queries" value="184" sub="last 30d" />
                <Stat label="Price" value="2 UBR" sub="per query" />
              </div>
              <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 6 }}>ZK ACCESS POLICY</div>
              <div style={{ fontFamily: UB.mono, fontSize: 11, padding: 10, background: UB.paperDeep, lineHeight: 1.5 }}>
                grants(reader) ←<br/>
                &nbsp;&nbsp;has(SBT: PhD ∨ MD)<br/>
                &nbsp;&nbsp;∧ TIS ≥ 60<br/>
                &nbsp;&nbsp;∧ paid(2 UBR)
              </div>
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.StorageDapp = StorageDapp;