<script lang="ts">
  interface EmailResultItem {
    participant: {
      id: string;
      name: string;
      surname: string;
      email: string;
    };
    success: boolean;
    error?: string;
  }

  interface EmailResultsSummary {
    success: number;
    errors: number;
    total: number;
  }

  interface EmailResultsData {
    success: boolean;
    results: EmailResultItem[];
    summary: EmailResultsSummary;
  }

  let { emailResults } = $props<{
    emailResults: EmailResultsData | null;
  }>();
</script>

{#if emailResults}
  <div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
    <div class="mb-4 flex items-center justify-between">
      <h2 class="text-xl font-semibold text-gray-900">Email Results</h2>
      <div class="text-sm text-gray-500">
        {emailResults.summary.success} successful, {emailResults.summary.errors} failed
      </div>
    </div>

    <div class="mb-4">
      <div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded-full bg-green-500"></div>
          <span class="text-sm font-medium">Sent: {emailResults.summary.success}</span>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded-full bg-red-500"></div>
          <span class="text-sm font-medium">Failed: {emailResults.summary.errors}</span>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded-full bg-blue-500"></div>
          <span class="text-sm font-medium">Total: {emailResults.summary.total}</span>
        </div>
      </div>
    </div>

    {#if emailResults.results.length > 0}
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
              <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
            </tr>
          </thead>
          <tbody>
            {#each emailResults.results as result}
              <tr class="border-b border-gray-200 hover:bg-gray-50">
                <td class="px-4 py-3 text-sm text-gray-900">
                  {result.participant.name} {result.participant.surname}
                </td>
                <td class="px-4 py-3 text-sm text-gray-900">{result.participant.email}</td>
                <td class="px-4 py-3 text-sm">
                  {#if result.success}
                    <div class="flex items-center text-green-600">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                      </svg>
                      <span class="text-sm font-medium">Sent</span>
                    </div>
                  {:else}
                    <div class="flex items-center text-red-600">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                      </svg>
                      <span class="text-sm font-medium">Failed</span>
                      {#if result.error}
                        <span class="text-xs text-red-500 ml-2">({result.error})</span>
                      {/if}
                    </div>
                  {/if}
                </td>
              </tr>
            {/each}
          </tbody>
        </table>
      </div>
    {/if}
  </div>
{/if}
