<script lang="ts">
  interface Guess {
    book: {
      id: string;
      name: string;
      testament: string;
      section: string;
    };
    testamentMatch: boolean;
    sectionMatch: boolean;
    adjacent: boolean;
  }

  let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
    $props();

  let hasGuesses = $derived(guesses.length > 0);
</script>

{#if hasGuesses}
  <div class="bg-white rounded-2xl shadow-xl overflow-x-auto fade-in">
    <table class="w-full">
      <thead class="fade-in">
        <tr class="bg-linear-to-r from-gray-50 to-gray-300">
          <th
            class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
            >Book</th
          >
          <th
            class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
            >Testament</th
          >
          <th
            class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
            >Section</th
          >
        </tr>
      </thead>
      <tbody>
        {#each guesses as guess, index (guess.book.id)}
          <tr
            class="border-b border-gray-100 transition-colors {guess.book.id ===
            correctBookId
              ? 'bg-green-200 animate-shine'
              : 'hover:bg-gray-50'} {index === 0 ? 'fade-in' : ''}"
          >
            <td
              class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
            >
              {guess.book.id === correctBookId ? "✅" : "❌"}
              {guess.book.name}
            </td>
            <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
              {guess.testamentMatch ? "✅" : "❌"}
              {guess.book.testament.charAt(0).toUpperCase() +
                guess.book.testament.slice(1).toLowerCase()}
            </td>
            <td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
              {guess.sectionMatch ? "✅" : "❌"}
              {guess.adjacent ? "‼️ " : ""}{guess.book.section}
            </td>
          </tr>
        {/each}
      </tbody>
    </table>
  </div>
{/if}

<style>
  @keyframes shine {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .animate-shine {
    background: linear-gradient(110deg, #dcffe7 45%, #f1fff5 50%, #dcffe7 55%);
    background-size: 200% 100%;
    animation: shine 5s infinite;
  }

  .animate-shine.fade-in {
    animation:
      fadeIn 0.5s ease-out,
      shine 5s infinite;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-in {
    animation: fadeIn 0.5s ease-out;
  }
</style>
