<script setup>
import ActionMessage from "@/Components/ActionMessage.vue";
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
import SectionTitle from "@/Components/SectionTitle.vue";
import CurrencyInput from "@/Components/CurrencyInput.vue";
import DatePicker from "@/Components/DatePicker.vue";
import { useForm, router } from "@inertiajs/vue3";
import { watch, nextTick, ref as vRef } from "vue";
import { Label } from "@/Components/ui/label";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";

const props = defineProps({
  client_case: Object,
  show: { type: Boolean, default: false },
  types: Array,
  account_types: { type: Array, default: () => [] },
  // Optional: when provided, drawer acts as edit mode
  contract: { type: Object, default: null },
});

const emit = defineEmits(["close"]);

const close = () => {
  // Clear any previous validation warnings when closing
  formContract.clearErrors();
  formContract.recentlySuccessful = false;
  emit("close");
};

// form state for create or edit
const formContract = useForm({
  client_case_uuid: props.client_case.uuid,
  uuid: props.contract?.uuid ?? null,
  reference: props.contract?.reference ?? "",
  start_date: props.contract?.start_date ?? new Date().toISOString(),
  type_id: props.contract?.type_id ?? props.contract?.type?.id ?? props.types[0].id,
  description: props.contract?.description ?? "",
  // nested account fields, if exists
  initial_amount: props.contract?.account?.initial_amount ?? null,
  balance_amount: props.contract?.account?.balance_amount ?? null,
  account_type_id: props.contract?.account?.type_id ?? null,
});

// keep form in sync when switching between create and edit
const applyContract = (c) => {
  formContract.uuid = c?.uuid ?? null;
  formContract.reference = c?.reference ?? "";
  formContract.start_date = c?.start_date ?? new Date().toISOString();
  formContract.type_id = c?.type_id ?? c?.type?.id ?? props.types[0].id;
  formContract.description = c?.description ?? "";
  formContract.initial_amount = c?.account?.initial_amount ?? null;
  formContract.balance_amount = c?.account?.balance_amount ?? null;
  formContract.account_type_id = c?.account?.type_id ?? null;
};

watch(
  () => props.contract,
  (c) => {
    applyContract(c);
  }
);

watch(
  () => props.show,
  (open) => {
    if (open && !props.contract) {
      // reset for create
      applyContract(null);
    }
    if (!open) {
      // Ensure warnings are cleared when dialog hides
      formContract.clearErrors();
      formContract.recentlySuccessful = false;
    }
  }
);

// optional: focus the reference input when a reference validation error appears
const contractRefInput = vRef(null);
watch(
  () => formContract.errors.reference,
  async (err) => {
    if (err && props.show) {
      await nextTick();
      try {
        contractRefInput.value?.focus?.();
      } catch (e) {}
    }
  }
);

const storeOrUpdate = () => {
  const isEdit = !!formContract.uuid;
  // Debug: log payload being sent to verify balance_amount presence
  try {
    console.debug('Submitting contract form', JSON.parse(JSON.stringify(formContract)));
  } catch (e) {}
  const options = {
    onBefore: () => {
      formContract.start_date = formContract.start_date;
    },
    onSuccess: () => {
      close();
      // keep state clean; reset to initial
      if (!isEdit) formContract.reset();
      // After edit ensure contracts list reflects updated balance
      if (isEdit) {
        try {
          const params = {};
          try {
            const url = new URL(window.location.href);
            const seg = url.searchParams.get('segment');
            if (seg) params.segment = seg;
          } catch (e) {}
          router.visit(route('clientCase.show', { client_case: props.client_case.uuid, ...params }), {
            preserveScroll: true,
            replace: true,
          });
        } catch (e) {}
      }
    },
    preserveScroll: true,
  };
  const params = {};
  try {
    const url = new URL(window.location.href);
    const seg = url.searchParams.get("segment");
    if (seg) params.segment = seg;
  } catch (e) {}
  if (isEdit) {
    formContract.put(
      route("clientCase.contract.update", {
        client_case: props.client_case.uuid,
        uuid: formContract.uuid,
        ...params,
      }),
      options
    );
  } else {
    // route helper merges params for GET; for POST we can append query manually if needed
    let postUrl = route("clientCase.contract.store", props.client_case);
    if (params.segment) {
      postUrl +=
        (postUrl.includes("?") ? "&" : "?") +
        "segment=" +
        encodeURIComponent(params.segment);
    }
    formContract.post(postUrl, options);
  }
};
</script>

<template>
  <CreateDialog
    v-if="!formContract.uuid"
    :show="show"
    title="Dodaj pogodbo"
    confirm-text="Shrani"
    :processing="formContract.processing"
    @close="close"
    @confirm="storeOrUpdate"
  >
    <form @submit.prevent="storeOrUpdate">
        <div
          v-if="formContract.errors.reference"
          class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
        >
          {{ formContract.errors.reference }}
        </div>
        <SectionTitle class="mt-4 border-b mb-4">
          <template #title> Pogodba </template>
        </SectionTitle>

        <div class="space-y-4">
          <div class="space-y-2">
            <Label for="contractRef">Referenca</Label>
            <Input
              id="contractRef"
              ref="contractRefInput"
              v-model="formContract.reference"
              type="text"
              :class="[
                formContract.errors.reference
                  ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
                  : '',
              ]"
              autocomplete="contract-reference"
            />
            <p v-if="formContract.errors.reference" class="text-sm text-red-600">
              {{ formContract.errors.reference }}
            </p>
          </div>

          <div class="space-y-2">
            <Label for="contractStartDate">Datum pričetka</Label>
            <DatePicker
              id="contractStartDate"
              v-model="formContract.start_date"
              format="dd.MM.yyyy"
              :error="formContract.errors.start_date"
            />
          </div>

          <div class="space-y-2">
            <Label for="contractTypeSelect">Tip</Label>
            <Select v-model="formContract.type_id">
              <SelectTrigger>
                <SelectValue placeholder="Izberi tip" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="t in types" :key="t.id" :value="t.id">
                  {{ t.name }}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div class="space-y-2">
            <Label for="contractDescription">Opis</Label>
            <Textarea
              id="contractDescription"
              v-model="formContract.description"
              rows="3"
              placeholder="Opis"
            />
          </div>

          <SectionTitle class="mt-6 border-b mb-4">
            <template #title> Račun </template>
          </SectionTitle>

          <div class="space-y-2">
            <Label for="accountTypeSelect">Tip računa</Label>
            <Select v-model="formContract.account_type_id">
              <SelectTrigger>
                <SelectValue placeholder="Izberi tip računa" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem :value="null">—</SelectItem>
                <SelectItem v-for="at in account_types" :key="at.id" :value="at.id">
                  {{ at.name ?? "#" + at.id }}
                </SelectItem>
              </SelectContent>
            </Select>
            <p v-if="formContract.errors.account_type_id" class="text-sm text-red-600">
              {{ formContract.errors.account_type_id }}
            </p>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="space-y-2">
              <Label for="initialAmount">Predani znesek</Label>
              <CurrencyInput id="initialAmount" v-model="formContract.initial_amount" />
            </div>
            <div class="space-y-2">
              <Label for="balanceAmount">Odprti znesek</Label>
              <CurrencyInput id="balanceAmount" v-model="formContract.balance_amount" />
            </div>
          </div>

          <ActionMessage :on="formContract.recentlySuccessful" class="text-sm text-green-600">
            Shranjuje.
          </ActionMessage>
        </div>
      </form>
    </CreateDialog>
    <UpdateDialog
      v-else
      :show="show"
      title="Uredi pogodbo"
      confirm-text="Posodobi"
      :processing="formContract.processing"
      @close="close"
      @confirm="storeOrUpdate"
    >
      <form @submit.prevent="storeOrUpdate">
        <div
          v-if="formContract.errors.reference"
          class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
        >
          {{ formContract.errors.reference }}
        </div>
        <SectionTitle class="mt-4 border-b mb-4">
          <template #title> Pogodba </template>
        </SectionTitle>

        <div class="space-y-4">
          <div class="space-y-2">
            <Label for="contractRef">Referenca</Label>
            <Input
              id="contractRef"
              ref="contractRefInput"
              v-model="formContract.reference"
              type="text"
              :class="[
                formContract.errors.reference
                  ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
                  : '',
              ]"
              autocomplete="contract-reference"
            />
            <p v-if="formContract.errors.reference" class="text-sm text-red-600">
              {{ formContract.errors.reference }}
            </p>
          </div>

          <div class="space-y-2">
            <Label for="contractStartDate">Datum pričetka</Label>
            <DatePicker
              id="contractStartDate"
              v-model="formContract.start_date"
              format="dd.MM.yyyy"
              :error="formContract.errors.start_date"
            />
          </div>

          <div class="space-y-2">
            <Label for="contractTypeSelect">Tip</Label>
            <Select v-model="formContract.type_id">
              <SelectTrigger>
                <SelectValue placeholder="Izberi tip" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem v-for="t in types" :key="t.id" :value="t.id">
                  {{ t.name }}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div class="space-y-2">
            <Label for="contractDescription">Opis</Label>
            <Textarea
              id="contractDescription"
              v-model="formContract.description"
              rows="3"
              placeholder="Opis"
            />
          </div>

          <SectionTitle class="mt-6 border-b mb-4">
            <template #title> Račun </template>
          </SectionTitle>

          <div class="space-y-2">
            <Label for="accountTypeSelect">Tip računa</Label>
            <Select v-model="formContract.account_type_id">
              <SelectTrigger>
                <SelectValue placeholder="Izberi tip računa" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem :value="null">—</SelectItem>
                <SelectItem v-for="at in account_types" :key="at.id" :value="at.id">
                  {{ at.name ?? "#" + at.id }}
                </SelectItem>
              </SelectContent>
            </Select>
            <p v-if="formContract.errors.account_type_id" class="text-sm text-red-600">
              {{ formContract.errors.account_type_id }}
            </p>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="space-y-2">
              <Label for="initialAmount">Predani znesek</Label>
              <CurrencyInput id="initialAmount" v-model="formContract.initial_amount" />
            </div>
            <div class="space-y-2">
              <Label for="balanceAmount">Odprti znesek</Label>
              <CurrencyInput id="balanceAmount" v-model="formContract.balance_amount" />
            </div>
          </div>

          <ActionMessage :on="formContract.recentlySuccessful" class="text-sm text-green-600">
            Shranjuje.
          </ActionMessage>
        </div>
      </form>
    </UpdateDialog>
</template>
