// components/StationSheet.jsx — slide-in detail panel for the current station
function StationSheet({ open, onClose, station, stats, totalPts, shownPts, playVT, maxT }) {
  return (
    <Sheet open={open} onClose={onClose}>
      <div className="sc-sheet-hd">
        <div>
          <div className="sc-sheet-title">{station.name}</div>
          <div className="sc-sheet-desc">{station.id} · {station.location}</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">
        <section className="sc-sheet-section">
          <div className="sc-sheet-section-title">Status</div>
          <div className="sc-sheet-status">
            <Badge variant="success"><span className="sc-dot sc-dot-ok" /> Online</Badge>
            <Badge variant="outline">Recording</Badge>
            <Badge variant="outline" className="sc-mono">FW 4.21.3</Badge>
          </div>
        </section>

        <Separator />

        <section className="sc-sheet-section">
          <div className="sc-sheet-section-title">Device</div>
          <div className="sc-kv">
            <div className="sc-kv-row"><span className="sc-kv-k">Model</span><span className="sc-kv-v">{station.model}</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">Serial</span><span className="sc-kv-v sc-mono">{station.serial}</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">Operator</span><span className="sc-kv-v">{station.operator}</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">Project</span><span className="sc-kv-v">{station.project}</span></div>
          </div>
        </section>

        <Separator />

        <section className="sc-sheet-section">
          <div className="sc-sheet-section-title">Position</div>
          <div className="sc-kv">
            <div className="sc-kv-row"><span className="sc-kv-k">Easting</span><span className="sc-kv-v sc-mono">{station.easting}</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">Northing</span><span className="sc-kv-v sc-mono">{station.northing}</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">Elevation</span><span className="sc-kv-v sc-mono">{station.elevation}</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">CRS</span><span className="sc-kv-v">{station.crs}</span></div>
          </div>
        </section>

        <Separator />

        <section className="sc-sheet-section">
          <div className="sc-sheet-section-title">Current capture</div>
          <div className="sc-kv">
            <div className="sc-kv-row"><span className="sc-kv-k">Points captured</span><span className="sc-kv-v sc-mono">{shownPts} / {totalPts}</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">Elapsed</span><span className="sc-kv-v sc-mono">{playVT.toFixed(1)} / {maxT.toFixed(1)} s</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">Max distance</span><span className="sc-kv-v sc-mono">{stats.sMax.toFixed(2)} m</span></div>
            <div className="sc-kv-row"><span className="sc-kv-k">Z span</span><span className="sc-kv-v sc-mono">{(stats.zMax - stats.zMin).toFixed(2)} m</span></div>
          </div>
        </section>

        <Separator />

        <section className="sc-sheet-section">
          <div className="sc-sheet-section-title">Actions</div>
          <div className="sc-sheet-actions">
            <Button variant="outline">Export CSV</Button>
            <Button variant="outline">Export LAS</Button>
            <Button variant="primary">View report</Button>
          </div>
        </section>
      </div>
    </Sheet>
  );
}

window.StationSheet = StationSheet;