<script setup>
import { computed, ref } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, router, usePage } from "@inertiajs/vue3";
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
import { hasPermission } from "@/Services/permissions";
import { Button } from "@/Components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/Components/ui/card";
import { Input } from "@/Components/ui/input";
import ActionMenuItem from "@/Components/DataTable/ActionMenuItem.vue";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/Components/ui/form";
import { useForm } from "vee-validate";
import { toTypedSchema } from "@vee-validate/zod";
import * as z from "zod";
import ActionMessage from "@/Components/ActionMessage.vue";
import { Mail, Plug2Icon, Plus, UsersRoundIcon } from "lucide-vue-next";
import { Separator } from "@/Components/ui/separator";
import AppCard from "@/Components/app/ui/card/AppCard.vue";

const props = defineProps({
  clients: Object,
  filters: Object,
});

const page = usePage();
// Expose as a callable computed: use in templates as hasPerm('permission-slug')
const hasPerm = computed(() => (permission) =>
  hasPermission(page.props.auth?.user, permission)
);

const formSchema = toTypedSchema(
  z.object({
    first_name: z.string().optional(),
    last_name: z.string().optional(),
    full_name: z.string().min(1, "Naziv je obvezen."),
    tax_number: z.string().optional(),
    social_security_number: z.string().optional(),
    description: z.string().optional(),
    address: z.object({
      address: z.string().optional(),
      country: z.string().optional(),
      type_id: z.number().default(1),
    }),
    phone: z.object({
      nu: z.string().optional(),
      country_code: z.string().default("00386"),
      type_id: z.number().default(1),
    }),
  })
);

const formClient = useForm({
  validationSchema: formSchema,
  initialValues: {
    first_name: "",
    last_name: "",
    full_name: "",
    tax_number: "",
    social_security_number: "",
    description: "",
    address: {
      address: "",
      country: "",
      type_id: 1,
    },
    phone: {
      nu: "",
      country_code: "00386",
      type_id: 1,
    },
  },
});

//Create client drawer
const drawerCreateClient = ref(false);

// Initial search (passed to DataTable toolbar)
const initialSearch = ref(props.filters?.search || "");

//Open drawer create client
const openDrawerCreateClient = () => {
  drawerCreateClient.value = true;
};

//Close any drawer on page
const closeDrawer = () => {
  drawerCreateClient.value = false;
  formClient.resetForm();
};

const processing = ref(false);

//Ajax call post to store new client
const storeClient = async () => {
  processing.value = true;
  const { values } = formClient;

  // Ensure type_id is a number
  const payload = {
    ...values,
    address: {
      ...values.address,
      type_id: Number(values.address.type_id),
    },
    phone: {
      ...values.phone,
      type_id: Number(values.phone.type_id),
    },
  };

  router.post(route("client.store"), payload, {
    onSuccess: () => {
      closeDrawer();
      formClient.resetForm();
      processing.value = false;
    },
    onError: (errors) => {
      Object.keys(errors).forEach((field) => {
        const errorMessages = Array.isArray(errors[field])
          ? errors[field]
          : [errors[field]];
        formClient.setFieldError(field, errorMessages[0]);
      });
      processing.value = false;
    },
    onFinish: () => {
      processing.value = false;
    },
  });
};

const onConfirmCreate = formClient.handleSubmit(() => {
  storeClient();
});

// Formatting helpers
const fmtCurrency = (v) => {
  const n = Number(v ?? 0);
  try {
    return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(
      n
    );
  } catch (e) {
    return `${n.toFixed(2)} €`;
  }
};
</script>

<template>
  <AppLayout title="Clients">
    <template #header> </template>
    <div class="py-6">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <AppCard
          title=""
          padding="none"
          class="p-0! gap-0"
          header-class="py-3! px-4 gap-0 text-muted-foreground"
          body-class=""
        >
          <template #header>
            <div class="flex items-center gap-2">
              <UsersRoundIcon size="18" />
              <CardTitle class="uppercase">Naročniki</CardTitle>
            </div>
          </template>

          <DataTable
            :columns="[
              { key: 'nu', label: 'Št.', sortable: false },
              { key: 'name', label: 'Naročnik', sortable: false },
              {
                key: 'cases',
                label: 'Primeri z aktivnimi pogodbami',
                sortable: false,
                align: 'right',
              },
              {
                key: 'balance',
                label: 'Skupaj stanje',
                sortable: false,
                align: 'right',
              },
            ]"
            :data="clients.data || []"
            :show-pagination="false"
            :show-toolbar="true"
            :hoverable="true"
            :page-size="100"
            row-key="uuid"
            :striped="true"
            empty-text="Ni najdenih naročnikov."
          >
            <template #toolbar-actions>
              <Button
                variant="outline"
                v-if="hasPerm('client-edit')"
                @click="openDrawerCreateClient"
              >
                <Plus class="w-4 h-4" /> Novi naročnik
              </Button>
            </template>
            <template #cell-nu="{ row }">
              {{ row.person?.nu || "-" }}
            </template>
            <template #cell-name="{ row }">
              <Link
                :href="route('client.show', { uuid: row.uuid })"
                class="font-semibold hover:underline text-primary-700"
              >
                {{ row.person?.full_name || "-" }}
              </Link>
              <div v-if="!row.person" class="mt-1">
                <Button
                  variant="destructive"
                  size="sm"
                  @click.prevent="
                    router.post(route('client.emergencyPerson', { uuid: row.uuid }))
                  "
                  >Add Person</Button
                >
              </div>
            </template>
            <template #cell-cases="{ row }">
              <div class="text-right">
                {{ row.cases_with_active_contracts_count ?? 0 }}
              </div>
            </template>
            <template #cell-balance="{ row }">
              <div class="text-right">
                {{ fmtCurrency(row.active_contracts_balance_sum) }}
              </div>
            </template>
          </DataTable>
        </AppCard>
      </div>
    </div>
  </AppLayout>
  <CreateDialog
    :show="drawerCreateClient"
    title="Novi naročnik"
    confirm-text="Shrani"
    :processing="processing"
    @close="drawerCreateClient = false"
    @confirm="onConfirmCreate"
  >
    <form @submit.prevent="onConfirmCreate">
      <div class="space-y-4">
        <FormField v-slot="{ componentField }" name="full_name">
          <FormItem>
            <FormLabel>Naziv *</FormLabel>
            <FormControl>
              <Input
                id="fullname"
                type="text"
                autocomplete="full-name"
                placeholder="Naziv"
                v-bind="componentField"
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>
        <CardTitle class="full">Osebni podatki</CardTitle>
        <Separator />
        <div class="flex flex-row gap-2">
          <FormField v-slot="{ componentField }" name="tax_number">
            <FormItem class="flex-1">
              <FormLabel>Davčna</FormLabel>
              <FormControl>
                <Input
                  id="taxnumber"
                  type="text"
                  autocomplete="tax-number"
                  placeholder="Davčna številka"
                  v-bind="componentField"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          </FormField>

          <FormField v-slot="{ componentField }" name="social_security_number">
            <FormItem class="flex-1">
              <FormLabel>Matična / Emšo</FormLabel>
              <FormControl>
                <Input
                  id="socialSecurityNumber"
                  type="text"
                  autocomplete="social-security-number"
                  placeholder="Matična / Emšo"
                  v-bind="componentField"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          </FormField>
        </div>
        <CardTitle class="full">Naslov</CardTitle>
        <Separator />
        <div class="grid sm:grid-cols-2 gap-2">
          <FormField v-slot="{ componentField }" name="address.address">
            <FormItem>
              <FormLabel>Naslov</FormLabel>
              <FormControl>
                <Input
                  id="address"
                  type="text"
                  autocomplete="address"
                  placeholder="Naslov"
                  v-bind="componentField"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          </FormField>

          <FormField v-slot="{ componentField }" name="address.country">
            <FormItem>
              <FormLabel>Država</FormLabel>
              <FormControl>
                <Input
                  id="addressCountry"
                  type="text"
                  autocomplete="address-country"
                  placeholder="Država"
                  v-bind="componentField"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          </FormField>

          <FormField v-slot="{ value, handleChange }" name="address.type_id">
            <FormItem>
              <FormLabel>Vrsta naslova</FormLabel>
              <Select :model-value="value" @update:model-value="handleChange">
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Izberi vrsto naslova" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent align="end" position="popper">
                  <SelectItem :value="1">Stalni</SelectItem>
                  <SelectItem :value="2">Začasni</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          </FormField>
        </div>
        <CardTitle class="full">Naslov</CardTitle>
        <Separator />
        <div class="flex flex-row gap-2">
          <FormField v-slot="{ value, handleChange }" name="phone.country_code">
            <FormItem class="flex-1/3">
              <FormLabel>Koda države tel.</FormLabel>
              <Select :model-value="value" @update:model-value="handleChange">
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Izberi kodo države" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="00386">+386 (Slovenija)</SelectItem>
                  <SelectItem value="00385">+385 (Hrvaška)</SelectItem>
                  <SelectItem value="0039">+39 (Italija)</SelectItem>
                  <SelectItem value="0036">+36 (Madžarska)</SelectItem>
                  <SelectItem value="0043">+43 (Avstrija)</SelectItem>
                  <SelectItem value="00381">+381 (Srbija)</SelectItem>
                  <SelectItem value="00387">+387 (Bosna in Hercegovina)</SelectItem>
                  <SelectItem value="00382">+382 (Črna gora)</SelectItem>
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          </FormField>

          <FormField v-slot="{ componentField }" name="phone.nu">
            <FormItem class="flex-2/3">
              <FormLabel>Telefonska št.</FormLabel>
              <FormControl>
                <Input
                  id="phoneNu"
                  type="text"
                  autocomplete="phone-nu"
                  placeholder="Telefonska številka"
                  v-bind="componentField"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          </FormField>
        </div>
        <FormField v-slot="{ componentField }" name="description">
          <FormItem>
            <FormLabel>Opis</FormLabel>
            <FormControl>
              <Input
                id="description"
                type="text"
                autocomplete="description"
                placeholder="Opis"
                v-bind="componentField"
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>
      </div>
    </form>
  </CreateDialog>
</template>
