<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; 
   * book_process: string; 
   * airport_greet: string; 
   * arrival_greet: string;
   * overal_star: string;
   * maintenance_proc: string;
   * bf_service: string;
   * nextstay_disc: string;
   * extend_disc: string;
   * become_sponsor: 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 Feedback</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-[1000px] divide-y divide-gray-200 text-sm w-max">
      <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">Book Process</th>
          <th class="py-2 px-4 border-b">Airport Greet</th>
          <th class="py-2 px-4 border-b">Arrival Greet</th>
          <th class="py-2 px-4 border-b">Maintenance Process</th>
          <th class="py-2 px-4 border-b">Breakfast Service</th>
          <th class="py-2 px-4 border-b">Villa in General</th>
          <th class="py-2 px-4 border-b">Want Extend Discount</th>
          <th class="py-2 px-4 border-b">Want Next Stay Discount</th>
          <th class="py-2 px-4 border-b">Want Become Sponsor</th>
        </tr>
      </thead>
      <tbody>
        {#each feedbackList as item}
          <tr class="hover:bg-gray-50">
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.villa_name}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.customer_name}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.checkin_date}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.checkout_date}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.book_process}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.airport_greet}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.arrival_greet}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.maintenance_proc}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.bf_service}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.feedback}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.extend_disc}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.nextstay_disc}</td>
            <td class="py-2 px-4 border-b max-w-[200px] max-h-[100px] overflow-y-auto overflow-x-hidden whitespace-pre-wrap align-text-top">{item.become_sponsor}</td>
          </tr>
        {/each}
      </tbody>
    </table>
  </div>
{/if}
