// src/pages/Journal/Journal.jsx
// Page Journal d'audit — historique des actions utilisateurs
import { useState, useEffect } from 'react';
import { getJournal } from '../../services/api';
import DataTable from '../../components/common/DataTable';
import LoadingSpinner from '../../components/common/LoadingSpinner';
import ErrorMessage from '../../components/common/ErrorMessage';
import styles from './Journal.module.css';

export default function Journal() {
  const [entries, setEntries] = useState([]);
  const [loading, setLoading] = useState(true);
  const [erreur, setErreur] = useState('');

  useEffect(() => {
    async function load() {
      setLoading(true);
      setErreur('');
      try {
        const data = await getJournal();
        setEntries(Array.isArray(data) ? data : []);
      } catch (e) {
        setErreur(e.message || 'Erreur lors du chargement du journal.');
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  const columns = [
    { key: 'date_action', label: 'Date' },
    { key: 'username', label: 'Utilisateur' },
    { key: 'action', label: 'Action' },
    { key: 'detail', label: 'Détail' },
    { key: 'ip', label: 'Adresse IP' },
  ];

  return (
    <div className={styles.page}>
      <h1 className={styles.title}>Journal d'audit</h1>
      <p className={styles.description}>
        Historique des actions effectuées sur la plateforme par les utilisateurs.
      </p>

      {loading ? (
        <LoadingSpinner message="Chargement du journal..." />
      ) : erreur ? (
        <ErrorMessage message={erreur} />
      ) : (
        <DataTable
          columns={columns}
          data={entries}
          pageSize={50}
          emptyMessage="Aucune entrée dans le journal."
        />
      )}
    </div>
  );
}