'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)
    )
  );

  // Sort invitations to display those without guests at the top
  const sortedInvitations = [...invitations].sort((a, b) => {
    if (a.guests.length === 0 && b.guests.length > 0) return -1;
    if (a.guests.length > 0 && b.guests.length === 0) return 1;
    return 0;
  });

  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.length} guests without invitation</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.length} 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">
          {sortedInvitations.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" }}
            >
                {invitation.guests.length === 0 ? (
                <p className="text-center text-yellow-500 text-lg italic">
                  (empty invitation)
                </p>
                ) : (
                <ul className="text-center text-yellow-500 text-lg">
                  {invitation.guests.map((guest) => (
                  <li key={guest.id}>{guest.name}</li>
                  ))}
                </ul>
                )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}