import React from 'react';

export default function SidebarControls({
  user,
  profile,
  isEditMode,
  setIsEditMode,
  setShowApprovalModal,
  setShowUserModal,
  fetchUsers,
  setPlacementMode,
  setShowToast,
  filters,
  setFilters,
  hubStyles,
  setShowSurveyModal,
  setShowCapacityModal,
  pendingCapacityCount,
  setShowDelegationModal,
  pendingDelegationsCount,
  hubs,
  onFocusHub,
  onOpenKas,
  setShowPicListModal,
  onlyMyHub,
  setOnlyMyHub
}) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
      {user && (profile?.role === 'super_admin' || profile?.role === 'pic') && (
        <div className="edit-mode-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
            <i className="fas fa-edit"></i> Mode Edit Peta
          </h4>
          <button 
            className="btn btn-primary" 
            onClick={() => setIsEditMode(!isEditMode)}
            style={{
              justifyContent: 'flex-start',
              background: isEditMode ? 'rgba(239, 68, 68, 0.15)' : 'rgba(59, 130, 246, 0.15)',
              color: isEditMode ? 'var(--danger)' : 'var(--primary)',
              border: isEditMode ? '1px solid rgba(239, 68, 68, 0.3)' : '1px solid rgba(59, 130, 246, 0.3)',
              padding: '10px 16px',
              borderRadius: '8px'
            }}
          >
            <i className={`fas ${isEditMode ? 'fa-lock-open' : 'fa-lock'}`}></i> 
            <span>{isEditMode ? 'Nonaktifkan Mode Edit' : 'Aktifkan Mode Edit'}</span>
          </button>
        </div>
      )}

      {user && profile?.role === 'super_admin' && (
        <div className="admin-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '10px' }}>
          <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
            <i className="fas fa-user-shield"></i> Aksi Admin
          </h4>
          
          <button 
            className="btn btn-primary" 
            onClick={() => setShowApprovalModal(true)} 
            style={{ 
              justifyContent: 'flex-start', 
              background: 'rgba(59, 130, 246, 0.05)', 
              color: 'var(--text-main)', 
              border: '1px solid rgba(0, 0, 0, 0.1)',
              padding: '10px 16px',
              borderRadius: '8px'
            }}
          >
            <i className="fas fa-list-check" style={{ color: 'var(--primary)' }}></i> 
            <span>Verifikasi KK</span>
          </button>

          <button 
            className="btn btn-primary" 
            onClick={() => setShowCapacityModal(true)} 
            style={{ 
              justifyContent: 'flex-start', 
              background: 'rgba(59, 130, 246, 0.05)', 
              color: 'var(--text-main)', 
              border: '1px solid rgba(0, 0, 0, 0.1)',
              padding: '10px 16px',
              borderRadius: '8px',
              position: 'relative'
            }}
          >
            <i className="fas fa-triangle-exclamation" style={{ color: '#d97706' }}></i> 
            <span>Kapasitas Hub</span>
            {pendingCapacityCount > 0 && (
              <span style={{ 
                position: 'absolute',
                right: '16px',
                background: 'var(--danger)', 
                color: 'white', 
                fontSize: '0.7rem', 
                padding: '2px 6px', 
                borderRadius: '10px', 
                fontWeight: 'bold' 
              }}>
                {pendingCapacityCount}
              </span>
            )}
          </button>
          
          <button 
            className="btn btn-primary" 
            onClick={() => { fetchUsers(); setShowUserModal(true); }} 
            style={{ 
              justifyContent: 'flex-start', 
              background: 'rgba(59, 130, 246, 0.05)', 
              color: 'var(--text-main)', 
              border: '1px solid rgba(0, 0, 0, 0.1)',
              padding: '10px 16px',
              borderRadius: '8px'
            }}
          >
            <i className="fas fa-users-cog" style={{ color: 'var(--primary)' }}></i> 
            <span>Manajemen Pengguna</span>
          </button>
        </div>
      )}
      
      {user && (profile?.role === 'pic' || profile?.role === 'super_admin') && isEditMode && (
        <div className="surveyor-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
            <i className="fas fa-route"></i> Menu Surveyor
          </h4>
          <button 
            className="btn btn-primary" 
            onClick={() => setShowSurveyModal(true)}
            style={{
              justifyContent: 'flex-start',
              background: 'rgba(16, 185, 129, 0.15)',
              color: 'var(--success)',
              border: '1px solid rgba(16, 185, 129, 0.3)',
              padding: '10px 16px',
              borderRadius: '8px'
            }}
          >
            <i className="fas fa-house-medical" style={{ color: 'var(--success)' }}></i> 
            <span>Tambah Pendataan KK</span>
          </button>
        </div>
      )}

      {user && profile?.role === 'pic' && (
        <div className="pic-hub-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '5px' }}>
          <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
            <i className="fas fa-mosque"></i> Hub Saya
          </h4>
          <button 
            className="btn btn-primary" 
            onClick={() => {
              const myHub = hubs.find(h => h.pic_id === profile.id);
              if (myHub) onFocusHub(myHub);
            }} 
            style={{ 
              justifyContent: 'flex-start', 
              background: 'rgba(59, 130, 246, 0.05)', 
              color: 'var(--text-main)', 
              border: '1px solid rgba(0, 0, 0, 0.1)',
              padding: '10px 16px',
              borderRadius: '8px'
            }}
          >
            <i className="fas fa-search-location" style={{ color: 'var(--primary)' }}></i> 
            <span>Fokus ke Hub Saya</span>
          </button>
        </div>
      )}

      {user && profile?.role === 'hub_head' && (
        <div className="delegation-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '5px' }}>
          <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
            <i className="fas fa-handshake"></i> Koordinasi Hub
          </h4>
          <button 
            className="btn btn-primary" 
            onClick={() => setShowDelegationModal(true)} 
            style={{ 
              justifyContent: 'flex-start', 
              background: 'rgba(59, 130, 246, 0.05)', 
              color: 'var(--text-main)', 
              border: '1px solid rgba(0, 0, 0, 0.1)',
              padding: '10px 16px',
              borderRadius: '8px',
              position: 'relative'
            }}
          >
            <i className="fas fa-exchange-alt" style={{ color: 'var(--primary)' }}></i> 
            <span>Delegasi Masuk</span>
            {pendingDelegationsCount > 0 && (
              <span style={{ 
                position: 'absolute',
                right: '16px',
                background: 'var(--danger)', 
                color: 'white', 
                fontSize: '0.7rem', 
                padding: '2px 6px', 
                borderRadius: '10px', 
                fontWeight: 'bold' 
              }}>
                {pendingDelegationsCount}
              </span>
            )}
          </button>
        </div>
      )}

      {user && profile?.role === 'hub_head' && (
        <div className="manager-controls" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '5px' }}>
          <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '4px' }}>
            <i className="fas fa-mosque"></i> Menu Ketua Pengurus
          </h4>
          
          <button 
            className="btn btn-primary" 
            onClick={() => {
              const myHub = hubs.find(h => h.head_id === profile.id);
              if (myHub) onFocusHub(myHub);
            }} 
            style={{ 
              justifyContent: 'flex-start', 
              background: 'rgba(59, 130, 246, 0.05)', 
              color: 'var(--text-main)', 
              border: '1px solid rgba(0, 0, 0, 0.1)',
              padding: '10px 16px',
              borderRadius: '8px'
            }}
          >
            <i className="fas fa-search-location" style={{ color: 'var(--primary)' }}></i> 
            <span>Fokus ke Hub Saya</span>
          </button>

          <button 
            className="btn btn-primary" 
            onClick={() => {
              const myHub = hubs.find(h => h.head_id === profile.id);
              if (myHub) onOpenKas(myHub);
            }} 
            style={{ 
              justifyContent: 'flex-start', 
              background: 'rgba(59, 130, 246, 0.05)', 
              color: 'var(--text-main)', 
              border: '1px solid rgba(0, 0, 0, 0.1)',
              padding: '10px 16px',
              borderRadius: '8px'
            }}
          >
            <i className="fas fa-wallet" style={{ color: 'var(--success)' }}></i> 
            <span>Manajemen Kas</span>
          </button>

          <button 
            className="btn btn-primary" 
            onClick={() => {
              fetchUsers();
              setShowPicListModal(true);
            }} 
            style={{ 
              justifyContent: 'flex-start', 
              background: 'rgba(59, 130, 246, 0.05)', 
              color: 'var(--text-main)', 
              border: '1px solid rgba(0, 0, 0, 0.1)',
              padding: '10px 16px',
              borderRadius: '8px'
            }}
          >
            <i className="fas fa-users" style={{ color: '#d97706' }}></i> 
            <span>Akun PIC Lapangan</span>
          </button>
        </div>
      )}
      
      {isEditMode && profile?.role === 'super_admin' && (
        <button 
          className="btn btn-primary" 
          onClick={() => { setPlacementMode('hub'); setShowToast(true); }}
          style={{
            justifyContent: 'flex-start',
            background: 'rgba(59, 130, 246, 0.15)',
            color: 'var(--primary)',
            border: '1px solid rgba(59, 130, 246, 0.3)',
            padding: '10px 16px',
            borderRadius: '8px'
          }}
        >
          <i className="fas fa-place-of-worship"></i> 
          <span>Tambah Rumah Ibadah</span>
        </button>
      )}

      <div className="filter-group">
        <h4><i className="fas fa-filter"></i> Filter Visibilitas</h4>
        {user && (profile?.role === 'pic' || profile?.role === 'hub_head') && (
          <label className="checkbox-item" style={{ marginBottom: '8px', borderBottom: '1px dashed rgba(0,0,0,0.1)', paddingBottom: '8px', fontWeight: 'bold' }}>
            <input 
              type="checkbox" 
              checked={onlyMyHub} 
              onChange={(e) => setOnlyMyHub(e.target.checked)} 
            /> 
            <i className="fas fa-location-crosshairs" style={{ color: 'var(--primary)', width: '20px' }}></i> Hanya Hub Saya
          </label>
        )}
        {Object.keys(filters).map(key => (
          <label className="checkbox-item" key={key}>
            <input 
              type="checkbox" 
              checked={filters[key]} 
              onChange={(e) => setFilters({ ...filters, [key]: e.target.checked })} 
            /> 
            <i className={hubStyles[key].iconClass} style={{ color: hubStyles[key].color, width: '20px' }}></i> {key === 'Mosque' ? 'Masjid' : key === 'Church' ? 'Gereja' : key === 'Temple' ? 'Pura' : key === 'Vihara' ? 'Vihara' : 'Lainnya'}
          </label>
        ))}
      </div>
    </div>
  );
}
