/* =====================================================================
 * Journal des actions : qui a fait quoi, et quand.
 * ===================================================================== */

const ACTION_LABELS = {
  login: 'Connexion',
  logout: 'Déconnexion',
  login_failed: 'Échec de connexion',
  password_changed: 'Mot de passe modifié',
  password_change_failed: 'Changement de mot de passe refusé',
  password_set: 'Mot de passe défini',
  user_created: 'Compte créé',
  user_updated: 'Compte modifié',
  user_deleted: 'Compte supprimé',
  admin_created: 'Compte admin créé',
  admin_reset: 'Mot de passe admin régénéré',
  bootstrap_users: 'Comptes configurés au démarrage',
  seed: 'Initialisation des données',
  export: 'Export des données',
  import_replace: 'Restauration',
  import_merge: 'Import fusionné',
  bilans_update: 'Bilan',
  jsp_update: 'Habillement JSP',
  appels_update: 'Appel JSP',
  stock_update: 'Stock',
  settings_update: 'Paramètres du centre',
  years_update: 'Années JSP',
};

const ACTION_TONE = {
  login_failed: 'red',
  password_change_failed: 'red',
  user_deleted: 'red',
  logout: 'slate',
  login: 'emerald',
  bilans_update: 'blue',
  jsp_update: 'amber',
  appels_update: 'blue',
  stock_update: 'amber',
};

function JournalModule() {
  const { currentUser, users, loadJournal } = useApp();
  const admin = currentUser.role === 'admin';
  const [userId, setUserId] = useState('');
  const [entries, setEntries] = useState([]);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);

  const refresh = useCallback(async () => {
    setLoading(true);
    try {
      const result = await loadJournal(admin ? userId : '');
      setEntries(result.entries || []);
      setError('');
    } catch (err) {
      setError(err.message || 'Impossible de charger le journal');
    } finally {
      setLoading(false);
    }
  }, [admin, userId, loadJournal]);

  useEffect(() => {
    refresh();
  }, [refresh]);

  return (
    <div className="space-y-5">
      <PageHeader
        title="Journal des actions"
        subtitle={admin ? 'Toutes les actions des comptes, les plus récentes en premier' : 'Vos actions sur le serveur'}
        icon={ScrollText}
        actions={
          <Button variant="secondary" icon={RotateCcw} onClick={refresh} disabled={loading}>
            Actualiser
          </Button>
        }
      />

      {admin && (
        <div className="flex flex-wrap gap-2">
          <button type="button" onClick={() => setUserId('')} className={cx('chip', !userId ? TONE_SOLID.slate : 'chip-off')}>
            Tous
          </button>
          {users.map((user) => (
            <button
              key={user.id}
              type="button"
              onClick={() => setUserId(user.id)}
              className={cx('chip', userId === user.id ? TONE_SOLID.slate : 'chip-off')}
            >
              {user.prenom} {user.nom}
            </button>
          ))}
        </div>
      )}

      {error && <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>}

      {loading ? (
        <p className="text-sm text-slate-500">Chargement du journal…</p>
      ) : entries.length === 0 ? (
        <EmptyState icon={ScrollText} title="Aucune action">
          Les connexions, bilans, tenues et commandes apparaîtront ici.
        </EmptyState>
      ) : (
        <ul className="space-y-2">
          {entries.map((entry) => (
            <li key={entry.id} className="rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
              <div className="flex flex-wrap items-center gap-2">
                <Badge tone={ACTION_TONE[entry.action] || 'slate'}>{ACTION_LABELS[entry.action] || entry.action}</Badge>
                <span className="text-sm font-semibold text-slate-800">{entry.user}</span>
                {entry.identifiant && <span className="font-mono text-xs text-slate-400">{entry.identifiant}</span>}
                <span className="ml-auto text-xs text-slate-400">{fmtDateTime(entry.at * 1000)}</span>
              </div>
              {entry.detail && <p className="mt-1.5 text-sm text-slate-600">{entry.detail}</p>}
              {entry.ip && <p className="mt-1 text-xs text-slate-400">Depuis {entry.ip}</p>}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}