<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import DialogModal from "@/Components/DialogModal.vue";
import { Head, useForm, router } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faPlus, faPen, faTrash, faToggleOn, faToggleOff } from "@fortawesome/free-solid-svg-icons";

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

// Use props directly so Inertia navigations refresh the list automatically
const senders = computed(() => props.initialSenders || []);
const profileById = computed(() => Object.fromEntries((props.profiles || []).map(p => [p.id, p])));


// Create/Edit modal
const editOpen = ref(false);
const editing = ref(null);
const form = useForm({
  profile_id: null,
  sname: "",
  phone_number: "",
  description: "",
  active: true,
});

function openCreate() {
  editing.value = null;
  form.reset();
  form.active = true;
  editOpen.value = true;
}

function openEdit(s) {
  editing.value = s;
  form.reset();
  form.profile_id = s.profile_id;
  form.sname = s.sname;
  form.phone_number = s.phone_number || "";
  form.description = s.description;
  form.active = !!s.active;
  editOpen.value = true;
}

async function submitEdit() {
  try {
    form.processing = true;
    const payload = {
      profile_id: form.profile_id,
      sname: (form.sname || "").trim() || null,
      phone_number: form.phone_number || null,
      description: form.description || null,
      active: !!form.active,
    };
    if (editing.value) {
      await router.put(route("admin.sms-senders.update", editing.value.id), payload, {
        preserveScroll: true,
      });
    } else {
      await router.post(route("admin.sms-senders.store"), payload, {
        preserveScroll: true,
      });
    }
    editOpen.value = false;
  } finally {
    form.processing = false;
  }
}

async function toggleActive(s) {
  await router.post(route("admin.sms-senders.toggle", s.id), {}, { preserveScroll: true });
}

async function destroySender(s) {
  if (!confirm(`Izbrišem pošiljatelja "${s.sname}"?`)) return;
  await router.delete(route("admin.sms-senders.destroy", s.id), { preserveScroll: true });
}
</script>

<template>
  <AdminLayout title="SMS pošiljatelji">
    <Head title="SMS pošiljatelji" />
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-xl font-semibold text-gray-800">SMS pošiljatelji</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 pošiljatelj
      </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">Pošiljatelj</th>
            <th class="px-3 py-2 text-left">Številka</th>
            <th class="px-3 py-2 text-left">Profil</th>
            <th class="px-3 py-2">Aktiven</th>
            <th class="px-3 py-2 text-left">Opis</th>
            <th class="px-3 py-2">Akcije</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="s in senders" :key="s.id" class="border-t last:border-b hover:bg-gray-50">
            <td class="px-3 py-2 font-medium text-gray-800">{{ s.sname }}</td>
            <td class="px-3 py-2 text-gray-700">{{ s.phone_number || '—' }}</td>
            <td class="px-3 py-2">{{ profileById[s.profile_id]?.name || '—' }}</td>
            <td class="px-3 py-2 text-center">
              <span :class="s.active ? 'text-emerald-600' : 'text-rose-600'">{{ s.active ? 'Da' : 'Ne' }}</span>
            </td>
            <td class="px-3 py-2 text-gray-600">{{ s.description || '—' }}</td>
            <td class="px-3 py-2">
              <div class="flex items-center gap-2">
                <button @click="openEdit(s)" 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="faPen" class="w-3.5 h-3.5" /> Uredi
                </button>
                <button @click="toggleActive(s)" 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="s.active ? faToggleOn : faToggleOff" class="w-3.5 h-3.5" />
                </button>
                <button @click="destroySender(s)" class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-rose-700 border-rose-300 bg-rose-50 hover:bg-rose-100">
                  <FontAwesomeIcon :icon="faTrash" class="w-3.5 h-3.5" /> Izbriši
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <DialogModal :show="editOpen" max-width="2xl" @close="() => (editOpen = false)">
      <template #title> {{ editing ? 'Uredi pošiljatelja' : 'Nov pošiljatelj' }} </template>
      <template #content>
        <form @submit.prevent="submitEdit" id="edit-sms-sender" class="space-y-5">
          <div class="grid gap-4 grid-cols-2">
            <div>
              <label class="label">Profil</label>
              <select v-model="form.profile_id" class="input">
                <option :value="null" disabled>Izberi profil…</option>
                <option v-for="p in profiles" :key="p.id" :value="p.id">{{ p.name }}</option>
              </select>
            </div>
            <div>
              <label class="label">Pošiljatelj (Sender ID) — opcijsko</label>
              <input v-model="form.sname" type="text" class="input" placeholder="npr. TEREN" />
            </div>
            <div>
              <label class="label">Številka pošiljatelja (opcijsko)</label>
              <input v-model="form.phone_number" type="text" class="input" placeholder="npr. +38640123456" />
            </div>
            <div class="col-span-2">
              <label class="label">Opis (opcijsko)</label>
              <input v-model="form.description" type="text" class="input" />
            </div>
            <div>
              <label class="label">Aktivno</label>
              <select v-model="form.active" class="input">
                <option :value="true">Da</option>
                <option :value="false">Ne</option>
              </select>
            </div>
          </div>
        </form>
      </template>
      <template #footer>
        <button type="button" @click="() => (editOpen = false)" class="px-4 py-2 text-sm rounded-md border bg-white hover:bg-gray-50">Prekliči</button>
        <button form="edit-sms-sender" type="submit" :disabled="form.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>
  </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>
