/* Carte affichée dans le dashboard pour chaque monitoring */

import { useNavigate } from 'react-router-dom';
import Badge from './Badge';
import { getStatutMonitoring } from '../../utils/statutMonitoring';
import styles from './MonitoringCard.module.css';

export default function MonitoringCard({ monitoring }) {
  const navigate = useNavigate();
  const nbErreurs = monitoring.nb_erreurs ?? monitoring.count ?? 0;
  const monitoringId = monitoring.id ?? monitoring.id_monito;
  const statut = getStatutMonitoring(nbErreurs);

  /* Calcul du pourcentage de la barre de progression (max 100%) */
  const progressPct = Math.min((nbErreurs / 20) * 100, 100);

  return (
    <div className={styles.card} style={{ borderTopColor: statut.color }}>
      <div className={styles.header}>
        <div className={styles.titleRow}>
          <span className={styles.chevron}>›</span>
          <h3 className={styles.title}>{monitoring.nom || monitoring.monito_intitule || monitoring.libelle || 'Monitoring'}</h3>
        </div>
        <div className={styles.badges}>
          {monitoring.bdd_source && (
            <Badge variant={monitoring.bdd_source.toLowerCase() === 'sage' ? 'sage' : 'crm'}>
              {monitoring.bdd_source}
            </Badge>
          )}
          {monitoring.categorie && <Badge variant="info">{monitoring.categorie}</Badge>}
        </div>
      </div>

      <div className={styles.erreurs}>
        <span className={styles.nb} style={{ color: statut.color }}>{nbErreurs}</span>
        <span className={styles.erreursLabel}>erreur{nbErreurs !== 1 ? 's' : ''}</span>
      </div>

      {/* Barre de progression colorée selon le statut */}
      <div className={styles.progressBar}>
        <div
          className={styles.progressFill}
          style={{ width: `${progressPct}%`, backgroundColor: statut.color }}
        />
      </div>

      <div className={styles.footer}>
        <Badge variant={statut.variant}>{statut.label}</Badge>
        <button
          className={styles.detailBtn}
          onClick={() => navigate(`/monitoring/${monitoringId}`)}
        >
          Voir le détail →
        </button>
      </div>
    </div>
  );
}