Michess/client/src/components/InviteFriendsModal.tsx

"use client";

import { API_URL } from "@/config";
import { useNotifications } from "@/context/NotificationContext";
import { useSession } from "@/context/session";
import { useState } from "react";

interface Friend {
  id: number;
  friend_id: number;
  friend_name: string;
}

export default function InviteFriendsModal({
  gameCode,
  label = "Freunde einladen"
}: {
  gameCode: string;
  label?: string;
}) {
  const { user } = useSession();
  const { sendGameInvite } = useNotifications();
  const [open, setOpen] = useState(false);
  const [friends, setFriends] = useState<Friend[]>([]);
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState<Record<number, boolean>>({});

  async function openModal() {
    if (!user?.id || typeof user.id === "string") return;
    setOpen(true);
    setLoading(true);
    const res = await fetch(`${API_URL}/v1/friends`, { credentials: "include" });
    if (res.ok) setFriends(await res.json());
    setLoading(false);
  }

  function invite(friendId: number) {
    sendGameInvite(friendId, gameCode);
    setSent((prev) => ({ ...prev, [friendId]: true }));
    setTimeout(() => setSent((prev) => ({ ...prev, [friendId]: false })), 3000);
  }

  if (!user?.id || typeof user.id === "string") return null;

  return (
    <>
      <button className="btn btn-sm btn-outline" onClick={openModal}>
        {label}
      </button>

      {open && (
        <dialog className="modal modal-open">
          <div className="modal-box max-w-sm">
            <button
              className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
              onClick={() => setOpen(false)}
            >
              ✕
            </button>
            <h3 className="font-bold text-lg mb-4">{label}</h3>
            {loading ? (
              <div className="flex justify-center py-4">
                <span className="loading loading-spinner" />
              </div>
            ) : friends.length === 0 ? (
              <p className="text-sm opacity-60">
                Keine Freunde gefunden. Füge zuerst Freunde hinzu.
              </p>
            ) : (
              <div className="flex flex-col gap-3">
                {friends.map((f) => (
                  <div key={f.id} className="flex items-center justify-between gap-2">
                    <span className="font-medium">{f.friend_name}</span>
                    <button
                      className={"btn btn-sm btn-secondary" + (sent[f.friend_id] ? " btn-success" : "")}
                      onClick={() => invite(f.friend_id)}
                    >
                      {sent[f.friend_id] ? "✓ Gesendet" : "Einladen"}
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
          <div className="modal-backdrop bg-black/40" onClick={() => setOpen(false)} />
        </dialog>
      )}
    </>
  );
}