/* eslint-disable @next/next/no-img-element */
"use client";
import React, { useContext, useEffect, useRef, useState } from "react";
import { SessionHandlerContext } from "@/components/webpage/Session/Session";
import { WsEvent, DrawingState } from "@/lib/SessionData/Enums";
import type { Initalisation, Update, WsData } from "@/lib/SessionData/Interfaces";
import styles from "@/styles/Session/PriorImages.module.css";

export default function StackedImages({ sessionId }: { sessionId: string }) {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  const [images, setImages] = useState<string[]>([]);
  const [assignedIdeaId, setAssignedIdeaId] = useState<string | null>(null);
  const assignedIdeaIdRef = useRef<string | null>(null);
  const sessionHandler = useContext(SessionHandlerContext);

  useEffect(() => {
    assignedIdeaIdRef.current = assignedIdeaId;
  }, [assignedIdeaId]);

  useEffect(() => {
    if (!sessionHandler) return;
    const handler = (wsData: WsData) => {
      if (wsData.event === WsEvent.Initalisation) {
        const data = wsData.data as Initalisation;
        if (data) {
          if (Array.isArray(data.images)) setImages(data.images);
          if (typeof data.assignedIdeaId === "string" || data.assignedIdeaId === null) setAssignedIdeaId(data.assignedIdeaId ?? null);
        }
      }

      if (wsData.event === WsEvent.DrawingUpdate) {
        const update = wsData.data as Update;
        // nextRound message contains assignedIdeaId and current ideaImages for this client
        if (update && update.type === DrawingState.NextRound && wsData.message) {
          try {
            const payload = JSON.parse(wsData.message);
            setAssignedIdeaId(payload.assignedIdeaId ?? null);
            setImages(Array.isArray(payload.ideaImages) ? payload.ideaImages : []);
          } catch (e) {
            console.error("Failed to parse nextRound payload", e);
          }
        }

        // New image broadcast: only add if it belongs to our assigned idea (wsData.message === assignedIdeaId)
        if (update && update.type === DrawingState.Image && typeof update.value === "string") {
          const currentAssigned = assignedIdeaIdRef.current;
          if (currentAssigned && wsData.message === currentAssigned) {
            setImages((prev) => [update.value as string, ...prev]);
          }
        }
      }
    };

    sessionHandler.registerListener([WsEvent.Initalisation, WsEvent.DrawingUpdate], handler);
  }, [sessionHandler]);

  useEffect(() => {
    // Reset when session changes to avoid stale images
    setImages([]);
    setAssignedIdeaId(null);
  }, [sessionId]);

  return (
    <div className={`flex flex-col justify-space-between items-center ${styles.container}`}>
      {images.map((src, i) => {
        const isActive = activeIndex === i;
        return (
          <div key={i} className={styles.imageCard}>
            <img
              src={src}
                  alt={`Session Bild ${i + 1}`}
              onMouseEnter={() => setActiveIndex(i)}
              className={`stacked-image ${isActive ? "active" : ""}`}
              style={{ maxWidth: "100%" }}
            />
          </div>
        );
      })}
    </div>
  );
}