/* Coaching Copilot panel — two tabs:
   Scorecard (gauge + trend, percentile/benchmark, rubric) and Coaching (sentiment, top
   priority, compliance checklist, live coaching feed, summary). All data is from Cognigy. */
const { useState: useStateCo, useEffect: useEffectCo, useRef: useRefCo } = React;
const SC = window.Scoring;

/* 270° gauge ring */
function Gauge({ value, color, grade }) {
  const r = 58, cx = 72, cy = 72, C = 2 * Math.PI * r, track = 0.75 * C;
  const val = Math.max(0, Math.min(100, value));
  const disp = useCountUp(val);
  return (
    <div className="gauge">
      <svg viewBox="0 0 144 144" width="158" height="158">
        <circle cx={cx} cy={cy} r={r} className="gauge-track" fill="none" strokeWidth="13"
          strokeLinecap="round" strokeDasharray={`${track} ${C}`} transform={`rotate(135 ${cx} ${cy})`} />
        <circle cx={cx} cy={cy} r={r} fill="none" strokeWidth="13" stroke={color}
          strokeLinecap="round" strokeDasharray={`${(val / 100) * track} ${C}`}
          transform={`rotate(135 ${cx} ${cy})`} style={{ transition: 'stroke-dasharray .7s var(--ease), stroke .4s var(--ease)' }} />
      </svg>
      <div className="gauge-center">
        <div className="gauge-num">{disp}</div>
        <div className="gauge-grade" style={{ color }}>Grade {grade}</div>
      </div>
    </div>
  );
}

function useCountUp(target) {
  const [v, setV] = useStateCo(target);
  const ref = useRefCo(target);
  useEffectCo(() => {
    const from = ref.current, to = target, t0 = performance.now(), dur = 650;
    let raf;
    const tick = (t) => {
      const k = Math.min(1, (t - t0) / dur), e = 1 - Math.pow(1 - k, 3);
      setV(Math.round(from + (to - from) * e));
      if (k < 1) raf = requestAnimationFrame(tick); else ref.current = to;
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  return v;
}

function Benchmark({ composite, percentile, benchmarks }) {
  const ordinal = (n) => { const s = ['th', 'st', 'nd', 'rd'], v = n % 100; return n + (s[(v - 20) % 10] || s[v] || s[0]); };
  return (
    <div className="cp-sec">
      <div className="lab">Percentile rank</div>
      <div className="pct-head">
        <div className="pct-num">{ordinal(percentile)}</div>
        <div className="pct-sub">percentile<br />vs. peers</div>
      </div>
      <div className="bench-track">
        <div className="bench-fill" style={{ width: composite + '%' }}></div>
        <Tick pos={benchmarks.teamAverage} label="Team avg" />
        <Tick pos={benchmarks.topPerformer} label="Top" />
        <div className="bench-dot" style={{ left: composite + '%' }} title={'Composite ' + composite}></div>
      </div>
      <div className="bench-cap"><Icon name="groups" size={13} style={{ color: 'var(--fg3)' }} />
        Synthetic peer model · n={SC.PEER.n.toLocaleString()} Assurant claims agents</div>
    </div>
  );
}
function Tick({ pos, label }) {
  return (<div className="bench-tick" style={{ left: pos + '%' }}><span className="tk-line"></span><span className="tk-lab">{label}</span></div>);
}

function Rubric({ dimensions }) {
  return (
    <div className="cp-sec">
      <div className="lab">Coaching rubric</div>
      {dimensions.map(d => (
        <div className="rub" key={d.key}>
          <div className="rub-top">
            <span className="rub-label">
              {d.key === 'compliance' && <Icon name="shield" size={14} style={{ color: 'var(--electric-indigo)' }} />}
              {d.label}
            </span>
            <span className="rub-right">
              <span className="rub-weight">{Math.round(d.weight * 100)}%</span>
              <span className="rub-score" style={{ color: SC.scoreColor(d.score) }}>{d.score}</span>
            </span>
          </div>
          <div className="rub-bar"><div className="rub-fill" style={{ width: d.score + '%', background: SC.scoreColor(d.score) }}></div></div>
          {d.note && <div className="rub-note">{d.note}</div>}
        </div>
      ))}
    </div>
  );
}

function SentimentBanner({ sentiment }) {
  if (!sentiment) return null;
  const color = sentiment.trend === 'improving' ? 'var(--emerald)' : sentiment.trend === 'declining' ? 'var(--coral)' : 'var(--fg2)';
  const arrow = sentiment.trend === 'improving' ? '↑' : sentiment.trend === 'declining' ? '↓' : '→';
  return (
    <div className="sentiment-banner" style={{ borderLeftColor: color }}>
      <div><div className="sent-cap">Customer sentiment</div><div className="sent-emo">{sentiment.label}</div></div>
      <div className="sent-trend" style={{ color }}>{arrow} {sentiment.trend}</div>
    </div>
  );
}

function TopPriority({ text }) {
  if (!text) return null;
  return (
    <div className="top-priority">
      <div className="tp-lab"><Icon name="target" size={13} />Top priority now</div>
      <div className="tp-text">{text}</div>
    </div>
  );
}

function ComplianceFlags({ flags }) {
  if (!flags || !flags.length) return null;
  const icon = s => s === 'pass' ? 'check_circle' : s === 'fail' ? 'warning' : 'shield';
  const color = s => s === 'pass' ? 'var(--emerald)' : s === 'fail' ? 'var(--coral)' : '#c98a00';
  return (
    <div className="cp-sec">
      <div className="lab">Compliance checklist</div>
      {flags.map((f, i) => (
        <div className="flag-row" key={i}>
          <Icon name={icon(f.status)} size={16} style={{ color: color(f.status), flex: 'none' }} />
          <span className="flag-label">{f.label}</span>
          <span className="flag-status" style={{ color: color(f.status) }}>{f.status}</span>
        </div>
      ))}
    </div>
  );
}

function CoachingFeed({ coaching }) {
  if (!coaching || !coaching.length) return null;
  const sevColor = { high: 'var(--coral)', medium: 'var(--nice-blue)', low: 'var(--teal)' };
  return (
    <div className="cp-sec">
      <div className="lab">Live coaching</div>
      {coaching.map((c, i) => c.type === 'nba' ? (
        <div className="nba-card" key={i}>
          <Icon name="bolt" size={20} style={{ color: 'var(--nice-blue)', flex: 'none' }} />
          <div><div className="nba-lab">Next best action</div><div className="nba-text">{c.text}</div>
            {c.suggestedReply && <div className="nba-quote">“{c.suggestedReply}”</div>}</div>
        </div>
      ) : (
        <div className="nudge" key={i} style={{ borderLeftColor: sevColor[c.severity] || 'var(--nice-blue)' }}>
          <Icon name={c.severity === 'high' ? 'warning' : 'auto_awesome'} size={17}
            style={{ color: sevColor[c.severity] || 'var(--nice-blue)', flex: 'none', marginTop: 1 }} />
          <div><div className="nudge-text">{c.text}</div>
            {c.suggestedReply && <div className="nudge-quote">“{c.suggestedReply}”</div>}</div>
        </div>
      ))}
    </div>
  );
}

function Summary({ summary }) {
  if (!summary || (!summary.strengths?.length && !summary.growth?.length)) return null;
  return (
    <div className="cp-sec summary-sec">
      <div className="lab">Interaction summary</div>
      {summary.strengths?.map((s, i) => (
        <div className="sum-row" key={'s' + i}><Icon name="check_circle" size={16} style={{ color: 'var(--emerald)', flex: 'none' }} /><span>{s}</span></div>
      ))}
      {summary.growth?.map((g, i) => (
        <div className="sum-row" key={'g' + i}><Icon name="flag" size={16} style={{ color: 'var(--coral)', flex: 'none' }} /><span>{g}</span></div>
      ))}
    </div>
  );
}

function Tabs({ active, onChange, scoreBadge, coachBadge }) {
  return (
    <div className="cp-tabs">
      <button className={'cp-tab' + (active === 'coaching' ? ' active' : '')} onClick={() => onChange('coaching')}>
        <Icon name="school" size={16} />Coaching{coachBadge > 0 && <span className="cp-tab-badge">{coachBadge}</span>}
      </button>
      <button className={'cp-tab' + (active === 'scorecard' ? ' active' : '')} onClick={() => onChange('scorecard')}>
        <Icon name="insights" size={16} />Scorecard{scoreBadge > 0 && <span className="cp-tab-badge">{scoreBadge}</span>}
      </button>
    </div>
  );
}

/* Scorecard = the assessment: how this interaction is scoring (gauge, rank, rubric,
   compliance status, and the QA wrap-up). */
function ScorecardTab({ score, delta }) {
  return (
    <div className="cp-tabcontent">
      <div className="cp-sec gauge-sec">
        <Gauge value={score.composite} color={SC.scoreColor(score.composite)} grade={score.grade} />
        {delta != null && delta !== 0 && (
          <div className="gauge-trend" style={{ color: delta > 0 ? 'var(--emerald)' : 'var(--coral)' }}>
            {delta > 0 ? '▲' : '▼'} {Math.abs(delta)} <span>vs. last turn</span>
          </div>
        )}
      </div>
      <Benchmark composite={score.composite} percentile={score.percentile} benchmarks={score.benchmarks} />
      <Rubric dimensions={score.dimensions} />
      <ComplianceFlags flags={score.complianceFlags} />
      <Summary summary={score.summary} />
    </div>
  );
}

/* Coaching = real-time action: situational read + the single next move + live guidance. */
function CoachingTab({ score }) {
  const hasHeader = score.customerSentiment || score.topPriority;
  return (
    <div className="cp-tabcontent">
      {hasHeader && (
        <div className="cp-sec">
          <SentimentBanner sentiment={score.customerSentiment} />
          <TopPriority text={score.topPriority} />
        </div>
      )}
      <CoachingFeed coaching={score.coaching} />
    </div>
  );
}

function Coaching({ score, mode, busy, error }) {
  const [tab, setTab] = useStateCo('coaching');

  // score trend: remember the last composite, expose the delta until it next changes
  const lastComposite = useRefCo(null);
  const deltaRef = useRefCo(null);
  if (!score) { lastComposite.current = null; deltaRef.current = null; }
  else if (score.composite !== lastComposite.current) {
    deltaRef.current = lastComposite.current == null ? null : score.composite - lastComposite.current;
    lastComposite.current = score.composite;
  }
  const delta = score ? deltaRef.current : null;

  // Per-tab badges so a count always points to content on its own tab.
  const scoreBadge = score && score.complianceFlags ? score.complianceFlags.filter(f => f.status === 'fail').length : 0; // compliance fails (Scorecard)
  const coachBadge = score && score.coaching ? score.coaching.filter(c => c.type === 'nudge' && c.severity === 'high').length : 0; // urgent nudges (Coaching)

  return (
    <aside className="copilot coaching-panel">
      <div className="cp-hero">
        <div className="badge"><Icon name="school" size={20} /></div>
        <div>
          <h3>Coaching Copilot</h3>
          <p>Scored live by Cognigy · Sonnet 4.6</p>
        </div>
        {score && <div className="band-pill" style={{ background: SC.scoreColor(score.composite) }}>{score.band}</div>}
      </div>

      {error && <div className="cp-error"><Icon name="warning" size={16} />{error}</div>}

      {!score ? (
        busy ? (
          <div className="cp-empty">
            <div className="pulse"><span className="spinner spinner--lg"></span></div>
            <p>Scoring with Cognigy…</p>
            <span>Evaluating the agent’s turn against the rubric.</span>
          </div>
        ) : (
          <div className="cp-empty">
            <div className="pulse"><Icon name="auto_awesome" size={26} style={{ color: 'var(--nice-blue)' }} /></div>
            <p>Listening to the interaction.</p>
            <span>The scorecard appears after the agent’s first response.</span>
          </div>
        )
      ) : (
        <React.Fragment>
          <Tabs active={tab} onChange={setTab} scoreBadge={scoreBadge} coachBadge={coachBadge} />
          {busy && <div className="cp-scoring"><span className="spinner"></span>Re-scoring with Cognigy…</div>}
          {tab === 'scorecard' ? <ScorecardTab score={score} delta={delta} /> : <CoachingTab score={score} />}
        </React.Fragment>
      )}
    </aside>
  );
}

window.Coaching = Coaching;