// SCREEN 06 — Documentation Vault
// Archival document management. Categorized, secure, premium.

function ScreenVault() {
  const v = VEHICLE;
  const [openCategory, setOpenCategory] = React.useState(0);

  const totalDocs = v.documents.reduce((s, c) => s + c.items.length, 0);
  const archivalCount = v.documents.reduce(
    (s, c) => s + c.items.filter(i => i.archival).length, 0
  );

  // Tiny doc preview — striped slot with kind glyph
  const DocPreview = ({ kind }) => (
    <div style={{
      width: 44, height: 56,
      background: kind === 'image'
        ? `repeating-linear-gradient(135deg, ${P.slate} 0 6px, ${P.graphite} 6px 7px)`
        : `linear-gradient(180deg, ${P.bone} 0%, ${P.bone} 18%, #fff 18%, #fff 100%)`,
      border: `1px solid ${P.slate}`,
      flex: '0 0 auto', position: 'relative',
      overflow: 'hidden',
    }}>
      {kind === 'pdf' && (
        <>
          <div style={{
            position: 'absolute', top: 22, left: 6, right: 6, height: 1,
            background: P.line,
          }} />
          <div style={{
            position: 'absolute', top: 28, left: 6, right: 12, height: 1,
            background: P.line,
          }} />
          <div style={{
            position: 'absolute', top: 34, left: 6, right: 8, height: 1,
            background: P.line,
          }} />
          <div style={{
            position: 'absolute', top: 40, left: 6, right: 18, height: 1,
            background: P.line,
          }} />
          <div style={{
            position: 'absolute', top: 5, left: 4, right: 4, height: 8,
            background: P.gold, fontFamily: T.mono, fontSize: 5,
            letterSpacing: '0.1em', color: P.ink, fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>PDF</div>
        </>
      )}
    </div>
  );

  return (
    <div className="proto-screen" style={{ background: P.ink, color: P.paper }}>

      <ScreenIntro
        eyebrow="VAULT · ARCHIVE"
        title="THE PAPER TRAIL"
        sub={`${totalDocs} documents across ${v.documents.length} collections. ${archivalCount} flagged archival.`}
        right={
          <Icon name="bookmark" size={28} color={P.gold} strokeWidth={1.4} />
        }
      />

      {/* Vault summary */}
      <div style={{ padding: '0 22px 18px' }}>
        <div style={{
          background: P.graphite,
          borderLeft: `2px solid ${P.gold}`,
          padding: 16,
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14,
        }}>
          <div>
            <Eyebrow color={P.mute}>TOTAL</Eyebrow>
            <div style={{ fontFamily: T.display, fontSize: 22, fontWeight: 700,
              color: P.paper, marginTop: 4, letterSpacing: '-0.02em',
            }}>{totalDocs}</div>
          </div>
          <div>
            <Eyebrow color={P.mute}>ARCHIVAL</Eyebrow>
            <div style={{ fontFamily: T.display, fontSize: 22, fontWeight: 700,
              color: P.gold, marginTop: 4, letterSpacing: '-0.02em',
            }}>{archivalCount}</div>
          </div>
          <div>
            <Eyebrow color={P.mute}>STORAGE</Eyebrow>
            <div style={{ fontFamily: T.display, fontSize: 22, fontWeight: 700,
              color: P.paper, marginTop: 4, letterSpacing: '-0.02em',
            }}>1.2GB</div>
          </div>
        </div>
      </div>

      {/* Search bar */}
      <div style={{ padding: '0 22px 18px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 14px',
          border: `1px solid ${P.slate}`,
          background: P.graphite,
        }}>
          <Icon name="search" size={14} color={P.mute} />
          <span style={{
            fontFamily: T.body, fontSize: 12, color: P.mute, flex: 1,
          }}>Search documents · receipts · vendors…</span>
          <Icon name="filter" size={14} color={P.mute} />
        </div>
      </div>

      <RowRule>COLLECTIONS · {v.documents.length}</RowRule>

      {/* Collections — expandable accordion */}
      <div style={{ padding: '14px 22px 8px' }}>
        {v.documents.map((c, ci) => {
          const open = openCategory === ci;
          return (
            <div key={c.category} style={{
              marginBottom: 8,
              border: `1px solid ${P.graphite}`,
              background: P.graphite,
            }}>
              <button onClick={() => setOpenCategory(open ? -1 : ci)}
                style={{
                  width: '100%', background: 'transparent', border: 'none',
                  padding: 16, cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  color: P.paper,
                }}>
                <div style={{ textAlign: 'left' }}>
                  <Eyebrow color={open ? P.gold : P.mute}>{c.category.toUpperCase()}</Eyebrow>
                  <div style={{
                    fontFamily: T.display, fontSize: 16, fontWeight: 600,
                    color: P.paper, marginTop: 6, letterSpacing: '-0.005em',
                  }}>{c.items.length} {c.items.length === 1 ? 'DOCUMENT' : 'DOCUMENTS'}</div>
                </div>
                <div style={{
                  fontFamily: T.mono, fontSize: 14,
                  color: open ? P.gold : P.mute,
                  transition: 'transform .2s',
                  transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
                  width: 24, height: 24,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: `1px solid ${open ? P.gold : P.slate}`,
                }}>+</div>
              </button>

              {open && (
                <div style={{
                  padding: '0 16px 16px', borderTop: `1px solid ${P.slate}`,
                }}>
                  {c.items.map((doc, di) => (
                    <div key={di} style={{
                      display: 'grid', gridTemplateColumns: '44px 1fr auto',
                      gap: 14, padding: '12px 0',
                      borderBottom: di < c.items.length - 1 ? `1px solid ${P.slate}` : 'none',
                      alignItems: 'center',
                    }}>
                      <DocPreview kind={doc.kind} />
                      <div>
                        <div style={{
                          fontFamily: T.display, fontSize: 13, fontWeight: 600,
                          color: P.paper, letterSpacing: '-0.005em',
                        }}>{doc.name}</div>
                        <div style={{
                          fontFamily: T.mono, fontSize: 9, color: P.mute,
                          letterSpacing: '0.14em', textTransform: 'uppercase',
                          marginTop: 3,
                          display: 'flex', gap: 8, flexWrap: 'wrap',
                        }}>
                          <span>{doc.date}</span>
                          <span>·</span>
                          <span>{doc.pages} {doc.kind === 'image' ? 'IMG' : 'PG'}</span>
                          {doc.archival && (
                            <>
                              <span>·</span>
                              <span style={{ color: P.gold }}>ARCHIVAL</span>
                            </>
                          )}
                          {doc.expires && (
                            <>
                              <span>·</span>
                              <span style={{ color: P.signal }}>EXP {doc.expires}</span>
                            </>
                          )}
                        </div>
                      </div>
                      <Icon name="arrow" size={16} color={P.mute} strokeWidth={1.4} />
                    </div>
                  ))}

                  <button style={{
                    width: '100%', marginTop: 10,
                    padding: '10px 0',
                    background: 'transparent', border: `1px dashed ${P.slate}`,
                    color: P.mute, fontFamily: T.mono, fontSize: 9, fontWeight: 600,
                    letterSpacing: '0.2em', textTransform: 'uppercase',
                    cursor: 'pointer',
                  }}>+ ADD DOCUMENT</button>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Vault meta */}
      <div style={{ padding: '14px 22px 8px' }}>
        <div style={{
          fontFamily: T.mono, fontSize: 9, color: P.mute,
          letterSpacing: '0.18em', textTransform: 'uppercase', textAlign: 'center',
          lineHeight: 1.8,
        }}>
          ENCRYPTED · END-TO-END<br/>
          LAST BACKUP — OCT 18, 2024 · 09:14
        </div>
      </div>

      <div style={{ height: 24 }} />
    </div>
  );
}

Object.assign(window, { ScreenVault });