<!-- src/pages/admin/authorize.vue -->
<template>
  <div class="flex">
    <div class="w-full px-4 md:px-10 py-4">
      <!-- Breadcrumbs & Title -->
      <div class="text-sm breadcrumbs">
        <ul>
          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
          <li>Set Oil Pricing</li>
        </ul>
      </div>

      <!-- Page Header -->
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mt-4 mb-6">
        <div>
          <h1 class="text-2xl md:text-3xl font-bold flex items-center gap-3">
            <div
              class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-primary/60 flex items-center justify-center shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" class="w-5 h-5 text-primary-content">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            Set Today's Oil Pricing
          </h1>
          <p class="text-base-content/60 mt-1 ml-13">Set daily oil prices and service fees</p>
        </div>
      </div>

      <!-- Main Form Card -->
      <div class="modern-table-card p-6 mt-6">
        <form @submit.prevent="onSubmit" class="space-y-6">

          <!-- SECTION 1: Base Pricing -->
          <div>
            <h2 class="text-lg font-bold">Base Pricing</h2>
            <p class="text-xs text-gray-400">Set the core price per gallon for different groups.</p>
            <div class="divider mt-2 mb-4"></div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <!-- Price from Supplier -->
              <div class="form-control">
                <label class="label"><span class="label-text">Price from Supplier</span></label>
                <label class="input-group input-group-sm">
                  <span>$</span>
                  <input v-model.number="OilForm.price_from_supplier" type="number" step="0.01" placeholder="3.50"
                    class="input input-bordered input-sm w-full" />
                </label>
              </div>
              <!-- Price for Customer -->
              <div class="form-control">
                <label class="label"><span class="label-text">Price for Customer</span></label>
                <label class="input-group input-group-sm">
                  <span>$</span>
                  <input v-model.number="OilForm.price_for_customer" type="number" step="0.01" placeholder="4.50"
                    class="input input-bordered input-sm w-full" />
                </label>
              </div>
              <!-- Price for Employee -->
              <div class="form-control">
                <label class="label"><span class="label-text">Price for Employee</span></label>
                <label class="input-group input-group-sm">
                  <span>$</span>
                  <input v-model.number="OilForm.price_for_employee" type="number" step="0.01" placeholder="4.00"
                    class="input input-bordered input-sm w-full" />
                </label>
              </div>
            </div>
          </div>

          <!-- SECTION 2: Service Fees -->
          <div>
            <h2 class="text-lg font-bold">Service Fees</h2>
            <p class="text-xs text-gray-400">Set the flat fees for special delivery services.</p>
            <div class="divider mt-2 mb-4"></div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <!-- Price Same Day -->
              <div class="form-control">
                <label class="label"><span class="label-text">Same Day Fee</span></label>
                <label class="input-group input-group-sm">
                  <span>$</span>
                  <input v-model.number="OilForm.price_same_day" type="number" step="1.00" placeholder="50.00"
                    class="input input-bordered input-sm w-full" />
                </label>
              </div>
              <!-- Price Prime -->
              <div class="form-control">
                <label class="label"><span class="label-text">Prime Fee</span></label>
                <label class="input-group input-group-sm">
                  <span>$</span>
                  <input v-model.number="OilForm.price_prime" type="number" step="1.00" placeholder="75.00"
                    class="input input-bordered input-sm w-full" />
                </label>
              </div>
              <!-- Price Emergency -->
              <div class="form-control">
                <label class="label"><span class="label-text">Emergency Fee</span></label>
                <label class="input-group input-group-sm">
                  <span>$</span>
                  <input v-model.number="OilForm.price_emergency" type="number" step="1.00" placeholder="150.00"
                    class="input input-bordered input-sm w-full" />
                </label>
              </div>
            </div>
          </div>

          <!-- SUBMIT BUTTON -->
          <div class="pt-4">
            <button type="submit" class="btn btn-primary btn-sm">Update Pricing</button>
          </div>
        </form>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { notify } from "@kyvg/vue3-notification";
import { adminService } from '../../services/adminService';
import { authService } from '../../services/authService';
import { AxiosResponse, AxiosError } from '../../types/models';

// State
const user = ref<any>(null);
const OilForm = ref({
  price_from_supplier: 0,
  price_for_customer: 0,
  price_for_employee: 0,
  price_same_day: 0,
  price_prime: 0,
  price_emergency: 0,
});

const router = useRouter();

// Methods
const userStatus = async () => {
  try {
    const response: AxiosResponse<any> = await authService.whoami();
    if (response.data.ok) {
      user.value = response.data.user;
    }
  } catch (error) {
    user.value = null;
  }
};

const getCurrentPrices = async () => {
  try {
    const response: AxiosResponse<any> = await adminService.getOilPricing();
    if (response.data) {
      OilForm.value = response.data;
    }
  } catch (err) {
    console.error("Failed to fetch oil prices", err);
  }
};

const CreatePricing = async (payload: any) => {
  try {
    const response: AxiosResponse<any> = await adminService.updateOilPricing(payload);
    if (response.data.ok) {
      notify({
        title: "Success",
        text: "Prices have been updated!",
        type: "success",
      });
      router.push({ name: "home" });
    } else {
      notify({
        title: "Error",
        text: response.data.error || "An unknown error occurred.",
        type: "error",
      });
    }
  } catch (err: unknown) {
    const error = err as AxiosError<{ error?: string }>;
    notify({
      title: "Error",
      text: error.response?.data?.error || "An error occurred while updating prices.",
      type: "error",
    });
  }
};

const onSubmit = () => {
  CreatePricing(OilForm.value);
};

// Lifecycle
onMounted(() => {
  userStatus();
  getCurrentPrices();
});
</script>