import React, { useEffect, useState } from "react";
import styles from "./Participants.module.css";
import { User as WsUser} from "@/lib/SessionData/Interfaces";

type Props = {
  seatCount: number;
  participants: Array<WsUser>;
  onKick?: (participant: WsUser) => void;
  currentClientId?: string | null;
  onRename?: (participant: WsUser, newName: string) => void;
  canKick?: boolean;
};

function Participants({ seatCount, participants, onKick, currentClientId, onRename, canKick = false }: Props) {
  const [editingId, setEditingId] = useState<string | null>(null);
  const [draftName, setDraftName] = useState("");

  useEffect(() => {
    if (!editingId) return;
    const stillExists = participants.some((p) => p.id === editingId);
    if (!stillExists) {
      setEditingId(null);
      setDraftName("");
    }
  }, [editingId, participants]);

  const commitRename = (participant: WsUser | undefined, currentName: string) => {
    if (!participant) {
      setEditingId(null);
      setDraftName("");
      return;
    }
    const trimmed = draftName.trim();
    if (!trimmed || trimmed === currentName) {
      setEditingId(null);
      setDraftName("");
      return;
    }
    onRename?.(participant, trimmed);
    setEditingId(null);
    setDraftName("");
  };

  return (
    <div className={styles.container}>
      {Array.from({ length: seatCount }).map((_, idx) => {
        const participant = participants[idx];
        const isOccupied = !!participant;
        const isSelfGuest =
          !!participant && participant.id === currentClientId && participant.userId === false;
        const isEditing = isSelfGuest && participant?.id === editingId;

        return (
          <div
            key={idx}
            className={`${styles.seat} ${isOccupied ? styles.occupied : styles.empty} ${isSelfGuest ? styles.clickable : ""}`}
            onClick={() => {
              if (participant && isSelfGuest) {
                setEditingId(participant.id);
                setDraftName(participant.name ?? "");
              }
            }}
            role={isSelfGuest ? "button" : undefined}
            tabIndex={isSelfGuest ? 0 : undefined}
            onKeyDown={(event) => {
              if (!isSelfGuest) return;
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                if (participant) {
                  setEditingId(participant.id);
                  setDraftName(participant.name ?? "");
                }
              }
            }}
          >
            {isEditing ? (
              <input
                className={styles.nameInput}
                value={draftName}
                onChange={(event) => setDraftName(event.target.value)}
                onClick={(event) => event.stopPropagation()}
                onMouseDown={(event) => event.stopPropagation()}
                onBlur={() => commitRename(participant, participant?.name ?? "")}
                onKeyDown={(event) => {
                  event.stopPropagation();
                  if (event.key === "Enter") {
                    event.preventDefault();
                    commitRename(participant, participant?.name ?? "");
                  }
                  if (event.key === "Escape") {
                    event.preventDefault();
                    setEditingId(null);
                    setDraftName("");
                  }
                }}
                maxLength={32}
                autoFocus
              />
            ) : (
              <span>{participant?.name || ""}</span>
            )}

            {canKick && isOccupied && participant?.id !== currentClientId && (
              <button
                className={styles.kickButton}
                onClick={(event) => {
                  event.stopPropagation();
                  if (participant) onKick?.(participant);
                }}
              >
                X
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}

export default Participants;