/* spec-shared.jsx — spec-specific primitives for Shopify Theme Spec (F2)
   Loaded after ds-shared.jsx + ds-components.jsx — do NOT redefine T, S, R, Z, M,
   Section, Sub, Note, Wordmark (those come from ds-shared).
*/

/* ── Spec-specific primitives ───────────────────────────── */

const FileTag = ({ children, dimmed }) => (
  <span className="mono" style={{
    display:'inline-block', padding:`3px 8px`,
    background: dimmed ? T.n200 : T.ink, color: dimmed ? T.n500 : T.bone,
    fontSize:10, letterSpacing:'.12em',
  }}>{children}</span>
);

const DevNote = ({ children }) => (
  <div className="mono" style={{
    fontSize:10, letterSpacing:'.14em', textTransform:'uppercase',
    color:T.neon, marginTop:S[3], paddingLeft:S[3],
    borderLeft:`2px solid ${T.neon}`,
  }}>{children}</div>
);

const Rule = ({ no, title, children, status = 'required' }) => {
  const statusColor = { required:T.ink, recommended:T.n500, optional:T.n400 }[status];
  return (
    <div style={{ display:'grid', gridTemplateColumns:'48px 1fr auto', gap:S[4], padding:`${S[4]}px ${S[5]}px`, borderBottom:`1px solid ${T.n200}`, alignItems:'baseline', background:T.paper }}>
      <span className="mono" style={{ fontSize:11, letterSpacing:'.12em', opacity:.4 }}>R{no}</span>
      <div>
        <div style={{ fontWeight:700, fontSize:14, marginBottom:3 }}>{title}</div>
        <div style={{ fontSize:13, color:T.n500, lineHeight:1.5 }}>{children}</div>
      </div>
      <span className="mono" style={{ fontSize:9, letterSpacing:'.2em', textTransform:'uppercase', color:statusColor, whiteSpace:'nowrap' }}>{status}</span>
    </div>
  );
};

const SchemaRow = ({ name, type, label, info, options }) => (
  <div style={{
    display:'grid', gridTemplateColumns:'1fr 80px 1fr 1fr',
    padding:`${S[3]}px ${S[5]}px`, borderBottom:`1px solid ${T.n200}`,
    background:T.paper, alignItems:'baseline', gap:S[3],
  }}>
    <span className="mono" style={{ fontSize:11, letterSpacing:'.08em', color:T.neon }}>{name}</span>
    <span className="mono" style={{ fontSize:10, letterSpacing:'.12em', textTransform:'uppercase', opacity:.6 }}>{type}</span>
    <span style={{ fontSize:13, color:T.ink }}>{label}</span>
    <span style={{ fontSize:12, color:T.n500 }}>{options || info || '—'}</span>
  </div>
);

const SchemaHeader = () => (
  <div style={{
    display:'grid', gridTemplateColumns:'1fr 80px 1fr 1fr',
    padding:`${S[2]}px ${S[5]}px`, background:T.bone2,
    borderBottom:`1px solid ${T.ink}`, gap:S[3],
  }}>
    {['id', 'type', 'label', 'options / default'].map(h => (
      <span key={h} className="mono" style={{ fontSize:9, letterSpacing:'.2em', textTransform:'uppercase', opacity:.6 }}>{h}</span>
    ))}
  </div>
);

const LayoutDiagram = ({ children, label }) => (
  <div style={{ border:`1px solid ${T.ink}`, background:T.paper }}>
    <div style={{ padding:S[5] }}>{children}</div>
    {label && (
      <div className="mono" style={{
        borderTop:`1px solid ${T.n200}`, padding:`${S[2]}px ${S[4]}px`,
        fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:T.n500,
      }}>{label}</div>
    )}
  </div>
);

const Box = ({ label, h = 40, bg = T.n200, ink = T.n500, flex, mono }) => (
  <div style={{
    height:h, flex, minWidth:0, background:bg, color:ink,
    display:'flex', alignItems:'center', justifyContent:'center',
    fontSize: mono ? 10 : 12, fontFamily: mono ? 'JetBrains Mono, monospace' : 'inherit',
    letterSpacing: mono ? '.12em' : '.01em',
    textTransform: mono ? 'uppercase' : 'none',
    border:`1px dashed ${T.n300}`,
  }}>{label}</div>
);

/* ── TokenRef — annotates live components with exact values ── */
/*
  Usage:
  <TokenRef rows={[
    { prop: 'background',   token: 'T.bone2',   css: '--color-bone2',   val: '#ebe8e0' },
    { prop: 'gap',          token: 'S[5]',       css: '--space-5',       val: '24px'   },
    { prop: 'transition',   token: 'M.base',     css: '--dur-base',      val: '200ms cubic-bezier(.2,.8,.2,1)' },
  ]}/>
*/
const TokenRef = ({ rows, label }) => (
  <div style={{ marginTop:S[3], border:`1px solid ${T.ink}` }}>
    <div style={{
      display:'grid', gridTemplateColumns:'140px 100px 180px 1fr',
      padding:`${S[1]}px ${S[4]}px`, background:T.ink, gap:S[3],
    }}>
      {['property', 'DS token', 'CSS var', 'value'].map(h => (
        <span key={h} className="mono" style={{ fontSize:9, letterSpacing:'.2em', textTransform:'uppercase', color:T.n400 }}>{h}</span>
      ))}
    </div>
    {rows.map(({ prop, token, css, val, swatch }, i) => (
      <div key={i} style={{
        display:'grid', gridTemplateColumns:'140px 100px 180px 1fr',
        padding:`${S[2]}px ${S[4]}px`, gap:S[3], alignItems:'center',
        borderTop:`1px solid ${T.n200}`,
        background: i % 2 === 0 ? T.paper : T.n100,
      }}>
        <span style={{ fontSize:12, fontWeight:700, color:T.n500 }}>{prop}</span>
        <span className="mono" style={{ fontSize:11, letterSpacing:'.06em', color:T.neon }}>{token}</span>
        <span className="mono" style={{ fontSize:10, letterSpacing:'.06em', color:T.n400 }}>{css}</span>
        <div style={{ display:'flex', alignItems:'center', gap:S[2] }}>
          {swatch && <span style={{ display:'inline-block', width:14, height:14, background:swatch, border:`1px solid ${T.n300}`, flexShrink:0 }}/>}
          <span className="mono" style={{ fontSize:11, letterSpacing:'.06em', color:T.ink }}>{val}</span>
        </div>
      </div>
    ))}
  </div>
);

Object.assign(window, {
  T, S, R, Z, M,
  Wordmark, Section, Sub, Note,
  FileTag, DevNote, Rule, SchemaRow, SchemaHeader, LayoutDiagram, Box, TokenRef,
});