<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Head, useForm, router } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/Components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/Components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { Switch } from "@/Components/ui/switch";
import {
  PhoneIcon,
  PlusIcon,
  PencilIcon,
  Trash2Icon,
  MoreVerticalIcon,
} from "lucide-vue-next";

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" />
    <Card>
      <CardHeader>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <PhoneIcon class="h-5 w-5 text-muted-foreground" />
            <CardTitle>SMS pošiljatelji</CardTitle>
          </div>
          <Button @click="openCreate">
            <PlusIcon class="h-4 w-4 mr-2" />
            Nov pošiljatelj
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Pošiljatelj</TableHead>
              <TableHead>Številka</TableHead>
              <TableHead>Profil</TableHead>
              <TableHead>Aktiven</TableHead>
              <TableHead>Opis</TableHead>
              <TableHead class="text-right">Akcije</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="s in senders" :key="s.id">
              <TableCell class="font-medium">{{ s.sname }}</TableCell>
              <TableCell>{{ s.phone_number || "—" }}</TableCell>
              <TableCell>{{ profileById[s.profile_id]?.name || "—" }}</TableCell>
              <TableCell>
                <Switch
                  :default-value="s.active"
                  @update:model-value="() => toggleActive(s)"
                />
              </TableCell>
              <TableCell class="text-muted-foreground">{{
                s.description || "—"
              }}</TableCell>
              <TableCell class="text-right">
                <DropdownMenu>
                  <DropdownMenuTrigger as-child>
                    <Button variant="ghost" size="icon">
                      <MoreVerticalIcon class="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem @click="openEdit(s)">
                      <PencilIcon class="h-4 w-4 mr-2" />
                      Uredi
                    </DropdownMenuItem>
                    <DropdownMenuItem @click="destroySender(s)" class="text-destructive">
                      <Trash2Icon class="h-4 w-4 mr-2" />
                      Izbriši
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </CardContent>
    </Card>

    <Dialog :open="editOpen" @update:open="(val) => (editOpen = val)">
      <DialogContent class="max-w-2xl">
        <DialogHeader>
          <DialogTitle>{{
            editing ? "Uredi pošiljatelja" : "Nov pošiljatelj"
          }}</DialogTitle>
        </DialogHeader>
        <form @submit.prevent="submitEdit" id="edit-sms-sender" class="space-y-4">
          <div class="grid gap-4 grid-cols-2">
            <div class="space-y-2">
              <Label>Profil</Label>
              <Select v-model="form.profile_id">
                <SelectTrigger>
                  <SelectValue placeholder="Izberi profil…" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem v-for="p in profiles" :key="p.id" :value="p.id">
                    {{ p.name }}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div class="space-y-2">
              <Label>Pošiljatelj (Sender ID) — opcijsko</Label>
              <Input v-model="form.sname" type="text" placeholder="npr. TEREN" />
            </div>
            <div class="space-y-2">
              <Label>Številka pošiljatelja (opcijsko)</Label>
              <Input
                v-model="form.phone_number"
                type="text"
                placeholder="npr. +38640123456"
              />
            </div>
            <div class="space-y-2 col-span-2">
              <Label>Opis (opcijsko)</Label>
              <Input v-model="form.description" type="text" />
            </div>
            <div class="space-y-2">
              <Label>Aktivno</Label>
              <Select v-model="form.active">
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem :value="true">Da</SelectItem>
                  <SelectItem :value="false">Ne</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </form>
        <DialogFooter>
          <Button type="button" variant="outline" @click="() => (editOpen = false)"
            >Prekliči</Button
          >
          <Button form="edit-sms-sender" type="submit" :disabled="form.processing"
            >Shrani</Button
          >
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </AdminLayout>
</template>
