/* Team Results screen */
const TeamResultsScreen = () => {
  const axes = ['Communication', 'Teamwork', 'Accountability', 'Problem Solving', 'Customer Focus', 'Leadership', 'Digital', 'Adaptability'];
  const radarSeries = [
    { name: 'Team avg', color: '#4F46E5', values: [4.2, 4.4, 4.1, 3.9, 4.3, 3.8, 3.6, 3.7] },
    { name: 'Org avg',  color: '#94A3B8', values: [4.0, 4.2, 4.0, 3.8, 4.1, 3.7, 3.5, 3.6] },
  ];

  const compScores = [
    { name: 'Teamwork', team: 4.4, self: 4.6, manager: 4.3, peer: 4.4, dr: 4.5 },
    { name: 'Customer Focus', team: 4.3, self: 4.5, manager: 4.4, peer: 4.2, dr: 4.3 },
    { name: 'Communication', team: 4.2, self: 4.5, manager: 4.0, peer: 4.1, dr: 4.2 },
    { name: 'Accountability', team: 4.1, self: 4.4, manager: 3.9, peer: 4.1, dr: 4.0 },
    { name: 'Problem Solving', team: 3.9, self: 4.3, manager: 3.7, peer: 4.0, dr: 3.8 },
    { name: 'Leadership', team: 3.8, self: 4.4, manager: 3.5, peer: 3.7, dr: 3.6 },
    { name: 'Change Adaptability', team: 3.7, self: 4.2, manager: 3.6, peer: 3.6, dr: 3.5 },
    { name: 'Digital Awareness', team: 3.6, self: 4.0, manager: 3.4, peer: 3.7, dr: 3.5 },
  ];

  const themes = [
    { theme: 'Cross-team clarity', sentiment: 'positive', mentions: 38, sample: '"Brings a calm, structured voice to cross-team syncs — always leaves with a decision."' },
    { theme: 'Roadmap visibility',  sentiment: 'mixed',    mentions: 24, sample: '"Could share roadmap context earlier — engineers want to weigh in before scope is locked."' },
    { theme: 'Coaching cadence',    sentiment: 'neutral',  mentions: 19, sample: '"1:1s are helpful but irregular; would benefit from a steadier rhythm."' },
    { theme: 'Stakeholder mgmt.',   sentiment: 'positive', mentions: 16, sample: '"Excellent at framing trade-offs to skip-levels and senior leaders."' },
    { theme: 'Pace of decisions',   sentiment: 'concern',  mentions: 11, sample: '"Decisions sometimes stall when more than two options are on the table."' },
  ];

  const trendData = [
    { x: 'Q3 24', s1: 3.7 }, { x: 'Q4 24', s1: 3.8 }, { x: 'Q1 25', s1: 3.9 },
    { x: 'Q2 25', s1: 4.0 }, { x: 'Q3 25', s1: 4.0 }, { x: 'Q4 25', s1: 4.1 }, { x: 'Q1 26', s1: 4.1 }, { x: 'Q2 26', s1: 4.2 }
  ];

  return (
    <div className="fade-in">
      <div className="page-header">
        <div>
          <h1>Team Results — Engineering</h1>
          <div className="subtitle">Aggregated outcomes for Mert Yılmaz's team · Q2 2026 cycle · 9 evaluatees</div>
        </div>
        <div className="page-actions">
          <select className="select" style={{ width: 220 }}>
            <option>Q2 2026 Leadership 360</option>
            <option>Engineering Peer Review</option>
          </select>
          <button className="btn btn-secondary"><Icon name="download" size={15}/> Export PDF</button>
        </div>
      </div>

      <div className="grid grid-4" style={{ marginBottom: 20 }}>
        <StatCard icon="users" tint="tint-indigo" label="Participation" value="87%" delta="+9%" deltaDir="up" foot="vs last cycle"/>
        <StatCard icon="competency" tint="tint-violet" label="Team avg score" value="4.08" delta="+0.12" deltaDir="up" foot="org avg 3.92"/>
        <StatCard icon="message" tint="tint-mint" label="Open comments" value="216" delta="+58" deltaDir="up" foot="74% positive sentiment"/>
        <StatCard icon="shield" tint="tint-amber" label="Anonymity status" value="OK" foot="all groups ≥ 4 raters"/>
      </div>

      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-span-5">
          <div className="card-header">
            <div>
              <h3>Competency profile</h3>
              <div className="desc">Team average vs organization-wide benchmark</div>
            </div>
          </div>
          <div className="card-body" style={{ display: 'grid', placeItems: 'center' }}>
            <RadarChart axes={axes} series={radarSeries} size={300}/>
            <div className="legend" style={{ marginTop: 8 }}>
              <span className="legend-item"><span className="legend-swatch" style={{ background: '#4F46E5' }}></span>Team avg</span>
              <span className="legend-item"><span className="legend-swatch" style={{ background: '#94A3B8' }}></span>Org avg</span>
            </div>
          </div>
        </div>
        <div className="card col-span-7">
          <div className="card-header">
            <div>
              <h3>Self vs Manager vs Peer vs Direct Report</h3>
              <div className="desc">Identify perception gaps across rater perspectives</div>
            </div>
          </div>
          <div className="card-body" style={{ paddingTop: 0 }}>
            <table className="table" style={{ fontSize: 12.5 }}>
              <thead>
                <tr>
                  <th>Competency</th>
                  <th style={{ width: 130 }}>Self</th>
                  <th style={{ width: 130 }}>Manager</th>
                  <th style={{ width: 130 }}>Peer</th>
                  <th style={{ width: 130 }}>Direct Report</th>
                  <th style={{ width: 60, textAlign: 'right' }}>Avg</th>
                </tr>
              </thead>
              <tbody>
                {compScores.map(c => (
                  <tr key={c.name}>
                    <td className="cell-emph" style={{ paddingTop: 10, paddingBottom: 10 }}>{c.name}</td>
                    <td><ScoreBar value={c.self} color="#4F46E5"/></td>
                    <td><ScoreBar value={c.manager} color="#8B5CF6"/></td>
                    <td><ScoreBar value={c.peer} color="#38BDF8"/></td>
                    <td><ScoreBar value={c.dr} color="#14B8A6"/></td>
                    <td style={{ textAlign: 'right', fontWeight: 700, color: 'var(--ink-900)' }}>{c.team.toFixed(1)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-span-4">
          <div className="card-header">
            <div>
              <h3>Strengths</h3>
              <div className="desc">Top 3 competencies for this team</div>
            </div>
          </div>
          <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {compScores.slice(0, 3).map(c => (
              <div key={c.name} style={{ padding: 12, background: 'var(--success-50)', border: '1px solid #A7F3D0', borderRadius: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--success-700)' }}>{c.name}</div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--success-700)' }}>{c.team.toFixed(1)}</div>
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-600)', marginTop: 4 }}>+{(c.team - 3.8).toFixed(2)} above org baseline</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card col-span-4">
          <div className="card-header">
            <div>
              <h3>Development areas</h3>
              <div className="desc">Where focused coaching could move the needle</div>
            </div>
          </div>
          <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {compScores.slice(-3).reverse().map(c => (
              <div key={c.name} style={{ padding: 12, background: 'var(--warning-50)', border: '1px solid #FDE68A', borderRadius: 10 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--warning-700)' }}>{c.name}</div>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--warning-700)' }}>{c.team.toFixed(1)}</div>
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-600)', marginTop: 4 }}>Gap vs target: {(4.2 - c.team).toFixed(2)} pts</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card col-span-4">
          <div className="card-header">
            <div>
              <h3>Team score trend</h3>
              <div className="desc">8 quarters of average competency score</div>
            </div>
          </div>
          <div className="card-body">
            <LineChart data={trendData} series={[{ key: 's1', color: '#4F46E5' }]} height={220}/>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div>
            <h3>Open feedback themes</h3>
            <div className="desc">Auto-clustered themes from 216 open comments · sentiment classified</div>
          </div>
          <Badge kind="info"><Icon name="sparkle" size={11}/> AI summary placeholder</Badge>
        </div>
        <div className="card-body" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
          {themes.map(t => {
            const tone = t.sentiment === 'positive' ? { bg: 'var(--success-50)', bd: '#A7F3D0', c: 'var(--success-700)', label: 'Positive' }
                       : t.sentiment === 'concern'  ? { bg: 'var(--danger-50)',  bd: '#FCA5A5', c: 'var(--danger-700)',  label: 'Concern' }
                       : t.sentiment === 'mixed'    ? { bg: 'var(--warning-50)', bd: '#FDE68A', c: 'var(--warning-700)', label: 'Mixed' }
                       :                              { bg: 'var(--info-50)',    bd: '#BFDBFE', c: 'var(--info-700)',    label: 'Neutral' };
            return (
              <div key={t.theme} style={{ padding: 14, border: `1px solid ${tone.bd}`, background: tone.bg, borderRadius: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-900)' }}>{t.theme}</div>
                  <Badge kind={t.sentiment === 'positive' ? 'active' : t.sentiment === 'concern' ? 'danger' : t.sentiment === 'mixed' ? 'warning' : 'info'}>{tone.label}</Badge>
                </div>
                <div style={{ fontSize: 11.5, color: tone.c, fontWeight: 600, marginTop: 6 }}>{t.mentions} mentions</div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-700)', fontStyle: 'italic', marginTop: 8, lineHeight: 1.5 }}>{t.sample}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

window.TeamResultsScreen = TeamResultsScreen;