// scene_reports.jsx — Reports dashboard in product shell + callout

function SceneReports() {
  const t = useTime();

  const confidenceRows = [
    { label: 'Teamwork',        high: 82, med: 12, low: 6, color: LC_GREEN },
    { label: 'Motivation',      high: 68, med: 22, low: 10, color: LC_PURPLE },
    { label: 'Problem Solving', high: 54, med: 30, low: 16, color: LC_ORANGE },
    { label: 'Resilience',      high: 77, med: 18, low: 5, color: LC_BLUE },
  ];

  const kpis = [
    { label: 'TOTAL SCORED', value: 63, color: LC_PURPLE },
    { label: 'COMPLETE',     value: 59, color: LC_BLUE, sub: '94% rate' },
    { label: 'AVG SCORE',    value: 62, suffix: '', color: LC_GREEN },
    { label: 'AGREEMENT',    value: 87, suffix: '%', color: LC_ORANGE },
    { label: 'CALIBRATION',  value: 10, suffix: '/10', color: '#8B5CF6', sub: 'calibrators' },
    { label: 'ADVERSE IMP.', value: 0,  suffix: '', color: LC_RED, sub: 'flagged' },
  ];

  const demoRows = [
    { group: 'Gender · Female',     rate: 89, flagged: false },
    { group: 'Gender · Male',       rate: 82, flagged: false },
    { group: 'Gender · Non-binary', rate: 78, flagged: true  },
    { group: 'IMD · Deciles 1–3',   rate: 74, flagged: true  },
    { group: 'IMD · Deciles 4–6',   rate: 81, flagged: false },
    { group: 'IMD · Deciles 7–10',  rate: 85, flagged: false },
  ];

  return (
    <>
      <PSShell
        breadcrumb={['Select', 'TalentScreen', 'Screen', 'Video Interview', 'Reports', 'Template']}
        title="Wildest Job Interview Ever: Can You Survive These Ridiculous Questions?"
        eyebrow="TEMPLATE PERFORMANCE DASHBOARD"
        icon="reports"
      >

        {/* Submenu */}
        <div style={{ position: 'absolute', left: 104, top: 172, zIndex: 1 }}>
          <PSSubmenu active="Reports"/>
        </div>

        {/* KPI row */}
        <div style={{
          position: 'absolute',
          left: 340, top: 172,
          display: 'flex', gap: 12,
        }}>
          {kpis.map((kpi, i) => {
            const kpiT = Easing.easeOutBack(clamp((t - 0.4 - i * 0.08) / 0.7, 0, 1));
            const countT = Easing.easeOutCubic(clamp((t - 0.6 - i * 0.08) / 1.1, 0, 1));
            const displayVal = Math.round(kpi.value * countT);
            return (
              <div key={i} style={{
                width: 180, height: 104,
                background: kpi.color,
                borderRadius: 12,
                padding: '14px 16px',
                opacity: clamp(kpiT, 0, 1),
                transform: `translateY(${(1 - clamp(kpiT, 0, 1)) * 16}px) scale(${0.94 + clamp(kpiT, 0, 1) * 0.06})`,
                boxShadow: `0 6px 20px ${kpi.color}30`,
                color: '#fff',
                overflow: 'hidden',
                position: 'relative',
              }}>
                <div style={{
                  position: 'absolute', right: -14, top: -14,
                  width: 60, height: 60, borderRadius: 30,
                  background: 'rgba(255,255,255,0.14)',
                }}/>
                <div style={{
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 10, fontWeight: 700,
                  color: 'rgba(255,255,255,0.9)',
                  letterSpacing: '0.12em',
                }}>{kpi.label}</div>
                <div style={{
                  marginTop: 6,
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 36, fontWeight: 700,
                  color: '#fff',
                  letterSpacing: '-0.03em',
                  fontVariantNumeric: 'tabular-nums',
                  lineHeight: 1,
                }}>{displayVal}{kpi.suffix || ''}</div>
                {kpi.sub && <div style={{
                  marginTop: 4,
                  fontFamily: 'Gilroy, sans-serif',
                  fontSize: 10, fontWeight: 500,
                  color: 'rgba(255,255,255,0.85)',
                }}>{kpi.sub}</div>}
              </div>
            );
          })}
        </div>

        {/* Scoring confidence panel */}
        <div style={{
          position: 'absolute',
          left: 340, top: 300,
          width: 560, height: 320,
          background: '#fff',
          borderRadius: 12,
          border: `1px solid ${LC_LINE}`,
          padding: '20px 24px',
          boxShadow: '0 1px 3px rgba(22,22,31,0.04)',
          opacity: Easing.easeOutCubic(clamp((t - 1.4) / 0.7, 0, 1)),
        }}>
          <div style={{
            fontFamily: 'Gilroy, sans-serif', fontSize: 14, fontWeight: 700, color: LC_INK,
          }}>Scoring Confidence</div>
          <div style={{
            fontFamily: 'Gilroy, sans-serif', fontSize: 10, fontWeight: 600,
            color: LC_INK_MUTED, letterSpacing: '0.12em',
            textTransform: 'uppercase', marginTop: 4, marginBottom: 20,
          }}>% Distribution — Higher is Better</div>
          {confidenceRows.map((row, i) => {
            const rT = Easing.easeOutCubic(clamp((t - 1.8 - i * 0.16) / 0.8, 0, 1));
            return (
              <div key={i} style={{
                marginBottom: 14, opacity: rT,
              }}>
                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  fontFamily: 'Gilroy, sans-serif', fontSize: 12, fontWeight: 600, color: LC_INK, marginBottom: 6,
                }}>
                  <span>{row.label}</span>
                  <span style={{ color: row.color, fontVariantNumeric: 'tabular-nums' }}>{Math.round(row.high * rT)}% High</span>
                </div>
                <div style={{
                  height: 10, borderRadius: 5,
                  background: LC_LINE,
                  overflow: 'hidden', display: 'flex',
                }}>
                  <div style={{ height: '100%', width: `${row.high * rT}%`, background: row.color }}/>
                  <div style={{ height: '100%', width: `${row.med * rT}%`, background: row.color + '88' }}/>
                  <div style={{ height: '100%', width: `${row.low * rT}%`, background: row.color + '44' }}/>
                </div>
              </div>
            );
          })}
        </div>

        {/* Candidate engagement */}
        <div style={{
          position: 'absolute',
          left: 920, top: 300,
          width: 560, height: 320,
          background: '#fff',
          borderRadius: 12,
          border: `1px solid ${LC_LINE}`,
          padding: '20px 24px',
          boxShadow: '0 1px 3px rgba(22,22,31,0.04)',
          opacity: Easing.easeOutCubic(clamp((t - 1.6) / 0.7, 0, 1)),
        }}>
          <div style={{
            fontFamily: 'Gilroy, sans-serif', fontSize: 14, fontWeight: 700, color: LC_INK, marginBottom: 16,
          }}>Candidate Engagement</div>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'center',
          }}>
            {/* Completion donut-ish */}
            <div>
              {(() => {
                const bigT = Easing.easeOutCubic(clamp((t - 2.2) / 1.2, 0, 1));
                const val = Math.round(43 * bigT);
                return (
                  <>
                    <div style={{
                      fontFamily: 'Gilroy, sans-serif', fontSize: 11, fontWeight: 600,
                      color: LC_INK_MUTED, letterSpacing: '0.12em',
                      textTransform: 'uppercase', marginBottom: 8,
                    }}>Completion Rate</div>
                    <div style={{
                      fontFamily: 'Gilroy, sans-serif',
                      fontSize: 62, fontWeight: 700,
                      color: LC_PURPLE,
                      letterSpacing: '-0.04em',
                      lineHeight: 1,
                      fontVariantNumeric: 'tabular-nums',
                    }}>{val}<span style={{ fontSize: 28, color: LC_PURPLE + 'aa' }}>%</span></div>
                    <div style={{
                      marginTop: 8,
                      fontFamily: 'Gilroy, sans-serif', fontSize: 12, fontWeight: 500, color: LC_INK_SOFT,
                    }}>15 of 35 sessions completed</div>
                  </>
                );
              })()}
            </div>
            <div>
              <div style={{ marginBottom: 14 }}>
                <div style={{
                  fontFamily: 'Gilroy, sans-serif', fontSize: 11, fontWeight: 600,
                  color: LC_INK_MUTED, letterSpacing: '0.12em',
                  textTransform: 'uppercase', marginBottom: 4,
                }}>Reasonable Adjustments</div>
                <div style={{
                  fontFamily: 'Gilroy, sans-serif', fontSize: 32, fontWeight: 700,
                  color: LC_INK, fontVariantNumeric: 'tabular-nums',
                  letterSpacing: '-0.03em', lineHeight: 1,
                }}>{Math.round(4 * Easing.easeOutCubic(clamp((t - 2.4) / 1.0, 0, 1)))}</div>
                <div style={{
                  marginTop: 4,
                  fontFamily: 'Gilroy, sans-serif', fontSize: 12, fontWeight: 500, color: LC_INK_SOFT,
                }}>candidates (RSRA)</div>
              </div>
              {(() => {
                const noteT = Easing.easeOutCubic(clamp((t - 3.0) / 0.6, 0, 1));
                return (
                  <div style={{
                    padding: '10px 12px',
                    borderRadius: 8,
                    background: LC_PURPLE_SOFT,
                    color: LC_PURPLE_DARK,
                    fontFamily: 'Gilroy, sans-serif',
                    fontSize: 11, fontWeight: 600,
                    opacity: noteT,
                    transform: `translateY(${(1 - noteT) * 8}px)`,
                  }}>
                    <div style={{ fontWeight: 700, marginBottom: 2 }}>AI Assistant</div>
                    <div style={{ fontWeight: 500, opacity: 0.85 }}>Using AI Assistant on the RA Insight</div>
                  </div>
                );
              })()}
            </div>
          </div>
        </div>

        {/* Adverse impact panel */}
        <div style={{
          position: 'absolute',
          left: 340, top: 640,
          width: 1140,
          background: '#fff',
          borderRadius: 12,
          border: `1px solid ${LC_LINE}`,
          padding: '20px 24px',
          boxShadow: '0 1px 3px rgba(22,22,31,0.04)',
          opacity: Easing.easeOutCubic(clamp((t - 2.8) / 0.7, 0, 1)),
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginBottom: 14,
          }}>
            <div style={{
              fontFamily: 'Gilroy, sans-serif', fontSize: 14, fontWeight: 700,
              color: LC_INK,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 11,
                background: LC_RED + '22', color: LC_RED,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 2.5v4M6 9h0"/></svg>
              </span>
              Adverse Impact Analysis
              <span style={{
                marginLeft: 8,
                padding: '3px 8px',
                borderRadius: 10,
                background: LC_RED + '22',
                color: LC_RED,
                fontFamily: 'Gilroy, sans-serif',
                fontSize: 10, fontWeight: 700,
                letterSpacing: '0.06em',
              }}>DETECTED</span>
            </div>
            <div style={{
              fontFamily: 'Gilroy, sans-serif', fontSize: 11, fontWeight: 500,
              color: LC_INK_MUTED, letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>4/5ths Rule · Baseline 90%</div>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr 1fr',
            gap: '12px 32px',
          }}>
            {demoRows.map((row, i) => {
              const rT = Easing.easeOutCubic(clamp((t - 3.2 - i * 0.1) / 0.6, 0, 1));
              return (
                <div key={i} style={{
                  padding: '10px 0',
                  opacity: rT,
                  transform: `translateX(${(1 - rT) * -12}px)`,
                }}>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between',
                    fontFamily: 'Gilroy, sans-serif', fontSize: 12, fontWeight: 600, color: LC_INK, marginBottom: 5,
                  }}>
                    <span>{row.group}</span>
                    <span style={{ color: row.flagged ? LC_ORANGE : LC_GREEN, fontVariantNumeric: 'tabular-nums' }}>{Math.round(row.rate * rT)}%</span>
                  </div>
                  <div style={{
                    height: 7, borderRadius: 3.5,
                    background: LC_LINE,
                    overflow: 'hidden',
                    position: 'relative',
                  }}>
                    <div style={{
                      position: 'absolute',
                      left: '80%', top: -1, bottom: -1, width: 1,
                      background: LC_INK_MUTED, opacity: 0.5,
                    }}/>
                    <div style={{
                      height: '100%',
                      width: `${row.rate * rT}%`,
                      background: row.flagged ? LC_ORANGE : LC_GREEN,
                      borderRadius: 3.5,
                    }}/>
                  </div>
                  {row.flagged && (() => {
                    const flagT = Easing.easeOutCubic(clamp((t - 4.6 - i * 0.1) / 0.5, 0, 1));
                    return (
                      <div style={{
                        marginTop: 6,
                        fontFamily: 'Gilroy, sans-serif',
                        fontSize: 10, fontWeight: 600,
                        color: LC_ORANGE,
                        opacity: flagT,
                        display: 'flex', alignItems: 'center', gap: 4,
                      }}>
                        <svg width="10" height="10" viewBox="0 0 10 10" fill={LC_ORANGE}><path d="M5 1L1 9h8z" stroke={LC_ORANGE}/></svg>
                        Below 80% threshold — review pipeline
                      </div>
                    );
                  })()}
                </div>
              );
            })}
          </div>
        </div>

      </PSShell>

      {/* Callout: exec reviewing results */}
      <PSCallout
        src="assets/callouts/callout4.png"
        side="right"
        heightPx={740}
        bubbleTop={220}
        appear={4.2}
        bubbleDelay={0.8}
        bubble={{
          label: 'CHIEF PEOPLE OFFICER · JAMES',
          text: '"The adverse impact panel pays for itself. We caught a flagged group before we hired a single person."',
          meta: 'Professional Services · 5,000 FTE',
        }}
      />
    </>
  );
}

Object.assign(window, { SceneReports });