/* Shared screen primitives. Page header, card, pill, kbd, segmented control, empty state.
   Used by every v2 screen so they feel like one app. */

/* Page header. Title + subtitle + right slot, used at the top of every screen. */
const PageHeader = ({ eyebrow, title, subtitle, right, jurisdictionPill, children }) => (
  <div style={{ padding: '24px 32px 16px', borderBottom: `1px solid ${THEME.line}` }}>
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        {eyebrow && (
          <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
            {eyebrow}
            {jurisdictionPill && <JurisdictionPill jx={jurisdictionPill}/>}
          </div>
        )}
        <div style={{ fontFamily: 'Fraunces', fontSize: 28, color: THEME.text, fontWeight: 500, letterSpacing: -0.5, lineHeight: 1.1 }}>
          {title}
        </div>
        {subtitle && (
          <div style={{ fontSize: 12.5, color: THEME.textDim, marginTop: 6, maxWidth: 600, lineHeight: 1.5 }}>
            {subtitle}
          </div>
        )}
      </div>
      {right && <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>{right}</div>}
    </div>
    {children}
  </div>
);

/* Card. Neutral surface used for stat cells, panel sections, list items. */
const Card = ({ children, padding = '14px 16px', style = {}, hover, onClick, accent }) => (
  <div onClick={onClick} style={{
    padding, borderRadius: 12,
    background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)',
    border: `1px solid ${THEME.line}`,
    borderLeft: accent ? `3px solid ${accent}` : `1px solid ${THEME.line}`,
    cursor: onClick ? 'pointer' : 'default',
    transition: 'all 0.15s ease',
    ...style,
  }}>{children}</div>
);

/* Stat cell. Used in 4-up stat strips. */
const Stat = ({ label, value, sub, tone }) => (
  <div style={{
    padding: '14px 16px', borderRadius: 12,
    background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)',
    border: `1px solid ${THEME.line}`,
  }}>
    <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 600 }}>{label}</div>
    <div style={{ fontFamily: 'Fraunces', fontSize: 26, color: tone || THEME.text, fontWeight: 500, letterSpacing: -0.5, marginTop: 6, lineHeight: 1 }}>{value}</div>
    {sub && <div style={{ fontSize: 11, color: THEME.textDim, marginTop: 6 }}>{sub}</div>}
  </div>
);

/* Pill. Small status / tag chip. */
const Pill = ({ children, tone = THEME.blue, soft, dense, style = {} }) => (
  <span style={{
    fontSize: dense ? 10 : 10.5, fontWeight: 600, padding: dense ? '1px 6px' : '2px 7px', borderRadius: 5,
    background: soft ? tone + '20' : tone,
    color: soft ? tone : '#fff',
    border: soft ? `1px solid ${tone}40` : 'none',
    letterSpacing: 0.4,
    textTransform: 'uppercase',
    display: 'inline-flex', alignItems: 'center', gap: 4,
    ...style,
  }}>{children}</span>
);

/* Jurisdiction pill. UT vs NY. */
const JurisdictionPill = ({ jx }) => {
  const isUtah = jx === 'utah' || jx === 'UT';
  return (
    <span style={{
      fontSize: 9.5, fontWeight: 700, padding: '2px 6px', borderRadius: 4, letterSpacing: 0.6,
      background: isUtah ? 'rgba(91,167,115,0.18)' : THEME.blueSoft,
      color: isUtah ? THEME.success : THEME.blue,
      border: `1px solid ${isUtah ? 'rgba(91,167,115,0.3)' : THEME.blue + '30'}`,
    }}>{isUtah ? 'UT' : 'NY'}</span>
  );
};

/* Stage pill. Colored by stage name. */
const StagePill = ({ stage }) => {
  const tone = (STAGE_TONE[stage] && STAGE_TONE[stage]()) || THEME.blue;
  return (
    <span style={{
      fontSize: 10.5, fontWeight: 600, padding: '2px 8px', borderRadius: 5, letterSpacing: 0.3,
      background: tone + '20', color: tone, border: `1px solid ${tone}40`,
    }}>{stage}</span>
  );
};

/* Segmented control. For view toggles, tabs, etc. */
const Segmented = ({ options, value, onChange, dense, full }) => (
  <div style={{
    display: 'flex', gap: 3, padding: 3,
    background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.55)',
    border: `1px solid ${THEME.line}`,
    borderRadius: 9,
    width: full ? '100%' : 'auto',
  }}>
    {options.map(o => {
      const a = value === o.value;
      return (
        <div key={o.value} onClick={() => onChange(o.value)} style={{
          flex: full ? 1 : 'initial',
          padding: dense ? '4px 10px' : '6px 12px',
          borderRadius: 6, cursor: 'pointer',
          background: a ? THEME.blue : 'transparent',
          color: a ? '#fff' : THEME.textDim,
          fontSize: dense ? 11 : 12, fontWeight: 600, textAlign: 'center',
          whiteSpace: 'nowrap',
        }}>{o.label}</div>
      );
    })}
  </div>
);

/* Tab strip. Horizontal underline tabs. */
const TabStrip = ({ tabs, value, onChange, padded }) => (
  <div style={{
    padding: padded ? '0 32px' : 0,
    borderBottom: `1px solid ${THEME.line}`,
    display: 'flex', gap: 4,
  }}>
    {tabs.map(t => {
      const a = value === t.value;
      return (
        <div key={t.value} onClick={() => onChange(t.value)} style={{
          padding: '11px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 600,
          color: a ? THEME.text : THEME.textDim,
          borderBottom: `2px solid ${a ? THEME.blue : 'transparent'}`,
          marginBottom: -1,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          {t.label}
          {t.count != null && (
            <span style={{
              fontSize: 10, padding: '1px 5px', borderRadius: 8,
              background: a ? THEME.blue : THEME.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)',
              color: a ? '#fff' : THEME.textMute, fontWeight: 600,
            }}>{t.count}</span>
          )}
        </div>
      );
    })}
  </div>
);

/* Filter chip row */
const FilterChips = ({ chips, value, onChange }) => (
  <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
    {chips.map(c => {
      const a = value === c.value;
      return (
        <div key={c.value} onClick={() => onChange(c.value)} style={{
          padding: '5px 11px', borderRadius: 7, fontSize: 11.5, fontWeight: 500,
          background: a ? THEME.blue : THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)',
          color: a ? '#fff' : THEME.textDim,
          border: `1px solid ${a ? THEME.blue : THEME.line}`,
          cursor: 'pointer', whiteSpace: 'nowrap',
        }}>{c.label}</div>
      );
    })}
  </div>
);

/* Button. Primary / ghost / soft */
const Btn = ({ children, kind = 'ghost', icon, onClick, tone, style = {} }) => {
  const accent = tone || THEME.blue;
  const styles = {
    primary: { background: accent, color: '#fff', border: `1px solid ${accent}` },
    ghost: { background: 'transparent', color: THEME.text, border: `1px solid ${THEME.line}` },
    soft: { background: accent + '18', color: accent, border: `1px solid ${accent}40` },
  };
  return (
    <div onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '7px 12px', borderRadius: 8, cursor: 'pointer',
      fontSize: 12, fontWeight: 600,
      transition: 'filter 0.15s',
      ...styles[kind], ...style,
    }}>
      {icon && <Icon d={icon} size={13} stroke={kind === 'primary' ? '#fff' : (kind === 'soft' ? accent : THEME.text)}/>}
      {children}
    </div>
  );
};

/* Empty state */
const EmptyState = ({ icon, title, sub }) => (
  <div style={{
    padding: '40px 20px', borderRadius: 14,
    border: `1px dashed ${THEME.line}`,
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
    color: THEME.textMute,
  }}>
    {icon && <Icon d={icon} size={28} stroke={THEME.textMute}/>}
    <div style={{ fontFamily: 'Fraunces', fontSize: 18, color: THEME.textDim, fontWeight: 500 }}>{title}</div>
    {sub && <div style={{ fontSize: 12, textAlign: 'center', maxWidth: 360, lineHeight: 1.5 }}>{sub}</div>}
  </div>
);

/* Meta row. Small key:value pair, used in headers */
const Meta = ({ label, value, tone }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5 }}>
    <span style={{ color: THEME.textMute }}>{label}</span>
    <span style={{ color: tone || THEME.text, fontWeight: 600 }}>{value}</span>
  </div>
);

/* Avatar. Initials in gradient circle */
const Avatar = ({ initials, size = 30, tone }) => (
  <div style={{
    width: size, height: size, borderRadius: size / 2, flexShrink: 0,
    background: tone || `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: '#fff', fontWeight: 600, fontSize: size * 0.36,
  }}>{initials}</div>
);

/* Progress bar */
const Progress = ({ pct, tone, height = 6, label }) => (
  <div>
    {label && (
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: THEME.textDim, marginBottom: 4 }}>
        <span>{label}</span>
        <span style={{ color: THEME.text, fontWeight: 600 }}>{pct}%</span>
      </div>
    )}
    <div style={{
      height, borderRadius: height / 2,
      background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)',
      overflow: 'hidden',
    }}>
      <div style={{
        height: '100%', width: pct + '%', borderRadius: height / 2,
        background: tone || `linear-gradient(90deg, ${THEME.success}, ${THEME.blue})`,
      }}/>
    </div>
  </div>
);

/* Section heading inside a screen */
const SectionLabel = ({ children, right, style = {} }) => (
  <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10, ...style }}>
    <span style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600 }}>{children}</span>
    <div style={{ flex: 1 }}/>
    {right}
  </div>
);

window.PageHeader = PageHeader;
window.Card = Card;
window.Stat = Stat;
window.Pill = Pill;
window.JurisdictionPill = JurisdictionPill;
window.StagePill = StagePill;
window.Segmented = Segmented;
window.TabStrip = TabStrip;
window.FilterChips = FilterChips;
window.Btn = Btn;
window.EmptyState = EmptyState;
window.Meta = Meta;
window.Avatar = Avatar;
window.Progress = Progress;
window.SectionLabel = SectionLabel;