// bu/bu9-rail.jsx — ブラッシュアップ版の左固定カード
//  順序：状態（アイコン＋語＋補足文／面談準備の状況）→ 今回1on1 → 総合スコアと推移
const { P } = window.V4;
const { Face } = window;
const { MiniTrend, S8, R8 } = window.V8;
const { T } = window.BU9;

function SecBU({ label, right, children }) {
  return (
    <div style={{ padding: '19px 22px 20px', borderTop: `1px solid ${P.line}` }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 11 }}>
        <span className="lbl8" style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: T.micro, fontWeight: 800, color: P.muted, letterSpacing: '.12em' }}>{label}</span>
        {right}
      </div>
      {children}
    </div>
  );
}

const StateGlyph = ({ state, c }) => {
  const g = { attn: <path d="M8 1.8l6.2 12H1.8z" />, follow: <><circle cx="8" cy="8" r="6.4" /><path d="M8 5v4.2M8 11.4h.01" /></>, nodata: <><circle cx="8" cy="8" r="6.4" strokeDasharray="2.6 2.6" /><path d="M5.4 8h5.2" /></>, plain: <circle cx="8" cy="8" r="5.6" /> }[state];
  return <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>{g}</svg>;
};

const BTN = {
  primary: { padding: '13px 0', fontSize: T.body, width: '100%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, whiteSpace: 'nowrap' },
  second: { padding: '11px 0', fontSize: T.sub, width: '100%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7, whiteSpace: 'nowrap' },
};
const PenIcon = () => <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M11.5 2.5l2 2L5 13l-2.7.7.7-2.7z" strokeLinecap="round" strokeLinejoin="round" /></svg>;

function RailBU({ state = 'attn', rounds = R8.rounds, score = R8.score, delta = R8.delta, daysAgo = 39, id = 'bu', name = 'B班 副班長L', prepReady = false, prepN = 0, onPrep, onRecord }) {
  const t = S8[state];
  const nodata = state === 'nodata';
  return (
    <div style={{ background: '#fff', borderRadius: 16, border: `1px solid ${P.line}`, boxShadow: '0 1px 2px rgba(18,22,30,.05), 0 14px 32px -20px rgba(18,22,30,.2)', overflow: 'hidden', width: 296, flexShrink: 0 }}>
      <div style={{ padding: '24px 22px 20px', textAlign: 'center', background: t.head }}>
        <div style={{ display: 'flex', justifyContent: 'center' }}><Face size={60} /></div>
        <div style={{ fontSize: 18, fontWeight: 800, color: P.ink, marginTop: 12 }}>{name}</div>
        <div style={{ fontSize: T.sub, color: P.muted, marginTop: 6, lineHeight: 1.7 }}>2部 ・ L / 副班長<br />勤続 3年11ヶ月</div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 9 }}>
          <span style={{ fontSize: T.micro, color: P.muted }}>担当者</span>
          <span style={{ fontSize: T.sub, fontWeight: 700, color: P.ink2 }}>B班 班長</span>
          <button className="quiet" aria-label="担当者を編集" style={{ width: 22, height: 22, borderRadius: 7, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: 0, background: 'rgba(255,255,255,.7)' }}>
            <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M11.3 2.2l2.5 2.5L5.5 13H3v-2.5l8.3-8.3z"></path></svg>
          </button>
        </div>
      </div>

      <SecBU label="総合スコア">
        {nodata ? (
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 9 }}>
            <span className="tnum" style={{ fontSize: 32, fontWeight: 800, lineHeight: 1, color: P.ghost }}>—</span>
            <span style={{ fontSize: T.sub, fontWeight: 700, color: P.muted }}>今回は未回答</span>
          </div>
        ) : (
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
            <span style={{ display: 'flex', alignItems: 'baseline', gap: 5 }}>
              <span className="tnum" style={{ fontSize: 36, fontWeight: 800, lineHeight: 1, color: P.ink, letterSpacing: '-.01em' }}>{score.toFixed(1)}</span>
              <span className="tnum" style={{ fontSize: T.sub, fontWeight: 600, color: P.muted }}>/ 5.0</span>
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6, whiteSpace: 'nowrap' }}>
              <span style={{ fontSize: T.micro, fontWeight: 700, color: P.muted }}>前回比</span>
              <span className="tnum" style={{ fontSize: 20, fontWeight: 800, color: delta > 0 ? P.up : delta < 0 ? P.down : P.muted, letterSpacing: '-.01em' }}>{delta === 0 ? '±0' : (delta > 0 ? '+' : '−') + Math.abs(delta)}</span>
            </span>
          </div>
        )}
        <div style={{ marginTop: 8 }}><MiniTrend rounds={rounds} w={244} h={74} id={id} sparse /></div>
      </SecBU>

      <SecBU label="今回1on1">
        <div style={{ fontSize: T.title, fontWeight: 800, color: P.down }}>未実施</div>
        <div className="tnum" style={{ fontSize: T.sub, fontWeight: 600, color: P.muted, marginTop: 6 }}>前回 2026/05/15（{daysAgo}日前）</div>
      </SecBU>

      <div style={{ padding: '18px 22px 20px', borderTop: `1px solid ${P.line}`, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {prepReady ? (
          <>
            <button className="act" style={BTN.primary} onClick={onRecord}><PenIcon />実施記録を登録</button>
            <button className="quiet" style={BTN.second} onClick={onPrep}>面談準備を見直す（質問 {prepN}件）</button>
          </>
        ) : (
          <>
            <button className="act" style={BTN.primary} onClick={onPrep}>面談準備をする</button>
            <button className="quiet" style={BTN.second} onClick={onRecord}><PenIcon />実施記録を登録</button>
          </>
        )}
        <button className="tlnk" style={{ fontSize: T.sub, margin: '3px auto 0' }}>プロフィール詳細</button>
      </div>
    </div>
  );
}

// 確認ポイントの見出しタブ：状態ラベルは左レールから移し、白いピル（アイコン＋語）で示す
function TabBU({ title = '今回の確認ポイント', state = 'attn', n }) {
  const t = S8[state];
  return (
    <span style={{ background: '#2b3446', borderRadius: 12, boxShadow: '0 4px 10px -5px rgba(18,22,30,.3)', display: 'inline-flex', alignItems: 'center', gap: 15, padding: '11px 15px 11px 24px' }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
        <svg width="19" height="19" viewBox="0 0 24 24" aria-hidden="true" style={{ display: 'block', flexShrink: 0 }}><path d="M4.4 12.6l5 5L19.8 6.6" stroke="#fff" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
        <span style={{ fontSize: T.title, fontWeight: 800, color: '#fff', letterSpacing: '.1em', whiteSpace: 'nowrap' }}>{title}</span>
      </span>
      {n != null && <>
        <span style={{ width: 1, height: 18, background: 'rgba(255,255,255,.26)' }}></span>
        <span className="tnum" style={{ display: 'inline-flex', alignItems: 'baseline', gap: 1, color: '#fff' }}>
          <span style={{ fontSize: 20, fontWeight: 800, lineHeight: 1, letterSpacing: '-.01em' }}>{n}</span>
          <span style={{ fontSize: T.sub, fontWeight: 800 }}>件</span>
        </span>
      </>}
      {t.label && (
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 13px', borderRadius: 20, background: '#fff', border: `1px solid ${t.line}` }}>
          <StateGlyph state={state} c={t.fg} />
          <span style={{ fontSize: T.body, fontWeight: 800, color: t.fg, letterSpacing: '.01em', whiteSpace: 'nowrap' }}>{t.label}</span>
        </span>
      )}
    </span>
  );
}

Object.assign(window, { RailBU, SecBU, StateGlyph, TabBU });