/* Department Analytics */
const DeptScreen = () => {
  const deptData = [
    { name: 'Engineering',                participation: 92, avgScore: 4.2, comments: 412, alerts: 0 },
    { name: 'Human Resources',            participation: 88, avgScore: 4.1, comments: 168, alerts: 0 },
    { name: 'Sales',                      participation: 81, avgScore: 4.0, comments: 224, alerts: 1 },
    { name: 'Customer Support',           participation: 79, avgScore: 4.2, comments: 196, alerts: 0 },
    { name: 'Operations',                 participation: 74, avgScore: 3.9, comments: 142, alerts: 0 },
    { name: 'Finance',                    participation: 68, avgScore: 3.8, comments: 96,  alerts: 1 },
    { name: 'IT',                         participation: 62, avgScore: 3.7, comments: 88,  alerts: 1 },
    { name: 'PMO / Digital Transformation', participation: 54, avgScore: 3.6, comments: 64, alerts: 1 },
  ];

  const heatRows = ['Engineering', 'HR', 'Sales', 'Customer Support', 'Operations', 'Finance', 'IT', 'PMO / Digital'];
  const heatCols = ['Communication', 'Teamwork', 'Accountability', 'Problem Solving', 'Customer Focus', 'Leadership', 'Digital', 'Change'];
  const heatVals = [
    [4.3, 4.5, 4.1, 4.2, 4.0, 3.9, 4.4, 3.9],
    [4.2, 4.3, 4.0, 3.9, 4.4, 3.8, 3.4, 3.7],
    [4.1, 4.0, 4.2, 3.8, 4.2, 4.0, 3.5, 3.6],
    [4.4, 4.6, 4.3, 4.0, 4.6, 3.7, 3.6, 3.8],
    [4.0, 4.1, 4.0, 3.8, 4.0, 3.7, 3.5, 3.6],
    [3.8, 3.9, 4.1, 3.7, 3.8, 3.6, 3.3, 3.4],
    [3.7, 3.8, 3.9, 3.6, 3.7, 3.5, 4.0, 3.5],
    [3.6, 3.7, 3.7, 3.5, 3.8, 3.4, 4.2, 3.6],
  ];

  const lowest = [
    { dept: 'PMO / Digital Transformation', comp: 'Leadership', score: 3.4 },
    { dept: 'Finance', comp: 'Digital Awareness', score: 3.3 },
    { dept: 'IT', comp: 'Coaching Others', score: 3.5 },
    { dept: 'Operations', comp: 'Strategic Thinking', score: 3.5 },
  ];

  const highest = [
    { dept: 'Customer Support', comp: 'Customer Focus', score: 4.6 },
    { dept: 'Customer Support', comp: 'Teamwork', score: 4.6 },
    { dept: 'Engineering', comp: 'Digital Awareness', score: 4.4 },
    { dept: 'HR', comp: 'Customer Focus', score: 4.4 },
  ];

  return (
    <div className="fade-in">
      <div className="page-header">
        <div>
          <h1>Department Analytics</h1>
          <div className="subtitle">Cross-departmental view of participation, competency scores and emerging risks.</div>
        </div>
        <div className="page-actions">
          <select className="select" style={{ width: 200 }}>
            <option>Q2 2026 Active Cycles</option>
            <option>Last 12 months</option>
          </select>
          <button className="btn btn-secondary"><Icon name="download" size={15}/> Export Excel</button>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 20 }}>
        <div className="card-header">
          <div>
            <h3>Department comparison</h3>
            <div className="desc">Participation, average score, comment volume and risk count side-by-side</div>
          </div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Department</th>
              <th style={{ width: 240 }}>Participation</th>
              <th style={{ width: 120 }}>Avg Score</th>
              <th style={{ width: 240 }}>Score distribution</th>
              <th style={{ width: 120 }}>Comments</th>
              <th style={{ width: 120 }}>Alerts</th>
            </tr>
          </thead>
          <tbody>
            {deptData.map(d => (
              <tr key={d.name}>
                <td className="cell-emph">{d.name}</td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Progress value={d.participation} tone="auto"/>
                    <span style={{ fontSize: 12, fontWeight: 600, minWidth: 36, textAlign: 'right' }}>{d.participation}%</span>
                  </div>
                </td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink-900)' }}>{d.avgScore.toFixed(1)}</span>
                    <span style={{ fontSize: 11, color: 'var(--ink-500)' }}>/ 5.0</span>
                  </div>
                </td>
                <td>
                  <ScoreBar value={d.avgScore} color={d.avgScore >= 4.1 ? '#10B981' : d.avgScore >= 3.8 ? '#4F46E5' : '#F59E0B'}/>
                </td>
                <td style={{ color: 'var(--ink-700)' }}>{d.comments}</td>
                <td>
                  {d.alerts > 0 ? <Badge kind="warning">{d.alerts} flag{d.alerts > 1 ? 's' : ''}</Badge> : <Badge kind="active">All clear</Badge>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-span-8">
          <div className="card-header">
            <div>
              <h3>Competency heatmap — Department × Competency</h3>
              <div className="desc">Hover any cell to see the underlying response volume</div>
            </div>
          </div>
          <div className="card-body">
            <Heatmap rows={heatRows} cols={heatCols} values={heatVals}/>
            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 16, fontSize: 11, color: 'var(--ink-500)' }}>
              <span>1.0</span>
              <div style={{ width: 200, height: 8, borderRadius: 4, background: 'linear-gradient(90deg, #EEF0FF, #4338CA)' }}></div>
              <span>5.0</span>
            </div>
          </div>
        </div>
        <div className="card col-span-4">
          <div className="card-header">
            <div>
              <h3>Top & bottom competencies</h3>
              <div className="desc">Score outliers across the organization</div>
            </div>
          </div>
          <div className="card-body" style={{ paddingTop: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--success-700)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Highest scoring</div>
            {highest.map((h, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: i < highest.length - 1 ? '1px dashed var(--border)' : 'none' }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-900)' }}>{h.comp}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>{h.dept}</div>
                </div>
                <Badge kind="active">{h.score.toFixed(1)}</Badge>
              </div>
            ))}
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--warning-700)', textTransform: 'uppercase', letterSpacing: '0.06em', margin: '16px 0 8px' }}>Lowest scoring</div>
            {lowest.map((l, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: i < lowest.length - 1 ? '1px dashed var(--border)' : 'none' }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-900)' }}>{l.comp}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>{l.dept}</div>
                </div>
                <Badge kind="warning">{l.score.toFixed(1)}</Badge>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div>
            <h3>Risk & anonymity alerts</h3>
            <div className="desc">Active alerts that affect reporting visibility</div>
          </div>
          <button className="btn btn-sm btn-secondary">View all 4</button>
        </div>
        <div style={{ padding: '0 4px 4px' }}>
          {[
            { dept: 'PMO / Digital Transformation', issue: 'Below anonymity threshold — Customer Focus group has 3 raters (min 4)', severity: 'warning', when: '2h ago' },
            { dept: 'Finance', issue: 'Participation 68% — significantly below org average', severity: 'warning', when: '1 day ago' },
            { dept: 'IT', issue: 'Coaching Others score dropped 0.4 pts vs last cycle', severity: 'danger', when: '3 days ago' },
          ].map((a, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, padding: '14px 16px', borderBottom: '1px solid var(--border)', alignItems: 'center' }}>
              <div className={`stat-icon ${a.severity === 'danger' ? 'tint-rose' : 'tint-amber'}`} style={{ width: 32, height: 32, marginBottom: 0, borderRadius: 8 }}>
                <Icon name={a.severity === 'danger' ? 'warning' : 'shield'} size={14}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink-900)' }}>{a.dept}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-600)', marginTop: 2 }}>{a.issue}</div>
              </div>
              <span style={{ fontSize: 11.5, color: 'var(--ink-500)' }}>{a.when}</span>
              <button className="btn btn-sm btn-secondary">Investigate</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.DeptScreen = DeptScreen;