// Page réutilisable pour afficher les monitorings d'un service spécifique
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Download } from 'lucide-react';
import { getDashboard, exportToCSV } from '../../services/api';
import DataTable from '../../components/common/DataTable';
import LoadingSpinner from '../../components/common/LoadingSpinner';
import ErrorMessage from '../../components/common/ErrorMessage';
import Button from '../../components/common/Button';
import { buildMonitoringColumns } from '../../utils/monitoringColumns';
import styles from './ServiceMonitorings.module.css';

export default function ServiceMonitorings({ serviceLabel, serviceName }) {
  const navigate = useNavigate();
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [erreur, setErreur] = useState('');

  useEffect(() => {
    async function loadData() {
      setLoading(true);
      setErreur('');
      try {
        const result = await getDashboard(serviceName);
        setData(Array.isArray(result) ? result : []);
      } catch (e) {
        setErreur(e.message || `Erreur lors du chargement des monitorings ${serviceLabel.toLowerCase()}.`);
      } finally {
        setLoading(false);
      }
    }
    loadData();
  }, [serviceLabel, serviceName]);

  if (loading) return <LoadingSpinner message={`Chargement des monitorings ${serviceLabel.toLowerCase()}...`} />;
  if (erreur) return <ErrorMessage message={erreur} />;

  const columns = buildMonitoringColumns(navigate);

  return (
    <div className={styles.page}>
      <div className={styles.header}>
        <div>
          <h1 className={styles.title}>{serviceLabel}</h1>
          <p className={styles.subtitle}>Monitorings avec le service "{serviceLabel}".</p>
        </div>
        <Button variant="secondary" onClick={() => exportToCSV(data, `${serviceLabel.toLowerCase()}_monitorings_${new Date().toISOString().split('T')[0]}.csv`)}>
          <Download size={14} />
          Exporter tout ({data.length})
        </Button>
      </div>

      <DataTable
        columns={columns}
        data={data}
        pageSize={50}
        emptyMessage={`Aucun monitoring ${serviceLabel.toLowerCase()} trouvé.`}
      />
    </div>
  );
}