// Files — OneDrive-like file browser with folders & ACLs

function Files() {
  const D = window.HitcentsData;
  const [path, setPath] = useState(['f-root']);
  const [view, setView] = useState('list'); // list | grid

  const currentId = path[path.length - 1];
  const current = D.FILES.find(f => f.id === currentId);
  const children = D.FILES.filter(f => f.parent === currentId);
  const folders = children.filter(c => c.kind === 'folder');
  const files = children.filter(c => c.kind !== 'folder');

  function open(item) {
    if (item.kind === 'folder') setPath([...path, item.id]);
  }

  function navigate(i) {
    setPath(path.slice(0, i + 1));
  }

  return (
    <div data-screen-label="Files">
      <div className="page-head">
        <div>
          <h1>Files</h1>
          <div className="sub">{D.FILES.filter(f => f.kind !== 'folder').length} files · {D.FILES.filter(f => f.kind === 'folder').length} folders · 2.4 GB used of 1 TB</div>
        </div>
        <div className="row gap-2">
          <Button variant="secondary" icon="upload">Upload</Button>
          <Button variant="primary" icon="plus">New folder</Button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: '240px 1fr', gap: 16 }}>
        {/* Sidebar */}
        <div className="card" style={{ padding: 12 }}>
          <SideEntry icon="folder" label="My drive" active={currentId === 'f-root'} onClick={() => setPath(['f-root'])} />
          <SideEntry icon="users" label="Shared with me" />
          <SideEntry icon="clock" label="Recent" />
          <SideEntry icon="star" label="Starred" />
          <SideEntry icon="trash" label="Trash" />
          <div className="divider" />
          <div className="dim" style={{ fontSize: 10.5, letterSpacing: 0.5, textTransform: 'uppercase', margin: '8px 8px 6px', fontWeight: 600 }}>Spaces</div>
          {D.FILES.filter(f => f.parent === 'f-root' && f.kind === 'folder').map(f => (
            <SideEntry key={f.id} icon="folder" label={f.name} active={path.includes(f.id)} onClick={() => setPath(['f-root', f.id])} dotColor="var(--brand-orange)" />
          ))}
          <div className="divider" />
          <div style={{ padding: 10 }}>
            <div className="row spread" style={{ fontSize: 11.5, marginBottom: 4 }}>
              <span className="dim">Storage</span><span className="mono">2.4 / 1024 GB</span>
            </div>
            <div className="progress"><div className="fill" style={{ width: '0.2%' }} /></div>
          </div>
        </div>

        {/* Main */}
        <div>
          <div className="toolbar">
            <div className="row gap-2">
              {path.map((id, i) => {
                const f = D.FILES.find(x => x.id === id);
                return (
                  <React.Fragment key={id}>
                    <a onClick={() => navigate(i)} style={{ cursor: 'pointer', fontSize: 13, color: i === path.length - 1 ? 'var(--text)' : 'var(--text-muted)', fontWeight: i === path.length - 1 ? 600 : 400 }}>{f?.name}</a>
                    {i < path.length - 1 && <Icon name="chev_r" size={12} style={{ color: 'var(--text-dim)' }} />}
                  </React.Fragment>
                );
              })}
            </div>
            <div style={{ marginLeft: 'auto' }} className="row gap-2">
              {current?.acl && <Badge tone="orange"><Icon name="lock" size={10} /> {current.acl}</Badge>}
              <Button size="sm" variant={view === 'list' ? 'secondary' : 'ghost'} icon="layers" onClick={() => setView('list')}>List</Button>
              <Button size="sm" variant={view === 'grid' ? 'secondary' : 'ghost'} icon="store" onClick={() => setView('grid')}>Grid</Button>
            </div>
          </div>

          {view === 'list' ? (
            <div className="card flush">
              <div className="file-row head">
                <span></span><span>Name</span><span>Modified</span><span>Owner</span><span>Size</span>
              </div>
              {folders.map(f => (
                <div key={f.id} className="file-row" onClick={() => open(f)}>
                  <span><Icon name="folder" size={20} style={{ color: 'var(--brand-orange)' }} /></span>
                  <div>
                    <div style={{ fontWeight: 500 }}>{f.name}</div>
                    {f.acl && <div className="dim" style={{ fontSize: 11 }}><Icon name="lock" size={9} /> {f.acl}</div>}
                  </div>
                  <span className="dim" style={{ fontSize: 12 }}>—</span>
                  <span className="dim" style={{ fontSize: 12 }}>—</span>
                  <span className="dim mono" style={{ fontSize: 11.5 }}>folder</span>
                </div>
              ))}
              {files.map(f => {
                const kind = FILE_KINDS[f.kind] || { color: '#5C6470', label: f.kind?.toUpperCase().slice(0,3) };
                const owner = getEmployee(f.owner);
                return (
                  <div key={f.id} className="file-row">
                    <span><span className="file-glyph" style={{ background: kind.color }}>{kind.label}</span></span>
                    <span style={{ fontWeight: 500 }}>{f.name}</span>
                    <span className="dim mono" style={{ fontSize: 11.5 }}>{fmtDateShort(f.modified)}</span>
                    <span><div className="row gap-2"><Avatar person={owner} size={20} /><span style={{ fontSize: 12 }}>{owner?.name.split(' ')[0]}</span></div></span>
                    <span className="dim mono" style={{ fontSize: 11.5 }}>{fileBytes(f.size)}</span>
                  </div>
                );
              })}
              {children.length === 0 && <div className="dim" style={{ padding: 40, textAlign: 'center' }}>This folder is empty.</div>}
            </div>
          ) : (
            <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 12 }}>
              {folders.map(f => (
                <div key={f.id} className="card" style={{ padding: 14, cursor: 'pointer', textAlign: 'center' }} onClick={() => open(f)}>
                  <Icon name="folder" size={48} style={{ color: 'var(--brand-orange)' }} />
                  <div style={{ fontWeight: 500, fontSize: 13, marginTop: 6 }}>{f.name}</div>
                  {f.acl && <div className="dim" style={{ fontSize: 10.5, marginTop: 2 }}>{f.acl}</div>}
                </div>
              ))}
              {files.map(f => {
                const kind = FILE_KINDS[f.kind] || { color: '#5C6470', label: f.kind?.toUpperCase().slice(0,3) };
                return (
                  <div key={f.id} className="card" style={{ padding: 14, cursor: 'pointer', textAlign: 'center' }}>
                    <div className="file-glyph" style={{ width: 48, height: 60, background: kind.color, margin: '0 auto', fontSize: 12, borderRadius: 6 }}>{kind.label}</div>
                    <div style={{ fontWeight: 500, fontSize: 12.5, marginTop: 8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.name}</div>
                    <div className="dim mono" style={{ fontSize: 11, marginTop: 2 }}>{fileBytes(f.size)}</div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function SideEntry({ icon, label, active, onClick, dotColor }) {
  return (
    <div onClick={onClick}
         className="row gap-2"
         style={{ padding: '7px 10px', borderRadius: 6, fontSize: 13, cursor: 'pointer', background: active ? 'var(--brand-orange-tint)' : 'transparent', color: active ? '#983B19' : 'var(--text)', fontWeight: active ? 500 : 400 }}>
      <Icon name={icon} size={14} style={{ color: dotColor || (active ? 'var(--brand-orange)' : 'var(--text-muted)') }} />
      <span style={{ flex: 1 }}>{label}</span>
    </div>
  );
}

window.Files = Files;