init import projet

apps/web/src/app/predictions/history/page.tsx

@@ -0,0 +1,531 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { MainTabBar } from "@/features/predictions/components/main-tab-bar";
+import styles from "@/features/predictions/styles/predictions.module.css";
+import historyStyles from "@/features/predictions/styles/history.module.css";
+import { getApiUrl, PROJECT_CHANGED_EVENT } from "@/lib/auth";
+import { getPredictionActivity } from "@/lib/predictions-client";
+import type { PredictionActivity } from "@/types/predictions";
+
+/* ---- helpers ---- */
+function formatDate(value: string) {
+  const date = new Date(value);
+  return new Intl.DateTimeFormat("fr-FR", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(date);
+}
+
+function formatRelativeDate(value: string) {
+  const date = new Date(value);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / 60_000);
+  const diffHours = Math.floor(diffMs / 3_600_000);
+  const diffDays = Math.floor(diffMs / 86_400_000);
+
+  if (diffMinutes < 1) return "À l'instant";
+  if (diffMinutes < 60) return `Il y a ${diffMinutes} min`;
+  if (diffHours < 24) return `Il y a ${diffHours}h`;
+  if (diffDays === 1) return "Hier";
+  if (diffDays < 7) return `Il y a ${diffDays} jours`;
+  return formatDate(value);
+}
+
+function getDisplayName(user: NonNullable<PredictionActivity["user"]>) {
+  return user.displayName ?? user.username;
+}
+
+function resolveProfileSrc(apiUrl: string, url: string | null | undefined): string | null {
+  if (!url) return null;
+  if (url.startsWith("http")) return url;
+  return `${apiUrl}${url}`;
+}
+
+/**
+ * Parse les valeurs encodées dans le message du serveur.
+ * Format : "Nom a change CardTitle: Field1: val1 | Field2: val2"
+ * Format création : "Nom a pronostique CardTitle" (pas de valeurs)
+ */
+function parseMessageFieldValues(message: string): Array<{ label: string; rawValue: string }> {
+  // Cherche le séparateur entre le titre de la carte et les valeurs de champs
+  // ex: "...Sexe du bebe: Sexe: fille" → après le premier ": " on a "Sexe: fille"
+  const colonIdx = message.indexOf(": ");
+  if (colonIdx === -1) return [];
+
+  const valuesStr = message.slice(colonIdx + 2);
+  // Évite de parser des messages sans valeurs structurées (pas de ": " interne)
+  if (!valuesStr.includes(": ")) return [];
+
+  return valuesStr
+    .split(" | ")
+    .map((part) => {
+      const idx = part.indexOf(": ");
+      if (idx === -1) return null;
+      return { label: part.slice(0, idx), rawValue: part.slice(idx + 2) };
+    })
+    .filter((v): v is { label: string; rawValue: string } => v !== null && v.rawValue !== "(vide)" && v.rawValue.trim() !== "");
+}
+
+function isSexField(label: string): boolean {
+  const l = label.toLowerCase();
+  return l.includes("sexe") || l.includes("sex") || l.includes("genre");
+}
+
+function isWeightField(label: string): boolean {
+  const l = label.toLowerCase();
+  return l.includes("poid") || l.includes("weight");
+}
+
+function isNamesField(label: string): boolean {
+  const l = label.toLowerCase();
+  return l.includes("prenom") || l.includes("name");
+}
+
+function getMeasureUnit(label: string): string | null {
+  const l = label.toLowerCase();
+  if (l.includes("taille") || l.includes("height") || l.includes("périm") || l.includes("cranien") || l.includes("crânien")) return "cm";
+  return null;
+}
+
+/* ---- Composant : valeur structurée depuis message parsé ---- */
+function ParsedValueDisplay({ label, rawValue }: { label: string; rawValue: string }) {
+  if (isWeightField(label)) {
+    const num = parseFloat(rawValue);
+    if (!isNaN(num)) {
+      const kg = num >= 100 ? num / 1000 : num;
+      return (
+        <div className={historyStyles.valueRow}>
+          <span className={historyStyles.fieldLabel}>{label}</span>
+          <span className={styles.recapWeightBadge}>{kg.toFixed(3)}{"\u00A0"}kg</span>
+        </div>
+      );
+    }
+  }
+
+  if (isSexField(label)) {
+    const isGarcon = rawValue.toLowerCase().includes("gar") || rawValue.toLowerCase() === "garcon" || rawValue.toLowerCase() === "garçon";
+    return (
+      <div className={historyStyles.valueRow}>
+        <span className={historyStyles.fieldLabel}>{label}</span>
+        <div
+          className={`${styles.recapSexAnswer} ${isGarcon ? styles.recapSexAnswerGarcon : styles.recapSexAnswerFille}`}
+          style={{ padding: "0.3rem 0.65rem", display: "inline-flex" }}
+        >
+          <Image
+            src={isGarcon ? "/images/pictos/choix-garcon.png" : "/images/pictos/choix-fille.png"}
+            alt=""
+            width={28}
+            height={28}
+            className={styles.recapSexIcon}
+          />
+          <span className={styles.recapSexLabel} style={{ fontSize: "0.95rem" }}>{rawValue}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (isNamesField(label)) {
+    const names = rawValue.split(/[,;]+/).map((n) => n.trim()).filter(Boolean);
+    return (
+      <div className={historyStyles.valueRow}>
+        <span className={historyStyles.fieldLabel}>{label}</span>
+        <div className={styles.recapParticipantNamesList}>
+          {names.map((name) => (
+            <span key={name} className={styles.recapParticipantNameChip}>{name}</span>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  const num = parseFloat(rawValue);
+  if (!isNaN(num) && rawValue.trim() !== "") {
+    const unit = getMeasureUnit(label);
+    return (
+      <div className={historyStyles.valueRow}>
+        <span className={historyStyles.fieldLabel}>{label}</span>
+        <span className={historyStyles.valuePill}>{rawValue}{unit ? `\u00A0${unit}` : ""}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={historyStyles.valueRow}>
+      <span className={historyStyles.fieldLabel}>{label}</span>
+      <span className={historyStyles.valuePill}>{rawValue}</span>
+    </div>
+  );
+}
+
+/* ---- Composant : valeur structurée depuis entry.values (fallback) ---- */
+type ActivityEntryValue = NonNullable<PredictionActivity["entry"]>["values"][number];
+
+function EntryValueDisplay({ value }: { value: ActivityEntryValue }) {
+  const label = value.field.label;
+
+  if (isWeightField(label) && value.valueNumber != null) {
+    const kg = value.valueNumber >= 100 ? value.valueNumber / 1000 : value.valueNumber;
+    return (
+      <div className={historyStyles.valueRow}>
+        <span className={historyStyles.fieldLabel}>{label}</span>
+        <span className={styles.recapWeightBadge}>{kg.toFixed(3)} kg</span>
+      </div>
+    );
+  }
+
+  if (isSexField(label) && value.valueText) {
+    const isGarcon = value.valueText.toLowerCase().includes("gar");
+    return (
+      <div className={historyStyles.valueRow}>
+        <span className={historyStyles.fieldLabel}>{label}</span>
+        <div className={`${styles.recapSexAnswer} ${isGarcon ? styles.recapSexAnswerGarcon : styles.recapSexAnswerFille}`} style={{ padding: "0.3rem 0.65rem", display: "inline-flex" }}>
+          <Image src={isGarcon ? "/images/pictos/choix-garcon.png" : "/images/pictos/choix-fille.png"} alt="" width={28} height={28} className={styles.recapSexIcon} />
+          <span className={styles.recapSexLabel} style={{ fontSize: "0.95rem" }}>{value.valueText}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (isNamesField(label) && value.valueText) {
+    const names = value.valueText.split(/[,;]+/).map((n) => n.trim()).filter(Boolean);
+    return (
+      <div className={historyStyles.valueRow}>
+        <span className={historyStyles.fieldLabel}>{label}</span>
+        <div className={styles.recapParticipantNamesList}>
+          {names.map((name) => <span key={name} className={styles.recapParticipantNameChip}>{name}</span>)}
+        </div>
+      </div>
+    );
+  }
+
+  if (value.valueNumber != null) {
+    const unit = getMeasureUnit(label);
+    return (
+      <div className={historyStyles.valueRow}>
+        <span className={historyStyles.fieldLabel}>{label}</span>
+        <span className={historyStyles.valuePill}>{value.valueNumber}{unit ? `\u00A0${unit}` : ""}</span>
+      </div>
+    );
+  }
+
+  if (value.valueText) {
+    return (
+      <div className={historyStyles.valueRow}>
+        <span className={historyStyles.fieldLabel}>{label}</span>
+        <span className={historyStyles.valuePill}>{value.valueText}</span>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+type ActivityGlyphKind =
+  | "prediction"
+  | "update"
+  | "score"
+  | "validated"
+  | "lock"
+  | "unlock"
+  | "target"
+  | "card"
+  | "trash"
+  | "log";
+
+function getActivityGlyphKind(type: string): ActivityGlyphKind {
+  switch (type) {
+    case "PREDICTION_CREATED": return "prediction";
+    case "PREDICTION_UPDATED": return "update";
+    case "SCORE_SUGGESTED": return "score";
+    case "SCORE_VALIDATED": return "validated";
+    case "GAME_CLOSED": return "lock";
+    case "GAME_OPENED": return "unlock";
+    case "OUTCOME_SET": return "target";
+    case "CARD_CREATED":
+    case "CARD_UPDATED": return "card";
+    case "CARD_DELETED": return "trash";
+    default: return "log";
+  }
+}
+
+function ActivityGlyph({ kind }: Readonly<{ kind: ActivityGlyphKind }>) {
+  const commonProps = {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.9,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+    viewBox: "0 0 24 24",
+    ariaHidden: true,
+  };
+
+  switch (kind) {
+    case "prediction":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <path d="M4 20l4.3-1.1L18.6 8.6a2.2 2.2 0 0 0-3.1-3.1L5.2 15.8 4 20Z" />
+          <path d="m13.8 7.2 3 3" />
+        </svg>
+      );
+    case "update":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <path d="M19 8a7 7 0 0 0-11.8-2L5 8" />
+          <path d="M5 4v4h4" />
+          <path d="M5 16a7 7 0 0 0 11.8 2L19 16" />
+          <path d="M19 20v-4h-4" />
+        </svg>
+      );
+    case "score":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <path d="m12 3 2.5 5.1 5.6.8-4 3.9.9 5.5L12 15.8 7 18.3l.9-5.5-4-3.9 5.6-.8Z" />
+        </svg>
+      );
+    case "validated":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <circle cx="12" cy="10" r="5.5" />
+          <path d="m9.8 10.2 1.5 1.6 3-3.2" />
+          <path d="M10.2 15.2 8.8 20l3.2-1.9L15.2 20l-1.4-4.8" />
+        </svg>
+      );
+    case "lock":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <rect x="5" y="11" width="14" height="9" rx="2.5" />
+          <path d="M8 11V8.5a4 4 0 1 1 8 0V11" />
+        </svg>
+      );
+    case "unlock":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <rect x="5" y="11" width="14" height="9" rx="2.5" />
+          <path d="M16 11V8.5a4 4 0 0 0-7.7-1.4" />
+        </svg>
+      );
+    case "target":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <circle cx="12" cy="12" r="7" />
+          <circle cx="12" cy="12" r="3" />
+          <path d="M12 2v3" />
+          <path d="M22 12h-3" />
+          <path d="M12 22v-3" />
+          <path d="M2 12h3" />
+        </svg>
+      );
+    case "card":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <rect x="4" y="6" width="12" height="14" rx="2.5" />
+          <path d="M8 10h4" />
+          <path d="M8 14h6" />
+          <path d="M16 9h2.5a1.5 1.5 0 0 1 1.5 1.5V17" />
+        </svg>
+      );
+    case "trash":
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <path d="M4 7h16" />
+          <path d="M9 4h6" />
+          <path d="m6 7 1 12h10l1-12" />
+          <path d="M10 11v5" />
+          <path d="M14 11v5" />
+        </svg>
+      );
+    default:
+      return (
+        <svg viewBox={commonProps.viewBox} fill={commonProps.fill} stroke={commonProps.stroke} strokeWidth={commonProps.strokeWidth} strokeLinecap={commonProps.strokeLinecap} strokeLinejoin={commonProps.strokeLinejoin} aria-hidden>
+          <path d="M7 7h10" />
+          <path d="M7 12h10" />
+          <path d="M7 17h6" />
+        </svg>
+      );
+  }
+}
+
+function getActivityBadgeClass(type: string): string {
+  if (type === "GAME_CLOSED" || type === "GAME_OPENED") return historyStyles.badgeSystem;
+  if (type === "SCORE_VALIDATED") return historyStyles.badgeSuccess;
+  if (type === "SCORE_SUGGESTED") return historyStyles.badgeWarning;
+  if (type === "PREDICTION_CREATED" || type === "PREDICTION_UPDATED") return historyStyles.badgePrimary;
+  return historyStyles.badgeMuted;
+}
+
+function UserAvatar({ user, apiUrl }: { user: NonNullable<PredictionActivity["user"]>; apiUrl: string }) {
+  const name = getDisplayName(user);
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((p) => p[0]?.toUpperCase() ?? "")
+    .join("") || "?";
+  const imageSrc = resolveProfileSrc(apiUrl, user.profileImageUrl);
+
+  return (
+    <div
+      className={`${styles.recapAvatar} ${styles.recapAvatarSm}`}
+      style={user.profileBgColor ? { background: user.profileBgColor } : undefined}
+      aria-hidden="true"
+    >
+      {imageSrc ? <img src={imageSrc} alt="" /> : <span>{initials}</span>}
+    </div>
+  );
+}
+
+export default function PredictionsHistoryPage() {
+  const apiUrl = getApiUrl();
+  const [activity, setActivity] = useState<PredictionActivity[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [message, setMessage] = useState("");
+  const [projectRefreshKey, setProjectRefreshKey] = useState(0);
+
+  useEffect(() => {
+    const onProjectChanged = () => {
+      setProjectRefreshKey((current) => current + 1);
+    };
+    window.addEventListener(PROJECT_CHANGED_EVENT, onProjectChanged);
+    return () => window.removeEventListener(PROJECT_CHANGED_EVENT, onProjectChanged);
+  }, []);
+
+  useEffect(() => {
+    setLoading(true);
+    setMessage("");
+    getPredictionActivity()
+      .then((payload) => setActivity(payload))
+      .catch((error) => setMessage(error instanceof Error ? error.message : "Impossible de charger l'historique"))
+      .finally(() => setLoading(false));
+  }, [projectRefreshKey]);
+
+  return (
+    <>
+      <section className={`${styles.recapHero} ${styles.historyHero}`}>
+        <div className={styles.recapHeroContent}>
+          <span className={styles.recapHeroEyebrow}>Activité</span>
+          <h1>Historique des actions</h1>
+          <p>Toutes les modifications du projet, en temps réel.</p>
+          <div className={styles.recapHeroStats}>
+            <div className={styles.recapHeroStatChip}>
+              <span className={`${styles.recapHeroStatValue} ${historyStyles.heroStatIcon}`}>
+                <ActivityGlyph kind="prediction" />
+              </span>
+              <span className={styles.recapHeroStatLabel}>Pronostics</span>
+            </div>
+            <div className={styles.recapHeroStatChip}>
+              <span className={`${styles.recapHeroStatValue} ${historyStyles.heroStatIcon}`}>
+                <ActivityGlyph kind="update" />
+              </span>
+              <span className={styles.recapHeroStatLabel}>Modifs</span>
+            </div>
+            {/* <div className={styles.recapHeroStatChip}>
+              <span className={styles.recapHeroStatValue}>⭐</span>
+              <span className={styles.recapHeroStatLabel}>Scores</span>
+            </div> */}
+          </div>
+        </div>
+        <div className={styles.historyHeroIllustration} aria-hidden="true">
+          <span className={styles.historyHeroLine} />
+          <span className={styles.historyHeroDot1} />
+          <span className={styles.historyHeroDot2} />
+          <span className={styles.historyHeroDot3} />
+        </div>
+      </section>
+
+      <MainTabBar />
+
+      {!loading && !message && activity.length > 0 && (
+        <div className={styles.recapSectionHeading} style={{ padding: "0 0.5rem" }}>
+          <p>{activity.length} événement{activity.length !== 1 ? "s" : ""} enregistré{activity.length !== 1 ? "s" : ""}.</p>
+        </div>
+      )}
+
+      {loading && (
+        <div className={styles.loadingScreen}>
+          <p>Chargement de l'historique…</p>
+        </div>
+      )}
+
+      {!loading && message && (
+        <p className={historyStyles.errorMsg}>{message}</p>
+      )}
+
+      {!loading && !message && activity.length === 0 && (
+        <p className={styles.empty} style={{ margin: "0 0.5rem" }}>Aucun événement pour le moment.</p>
+      )}
+
+      {!loading && !message && activity.length > 0 && (
+        <div className={historyStyles.timelineList}>
+          {activity.map((item) => {
+            // Priorité : parser les valeurs depuis le message (format serveur fiable)
+            const parsedValues = parseMessageFieldValues(item.message);
+            // Fallback : entry.values (état courant de l'entrée, peut différer)
+            const fallbackValues = parsedValues.length === 0 ? (item.entry?.values ?? []) : [];
+            const hasDisplayValues = parsedValues.length > 0 || fallbackValues.length > 0;
+
+            // Extraire le nom de l'auteur depuis le message si item.user est null
+            // Ex: "Valerie a change X: ..." → "Valerie"
+            const authorFromMessage = !item.user
+              ? item.message.split(/\s+a\s+(change|pronostique|cree|fixe|suggere|valide)/i)?.[0] ?? null
+              : null;
+            const activityGlyphKind = getActivityGlyphKind(item.type);
+
+            return (
+              <article key={item.id} className={historyStyles.timelineCard}>
+                {/* Left: avatar ou icône système */}
+                <div className={historyStyles.timelineAvatarCol}>
+                  {item.user ? (
+                    <UserAvatar user={item.user} apiUrl={apiUrl} />
+                  ) : (
+                    <div className={historyStyles.systemIcon} aria-hidden="true">
+                      <span className={historyStyles.systemIconGlyph}>
+                        <ActivityGlyph kind={activityGlyphKind} />
+                      </span>
+                    </div>
+                  )}
+                  <div className={historyStyles.timelineLine} aria-hidden="true" />
+                </div>
+
+                {/* Right: contenu */}
+                <div className={historyStyles.timelineContent}>
+                  <div className={historyStyles.timelineHeader}>
+                    <div className={historyStyles.timelineHeadLeft}>
+                      {(item.user || authorFromMessage) && (
+                        <strong className={historyStyles.userName}>
+                          {item.user ? getDisplayName(item.user) : authorFromMessage}
+                        </strong>
+                      )}
+                      <span className={`${historyStyles.activityLabel} ${getActivityBadgeClass(item.type)}`}>
+                        <span className={historyStyles.activityLabelIcon} aria-hidden="true">
+                          <ActivityGlyph kind={activityGlyphKind} />
+                        </span>
+                        <span className={historyStyles.activityLabelText}>{item.card?.title ?? item.message}</span>
+                      </span>
+                    </div>
+                    <time className={historyStyles.timelineTime} dateTime={item.createdAt} title={formatDate(item.createdAt)}>
+                      {formatRelativeDate(item.createdAt)}
+                    </time>
+                  </div>
+
+                  {hasDisplayValues && (
+                    <div className={historyStyles.valuesBlock}>
+                      {parsedValues.map((v) => (
+                        <ParsedValueDisplay key={v.label} label={v.label} rawValue={v.rawValue} />
+                      ))}
+                      {fallbackValues.map((v) => (
+                        <EntryValueDisplay key={v.fieldId} value={v} />
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+}