/* Reports screen + Individual Report */
const ReportsScreen = ({ onOpenIndividual }) => {
  const reports = [
    { name: 'Individual 360 Report',   scope: 'Per-employee summary across all rater groups', icon: 'user',     tint: 'tint-indigo',  last: 'May 13, 2026', count: '184 reports', highlight: true },
    { name: 'Team Competency Report',  scope: 'Aggregate competency profile per manager',     icon: 'team',     tint: 'tint-violet',  last: 'May 12, 2026', count: '42 teams' },
    { name: 'Department Analytics Report', scope: 'Participation, scores and themes by dept', icon: 'dept',     tint: 'tint-mint',    last: 'May 14, 2026', count: '8 departments' },
    { name: 'Leadership Feedback Report', scope: 'Upward + peer composite for leaders',       icon: 'flag',     tint: 'tint-sky',     last: 'May 10, 2026', count: '74 leaders' },
    { name: 'Pulse Survey Report',     scope: 'Weekly engagement signals & trends',           icon: 'pulse',    tint: 'tint-rose',    last: 'May 14, 2026', count: '12 surveys' },
    { name: 'Engagement Survey Report', scope: 'Annual engagement deep-dive with drivers',     icon: 'sparkle',  tint: 'tint-amber',   last: 'Apr 28, 2026', count: '1 active' },
    { name: 'Open Comment Analysis',   scope: 'Theme clustering & sentiment from comments',   icon: 'message',  tint: 'tint-emerald', last: 'May 13, 2026', count: '2,617 comments' },
    { name: 'Cycle Audit Trail',       scope: 'Compliance-ready audit log per cycle',         icon: 'shield',   tint: 'tint-slate',   last: 'May 14, 2026', count: 'Real-time' },
  ];

  return (
    <div className="fade-in">
      <div className="page-header">
        <div>
          <h1>Reports</h1>
          <div className="subtitle">Generate, schedule and distribute insights across the organization.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><Icon name="calendar" size={15}/> Schedule</button>
          <button className="btn btn-primary"><Icon name="plus" size={15}/> New Report</button>
        </div>
      </div>

      <div className="grid grid-3">
        {reports.map(r => (
          <div key={r.name} className="card" style={{ padding: 18, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div className={`stat-icon ${r.tint}`} style={{ width: 42, height: 42, marginBottom: 0 }}>
                <Icon name={r.icon} size={18}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--ink-900)' }}>{r.name}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 4, lineHeight: 1.45 }}>{r.scope}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 16, marginTop: 16, padding: 12, background: 'var(--surface-alt)', borderRadius: 10 }}>
              <div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-500)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Last generated</div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-800)', fontWeight: 600, marginTop: 2 }}>{r.last}</div>
              </div>
              <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
                <div style={{ fontSize: 10.5, color: 'var(--ink-500)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Scope</div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-800)', fontWeight: 600, marginTop: 2 }}>{r.count}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
              <button className="btn btn-sm btn-secondary" title="PDF" style={{ flex: 1 }}><Icon name="download" size={12}/> PDF</button>
              <button className="btn btn-sm btn-secondary" title="Excel" style={{ flex: 1 }}><Icon name="download" size={12}/> Excel</button>
              <button className="btn btn-sm btn-secondary" title="PowerPoint" style={{ flex: 1 }}><Icon name="download" size={12}/> PPT</button>
            </div>
            <button className="btn btn-primary btn-sm" style={{ marginTop: 8 }} onClick={() => r.highlight && onOpenIndividual && onOpenIndividual()}>
              View report <Icon name="chevright" size={13}/>
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

const IndividualReport = ({ onBack }) => {
  const competencies = [
    { name: 'Communication',     self: 4.5, manager: 4.2, peer: 4.3, dr: 4.1, avg: 4.28 },
    { name: 'Teamwork',          self: 4.6, manager: 4.5, peer: 4.4, dr: 4.5, avg: 4.50 },
    { name: 'Accountability',    self: 4.4, manager: 4.3, peer: 4.2, dr: 4.0, avg: 4.22 },
    { name: 'Problem Solving',   self: 4.2, manager: 4.0, peer: 4.1, dr: 4.0, avg: 4.08 },
    { name: 'Customer Focus',    self: 4.3, manager: 4.4, peer: 4.2, dr: 4.5, avg: 4.35 },
    { name: 'Leadership',        self: 4.4, manager: 3.7, peer: 3.6, dr: 3.5, avg: 3.80 },
    { name: 'Change Adapt.',     self: 4.2, manager: 3.8, peer: 3.7, dr: 3.6, avg: 3.83 },
    { name: 'Digital Awareness', self: 4.0, manager: 4.1, peer: 4.0, dr: 4.0, avg: 4.03 },
  ];

  const axes = competencies.map(c => c.name);
  const radarSeries = [
    { name: 'Self',    color: '#4F46E5', values: competencies.map(c => c.self) },
    { name: 'Others',  color: '#8B5CF6', values: competencies.map(c => (c.manager + c.peer + c.dr) / 3) },
  ];

  return (
    <div className="fade-in">
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink-500)', marginBottom: 12 }}>
        <button className="btn btn-ghost btn-sm" onClick={onBack} style={{ padding: '0 6px' }}>
          <Icon name="chevleft" size={13}/> Reports
        </button>
        <span>/</span>
        <span>Individual 360 Report</span>
      </div>

      <div className="card" style={{ marginBottom: 20, overflow: 'hidden' }}>
        <div style={{ padding: 24, background: 'linear-gradient(135deg, #4F46E5 0%, #8B5CF6 50%, #38BDF8 100%)', color: 'white', display: 'flex', alignItems: 'center', gap: 20 }}>
          <Avatar name="Aylin Demir" color="rgba(255,255,255,0.25)" size="lg" initials="AD"/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>Aylin Demir</div>
            <div style={{ fontSize: 13, opacity: 0.85, marginTop: 4 }}>Sr. Product Designer · Engineering · Reports to Mert Yılmaz</div>
            <div style={{ display: 'flex', gap: 16, marginTop: 12, fontSize: 11.5 }}>
              <div><Icon name="cycles" size={12} style={{ verticalAlign: -1 }}/> Q2 2026 Leadership 360</div>
              <div><Icon name="users" size={12} style={{ verticalAlign: -1 }}/> 9 raters (1 self · 1 manager · 4 peers · 3 direct reports)</div>
              <div><Icon name="calendar" size={12} style={{ verticalAlign: -1 }}/> Generated May 13, 2026</div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 11, opacity: 0.8, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Overall score</div>
            <div style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1 }}>4.14</div>
            <div style={{ fontSize: 11, opacity: 0.85, marginTop: 2 }}>+0.22 vs previous cycle</div>
          </div>
        </div>
      </div>

      <div className="grid grid-12" style={{ marginBottom: 20 }}>
        <div className="card col-span-7">
          <div className="card-header">
            <div>
              <h3>Self vs Others — perception gap</h3>
              <div className="desc">Identify where Aylin's self-view differs from how others see her</div>
            </div>
          </div>
          <div className="card-body" style={{ display: 'grid', placeItems: 'center' }}>
            <RadarChart axes={axes} series={radarSeries} size={340}/>
            <div className="legend" style={{ marginTop: 10 }}>
              <span className="legend-item"><span className="legend-swatch" style={{ background: '#4F46E5' }}></span>Self</span>
              <span className="legend-item"><span className="legend-swatch" style={{ background: '#8B5CF6' }}></span>Manager + Peers + Direct Reports (avg)</span>
            </div>
          </div>
        </div>

        <div className="card col-span-5">
          <div className="card-header">
            <div>
              <h3><Icon name="sparkle" size={14} style={{ verticalAlign: -1, color: 'var(--accent-violet)' }}/> AI summary</h3>
              <div className="desc">Synthesized from quantitative & qualitative feedback</div>
            </div>
            <Badge kind="info">Placeholder</Badge>
          </div>
          <div className="card-body" style={{ paddingTop: 0 }}>
            <div style={{ padding: 14, background: 'linear-gradient(135deg, #F3EBFF, #EEF0FF)', borderRadius: 12, border: '1px solid #E0DDFE' }}>
              <div style={{ fontSize: 13, color: 'var(--ink-800)', lineHeight: 1.6 }}>
                Aylin's strongest signal across rater groups is <b>Teamwork (4.5)</b> — peers consistently describe her as a calm, structured collaborator who brings cross-team work to closure. Her self-view in <b>Leadership (4.4)</b> diverges most from how others rate her (manager 3.7, direct reports 3.5), suggesting an opportunity to make her direction-setting more visible to the team.
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-800)', lineHeight: 1.6, marginTop: 8 }}>
                Comment themes cluster around <b>roadmap visibility</b> and <b>decision pace</b> — direct reports want earlier context on trade-offs and a steadier cadence of 1:1s.
              </div>
            </div>

            <div style={{ marginTop: 16 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Recommended development actions</div>
              {[
                { icon: 'message', text: 'Move 1:1s to a fixed weekly cadence; share roadmap context before scoping decisions.' },
                { icon: 'team', text: 'Pair with a Leadership coach for two cycles to close the self/others perception gap.' },
                { icon: 'flag', text: 'Lead one cross-functional initiative end-to-end to demonstrate direction-setting visibly.' },
              ].map((a, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', alignItems: 'flex-start' }}>
                  <div className="stat-icon tint-violet" style={{ width: 26, height: 26, marginBottom: 0, borderRadius: 7 }}>
                    <Icon name={a.icon} size={12}/>
                  </div>
                  <div style={{ fontSize: 12.5, color: 'var(--ink-700)', lineHeight: 1.5 }}>{a.text}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 20 }}>
        <div className="card-header">
          <div>
            <h3>Competency breakdown — rater group comparison</h3>
            <div className="desc">Score by competency, split across self · manager · peer · direct report</div>
          </div>
        </div>
        <table className="table">
          <thead>
            <tr>
              <th>Competency</th>
              <th style={{ width: 120 }}>Self</th>
              <th style={{ width: 120 }}>Manager</th>
              <th style={{ width: 120 }}>Peer</th>
              <th style={{ width: 120 }}>Direct Report</th>
              <th style={{ width: 70, textAlign: 'right' }}>Avg</th>
              <th style={{ width: 100, textAlign: 'right' }}>Gap (S–O)</th>
            </tr>
          </thead>
          <tbody>
            {competencies.map(c => {
              const others = (c.manager + c.peer + c.dr) / 3;
              const gap = c.self - others;
              return (
                <tr key={c.name}>
                  <td className="cell-emph">{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.avg.toFixed(2)}</td>
                  <td style={{ textAlign: 'right' }}>
                    <span className={`badge ${Math.abs(gap) < 0.2 ? 'badge-active' : gap > 0 ? 'badge-warning' : 'badge-info'}`}>
                      <span className="dot"></span>{gap > 0 ? '+' : ''}{gap.toFixed(2)}
                    </span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="grid grid-2">
        <div className="card">
          <div className="card-header">
            <div>
              <h3><Icon name="check" size={14} style={{ color: 'var(--success-500)', verticalAlign: -2 }}/> Strengths</h3>
              <div className="desc">Where Aylin scored highest across rater groups</div>
            </div>
          </div>
          <div className="card-body" style={{ paddingTop: 0 }}>
            {[
              { c: 'Teamwork', q: '"Always shows up for the team — when we hit a wall, she is already three steps into unblocking us."', who: 'Peer' },
              { c: 'Customer Focus', q: '"Genuinely curious about what users need. Translates that into design choices the team can rally behind."', who: 'Direct Report' },
              { c: 'Communication', q: '"Brings clarity to ambiguous syncs. Notes & next-steps land in Slack within 30 minutes."', who: 'Peer' },
            ].map((s, i) => (
              <div key={i} style={{ padding: 14, borderBottom: i < 2 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                  <Badge kind="active">{s.c}</Badge>
                  <span style={{ fontSize: 11, color: 'var(--ink-500)', fontWeight: 600 }}>{s.who}</span>
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-700)', fontStyle: 'italic', lineHeight: 1.55 }}>{s.q}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <div>
              <h3><Icon name="target" size={14} style={{ color: 'var(--warning-500)', verticalAlign: -2 }}/> Development areas</h3>
              <div className="desc">Where coaching could move the needle most</div>
            </div>
          </div>
          <div className="card-body" style={{ paddingTop: 0 }}>
            {[
              { c: 'Leadership', q: '"Would love more upfront framing of where the team is going — sometimes I learn the direction after the fact."', who: 'Direct Report' },
              { c: 'Change Adapt.', q: '"Sometimes holds on to a plan a little too long when context shifts. We could pivot faster."', who: 'Manager' },
              { c: 'Problem Solving', q: '"Strong analyst. Could push to a decision faster when we have good-enough data."', who: 'Peer' },
            ].map((s, i) => (
              <div key={i} style={{ padding: 14, borderBottom: i < 2 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                  <Badge kind="warning">{s.c}</Badge>
                  <span style={{ fontSize: 11, color: 'var(--ink-500)', fontWeight: 600 }}>{s.who}</span>
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--ink-700)', fontStyle: 'italic', lineHeight: 1.55 }}>{s.q}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ReportsScreen, IndividualReport });