// components/TopBar.jsx — title bar with hamburger + CSV upload + station info on the right
const { useState: _tbUseState, useRef: _tbUseRef } = React;

function TopBar({ stationName, deviceModel, totalPts, shownPts, onOpenSheet, files, activeFileId, onSelectFile, onUploadFiles }) {
  const [filesOpen, setFilesOpen] = _tbUseState(false);
  const fileInputRef = _tbUseRef(null);

  const handleFiles = (e) => {
    const list = Array.from(e.target.files || []);
    if (list.length) onUploadFiles && onUploadFiles(list);
    e.target.value = '';
  };

  return (
    <>
      <header className="sc-topbar">
        <div className="sc-topbar-left">
          <Button
            variant="ghost"
            size="icon"
            title={filesOpen ? 'Close files' : 'Open files'}
            onClick={() => setFilesOpen((v) => !v)}>
            
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
            </svg>
          </Button>

          <input
            ref={fileInputRef}
            type="file"
            accept=".csv,text/csv"
            multiple
            style={{ display: 'none' }}
            onChange={handleFiles} />

          <Separator className="sc-sep-v" />

          <div className="sc-topbar-title">
            <div className="sc-topbar-h1">{deviceModel}</div>
            <div className="sc-topbar-h2">Total Station Measure Log</div>
          </div>
          <Separator className="sc-sep-v" />
          <button
            className="sc-station-pill"
            onClick={onOpenSheet}>
            
            <span className="sc-dot sc-dot-ok" />
            <span>{stationName}</span>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>

        <div className="sc-topbar-right">
          <Badge variant="outline" className="sc-mono">
            <span className="sc-muted">2026-05-05</span>
            <span className="sc-divider">·</span>
            <span><span className="sc-accent">{shownPts}</span> / {totalPts} pts</span>
          </Badge>
          <Button
            variant="outline"
            size="default"
            title="Upload CSV"
            onClick={() => fileInputRef.current && fileInputRef.current.click()}>
            
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M8 11V3M5 6l3-3 3 3M3 13h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            Upload CSV
          </Button>
          <Separator className="sc-sep-v" />
          <Button variant="ghost" size="icon" title="Export">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M8 2v8M5 7l3 3 3-3M3 13h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </Button>
          <Button variant="ghost" size="icon" title="Settings" onClick={onOpenSheet}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <circle cx="8" cy="8" r="2" stroke="currentColor" strokeWidth="1.4" />
              <path d="M8 1.5v1.8M8 12.7v1.8M14.5 8h-1.8M3.3 8H1.5M12.6 3.4l-1.3 1.3M4.7 11.3l-1.3 1.3M12.6 12.6l-1.3-1.3M4.7 4.7L3.4 3.4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
            </svg>
          </Button>
        </div>
      </header>

      <FilesSheet
        open={filesOpen}
        onClose={() => setFilesOpen(false)}
        files={files || []}
        activeFileId={activeFileId}
        onSelect={(id) => {onSelectFile && onSelectFile(id);}}
        onUploadClick={() => fileInputRef.current && fileInputRef.current.click()} />
      
    </>);
}

function FilesSheet({ open, onClose, files, activeFileId, onSelect, onUploadClick }) {
  return (
    <>
      <div className={`sc-sheet-overlay ${open ? 'open' : ''}`} onClick={onClose} />
      <aside className={`sc-sheet sc-sheet-left ${open ? 'open' : ''}`} aria-hidden={!open}>
        <div className="sc-sheet-hd">
          <div>
            <div className="sc-sheet-title">Uploaded files</div>
            <div className="sc-sheet-desc">{files.length} CSV file{files.length === 1 ? '' : 's'} loaded</div>
          </div>
          <button className="sc-sheet-x" onClick={onClose} aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
            </svg>
          </button>
        </div>

        <div className="sc-sheet-body">
          <Button variant="primary" onClick={onUploadClick}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M8 11V3M5 6l3-3 3 3M3 13h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            Upload CSV
          </Button>

          {files.length === 0 ?
          <div className="sc-files-empty">
              <div className="sc-files-empty-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                  <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6z"
                stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
                  <path d="M14 3v6h6" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
                </svg>
              </div>
              <div className="sc-files-empty-title">No files yet</div>
              <div className="sc-files-empty-desc">Upload a CSV to load measurement data</div>
            </div> :

          <ul className="sc-files-list">
              {files.map((f) => {
              const active = f.id === activeFileId;
              return (
                <li key={f.id}>
                    <button
                    className={`sc-file-item ${active ? 'active' : ''}`}
                    onClick={() => onSelect(f.id)}>
                    
                      <div className="sc-file-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                          <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6z"
                        stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
                          <path d="M14 3v6h6" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
                        </svg>
                      </div>
                      <div className="sc-file-meta">
                        <div className="sc-file-name">{f.name}</div>
                        <div className="sc-file-sub sc-mono">
                          {f.size} · {f.points} pts · {f.uploadedAt}
                        </div>
                      </div>
                      {active &&
                    <Badge variant="success">
                          <span className="sc-dot sc-dot-ok" /> Active
                        </Badge>
                    }
                    </button>
                  </li>);

            })}
            </ul>
          }
        </div>
      </aside>
    </>);
}

window.TopBar = TopBar;