const T = window.ArbiterTokens;

// Shared small components used across views
const sharedStyles = {
  statCard: {
    background: T.color.bg.card,
    border: `1px solid ${T.color.border.light}`,
    borderRadius: T.radius.lg,
    padding: '16px',
    display: 'flex',
    flexDirection: 'column',
    gap: '4px',
  },
  statLabel: {
    fontSize: T.font.size.xs,
    fontWeight: T.font.weight.medium,
    color: T.color.text.tertiary,
    textTransform: 'uppercase',
    letterSpacing: T.font.tracking.caps,
  },
  statValue: {
    fontSize: T.font.size.xxl,
    fontWeight: T.font.weight.bold,
    color: T.color.text.primary,
    letterSpacing: T.font.tracking.tight,
    lineHeight: 1.1,
  },
  statDelta: {
    fontSize: T.font.size.xs,
    fontWeight: T.font.weight.medium,
  },
  tag: {
    display: 'inline-flex',
    alignItems: 'center',
    padding: '2px 8px',
    borderRadius: '10px',
    fontSize: T.font.size.xs,
    fontWeight: T.font.weight.medium,
    lineHeight: '18px',
  },
  tableContainer: {
    background: T.color.bg.card,
    border: `1px solid ${T.color.border.light}`,
    borderRadius: T.radius.lg,
    overflow: 'hidden',
  },
  tableHeader: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '12px 16px',
    borderBottom: `1px solid ${T.color.border.light}`,
  },
  tableTitle: {
    fontSize: T.font.size.md,
    fontWeight: T.font.weight.semibold,
    color: T.color.text.primary,
  },
  th: {
    fontSize: T.font.size.xs,
    fontWeight: T.font.weight.medium,
    color: T.color.text.tertiary,
    textTransform: 'uppercase',
    letterSpacing: T.font.tracking.caps,
    padding: '8px 16px',
    textAlign: 'left',
    background: T.color.bg.secondary,
    borderBottom: `1px solid ${T.color.border.light}`,
  },
  td: {
    fontSize: T.font.size.base,
    color: T.color.text.primary,
    padding: '10px 16px',
    borderBottom: `1px solid ${T.color.border.light}`,
    verticalAlign: 'middle',
  },
  btn: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    padding: '6px 12px',
    borderRadius: T.radius.md,
    border: `1px solid ${T.color.border.light}`,
    background: T.color.bg.card,
    fontSize: T.font.size.sm,
    fontWeight: T.font.weight.medium,
    color: T.color.text.secondary,
    cursor: 'pointer',
    fontFamily: T.font.family,
    transition: 'all 0.1s',
  },
  btnPrimary: {
    background: T.color.navy800,
    color: T.color.ivory100,
    border: `1px solid ${T.color.navy700}`,
  },
};

function StatCard({ label, value, delta, deltaType }) {
  const deltaColor = deltaType === 'up' ? T.color.status.active :
    deltaType === 'down' ? T.color.status.critical : T.color.text.tertiary;
  const deltaPrefix = deltaType === 'up' ? '↑' : deltaType === 'down' ? '↓' : '';
  return (
    <div style={sharedStyles.statCard}>
      <span style={sharedStyles.statLabel}>{label}</span>
      <span style={sharedStyles.statValue}>{value}</span>
      {delta && <span style={{...sharedStyles.statDelta, color: deltaColor}}>{deltaPrefix} {delta}</span>}
    </div>
  );
}

function StatusTag({ status }) {
  const map = {
    'Active': { bg: T.color.status.activeBg, color: T.color.status.active },
    'Discovery': { bg: T.color.accent.blueBg, color: T.color.accent.blue },
    'Trial Prep': { bg: T.color.status.warningBg, color: T.color.status.warning },
    'Settlement': { bg: '#F5F0FF', color: '#6B21A8' },
    'Appeal': { bg: T.color.status.criticalBg, color: T.color.status.critical },
    'Closed': { bg: T.color.status.pendingBg, color: T.color.status.pending },
    'On Hold': { bg: T.color.status.pendingBg, color: T.color.status.pending },
    'Review': { bg: T.color.status.warningBg, color: T.color.status.warning },
  };
  const s = map[status] || map['Active'];
  return <span style={{...sharedStyles.tag, background: s.bg, color: s.color}}>{status}</span>;
}

function PriorityDot({ level }) {
  const colors = { high: T.color.status.critical, medium: T.color.status.warning, low: T.color.status.active };
  return (
    <span style={{
      display: 'inline-block', width: '7px', height: '7px', borderRadius: '50%',
      background: colors[level] || colors.medium, marginRight: '6px',
    }} />
  );
}

function MiniBar({ value, max, color }) {
  return (
    <div style={{ width: '60px', height: '4px', borderRadius: '2px', background: T.color.border.light }}>
      <div style={{
        width: `${(value / max) * 100}%`, height: '100%', borderRadius: '2px',
        background: color || T.color.navy500,
      }} />
    </div>
  );
}

Object.assign(window, { StatCard, StatusTag, PriorityDot, MiniBar, sharedStyles });