'use client';

import { AbstractApi } from "@/app/api/abstract-api";
import { Guest } from "@/app/lib/guest";
import { Invitation, InvitationSerializer } from "@/app/lib/invitation";

export default function InvitationsBoard({ guests, invitations }: {
  guests: Array<Guest>,
  invitations: Array<Invitation>
}) {
  const api = new AbstractApi<Invitation>();
  const serializer = new InvitationSerializer();

  // Filter out guests that are already in invitations
  const availableGuests = guests.filter(
    (guest) => !invitations.some((invitation) =>
      invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
    )
  );

  function handleCreateInvitation() {
    api.create(serializer, new Invitation(), () => {
      console.log("Invitation created successfully");
    });
  }

  return (
    <div className="flex h-screen">
      {/* Left Column: Guests */}
      <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
      <h2 className="text-lg font-semibold mb-4">Guests</h2>
      <ul>
        {availableGuests.map((guest, index) => (
        <li
          key={index}
          className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
          draggable="true"
        >
          <h3 className="text-md font-medium">{guest.name}</h3>
        </li>
        ))}
      </ul>
      </div>

      {/* Right Column: Invitations */}
      <div className="w-3/4 h-full overflow-auto p-4">
      <h2 className="text-lg font-semibold mb-4">Invitations</h2>

      <button
        onClick={handleCreateInvitation}
        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Create New Invitation
      </button>

      <div className="grid grid-cols-4 gap-6">
        {invitations.map((invitation, index) => (
        <div
          key={invitation.id}
          className="flex items-center justify-center w-full bg-green-800 border border-green-900"
          style={{ aspectRatio: "1.618 / 1" }}
        >
          <ul className="text-center text-yellow-500 font-cursive text-lg">
          {invitation.guests.map((guest) => (
        <li key={guest.id}>{guest.name}</li>
          ))}
          </ul>
        </div>
        ))}
      </div>
      </div>
    </div>
  );
}