<script lang="ts">
  import { onMount } from "svelte";
  import { supabase } from "$lib/supabaseClient";
  import logo from "$lib/images/logo.webp";

  type TimesheetForm = {
    entered_by: string;
    work_description: string;
    type_of_work: "Running" | "Periodic" | "Irregular";
    category_of_work:
      | "Cleaning"
      | "Gardening/Pool"
      | "Maintenance"
      | "Supervision"
      | "Guest Service"
      | "Administration"
      | "Non Billable";
    villa_id: string;
    datetime_in: string;
    datetime_out: string;
    total_work_hour: number;
    remarks: string;
    approval: boolean | null; // Allow null for new entries
  };

  type Villa = {
    id: string;
    name: string;
  };

  type Employee = {
    id: string;
    name: string;
  };

  let employees: Employee[] = [];
  let villas: Villa[] = [];

  let form: TimesheetForm = {
    entered_by: "",
    work_description: "",
    type_of_work: "Running",
    category_of_work: "Cleaning",
    villa_id: "",
    datetime_in: "",
    datetime_out: "",
    total_work_hour: 0,
    remarks: "",
    approval: null, // Default null
  };

  const typeOfWorkOptions: TimesheetForm["type_of_work"][] = [
    "Running",
    "Periodic",
    "Irregular",
  ];
  const categoryOptions: TimesheetForm["category_of_work"][] = [
    "Cleaning",
    "Gardening/Pool",
    "Maintenance",
    "Supervision",
    "Guest Service",
    "Administration",
    "Non Billable",
  ];

  onMount(async () => {
    // Fetch villas
    const { data: villaData, error: villaError } = await supabase
      .from("vb_villas")
      .select("id, villa_name, villa_status")
      .eq("villa_status", "Active")
      .order("villa_name", { ascending: true });

    if (villaError) {
      console.error("Failed to fetch villas:", villaError.message);
    } else if (villaData) {
      villas = villaData.map((v) => ({ id: v.id, name: v.villa_name }));
    }

    // Fetch employees
    const { data: empData, error: empError } = await supabase
      .from("vb_employee")
      .select("id, employee_name")
      .eq("employee_status", "Active")
      .order("employee_name", { ascending: true });

    if (empError) {
      console.error("Failed to fetch employees:", empError.message);
    } else if (empData) {
      employees = empData.map((e) => ({ id: e.id, name: e.employee_name }));
    }
  });

  function calculateTotalHours() {
    if (form.datetime_in && form.datetime_out) {
      const start = new Date(form.datetime_in);
      const end = new Date(form.datetime_out);
      const diffInMs = end.getTime() - start.getTime();
      const hours = diffInMs / (1000 * 60 * 60);
      form.total_work_hour = Math.max(Number(hours.toFixed(2)), 0);
    } else {
      form.total_work_hour = 0;
    }
  }

  async function submitForm() {
    calculateTotalHours();

    if (!form.entered_by) {
      alert("Please select an employee.");
      return;
    }
    if (!form.villa_id) {
      alert("Please select a villa.");
      return;
    }

    const { error } = await supabase.from("vb_timesheet").insert([form]);

    if (error) {
      alert("Failed to submit timesheet: " + error.message);
    } else {
      alert("Timesheet submitted successfully!");
      form = {
        entered_by: "",
        work_description: "",
        type_of_work: "Running",
        category_of_work: "Cleaning",
        villa_id: "",
        datetime_in: "",
        datetime_out: "",
        total_work_hour: 0,
        remarks: "",
        approval: null,
      };
    }
  }
</script>

<div class="min-h-screen bg-gray-100 flex items-center justify-center">
  <form
    on:submit|preventDefault={submitForm}
    class="w-full max-w-lg bg-white p-6 rounded-2xl shadow-xl space-y-4"
  >
    <img src={logo} alt="Villa Logo" class="mx-auto mb-6" width="250" />

    <h2 class="text-2xl font-bold text-center mb-6">Timesheet Entry</h2>

    <div>
      <label for="t_eb" class="block text-sm font-medium mb-1">Entered By</label
      >
      <select
        id="t_eb"
        class="w-full border p-2 rounded"
        bind:value={form.entered_by}
        required
      >
        <option value="" disabled selected>Select Employee</option>
        {#each employees as employee}
          <option value={employee.id}>{employee.name}</option>
        {/each}
      </select>
    </div>

    <div>
      <label for="t_wd" class="block text-sm font-medium mb-1"
        >Work Description</label
      >
      <textarea
        id="t_wd"
        class="w-full border border-gray-300 p-2 rounded"
        bind:value={form.work_description}
        placeholder="Describe the work"
        required
      ></textarea>
    </div>

    <div>
      <label for="t_ow" class="block text-sm font-medium mb-1"
        >Type of Work</label
      >
      <select
        id="t_ow"
        class="w-full border p-2 rounded"
        bind:value={form.type_of_work}
      >
        {#each typeOfWorkOptions as option}
          <option value={option}>{option}</option>
        {/each}
      </select>
    </div>

    <div>
      <label for="t_cow" class="block text-sm font-medium mb-1"
        >Category of Work</label
      >
      <select
        id="t_cow"
        class="w-full border p-2 rounded"
        bind:value={form.category_of_work}
      >
        {#each categoryOptions as option}
          <option value={option}>{option}</option>
        {/each}
      </select>
    </div>

    <div>
      <label for="t_vn" class="block text-sm font-medium mb-1">Villa</label>
      <select
        id="t_vn"
        class="w-full border p-2 rounded"
        bind:value={form.villa_id}
        required
      >
        <option value="" disabled selected>Select Villa</option>
        {#each villas as villa}
          <option value={villa.id}>{villa.name}</option>
        {/each}
      </select>
    </div>

    <div>
      <label for="tdto" class="block text-sm font-medium mb-1"
        >Date/Time In</label
      >
      <input
        id="tdto"
        type="datetime-local"
        class="w-full border p-2 rounded"
        bind:value={form.datetime_in}
        on:change={calculateTotalHours}
        required
      />
    </div>

    <div>
      <label for="dto" class="block text-sm font-medium mb-1"
        >Date/Time Out</label
      >
      <input
        id="dto"
        type="datetime-local"
        class="w-full border p-2 rounded"
        bind:value={form.datetime_out}
        on:change={calculateTotalHours}
        required
      />
    </div>

    <div class="text-sm">
      <label for="ttwo" class="block font-medium mb-1">Total Work Hours</label>
      <div id="ttwo" class="px-3 py-2">{form.total_work_hour}</div>
    </div>

    <div>
      <label for="trmk" class="block text-sm font-medium mb-1">Remarks</label>
      <textarea
        id="trmk"
        class="w-full border border-gray-300 p-2 rounded"
        bind:value={form.remarks}
        placeholder="Optional remarks"
      ></textarea>
    </div>

    <button
      type="submit"
      class="w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
    >
      Submit Timesheet
    </button>
  </form>
</div>
