<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import DialogModal from "@/Components/DialogModal.vue";
import { Head, useForm, router } from "@inertiajs/vue3";
import { ref, watch } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faPlus, faPaperPlane, faCoins, faTags, faFlask } from "@fortawesome/free-solid-svg-icons";

const props = defineProps({
  initialProfiles: { type: Array, default: () => [] },
});

const profiles = ref(props.initialProfiles || []);

// Keep local ref in sync with Inertia prop changes (after router navigations)
watch(
  () => props.initialProfiles,
  (val) => {
    profiles.value = val || [];
  }
);

// Create profile modal
const createOpen = ref(false);
const createForm = useForm({
  name: "",
  active: true,
  api_username: "",
  api_password: "",
});

function openCreate() {
  createForm.reset();
  createForm.active = true;
  createOpen.value = true;
}

async function submitCreate() {
  try {
    createForm.processing = true;
    const payload = {
      name: createForm.name,
      active: !!createForm.active,
      api_username: createForm.api_username,
      api_password: createForm.api_password,
    };
    await router.post(route("admin.sms-profiles.store"), payload, {
      preserveScroll: true,
      onSuccess: () => {
        createOpen.value = false;
      },
    });
  } finally {
    createForm.processing = false;
  }
}

// Test send modal
const testOpen = ref(false);
const testTarget = ref(null);
const testResult = ref(null);
const testForm = useForm({
  to: "",
  message: "",
  sender_id: null,
  delivery_report: true,
  country_code: null,
});

function openTest(p) {
  testForm.reset();
  testTarget.value = p;
  testResult.value = null;
  testOpen.value = true;
}

async function submitTest() {
  if (!testTarget.value) return;
  try {
    testForm.processing = true;
    const payload = {
      to: testForm.to,
      message: testForm.message,
      sender_id: testForm.sender_id,
      delivery_report: !!testForm.delivery_report,
      country_code: testForm.country_code,
    };
    await router.post(route("admin.sms-profiles.test-send", testTarget.value.id), payload, {
      preserveScroll: true,
      onSuccess: () => {
        testResult.value = null;
        testOpen.value = false;
      },
    });
  } finally {
    testForm.processing = false;
  }
}

// Balance & Price
const balances = ref({});
const quotes = ref({});

function fetchBalance(p) {
  window.axios.post(route("admin.sms-profiles.balance", p.id)).then((r) => {
    balances.value[p.id] = r.data.balance;
  });
}

function fetchPrice(p) {
  window.axios.post(route("admin.sms-profiles.price", p.id)).then((r) => {
    quotes.value[p.id] = r.data.quotes || [];
  });
}

const formatDateTime = (s) => (s ? new Date(s).toLocaleString() : "—");
</script>

<template>
  <AdminLayout title="SMS profili">
    <Head title="SMS profili" />
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-xl font-semibold text-gray-800 flex items-center gap-3">
        SMS profili
        <span class="text-xs font-medium text-gray-400">({{ profiles.length }})</span>
      </h1>
      <button
        @click="openCreate"
        class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-500 shadow"
      >
        <FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Nov profil
      </button>
    </div>

    <div class="rounded-lg border bg-white overflow-hidden shadow-sm">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
          <tr>
            <th class="px-3 py-2 text-left">Ime</th>
            <th class="px-3 py-2 text-left">Uporabnik</th>
            <th class="px-3 py-2">Aktiven</th>
            <th class="px-3 py-2">Pošiljatelji</th>
            <th class="px-3 py-2">Bilanca</th>
            <th class="px-3 py-2">Cena</th>
            <th class="px-3 py-2">Akcije</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="p in profiles" :key="p.id" class="border-t last:border-b hover:bg-gray-50">
            <td class="px-3 py-2 font-medium text-gray-800">{{ p.name }}</td>
            <td class="px-3 py-2">{{ p.api_username }}</td>
            <td class="px-3 py-2 text-center">
              <span :class="p.active ? 'text-emerald-600' : 'text-rose-600'">{{ p.active ? 'Da' : 'Ne' }}</span>
            </td>
            <td class="px-3 py-2 text-xs text-gray-600">
              <span v-if="(p.senders||[]).length === 0">—</span>
              <span v-else>
                {{ p.senders.map(s => s.sname).join(', ') }}
              </span>
            </td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <button @click="fetchBalance(p)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-amber-700 border-amber-300 bg-amber-50 hover:bg-amber-100">
                  <FontAwesomeIcon :icon="faCoins" class="w-3.5 h-3.5" /> Pridobi
                </button>
                <span class="text-xs text-gray-600">{{ balances[p.id] ?? '—' }}</span>
              </div>
            </td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <button @click="fetchPrice(p)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-700 border-indigo-300 bg-indigo-50 hover:bg-indigo-100">
                  <FontAwesomeIcon :icon="faTags" class="w-3.5 h-3.5" /> Cene
                </button>
                <span class="text-xs text-gray-600 truncate max-w-[200px]" :title="(quotes[p.id]||[]).join(', ')">
                  {{ (quotes[p.id] || []).join(', ') || '—' }}
                </span>
              </div>
            </td>
            <td class="px-3 py-2 flex items-center gap-2">
              <button
                @click="openTest(p)"
                class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-emerald-700 border-emerald-300 bg-emerald-50 hover:bg-emerald-100"
                title="Pošlji test SMS"
              >
                <FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5" /> Test SMS
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Create Profile Modal -->
    <DialogModal :show="createOpen" max-width="2xl" @close="() => (createOpen = false)">
      <template #title> Nov SMS profil </template>
      <template #content>
        <form @submit.prevent="submitCreate" id="create-sms-profile" class="space-y-5">
          <div class="grid gap-4 grid-cols-2">
            <div>
              <label class="label">Ime</label>
              <input v-model="createForm.name" type="text" class="input" />
            </div>
            <div>
              <label class="label">Aktivno</label>
              <select v-model="createForm.active" class="input">
                <option :value="true">Da</option>
                <option :value="false">Ne</option>
              </select>
            </div>
            <div>
              <label class="label">API uporabnik</label>
              <input v-model="createForm.api_username" type="text" class="input" />
            </div>
            <div>
              <label class="label">API geslo</label>
              <input v-model="createForm.api_password" type="password" class="input" autocomplete="new-password" />
            </div>
          </div>
        </form>
      </template>
      <template #footer>
        <button type="button" @click="() => (createOpen = false)" class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50">Prekliči</button>
        <button form="create-sms-profile" type="submit" :disabled="createForm.processing" class="px-4 py-2 text-sm rounded-md bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-50">Shrani</button>
      </template>
    </DialogModal>

    <!-- Test Send Modal -->
    <DialogModal :show="testOpen" max-width="2xl" @close="() => (testOpen = false)">
      <template #title> Testni SMS </template>
      <template #content>
        <div class="space-y-4">
          <div class="grid gap-4 grid-cols-2">
            <div>
              <label class="label">Prejemnik (E.164)</label>
              <input v-model="testForm.to" type="text" class="input" placeholder="+386..." />
            </div>
            <div>
              <label class="label">Državna koda (opcijsko)</label>
              <input v-model="testForm.country_code" type="text" class="input" placeholder="SI" />
            </div>
            <div class="col-span-2">
              <label class="label">Sporočilo</label>
              <textarea v-model="testForm.message" class="input" rows="4"></textarea>
            </div>
            <div>
              <label class="label">Dostavna poročila</label>
              <select v-model="testForm.delivery_report" class="input">
                <option :value="true">Da</option>
                <option :value="false">Ne</option>
              </select>
            </div>
          </div>
          <!-- Result details removed; rely on flash message after redirect -->
        </div>
      </template>
      <template #footer>
        <button type="button" @click="() => (testOpen = false)" class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50">Zapri</button>
        <button type="button" @click="submitTest" :disabled="testForm.processing || !testTarget" class="px-4 py-2 text-sm rounded-md bg-emerald-600 text-white hover:bg-emerald-500 disabled:opacity-50">
          <FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5 mr-1" /> Pošlji test
        </button>
      </template>
    </DialogModal>
  </AdminLayout>
  
</template>

<style scoped>
.input {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid var(--tw-color-gray-300, #d1d5db);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-color: #6366f1;
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1;
}
.label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
</style>
