// scene5_dashboard.jsx — Manager guidance view assembles itself

function Scene5Dashboard() {
  const { localTime, duration } = useSprite();

  const titleP = clamp(localTime / 0.5, 0, 1);
  const shellP = clamp((localTime - 0.3) / 0.8, 0, 1);
  const rowsP  = clamp((localTime - 1.0) / 2.2, 0, 1);
  const enterP = clamp(localTime / 1.5, 0, 1);          // scene fade-in 0 → 1.5s
  const exitP  = clamp((localTime - 12.7) / 1.5, 0, 1); // scene fade-out 12.7 → 14.2s

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: ASI_COLORS.canvas, overflow: 'hidden',
      opacity: enterP * (1 - exitP),
      transform: `translateY(${-exitP * 140}px)`, // exit: slide up
    }}>
      {/* Title */}
      <div style={{
        position:'absolute', top: 56, left: 96, right: 96,
        display:'flex', alignItems:'baseline', gap: 20,
        opacity: titleP,
      }}>
        <div style={{
          fontSize: 16, fontWeight: 600, letterSpacing: '0.06em',
          textTransform: 'uppercase', color: ASI_COLORS.accent,
        }}>Manager guidance view</div>
        <div style={{
          fontSize: 44, fontWeight: 600, letterSpacing: '-0.02em',
          color: ASI_COLORS.ink,
        }}>Every employee · a recommendation and a range</div>
      </div>

      {/* Dashboard shell */}
      <div style={{
        position:'absolute', top: 130, left: 96, right: 96, bottom: 70,
        background:'#fff', borderRadius: 18,
        boxShadow: '0 2px 8px rgba(0,0,0,0.04), 0 20px 48px rgba(0,0,0,0.06)',
        opacity: shellP,
        transform: `translateY(${(1-shellP)*20}px)`,
        display:'flex', flexDirection:'column',
        overflow:'hidden',
      }}>
        {/* Header strip */}
        <div style={{
          padding:'18px 28px', display:'flex', alignItems:'center', gap: 16,
          borderBottom: `1px solid ${ASI_COLORS.line}`,
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 6,
            background: ASI_COLORS.accent, color:'#fff',
            display:'grid', placeItems:'center',
            fontSize: 20, fontWeight: 700, letterSpacing:'-0.02em',
          }}>W</div>
          <div style={{ fontSize: 20, fontWeight: 600, color: ASI_COLORS.ink }}>
            ASI 2026 · France · Cycle closes 30 Apr
          </div>
          <span style={{ flex: 1 }}/>
          <Pill tone="accent" size={11}>1,284 employees</Pill>
          <Pill tone="safe" size={11}>Budget on target</Pill>
        </div>

        {/* Table */}
        <div style={{ flex: 1, overflow:'hidden' }}>
          <GuidanceTable rowsP={rowsP}/>
        </div>
      </div>
    </div>
  );
}

const GUIDANCE_ROWS = [
  { id:'E-048129', name:'Aarav Shah',     org:'Eng · Platform',  tier:'High',  base:118400, compa:0.94, rec:4.08, min:3.40, max:4.80, status:['safe','In range'] },
  { id:'E-081423', name:'Ife Adeyemi',    org:'Eng · Security',  tier:'High',  base: 88300, compa:0.82, rec:5.57, min:4.80, max:6.20, status:['risk','Below range · raise'] },
  { id:'E-029845', name:'Jonas Müller',   org:'Design',          tier:'Meets', base:212500, compa:1.21, rec:1.12, min:0.75, max:1.50, status:['warn','Above range · hold'] },
  { id:'E-054672', name:'Priya Naidu',    org:'Data · Analytics',tier:'Meets', base: 94000, compa:1.08, rec:2.38, min:2.00, max:2.80, status:['safe','In range'] },
  { id:'E-117903', name:'Sofía Restrepo', org:'Product',         tier:'Low',   base:142800, compa:1.02, rec:1.32, min:0.80, max:1.80, status:['neutral','Hold'] },
  { id:'E-098112', name:'Kenji Watanabe', org:'Eng · Infra',     tier:'High',  base:198300, compa:0.88, rec:4.90, min:4.20, max:5.60, status:['warn','Near range'] },
];

function GuidanceTable({ rowsP }) {
  // Wider, more evenly-spaced columns so Compa / Recommended / Allowed range
  // breathe instead of crowding each other.
  const headers = [
    { label: 'Employee',      w: '2.0fr' },
    { label: 'Tier',          w: '0.8fr' },
    { label: 'Base',          w: '1.1fr', num: true },
    { label: 'Compa',         w: '0.9fr', num: true },
    { label: 'Recommended',   w: '1.2fr', num: true, accent: true },
    { label: 'Allowed range', w: '1.7fr', accent: true },
    { label: 'Status',        w: '1.3fr' },
  ];
  return (
    <div style={{
      fontFamily: 'Inter, sans-serif',
      fontSize: 20, color: ASI_COLORS.ink,
      fontVariantNumeric: 'tabular-nums',
    }}>
      {/* Header row */}
      <div style={{
        display:'grid',
        gridTemplateColumns: headers.map(h => h.w).join(' '),
        gap: 0,
        padding:'12px 28px',
        background: ASI_COLORS.paper,
        fontSize: 16, fontWeight: 600, letterSpacing:'0.04em',
        textTransform:'uppercase', color: ASI_COLORS.inkMuted,
      }}>
        {headers.map((h,i) => (
          <div key={i} style={{
            textAlign: h.num ? 'right' : 'left',
            color: h.accent ? ASI_COLORS.accent : ASI_COLORS.inkMuted,
            paddingRight: h.num ? 12 : 0,
          }}>{h.label}</div>
        ))}
      </div>

      {/* Body rows */}
      {GUIDANCE_ROWS.map((r, i) => {
        const rowP = clamp(rowsP * (GUIDANCE_ROWS.length + 2) - i, 0, 1);
        const ease = Easing.easeOutCubic(rowP);
        const opacity = ease;
        const ty = (1-ease) * 12;
        return (
          <div key={r.id} style={{
            display:'grid',
            gridTemplateColumns: headers.map(h => h.w).join(' '),
            padding:'14px 28px',
            alignItems:'center',
            borderBottom: `1px solid ${ASI_COLORS.line}`,
            opacity, transform:`translateY(${ty}px)`,
          }}>
            {/* Employee */}
            <div>
              <div style={{ fontSize: 20, fontWeight: 600 }}>{r.name}</div>
              <div style={{ fontSize: 16, color: ASI_COLORS.inkMuted, marginTop: 2 }}>
                {r.id} · {r.org}
              </div>
            </div>
            {/* Tier */}
            <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
              <TierGlyph tier={r.tier} size={14}/>
              <span style={{ fontSize: 20 }}>{r.tier}</span>
            </div>
            {/* Base */}
            <div style={{ textAlign:'right', paddingRight: 12 }}>
              ${r.base.toLocaleString()}
            </div>
            {/* Compa */}
            <div style={{ textAlign:'right', paddingRight: 12,
                          color: r.compa < 0.9 ? ASI_COLORS.risk
                               : r.compa > 1.1 ? ASI_COLORS.warn : ASI_COLORS.ink }}>
              {r.compa.toFixed(2)}
            </div>
            {/* Recommended */}
            <div style={{
              textAlign:'right', paddingRight: 12,
              fontWeight: 700, color: ASI_COLORS.accent, fontSize: 20,
            }}>{r.rec.toFixed(2)}%</div>
            {/* Allowed range — mini slider */}
            <div style={{ paddingRight: 20 }}>
              <AllowedRange min={r.min} max={r.max} rec={r.rec} p={rowP}/>
            </div>
            {/* Status */}
            <div>
              <Pill tone={r.status[0]} size={11}>{r.status[1]}</Pill>
            </div>
          </div>
        );
      })}

      {/* Footer summary */}
      <div style={{
        padding: '14px 28px',
        display:'flex', alignItems:'center', gap: 24,
        fontSize: 20, color: ASI_COLORS.inkSoft,
        opacity: clamp(rowsP - 0.6, 0, 1),
      }}>
        <span><strong style={{color: ASI_COLORS.ink}}>Matrix anchor</strong> 3.30% · France MKT_P50</span>
        <span style={{ color: ASI_COLORS.line }}>|</span>
        <span><strong style={{color: ASI_COLORS.ink}}>Scale factor</strong> 0.954×</span>
        <span style={{ color: ASI_COLORS.line }}>|</span>
        <span><strong style={{color: ASI_COLORS.ink}}>12</strong> below-range flagged for central review</span>
        <span style={{ flex: 1 }}/>
        <span style={{ fontSize: 16, fontWeight:600, letterSpacing:'0.04em',
                       textTransform:'uppercase', color: ASI_COLORS.accent }}>
          Upload to Oracle →
        </span>
      </div>
    </div>
  );
}

function AllowedRange({ min, max, rec, p }) {
  // Clean flanking layout: [min] [━━colored bar━━] [max]
  // Numbers sit inline on either side of the bar — no absolute positioning,
  // no floating labels, no clipping or overlap.
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      fontVariantNumeric: 'tabular-nums',
      paddingRight: 8,
    }}>
      <span style={{
        fontSize: 17, fontWeight: 500, color: ASI_COLORS.inkMuted,
        whiteSpace: 'nowrap', minWidth: 28, textAlign: 'right',
      }}>{min.toFixed(1)}</span>

      {/* Band bar — grows in with row appear progress */}
      <div style={{
        flex: 1, height: 5, borderRadius: 3,
        background: ASI_COLORS.accentTint,
        opacity: 0.55 + 0.45 * p,
        minWidth: 24,
      }}/>

      <span style={{
        fontSize: 17, fontWeight: 500, color: ASI_COLORS.inkMuted,
        whiteSpace: 'nowrap', minWidth: 28,
      }}>{max.toFixed(1)}</span>
    </div>
  );
}

Object.assign(window, { Scene5Dashboard, GUIDANCE_ROWS });