<script setup>
import { ref, watch, computed } from "vue";
import DialogModal from "@/Components/DialogModal.vue";
import { router, usePage } from "@inertiajs/vue3";

const props = defineProps({
  show: { type: Boolean, default: false },
  phone: Object,
  clientCaseUuid: { type: String, default: null },
  smsProfiles: { type: Array, default: () => [] },
  smsSenders: { type: Array, default: () => [] },
  smsTemplates: { type: Array, default: () => [] },
});

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

// SMS dialog state
const smsMessage = ref("");
const smsSending = ref(false);

// Page-level props fallback for SMS metadata
const page = usePage();
const pageProps = computed(() => page?.props ?? {});
const pageSmsProfiles = computed(() => {
  const fromProps =
    Array.isArray(props.smsProfiles) && props.smsProfiles.length
      ? props.smsProfiles
      : null;
  return fromProps ?? pageProps.value?.sms_profiles ?? [];
});
const pageSmsSenders = computed(() => {
  const fromProps =
    Array.isArray(props.smsSenders) && props.smsSenders.length ? props.smsSenders : null;
  return fromProps ?? pageProps.value?.sms_senders ?? [];
});
const pageSmsTemplates = computed(() => {
  const fromProps =
    Array.isArray(props.smsTemplates) && props.smsTemplates.length
      ? props.smsTemplates
      : null;
  return fromProps ?? pageProps.value?.sms_templates ?? [];
});

// Helpers: EU formatter and token renderer
const formatEu = (value, decimals = 2) => {
  if (value === null || value === undefined || value === "") {
    return new Intl.NumberFormat("de-DE", {
      minimumFractionDigits: decimals,
      maximumFractionDigits: decimals,
    }).format(0);
  }
  const num =
    typeof value === "number"
      ? value
      : parseFloat(String(value).replace(/\./g, "").replace(",", "."));
  return new Intl.NumberFormat("de-DE", {
    minimumFractionDigits: decimals,
    maximumFractionDigits: decimals,
  }).format(isNaN(num) ? 0 : num);
};

const renderTokens = (text, vars) => {
  if (!text) return "";
  const resolver = (obj, path) => {
    if (!obj) return null;
    if (Object.prototype.hasOwnProperty.call(obj, path)) return obj[path];
    const segs = path.split(".");
    let cur = obj;
    for (const s of segs) {
      if (cur && typeof cur === "object" && s in cur) {
        cur = cur[s];
      } else {
        return null;
      }
    }
    return cur;
  };
  return text.replace(/\{([a-zA-Z0-9_\.]+)\}/g, (_, key) => {
    const val = resolver(vars, key);
    return val !== null && val !== undefined ? String(val) : `{${key}}`;
  });
};

// SMS length, encoding and credits
const GSM7_EXTENDED = new Set(["^", "{", "}", "\\", "[", "~", "]", "|"]);
const isGsm7 = (text) => {
  for (const ch of text || "") {
    if (ch === "€") continue;
    const code = ch.charCodeAt(0);
    if (code >= 0x80) return false;
  }
  return true;
};
const gsm7Length = (text) => {
  let len = 0;
  for (const ch of text || "") {
    if (ch === "€" || GSM7_EXTENDED.has(ch)) {
      len += 2;
    } else {
      len += 1;
    }
  }
  return len;
};
const ucs2Length = (text) => (text ? text.length : 0);

const smsEncoding = computed(() => (isGsm7(smsMessage.value) ? "GSM-7" : "UCS-2"));
const charCount = computed(() =>
  smsEncoding.value === "GSM-7"
    ? gsm7Length(smsMessage.value)
    : ucs2Length(smsMessage.value)
);
const perSegment = computed(() => {
  const count = charCount.value;
  if (smsEncoding.value === "GSM-7") {
    return count <= 160 ? 160 : 153;
  }
  return count <= 70 ? 70 : 67;
});
const segments = computed(() => {
  const count = charCount.value;
  const size = perSegment.value || 1;
  return count > 0 ? Math.ceil(count / size) : 0;
});
const creditsNeeded = computed(() => segments.value);

const maxAllowed = computed(() => (smsEncoding.value === "GSM-7" ? 640 : 320));
const remaining = computed(() => Math.max(0, maxAllowed.value - charCount.value));

const truncateToLimit = (text, limit, encoding) => {
  if (!text) return "";
  if (limit <= 0) return "";
  if (encoding === "UCS-2") {
    return text.slice(0, limit);
  }
  let acc = 0;
  let out = "";
  for (const ch of text) {
    const cost = ch === "€" || GSM7_EXTENDED.has(ch) ? 2 : 1;
    if (acc + cost > limit) break;
    out += ch;
    acc += cost;
  }
  return out;
};

watch(smsMessage, (val) => {
  const limit = maxAllowed.value;
  if (charCount.value > limit) {
    smsMessage.value = truncateToLimit(val, limit, smsEncoding.value);
  }
});

const contractsForCase = ref([]);
const selectedContractUuid = ref(null);
const selectedProfileId = ref(null);
const selectedSenderId = ref(null);
const deliveryReport = ref(false);
const selectedTemplateId = ref(null);

const sendersForSelectedProfile = computed(() => {
  if (!selectedProfileId.value) return pageSmsSenders.value;
  return (pageSmsSenders.value || []).filter(
    (s) => s.profile_id === selectedProfileId.value
  );
});

watch(selectedProfileId, () => {
  if (!selectedSenderId.value) return;
  const ok = sendersForSelectedProfile.value.some((s) => s.id === selectedSenderId.value);
  if (!ok) selectedSenderId.value = null;
});

watch(sendersForSelectedProfile, (list) => {
  if (!Array.isArray(list)) return;
  if (!selectedSenderId.value && list.length > 0) {
    selectedSenderId.value = list[0].id;
  }
});

const buildVarsFromSelectedContract = () => {
  const uuid = selectedContractUuid.value;
  if (!uuid) return {};
  const c = (contractsForCase.value || []).find((x) => x.uuid === uuid);
  if (!c) return {};
  const vars = {
    contract: {
      uuid: c.uuid,
      reference: c.reference,
      start_date: c.start_date || "",
      end_date: c.end_date || "",
    },
  };
  if (c.account) {
    vars.account = {
      reference: c.account.reference,
      type: c.account.type,
      initial_amount:
        c.account.initial_amount ??
        (c.account.initial_amount_raw ? formatEu(c.account.initial_amount_raw) : null),
      balance_amount:
        c.account.balance_amount ??
        (c.account.balance_amount_raw ? formatEu(c.account.balance_amount_raw) : null),
      initial_amount_raw: c.account.initial_amount_raw ?? null,
      balance_amount_raw: c.account.balance_amount_raw ?? null,
    };
  }
  return vars;
};

const updateSmsFromSelection = async () => {
  if (!selectedTemplateId.value) return;
  try {
    const url = route("clientCase.sms.preview", { client_case: props.clientCaseUuid });
    const res = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Requested-With": "XMLHttpRequest",
        "X-CSRF-TOKEN":
          document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ||
          "",
      },
      body: JSON.stringify({
        template_id: selectedTemplateId.value,
        contract_uuid: selectedContractUuid.value || null,
      }),
      credentials: "same-origin",
    });
    if (res.ok) {
      const data = await res.json();
      if (typeof data?.content === "string" && data.content.trim() !== "") {
        smsMessage.value = data.content;
        return;
      }
    }
  } catch (e) {
    // ignore and fallback
  }
  const tpl = (pageSmsTemplates.value || []).find(
    (t) => t.id === selectedTemplateId.value
  );
  if (tpl && typeof tpl.content === "string") {
    smsMessage.value = renderTokens(tpl.content, buildVarsFromSelectedContract());
  }
};

watch(selectedTemplateId, () => {
  if (!selectedTemplateId.value) return;
  updateSmsFromSelection();
});

watch(selectedContractUuid, () => {
  if (!selectedTemplateId.value) return;
  updateSmsFromSelection();
});

watch(pageSmsTemplates, (list) => {
  if (!Array.isArray(list)) return;
  if (!selectedTemplateId.value && list.length > 0) {
    selectedTemplateId.value = list[0].id;
  }
});

const loadContractsForCase = async () => {
  try {
    const url = route("clientCase.contracts.list", { client_case: props.clientCaseUuid });
    const res = await fetch(url, {
      headers: { "X-Requested-With": "XMLHttpRequest" },
      credentials: "same-origin",
    });
    const json = await res.json();
    contractsForCase.value = Array.isArray(json?.data) ? json.data : [];
  } catch (e) {
    contractsForCase.value = [];
  }
};

watch(
  () => props.show,
  (newVal) => {
    if (newVal) {
      smsMessage.value = "";
      selectedProfileId.value =
        (pageSmsProfiles.value && pageSmsProfiles.value[0]?.id) || null;
      if (selectedProfileId.value) {
        const prof = (pageSmsProfiles.value || []).find(
          (p) => p.id === selectedProfileId.value
        );
        if (prof && prof.default_sender_id) {
          const inList = sendersForSelectedProfile.value.find(
            (s) => s.id === prof.default_sender_id
          );
          selectedSenderId.value = inList ? prof.default_sender_id : null;
        } else {
          selectedSenderId.value = null;
        }
      } else {
        selectedSenderId.value = null;
      }
      deliveryReport.value = false;
      selectedTemplateId.value =
        (pageSmsTemplates.value && pageSmsTemplates.value[0]?.id) || null;
      loadContractsForCase();
    }
  }
);

const closeSmsDialog = () => {
  emit('close');
};

const submitSms = () => {
  if (!props.phone || !smsMessage.value || !props.clientCaseUuid) {
    return;
  }
  smsSending.value = true;
  router.post(
    route("clientCase.phone.sms", {
      client_case: props.clientCaseUuid,
      phone_id: props.phone.id,
    }),
    {
      message: smsMessage.value,
      template_id: selectedTemplateId.value,
      contract_uuid: selectedContractUuid.value,
      profile_id: selectedProfileId.value,
      sender_id: selectedSenderId.value,
      delivery_report: !!deliveryReport.value,
    },
    {
      preserveScroll: true,
      onFinish: () => {
        smsSending.value = false;
        closeSmsDialog();
      },
    }
  );
};
</script>

<template>
  <DialogModal :show="show" @close="closeSmsDialog">
    <template #title>Pošlji SMS</template>
    <template #content>
      <div class="space-y-2">
        <p class="text-sm text-gray-600">
          Prejemnik: <span class="font-mono">{{ phone?.nu }}</span>
          <span v-if="phone?.country_code" class="ml-2 text-xs text-gray-500"
            >CC +{{ phone.country_code }}</span
          >
        </p>
        <!-- Profile & Sender selectors -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
          <div>
            <label class="block text-sm font-medium text-gray-700">Profil</label>
            <select
              v-model="selectedProfileId"
              class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
            >
              <option :value="null">—</option>
              <option v-for="p in pageSmsProfiles" :key="p.id" :value="p.id">
                {{ p.name || "Profil #" + p.id }}
              </option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">Pošiljatelj</label>
            <select
              v-model="selectedSenderId"
              class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
            >
              <option :value="null">—</option>
              <option v-for="s in sendersForSelectedProfile" :key="s.id" :value="s.id">
                {{ s.name || s.phone || "Sender #" + s.id }}
              </option>
            </select>
          </div>
        </div>

        <!-- Contract selector -->
        <div>
          <label class="block text-sm font-medium text-gray-700">Pogodba</label>
          <select
            v-model="selectedContractUuid"
            class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
          >
            <option :value="null">—</option>
            <option v-for="c in contractsForCase" :key="c.uuid" :value="c.uuid">
              {{ c.reference || c.uuid }}
            </option>
          </select>
          <p class="mt-1 text-xs text-gray-500">
            Uporabi podatke pogodbe (in računa) za zapolnitev {contract.*} in {account.*}
            mest.
          </p>
        </div>

        <!-- Template selector -->
        <div>
          <label class="block text-sm font-medium text-gray-700">Predloga</label>
          <select
            v-model="selectedTemplateId"
            class="mt-1 block w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
          >
            <option :value="null">—</option>
            <option v-for="t in pageSmsTemplates" :key="t.id" :value="t.id">
              {{ t.name || "Predloga #" + t.id }}
            </option>
          </select>
        </div>

        <label class="block text-sm font-medium text-gray-700">Vsebina sporočila</label>
        <textarea
          v-model="smsMessage"
          rows="4"
          class="w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
          placeholder="Vpišite SMS vsebino..."
        ></textarea>
        <!-- Live counters -->
        <div class="mt-1 text-xs text-gray-600 flex flex-col gap-1">
          <div>
            <span class="font-medium">Znakov:</span>
            <span class="font-mono">{{ charCount }}</span>
            <span class="mx-2">|</span>
            <span class="font-medium">Kodiranje:</span>
            <span>{{ smsEncoding }}</span>
            <span class="mx-2">|</span>
            <span class="font-medium">Deli SMS:</span>
            <span class="font-mono">{{ segments }}</span>
            <span class="mx-2">|</span>
            <span class="font-medium">Krediti:</span>
            <span class="font-mono">{{ creditsNeeded }}</span>
          </div>
          <div>
            <span class="font-medium">Omejitev:</span>
            <span class="font-mono">{{ maxAllowed }}</span>
            <span class="mx-2">|</span>
            <span class="font-medium">Preostanek:</span>
            <span class="font-mono" :class="{ 'text-red-600': remaining === 0 }">{{
              remaining
            }}</span>
          </div>
          <p class="text-[11px] text-gray-500 leading-snug">
            Dolžina 160 znakov velja samo pri pošiljanju sporočil, ki vsebujejo znake, ki
            ne zahtevajo enkodiranja. Če npr. želite pošiljati šumnike, ki niso del
            7-bitne abecede GSM, morate uporabiti Unicode enkodiranje (UCS‑2). V tem
            primeru je največja dolžina enega SMS sporočila 70 znakov (pri daljših
            sporočilih 67 znakov na del), medtem ko je pri GSM‑7 160 znakov (pri daljših
            sporočilih 153 znakov na del). Razširjeni znaki (^{{ "{" }}}}\\[]~| in €)
            štejejo dvojno. Največja dovoljena dolžina po ponudniku: 640 (GSM‑7) oziroma
            320 (UCS‑2) znakov.
          </p>
        </div>

        <label class="inline-flex items-center gap-2 text-sm text-gray-700 mt-1">
          <input
            type="checkbox"
            v-model="deliveryReport"
            class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
          />
          Zahtevaj poročilo o dostavi
        </label>
      </div>
    </template>
    <template #footer>
      <button class="px-3 py-1 rounded border mr-2" @click="closeSmsDialog">
        Prekliči
      </button>
      <button
        class="px-3 py-1 rounded bg-indigo-600 text-white disabled:opacity-50"
        :disabled="smsSending || !smsMessage"
        @click="submitSms"
      >
        Pošlji
      </button>
    </template>
  </DialogModal>
</template>

