import React from 'react';

export default function StatsPanel({
  profile,
  showStats,
  setShowStats,
  stats
}) {
  return (
    <div className={`right-panel glass-panel ${showStats ? '' : 'hidden'}`} id="statsPanel">
      <div className="panel-title">
        <span className="title-text"><i className="fas fa-chart-pie"></i> {profile?.role === 'hub_head' || profile?.role === 'pic' ? 'Micro Statistics (Your Area)' : 'Macro Statistics (City Level)'}</span>
        <button className="btn-toggle-panel" onClick={() => setShowStats(false)}><i className="fas fa-chevron-right"></i> Hide</button>
      </div>
      
      <div className="kpi-container">
        <div className="kpi-card text-center">
          <div style={{ fontSize: '2rem', color: 'var(--success)', fontWeight: 'bold' }}>{stats.coveredCount}</div>
          <div style={{ fontSize: '0.8rem', color: '#64748b' }}>Warga Terjangkau</div>
        </div>
        <div className="kpi-card text-center">
          <div style={{ fontSize: '2rem', color: 'var(--danger)', fontWeight: 'bold' }}>{stats.uncoveredCount}</div>
          <div style={{ fontSize: '0.8rem', color: '#64748b' }}>Warga Belum Terjangkau</div>
        </div>
        <div className="kpi-card text-center">
          <div style={{ fontSize: '2rem', color: 'var(--primary)', fontWeight: 'bold' }}>{stats.equalityIndex}%</div>
          <div style={{ fontSize: '0.8rem', color: '#64748b' }}>Indeks Pemerataan</div>
        </div>
      </div>

      <div style={{ padding: '0 20px', display: 'flex', gap: '20px' }}>
        <div style={{ flex: 1 }}>
          <h4 style={{ margin: '10px 0 5px 0', fontSize: '0.85rem', color: '#475569', textAlign: 'center' }}>Sebaran per Wilayah</h4>
          <canvas id="subDistrictChart" style={{ width: '100%', height: '200px' }}></canvas>
        </div>
        <div style={{ flex: 1 }}>
          <h4 style={{ margin: '10px 0 5px 0', fontSize: '0.85rem', color: '#475569', textAlign: 'center' }}>Berdasarkan Tipe Hub</h4>
          <canvas id="typeChart" style={{ width: '100%', height: '200px' }}></canvas>
        </div>
      </div>
    </div>
  );
}
