<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, useForm, router } from "@inertiajs/vue3";
import { computed, ref, watch } from "vue";
import DataTable from "@/Components/DataTable/DataTableNew2.vue";
import { Card, CardTitle } from "@/Components/ui/card";
import { Input } from "@/Components/ui/input";
import { Button } from "@/Components/ui/button";
import { Label } from "@/Components/ui/label";
import { Badge } from "@/Components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import { AlertCircle, FileCheckCornerIcon, FilesIcon, Filter } from "lucide-vue-next";
import Checkbox from "@/Components/ui/checkbox/Checkbox.vue";
import Pagination from "@/Components/Pagination.vue";
import { watchDebounced } from "@vueuse/core";
import Dropdown from "@/Components/Dropdown.vue";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import AppPopover from "@/Components/app/ui/AppPopover.vue";
import InputLabel from "@/Components/InputLabel.vue";
import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import { toNumber } from "lodash";

const props = defineProps({
  setting: Object,
  unassignedContracts: Object,
  assignedContracts: Object,
  users: Array,
  unassignedClients: [Array, Object],
  assignedClients: [Array, Object],
  filters: Object,
});

const filterUnassignedContracts = ref(false);
const filterAssignedContracts = ref(false);
const filterUnassignedSelectedClient = ref(
  Array.isArray(props.filters?.unassigned_client_uuids)
    ? props.filters.unassigned_client_uuids
    : []
);
const filterAssignedSelectedClient = ref(
  Array.isArray(props.filters?.assigned_client_uuids)
    ? props.filters.assigned_client_uuids
    : []
);

const unassignedContractTable = ref(null);

const form = useForm({
  contract_uuid: null,
  assigned_user_id: null,
  start_date: null,
  end_date: null,
});

// Bulk selection form
const bulkForm = useForm({
  contract_uuids: [],
  assigned_user_id: null,
});

// Separate reactive state for selected UUIDs (for UI reactivity)
const selectedContractUuids = ref([]);

// Select all state for unassigned table (current page only)
const isAllUnassignedSelected = computed({
  get: () => {
    const pageUuids = props.unassignedContracts?.data?.map((c) => c.uuid) || [];
    return (
      pageUuids.length > 0 &&
      pageUuids.every((uuid) => selectedContractUuids.value.includes(uuid))
    );
  },
  set: (value) => {
    const pageUuids = props.unassignedContracts?.data?.map((c) => c.uuid) || [];
    if (value) {
      // Add all page items to selection
      selectedContractUuids.value = [
        ...new Set([...selectedContractUuids.value, ...pageUuids]),
      ];
    } else {
      // Remove all page items from selection
      selectedContractUuids.value = selectedContractUuids.value.filter(
        (uuid) => !pageUuids.includes(uuid)
      );
    }
  },
});

// Helper to toggle contract selection
function toggleContractSelection(uuid, checked) {
  if (checked) {
    if (!selectedContractUuids.value.includes(uuid)) {
      selectedContractUuids.value = [...selectedContractUuids.value, uuid];
    }
  } else {
    selectedContractUuids.value = selectedContractUuids.value.filter((id) => id !== uuid);
  }
  console.log(selectedContractUuids.value);
}

function handleContractSelection(selected) {
  selectedContractUuids.value = selected.map((val, i) => {
    const num = toNumber(val);

    return props.unassignedContracts.data[num].uuid;
  });
}

// Format helpers (Slovenian formatting)

// Initialize search and filter from URL params
const search = ref(props.filters?.search || "");
const searchAssigned = ref(props.filters?.search_assigned || "");
const assignedFilterUserId = ref(props.filters?.assigned_user_id || "all");

// Navigation helpers
function navigateWithParams(params) {
  router.visit(route("fieldjobs.index"), {
    data: params,
    preserveState: true,
    preserveScroll: true,
    only: ["unassignedContracts", "assignedContracts", "filters"],
  });
}

const applySearch = async function () {
  const params = Object.fromEntries(
    new URLSearchParams(window.location.search).entries()
  );

  const term = (search.value || "").trim();
  if (term) {
    params.search = term;
  } else {
    delete params.search;
  }
  delete params.page;
  router.get(route("fieldjobs.index"), params, {
    preserveState: true,
    replace: true,
    preserveScroll: true,
    only: ["unassignedContracts"],
  });
};

watchDebounced(
  () => search.value,
  (val) => {
    applySearch();
  },
  {
    debounce: 200,
    maxWait: 1000,
  }
);

const applySearchAssigned = async function () {
  const params = Object.fromEntries(
    new URLSearchParams(window.location.search).entries()
  );

  const term = (searchAssigned.value || "").trim();
  if (term) {
    params.search_assigned = term;
  } else {
    delete params.search_assigned;
  }
  delete params.page_assignments;
  router.get(route("fieldjobs.index"), params, {
    preserveState: true,
    replace: true,
    preserveScroll: true,
    only: ["assignedContracts", "filters"],
  });
};

watchDebounced(
  () => searchAssigned.value,
  (val) => {
    applySearchAssigned();
  },
  {
    debounce: 200,
    maxWait: 1000,
  }
);

// Watch search and filter changes
/*watch(search, (value) => {
  navigateWithParams({
    search: value || undefined,
    assigned_user_id:
      assignedFilterUserId.value !== "all" ? assignedFilterUserId.value : undefined,
    page_contracts: 1, // Reset to first page on search
    page_assignments: 1,
  });
});*/

watch(assignedFilterUserId, (value) => {
  navigateWithParams({
    search: search.value || undefined,
    assigned_user_id: value !== "all" ? value : undefined,
    unassigned_client_uuids:
      filterUnassignedSelectedClient.value?.length > 0
        ? filterUnassignedSelectedClient.value
        : undefined,
    assigned_client_uuids:
      filterAssignedSelectedClient.value?.length > 0
        ? filterAssignedSelectedClient.value
        : undefined,
    page_contracts: props.unassignedContracts?.current_page,
    page_assignments: 1, // Reset to first page on filter change
  });
});

watch(filterUnassignedSelectedClient, (value) => {
  navigateWithParams({
    search: search.value || undefined,
    assigned_user_id:
      assignedFilterUserId.value !== "all" ? assignedFilterUserId.value : undefined,
    unassigned_client_uuids: value?.length > 0 ? value : undefined,
    assigned_client_uuids:
      filterAssignedSelectedClient.value?.length > 0
        ? filterAssignedSelectedClient.value
        : undefined,
    page_contracts: 1, // Reset to first page on filter change
    page_assignments: props.assignedContracts?.current_page,
  });
});

watch(filterAssignedSelectedClient, (value) => {
  navigateWithParams({
    search: search.value || undefined,
    assigned_user_id:
      assignedFilterUserId.value !== "all" ? assignedFilterUserId.value : undefined,
    unassigned_client_uuids:
      filterUnassignedSelectedClient.value?.length > 0
        ? filterUnassignedSelectedClient.value
        : undefined,
    assigned_client_uuids: value?.length > 0 ? value : undefined,
    page_contracts: props.unassignedContracts?.current_page,
    page_assignments: 1, // Reset to first page on filter change
  });
});

function formatDate(value) {
  if (!value) {
    return "-";
  }
  const d = new Date(value);
  if (isNaN(d)) {
    return value;
  }
  const parts = new Intl.DateTimeFormat("en-GB", {
    timeZone: "Europe/Ljubljana",
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  }).formatToParts(d);
  const map = Object.fromEntries(parts.map((p) => [p.type, p.value]));
  return `${map.day}.${map.month}.${map.year}`;
}

function formatCurrencyEUR(value) {
  if (value === null || value === undefined) {
    return "-";
  }
  const n = Number(value);
  if (isNaN(n)) {
    return String(value);
  }
  // Thousands separator as dot, decimal as comma, with € suffix
  return (
    n.toLocaleString("sl-SI", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +
    " €"
  );
}

function primaryCaseAddress(contract) {
  const addrs = contract?.client_case?.person?.addresses || [];
  if (!Array.isArray(addrs) || addrs.length === 0) {
    return "-";
  }
  const a = addrs[0];
  const address = a?.address || "";
  const country = a?.country || "";
  return [address, country].filter(Boolean).join(", ");
}

function assign(contract) {
  form.contract_uuid = contract.uuid;
  // minimal UX: if no user selected yet, just post will fail with error; page can be enhanced later with dropdown.
  form.post(route("fieldjobs.assign"));
}

function assignSelected() {
  // Use the same selected user as in the single-assign dropdown
  bulkForm.assigned_user_id = form.assigned_user_id;
  bulkForm.contract_uuids = selectedContractUuids.value;
  bulkForm.post(route("fieldjobs.assign-bulk"), {
    onSuccess: () => {
      unassignedContractTable.value.clearSelection();
      selectedContractUuids.value = [];
      bulkForm.contract_uuids = [];
    },
  });
}

function cancelAssignment(contract) {
  const payload = { contract_uuid: contract.uuid };
  form
    .transform(() => payload)
    .post(route("fieldjobs.cancel"), {
      preserveScroll: true,
    });
}

// Column definitions for DataTableNew2
const unassignedColumns = [
  {
    key: "_select",
    label: "",
    sortable: false,
    class: "w-8",
  },
  { key: "reference", label: "Pogodba", sortable: false },
  { key: "case_person", label: "Primer", sortable: false },
  { key: "address", label: "Naslov", sortable: false },
  { key: "client_person", label: "Stranka", sortable: false },
  { key: "start_date", label: "Začetek", sortable: false },
  { key: "balance_amount", label: "Stanje", sortable: false, align: "right" },
  { key: "_actions", label: "Dejanje", sortable: false },
];

const assignedColumns = [
  { key: "reference", label: "Pogodba", sortable: false },
  { key: "case_person", label: "Primer", sortable: false },
  { key: "address", label: "Naslov", sortable: false },
  { key: "client_person", label: "Stranka", sortable: false },
  { key: "assigned_at", label: "Dodeljeno dne", sortable: false },
  { key: "assigned_to", label: "Dodeljeno komu", sortable: false },
  { key: "balance_amount", label: "Stanje", sortable: false, align: "right" },
  { key: "_actions", label: "Dejanje", sortable: false },
];

// Prepare rows with flattened fields for display
const unassignedRows = computed(() =>
  (props.unassignedContracts?.data || []).map((c) => ({
    ...c,
    balance_amount:
      c?.account?.balance_amount === null || c?.account?.balance_amount === undefined
        ? null
        : Number(c.account.balance_amount),
    case_person: c.client_case?.person?.full_name || null,
    client_person: c.client_case?.client?.person?.full_name || null,
    address: primaryCaseAddress(c) || null,
  }))
);

const assignedRows = computed(() =>
  (props.assignedContracts?.data || []).map((c) => ({
    ...c,
    balance_amount:
      c?.account?.balance_amount === null || c?.account?.balance_amount === undefined
        ? null
        : Number(c.account.balance_amount),
    case_person: c.client_case?.person?.full_name || null,
    client_person: c.client_case?.client?.person?.full_name || null,
    address: primaryCaseAddress(c) || null,
    assigned_to: c.last_field_jobs.assigned_user.name || null,
    assigned_at_formatted: formatDate(c.last_field_jobs.assigned_at),
  }))
);
</script>

<template>
  <AppLayout title="Dodeljevanje terenskih opravil">
    <template #header></template>
    <div class="pt-6">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
        <AppCard
          title=""
          padding="none"
          class="p-0! gap-0"
          header-class="p-3! px-4 gap-0 text-muted-foreground"
          body-class=""
        >
          <template #header>
            <div class="flex items-center gap-2">
              <FilesIcon size="18" />
              <CardTitle class="uppercase">Pogodbe (nedodeljene)</CardTitle>
            </div>
          </template>
          <div
            v-if="!setting"
            class="mb-6 flex items-start gap-3 rounded-lg border border-yellow-200 bg-yellow-50 p-4"
          >
            <AlertCircle class="h-5 w-5 text-yellow-600 shrink-0 mt-0.5" />
            <p class="text-sm text-yellow-800">
              Nastavitev za terenska opravila ni najdena. Najprej jo ustvarite v
              Nastavitve → Nastavitve terenskih opravil.
            </p>
          </div>

          <!-- Unassigned (Assignable) Contracts -->
          <div class="overflow-hidden mb-8 border-t">
            <div class="p-4 flex flex-row gap-2 items-end">
              <div class="space-y-2">
                <Label for="assign-user">Dodeli uporabniku</Label>
                <Select v-model="form.assigned_user_id">
                  <SelectTrigger id="assign-user" class="max-w-xs min-w-60">
                    <SelectValue placeholder="Izberite uporabnika" />
                  </SelectTrigger>
                  <SelectContent class="min-w-60">
                    <SelectItem v-for="u in users || []" :key="u.id" :value="u.id">
                      {{ u.name }}
                    </SelectItem>
                  </SelectContent>
                </Select>
                <div v-if="form.errors.assigned_user_id" class="text-red-600 text-sm">
                  {{ form.errors.assigned_user_id }}
                </div>
              </div>
              <div class="flex items-center gap-2">
                <Button
                  :disabled="!selectedContractUuids.length || !form.assigned_user_id"
                  @click="assignSelected"
                >
                  Dodeli izbrane
                  <Badge
                    v-if="selectedContractUuids.length"
                    variant="secondary"
                    class="ml-2"
                  >
                    {{ selectedContractUuids.length }}
                  </Badge>
                </Button>
                <Button
                  variant="outline"
                  :disabled="!selectedContractUuids.length"
                  @click="selectedContractUuids = []"
                >
                  Počisti izbor
                </Button>
              </div>
            </div>
            <DataTable
              ref="unassignedContractTable"
              :columns="unassignedColumns"
              :data="unassignedRows"
              :meta="{
                current_page: unassignedContracts.current_page,
                per_page: unassignedContracts.per_page,
                total: unassignedContracts.total,
                last_page: unassignedContracts.last_page,
                from: unassignedContracts.from,
                to: unassignedContracts.to,
                links: unassignedContracts.links,
              }"
              row-key="uuid"
              :enable-row-selection="true"
              @selection:change="handleContractSelection"
              :page-size="props.unassignedContracts?.per_page || 10"
              :page-size-options="[10, 15, 25, 50, 100]"
              :show-toolbar="true"
              route-name="fieldjobs.index"
              page-param-name="page_contracts"
              per-page-param-name="per_page_contracts"
            >
              <template #toolbar-filters>
                <div class="flex items-center gap-2 w-full">
                  <AppPopover
                    v-model:open="filterUnassignedContracts"
                    align="start"
                    content-class="w-[350px]"
                  >
                    <template #trigger>
                      <Button variant="outline"
                        ><Filter class="h-4 w-4" /> Filtri
                      </Button>
                    </template>
                    <div class="space-y-3">
                      <div class="space-y-1.5">
                        <InputLabel>Iskanje</InputLabel>
                        <Input
                          v-model="search"
                          placeholder="Išči po pogodbi, primeru, stranki, naslovu..."
                          class="w-full"
                        />
                      </div>
                      <div class="space-y-1.5">
                        <InputLabel>Stranke</InputLabel>
                        <AppMultiSelect
                          v-model="filterUnassignedSelectedClient"
                          :items="
                            (Array.isArray(props.unassignedClients)
                              ? props.unassignedClients
                              : props.unassignedClients?.data || []
                            ).map((client) => ({
                              value: client.uuid,
                              label: client.person.full_name,
                            }))
                          "
                          placeholder="Vse stranke"
                          search-placeholder="Išči stranko..."
                          empty-text="Ni strank"
                          chip-variant="secondary"
                        />
                      </div>
                    </div>
                  </AppPopover>
                </div>
              </template>
              <template #cell-case_person="{ row }">
                <Link
                  v-if="row.client_case?.uuid"
                  :href="route('clientCase.show', { client_case: row.client_case.uuid })"
                  class="font-semibold hover:underline text-primary-700"
                >
                  {{ row.client_case?.person?.full_name || "Primer stranke" }}
                </Link>
                <span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
              </template>
              <template #cell-start_date="{ row }">
                {{ formatDate(row.start_date) }}
              </template>
              <template #cell-balance_amount="{ row }">
                <div class="text-right">
                  {{ formatCurrencyEUR(row.account?.balance_amount) }}
                </div>
              </template>
              <template #cell-_actions="{ row }">
                <Button size="sm" @click="assign(row)">Dodeli</Button>
              </template>
            </DataTable>
          </div>
        </AppCard>
        <!-- Assigned Contracts -->
        <AppCard
          title=""
          padding="none"
          class="p-0! gap-0"
          header-class="p-3! px-4 gap-0 text-muted-foreground"
          body-class=""
        >
          <template #header>
            <div class="flex items-center gap-2">
              <FileCheckCornerIcon size="18" />
              <CardTitle class="uppercase">Dodeljene pogodbe</CardTitle>
            </div>
          </template>
          <DataTable
            :columns="assignedColumns"
            :data="assignedRows"
            :meta="{
              current_page: assignedContracts.current_page,
              per_page: assignedContracts.per_page,
              total: assignedContracts.total,
              last_page: assignedContracts.last_page,
              from: assignedContracts.from,
              to: assignedContracts.to,
              links: assignedContracts.links,
            }"
            row-key="uuid"
            :page-size="props.assignedContracts?.per_page || 10"
            :page-size-options="[10, 15, 25, 50, 100]"
            :show-toolbar="true"
            route-name="fieldjobs.index"
            page-param-name="page_assignments"
            per-page-param-name="per_page_assignments"
          >
            <template #toolbar-filters>
              <div class="flex items-center gap-2 w-full">
                <AppPopover
                  v-model:open="filterAssignedContracts"
                  align="start"
                  content-class="w-[350px]"
                >
                  <template #trigger>
                    <Button variant="outline"><Filter class="h-4 w-4" /> Filtri </Button>
                  </template>
                  <div class="space-y-3">
                    <div class="space-y-1.5">
                      <InputLabel>Iskanje</InputLabel>
                      <Input
                        v-model="searchAssigned"
                        placeholder="Išči po pogodbi, primeru, stranki, naslovu..."
                        class="w-full"
                      />
                    </div>
                    <div class="space-y-1.5">
                      <InputLabel>Filter po uporabniku</InputLabel>
                      <Select v-model="assignedFilterUserId">
                        <SelectTrigger id="filter-user">
                          <SelectValue placeholder="Vsi" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">Vsi</SelectItem>
                          <SelectItem
                            v-for="u in users || []"
                            :key="u.id"
                            :value="String(u.id)"
                          >
                            {{ u.name }}
                          </SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div class="space-y-1.5">
                      <InputLabel>Stranke</InputLabel>
                      <AppMultiSelect
                        v-model="filterAssignedSelectedClient"
                        :items="
                          (Array.isArray(props.assignedClients)
                            ? props.assignedClients
                            : props.assignedClients?.data || []
                          ).map((client) => ({
                            value: client.uuid,
                            label: client.person.full_name,
                          }))
                        "
                        placeholder="Vse stranke"
                        search-placeholder="Išči stranko..."
                        empty-text="Ni strank"
                        chip-variant="secondary"
                      />
                    </div>
                  </div>
                </AppPopover>
              </div>
            </template>
            <template #cell-case_person="{ row }">
              <Link
                v-if="row.client_case?.uuid"
                :href="route('clientCase.show', { client_case: row.client_case.uuid })"
                class="font-semibold hover:underline text-primary-700"
              >
                {{ row.client_case?.person?.full_name || "Primer stranke" }}
              </Link>
              <span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
            </template>
            <template #cell-assigned_at="{ row }">
              {{ row.assigned_at_formatted }}
            </template>
            <template #cell-balance_amount="{ row }">
              <div class="text-right">
                {{ formatCurrencyEUR(row.account?.balance_amount) }}
              </div>
            </template>
            <template #cell-_actions="{ row }">
              <Button variant="destructive" size="sm" @click="cancelAssignment(row)">
                Prekliči
              </Button>
            </template>
          </DataTable>
        </AppCard>
      </div>
    </div>
  </AppLayout>
</template>
