import PropTypes from 'prop-types';

import { Center } from '@astryxdesign/core/Center';

import { DT, soft } from './tokens';

// ============================================================================
// Shared DT primitives — the tiny components that every DT-styled operator
// page used to redeclare verbatim at the top of its own file.
//
// They were byte-identical in all 6 copies, so the duplication bought nothing
// and made the pages drift apart whenever one was tweaked. `deliveries.js` is
// the visual reference for both (see root CLAUDE.md §6).
// ============================================================================

// Soft popup surface. Under MUI this was a `PaperComponent` handed to every
// Autocomplete; Astryx's Selector/Typeahead own their own popup chrome, so
// this now only serves the few hand-rolled dropdowns that remain. Kept as a
// style object rather than a component for exactly that reason.
export const softPopupStyle = {
  marginTop: 6,
  background: DT.surface,
  borderRadius: DT.radiusInner + 'px',
  boxShadow: DT.shadowPop,
  border: `1px solid ${DT.borderSubtle}`,
  overflow: 'hidden'
};

// Scroll container for a table. Astryx's Table renders a bare <table> with no
// sticky-header or max-height affordance (MUI's TableContainer used to provide that),
// so pages wrap it in this. The brand-red scrollbar can't be expressed inline
// — ::-webkit-scrollbar-* are pseudo-elements — hence the one-time <style>.
export const TableScroll = ({ maxHeight = 'calc(100vh - 260px)', minWidth, children }) => (
  <>
    <style>{`
      .dt-table-scroll { overflow: auto; }
      .dt-table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
      .dt-table-scroll::-webkit-scrollbar-track { background-color: ${DT.surfaceAlt}; }
      .dt-table-scroll::-webkit-scrollbar-thumb {
        background-color: ${DT.brand}55; border-radius: 8px;
      }
      .dt-table-scroll::-webkit-scrollbar-thumb:hover { background-color: ${DT.brand}; }
      .dt-table-scroll thead th { position: sticky; top: 0; z-index: 2; background-color: ${DT.surfaceAlt}; }
    `}</style>
    <div className="dt-table-scroll" style={{ maxHeight }}>
      <div style={{ minWidth }}>{children}</div>
    </div>
  </>
);

TableScroll.propTypes = {
  maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  children: PropTypes.node
};

// Colored icon chip — flips between filled and soft based on `selected`.
// Astryx's own `Avatar` is for people (src / initials / status corner), so a
// tinted `Center` is the right primitive for an icon swatch. The accent is a
// caller-supplied hex, hence the inline style.
export const AccentAvatar = ({ color, selected, size = 24, children }) => (
  <Center
    isInline
    width={size}
    height={size}
    style={{
      flexShrink: 0,
      borderRadius: '50%',
      backgroundColor: selected ? color : soft(color),
      color: selected ? '#fff' : color,
      transition: 'background-color 0.15s, color 0.15s'
    }}
  >
    {children}
  </Center>
);

AccentAvatar.propTypes = {
  color: PropTypes.string,
  selected: PropTypes.bool,
  size: PropTypes.number,
  children: PropTypes.node
};