<script>
  import { onMount } from "svelte";
  import { supabase } from "$lib/supabaseClient";

  /** @type {{ villa_name: string; customer_name: string; checkin_date: string; checkout_date: string; feedback: string }[]} */
  let feedbackList = [];
  let loading = true;
  let error = "";

  onMount(async () => {
    const { data, error: fetchError } = await supabase
      .from("vb_feedback")
      .select("*")
      .order("checkin_date", { ascending: false });

    if (fetchError) {
      error = "Failed to fetch feedback.";
      console.error(fetchError);
    } else {
      feedbackList = data;
    }
    loading = false;
  });
</script>

<h1 class="text-3xl font-bold text-center my-6">Submitted Feedb ack</h1>

{#if loading}
  <p class="text-center text-gray-500">Loading feedback...</p>
{:else if error}
  <p class="text-center text-red-600 font-semibold">{error}</p>
{:else if feedbackList.length === 0}
  <p class="text-center text-gray-500">No feedback submitted yet.</p>
{:else}
  <div class="overflow-x-auto px-4">
    <table
      class="min-w-full bg-white border border-gray-200 rounded-lg shadow-sm"
    >
      <thead class="bg-gray-100 text-left">
        <tr>
          <th class="py-2 px-4 border-b">Villa</th>
          <th class="py-2 px-4 border-b">Customer</th>
          <th class="py-2 px-4 border-b">Check-in</th>
          <th class="py-2 px-4 border-b">Check-out</th>
          <th class="py-2 px-4 border-b">Feedback</th>
        </tr>
      </thead>
      <tbody>
        {#each feedbackList as item}
          <tr class="hover:bg-gray-50">
            <td class="py-2 px-4 border-b">{item.villa_name}</td>
            <td class="py-2 px-4 border-b">{item.customer_name}</td>
            <td class="py-2 px-4 border-b">{item.checkin_date}</td>
            <td class="py-2 px-4 border-b">{item.checkout_date}</td>
            <td class="py-2 px-4 border-b">{item.feedback}</td>
          </tr>
        {/each}
      </tbody>
    </table>
  </div>
{/if}
