<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
import { Head, Link, useForm } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
  faPlus,
  faFlask,
  faBolt,
  faArrowsRotate,
  faToggleOn,
  faToggleOff,
  faPaperPlane,
} from "@fortawesome/free-solid-svg-icons";

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

const createOpen = ref(false); // create modal
const editOpen = ref(false); // edit modal
const editTarget = ref(null); // profile being edited

const form = useForm({
  name: "",
  host: "",
  port: 587,
  encryption: "tls",
  username: "",
  password: "",
  from_address: "",
  from_name: "",
  priority: 10,
});

function openCreate() {
  form.reset();
  createOpen.value = true;
  editTarget.value = null;
}

function openEdit(p) {
  // populate form with existing profile data (exclude password which is write-only)
  form.reset();
  form.name = p.name || "";
  form.host = p.host || "";
  form.port = p.port || 587;
  form.encryption = p.encryption || "";
  form.username = p.username || "";
  form.password = ""; // empty -> keep existing unless user fills
  form.from_address = p.from_address || "";
  form.from_name = p.from_name || "";
  form.priority = p.priority ?? 10;
  editTarget.value = p;
  editOpen.value = true;
}

function closeCreate() {
  if (form.processing) return;
  createOpen.value = false;
}

function submitCreate() {
  form.post(route("admin.mail-profiles.store"), {
    preserveScroll: true,
    onSuccess: () => {
      createOpen.value = false;
    },
  });
}

function closeEdit() {
  if (form.processing) return;
  editOpen.value = false;
  editTarget.value = null;
}

function submitEdit() {
  if (!editTarget.value) return;
  // Build payload excluding empty password
  const payload = {
    name: form.name,
    host: form.host,
    port: form.port,
    encryption: form.encryption || null,
    username: form.username || null,
    from_address: form.from_address,
    from_name: form.from_name || null,
    priority: form.priority,
  };
  if (form.password && form.password.trim() !== "") {
    payload.password = form.password.trim();
  }
  form.transform(() => payload).put(route("admin.mail-profiles.update", editTarget.value.id), {
    preserveScroll: true,
    onSuccess: () => {
      editOpen.value = false;
      editTarget.value = null;
    },
  });
}

function toggleActive(p) {
  window.axios
    .post(route("admin.mail-profiles.toggle", p.id))
    .then(() => window.location.reload());
}

function testConnection(p) {
  window.axios
    .post(route("admin.mail-profiles.test", p.id))
    .then(() => window.location.reload());
}

function sendTestEmail(p) {
  window.axios
    .post(route("admin.mail-profiles.send-test", p.id))
    .then(() => window.location.reload());
}

const statusClass = (p) => {
  if (p.test_status === "success") return "text-emerald-600";
  if (p.test_status === "failed") return "text-rose-600";
  if (p.test_status === "queued") return "text-amber-500";
  return "text-gray-400";
};
</script>

<template>
  <AdminLayout title="Mail profili">
    <Head title="Mail profili" />
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-xl font-semibold text-gray-800 flex items-center gap-3">
        Mail 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">Host</th>
            <th class="px-3 py-2">Port</th>
            <th class="px-3 py-2">Enc</th>
            <th class="px-3 py-2">Aktivno</th>
            <th class="px-3 py-2">Test</th>
            <th class="px-3 py-2">Zadnji uspeh</th>
            <th class="px-3 py-2">Napaka</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.host }}</td>
            <td class="px-3 py-2 text-center">{{ p.port }}</td>
            <td class="px-3 py-2 text-center">{{ p.encryption || "—" }}</td>
            <td class="px-3 py-2 text-center">
              <button
                @click="toggleActive(p)"
                class="text-indigo-600 hover:text-indigo-800"
                :title="p.active ? 'Onemogoči' : 'Omogoči'"
              >
                <FontAwesomeIcon
                  :icon="p.active ? faToggleOn : faToggleOff"
                  class="w-5 h-5"
                />
              </button>
            </td>
            <td class="px-3 py-2 text-center">
              <span :class="['font-medium', statusClass(p)]">{{
                p.test_status || "—"
              }}</span>
            </td>
            <td class="px-3 py-2 text-xs text-gray-500">
              {{ p.last_success_at ? new Date(p.last_success_at).toLocaleString() : "—" }}
            </td>
            <td
              class="px-3 py-2 text-xs text-rose-600 max-w-[160px] truncate"
              :title="p.last_error_message"
            >
              {{ p.last_error_message || "—" }}
            </td>
            <td class="px-3 py-2 flex items-center gap-2">
              <button
                @click="testConnection(p)"
                class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-amber-600 border-amber-300 bg-amber-50 hover:bg-amber-100"
              >
                <FontAwesomeIcon :icon="faFlask" class="w-3.5 h-3.5" /> Test
              </button>
              <button
                @click="sendTestEmail(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 testni email"
              >
                <FontAwesomeIcon :icon="faPaperPlane" class="w-3.5 h-3.5" /> Pošlji test
              </button>
              <button
                @click="openEdit(p)"
                class="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border text-indigo-600 border-indigo-300 bg-indigo-50 hover:bg-indigo-100"
                title="Uredi profil"
              >
                <FontAwesomeIcon :icon="faArrowsRotate" class="w-3.5 h-3.5" /> Uredi
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <CreateDialog
      :show="createOpen"
      title="Nov Mail profil"
      max-width="2xl"
      confirm-text="Shrani"
      :processing="form.processing"
      @close="closeCreate"
      @confirm="submitCreate"
    >
      <form @submit.prevent="submitCreate" id="create-mail-profile" class="space-y-5">
          <div class="grid gap-4 grid-cols-2">
            <div class="col-span-1">
              <label class="label">Ime</label>
              <input v-model="form.name" type="text" class="input" />
            </div>
            <div>
              <label class="label">Host</label>
              <input v-model="form.host" type="text" class="input" />
            </div>
            <div>
              <label class="label">Port</label>
              <input v-model="form.port" type="number" class="input" />
            </div>
            <div>
              <label class="label">Encryption</label>
              <select v-model="form.encryption" class="input">
                <option value="">(None)</option>
                <option value="tls">TLS</option>
                <option value="ssl">SSL</option>
              </select>
            </div>
            <div>
              <label class="label">Username</label>
              <input v-model="form.username" type="text" class="input" />
            </div>
            <div>
              <label class="label">Password</label>
              <input
                v-model="form.password"
                type="password"
                class="input"
                autocomplete="new-password"
              />
            </div>
            <div>
              <label class="label">From naslov</label>
              <input v-model="form.from_address" type="email" class="input" />
            </div>
            <div>
              <label class="label">From ime</label>
              <input v-model="form.from_name" type="text" class="input" />
            </div>
            <div>
              <label class="label">Prioriteta</label>
              <input v-model="form.priority" type="number" class="input" />
            </div>
          </div>
      </form>
    </CreateDialog>
    <!-- Edit Modal -->
    <UpdateDialog
      :show="editOpen"
      title="Uredi Mail profil"
      max-width="2xl"
      confirm-text="Shrani"
      :processing="form.processing"
      @close="closeEdit"
      @confirm="submitEdit"
    >
      <form @submit.prevent="submitEdit" id="edit-mail-profile" class="space-y-5">
          <div class="grid gap-4 grid-cols-2">
            <div>
              <label class="label">Ime</label>
              <input v-model="form.name" type="text" class="input" />
            </div>
            <div>
              <label class="label">Host</label>
              <input v-model="form.host" type="text" class="input" />
            </div>
            <div>
              <label class="label">Port</label>
              <input v-model="form.port" type="number" class="input" />
            </div>
            <div>
              <label class="label">Encryption</label>
              <select v-model="form.encryption" class="input">
                <option value="">(None)</option>
                <option value="tls">TLS</option>
                <option value="ssl">SSL</option>
              </select>
            </div>
            <div>
              <label class="label">Username</label>
              <input v-model="form.username" type="text" class="input" />
            </div>
            <div>
              <label class="label">Password (nova, če spreminjaš)</label>
              <input v-model="form.password" type="password" class="input" autocomplete="new-password" />
            </div>
            <div>
              <label class="label">From naslov</label>
              <input v-model="form.from_address" type="email" class="input" />
            </div>
            <div>
              <label class="label">From ime</label>
              <input v-model="form.from_name" type="text" class="input" />
            </div>
            <div>
              <label class="label">Prioriteta</label>
              <input v-model="form.priority" type="number" class="input" />
            </div>
          </div>
          <p class="text-xs text-gray-500">Pusti geslo prazno, če želiš obdržati obstoječe.</p>
      </form>
    </UpdateDialog>
  </AdminLayout>
</template>

<style scoped>
/* Utility replacements for @apply not processed in SFC scope build pipeline */
.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;
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animate-fade-in {
  animation: fade-in 0.25s ease;
}
</style>
