<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link, router, useForm } from "@inertiajs/vue3";
import { ref, computed, nextTick } from "vue";
import axios from "axios";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";
import { Label } from "@/Components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox";
import { Badge } from "@/Components/ui/badge";
import { Separator } from "@/Components/ui/separator";
import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
import {
  MailIcon,
  UsersIcon,
  SearchIcon,
  SaveIcon,
  ArrowLeftIcon,
  FilterIcon,
  CalendarIcon,
  CheckCircle2Icon,
  XCircleIcon,
  BadgeCheckIcon,
} from "lucide-vue-next";
import { fmtDateDMY } from "@/Utilities/functions";
import { upperFirst } from "lodash";
import AppCombobox from "@/Components/app/ui/AppCombobox.vue";
import AppRangeDatePicker from "@/Components/app/ui/AppRangeDatePicker.vue";

const props = defineProps({
  emailTemplates: { type: Array, default: () => [] },
  mailProfiles: { type: Array, default: () => [] },
  segments: { type: Array, default: () => [] },
  clients: { type: Array, default: () => [] },
});

const creatingFromContracts = ref(false);
const hasBodyText = ref(false);

const form = useForm({
  name: "",
  description: "",
  mail_profile_id: null,
  template_id: null,
  subject: "",
  body_text: "",
});

function onTemplateChange(newTemplateId) {
  const template = props.emailTemplates.find((t) => t.id === newTemplateId);
  if (template?.subject_template && !form.subject) {
    form.subject = template.subject_template;
  }
  hasBodyText.value = !!template?.has_body_text;
  if (template?.has_body_text && template?.text_template) {
    form.body_text = template.text_template;
  } else {
    form.body_text = "";
  }
}

// Contracts mode state & actions
const contracts = ref({
  data: [],
  meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
});
const segmentId = ref(null);
const search = ref("");
const clientId = ref(null);
const startDateRange = ref({ start: null, end: null });
const promiseDateRange = ref({ start: null, end: null });
const onlyVerified = ref(false);
const onlyWithEmail = ref(false);
const loadingContracts = ref(false);

const clientItems = computed(() =>
  props.clients.map((c) => ({
    value: c.id,
    label: c.name,
  }))
);
const selectedContractIds = ref(new Set());
const perPage = ref(25);

const contractColumns = [
  { accessorKey: "reference", header: "Pogodba" },
  {
    id: "person",
    accessorFn: (row) => row.person?.full_name || "—",
    header: "Primer",
  },
  {
    id: "client",
    accessorFn: (row) => row.client?.name || "—",
    header: "Stranka",
  },
  { accessorKey: "start_date", header: "Datum začetka" },
  { accessorKey: "promise_date", header: "Zadnja obljuba" },
  {
    id: "selected_email",
    accessorFn: (row) => row.selected_email?.value || "—",
    header: "Izbrani e-mail",
  },
  {
    id: "segment",
    accessorFn: (row) => upperFirst(row.segment?.name) || "—",
    header: "Segment",
  },
  { accessorKey: "no_email_reason", header: "Opomba" },
];

function onSelectionChange(selectedKeys) {
  const newSelection = new Set();
  selectedKeys.forEach((key) => {
    const index = parseInt(key);
    if (contracts.value.data[index]) {
      newSelection.add(contracts.value.data[index].id);
    }
  });
  selectedContractIds.value = newSelection;
}

async function loadContracts(url = null) {
  loadingContracts.value = true;
  try {
    const params = new URLSearchParams();
    if (segmentId.value) params.append("segment_id", segmentId.value);
    if (search.value) params.append("q", search.value);
    if (clientId.value) params.append("client_id", clientId.value);
    if (startDateRange.value?.start)
      params.append("start_date_from", startDateRange.value.start);
    if (startDateRange.value?.end)
      params.append("start_date_to", startDateRange.value.end);
    if (promiseDateRange.value?.start)
      params.append("promise_date_from", promiseDateRange.value.start);
    if (promiseDateRange.value?.end)
      params.append("promise_date_to", promiseDateRange.value.end);
    if (onlyVerified.value) params.append("only_verified", "1");
    if (onlyWithEmail.value) params.append("only_with_email", "1");
    params.append("per_page", perPage.value);

    const target = url || `${route("packages.email.contracts")}?${params.toString()}`;
    const { data: json } = await axios.get(target, {
      headers: { "X-Requested-With": "XMLHttpRequest" },
    });

    await nextTick();

    contracts.value = {
      data: json.data || [],
      meta: json.meta || { current_page: 1, last_page: 1, per_page: 25, total: 0 },
    };
  } finally {
    loadingContracts.value = false;
  }
}

const rowSelection = computed(() => {
  const selection = {};
  contracts.value.data.forEach((contract, index) => {
    if (selectedContractIds.value.has(contract.id)) {
      selection[index.toString()] = true;
    }
  });
  return selection;
});

const tableKey = computed(() => {
  return `contracts-${contracts.value.meta.current_page}-${contracts.value.data.length}`;
});

function resetFilters() {
  segmentId.value = null;
  clientId.value = null;
  search.value = "";
  startDateRange.value = { start: null, end: null };
  promiseDateRange.value = { start: null, end: null };
  onlyVerified.value = false;
  onlyWithEmail.value = false;
  contracts.value = {
    data: [],
    meta: { current_page: 1, last_page: 1, per_page: 25, total: 0 },
  };
}

function submitCreateFromContracts() {
  const ids = Array.from(selectedContractIds.value);
  if (!ids.length) return;

  const visibleById = new Map((contracts.value.data || []).map((c) => [c.id, c]));
  const selectedVisible = ids.map((id) => visibleById.get(id)).filter(Boolean);
  if (selectedVisible.length && selectedVisible.every((c) => !c?.selected_email)) {
    alert("Za izbrane pogodbe ni mogoče najti prejemnikov (e-mail naslovov).");
    return;
  }

  const payload = {
    type: "email",
    name: form.name || `E-mail paket (segment) ${new Date().toLocaleString()}`,
    description: form.description || "",
    payload: {
      mail_profile_id: form.mail_profile_id,
      template_id: form.template_id,
      subject: form.subject && form.subject.trim() ? form.subject.trim() : null,
      body_text: form.body_text && form.body_text.trim() ? form.body_text.trim() : null,
    },
    contract_ids: ids,
  };

  creatingFromContracts.value = true;
  router.post(route("packages.email.store-from-contracts"), payload, {
    onSuccess: () => {
      router.visit(route("packages.email.index"));
    },
    onError: (errors) => {
      const first = errors && Object.values(errors)[0];
      if (first) {
        alert(String(first));
      }
    },
    onFinish: () => {
      creatingFromContracts.value = false;
    },
  });
}
</script>

<template>
  <AppLayout title="Ustvari e-mail paket">
    <!-- Header -->
    <div class="mb-6">
      <div class="flex items-center gap-3 mb-2">
        <Link :href="route('packages.email.index')">
          <Button variant="ghost" size="sm">
            <ArrowLeftIcon class="h-4 w-4 mr-2" />
            Nazaj
          </Button>
        </Link>
      </div>
      <div class="flex items-center gap-3">
        <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
          <MailIcon class="h-6 w-6 text-primary" />
        </div>
        <div>
          <h1 class="text-2xl font-bold tracking-tight">Ustvari e-mail paket</h1>
          <p class="text-sm text-muted-foreground">Pošlji e-mail sporočila v paketu</p>
        </div>
      </div>
    </div>

    <!-- Package Details Card -->
    <Card class="mb-6">
      <CardHeader>
        <CardTitle>Podatki o paketu</CardTitle>
        <CardDescription>Osnovne informacije in e-mail nastavitve</CardDescription>
      </CardHeader>
      <CardContent class="space-y-6">
        <!-- Basic Info -->
        <div class="grid gap-4 md:grid-cols-2">
          <div class="space-y-2">
            <Label for="name">Ime paketa</Label>
            <Input
              id="name"
              v-model="form.name"
              placeholder="Npr. E-mail kampanja december 2024"
            />
          </div>
          <div class="space-y-2">
            <Label for="description">Opis</Label>
            <Input
              id="description"
              v-model="form.description"
              placeholder="Neobvezen opis paketa"
            />
          </div>
        </div>

        <Separator />

        <!-- Email Configuration -->
        <div>
          <h3 class="text-sm font-semibold mb-4">E-mail nastavitve</h3>
          <div class="grid gap-4 md:grid-cols-2">
            <div class="space-y-2">
              <Label>E-mail profil</Label>
              <Select v-model="form.mail_profile_id">
                <SelectTrigger>
                  <SelectValue placeholder="Izberi profil" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem :value="null">—</SelectItem>
                  <SelectItem v-for="p in mailProfiles" :key="p.id" :value="p.id">
                    {{ p.name }}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div class="space-y-2">
              <Label>Predloga</Label>
              <Select v-model="form.template_id" @update:model-value="onTemplateChange">
                <SelectTrigger>
                  <SelectValue placeholder="Izberi predlogo" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem :value="null">—</SelectItem>
                  <SelectItem v-for="t in emailTemplates" :key="t.id" :value="t.id">
                    {{ t.name }}
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <div class="mt-4 space-y-2">
            <Label for="subject">Zadeva (neobvezno — prepiše zadevo iz predloge)</Label>
            <Input
              id="subject"
              v-model="form.subject"
              placeholder="Npr. Vaša pogodba ..."
            />
          </div>
          <div v-if="hasBodyText" class="mt-4 space-y-2">
            <Label for="body_text">Besedilo sporočila (neobvezno — vstavi se na mesto <code>&#123;&#123;body_text&#125;&#125;</code>)</Label>
            <Textarea
              id="body_text"
              v-model="form.body_text"
              placeholder="Vnesite besedilo sporočila..."
              class="min-h-[120px] resize-y"
            />
          </div>
        </div>
      </CardContent>
    </Card>

    <!-- Contracts Filter Card -->
    <Card class="mb-6">
      <CardHeader>
        <div class="flex items-center justify-between">
          <div>
            <CardTitle>Filtri za pogodbe</CardTitle>
            <CardDescription>Najdi prejemnike glede na pogodbe in segmente</CardDescription>
          </div>
          <Badge variant="outline" class="text-xs">
            <FilterIcon class="h-3 w-3 mr-1" />
            Napredno iskanje
          </Badge>
        </div>
      </CardHeader>
      <CardContent class="space-y-6">
        <!-- Basic filters -->
        <div class="grid gap-4 md:grid-cols-3">
          <div class="space-y-2">
            <Label>Segment</Label>
            <Select v-model="segmentId" @update:model-value="loadContracts()">
              <SelectTrigger>
                <SelectValue placeholder="Vsi segmenti" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem :value="null">Vsi segmenti</SelectItem>
                <SelectItem v-for="s in segments" :key="s.id" :value="s.id">
                  {{ s.name }}
                </SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div class="space-y-2">
            <Label>Stranka</Label>
            <AppCombobox
              v-model="clientId"
              :items="clientItems"
              placeholder="Vse stranke"
              search-placeholder="Išči stranko..."
              empty-text="Stranka ni najdena."
              button-class="w-full"
              @update:model-value="loadContracts()"
            />
          </div>
          <div class="space-y-2">
            <Label>Iskanje po referenci</Label>
            <Input
              v-model="search"
              @keyup.enter="loadContracts()"
              placeholder="Vnesi referenco..."
            />
          </div>
        </div>

        <Separator />

        <!-- Date filters -->
        <div>
          <h4 class="text-sm font-semibold mb-3 flex items-center gap-2">
            <CalendarIcon class="h-4 w-4" />
            Datumski filtri
          </h4>
          <div class="grid gap-4 md:grid-cols-2">
            <div class="space-y-3">
              <p class="text-sm text-muted-foreground">Datum začetka pogodbe</p>
              <AppRangeDatePicker
                v-model="startDateRange"
                placeholder="Izberi obdobje"
                button-class="w-full"
                :number-of-months="1"
              />
            </div>
            <div class="space-y-3">
              <p class="text-sm text-muted-foreground">Datum obljube plačila</p>
              <AppRangeDatePicker
                v-model="promiseDateRange"
                placeholder="Izberi obdobje"
                button-class="w-full"
                :number-of-months="1"
              />
            </div>
          </div>
        </div>

        <Separator />

        <!-- Email filters -->
        <div>
          <h4 class="text-sm font-semibold mb-3">E-mail filtri</h4>
          <div class="flex flex-wrap gap-4">
            <div class="flex items-center gap-2">
              <Checkbox
                :model-value="onlyWithEmail"
                @update:model-value="(val) => { onlyWithEmail = val; }"
                id="only-with-email"
              />
              <Label for="only-with-email" class="cursor-pointer text-sm">
                Samo pogodbe z e-mail naslovom
              </Label>
            </div>
            <div class="flex items-center gap-2">
              <Checkbox
                :model-value="onlyVerified"
                @update:model-value="(val) => { onlyVerified = val; }"
                id="only-verified"
              />
              <Label for="only-verified" class="cursor-pointer text-sm">
                Samo potrjeni e-mail naslovi
              </Label>
            </div>
          </div>
        </div>

        <!-- Action buttons -->
        <div class="flex items-center gap-2">
          <Button @click="loadContracts()">
            <SearchIcon class="h-4 w-4" />
            Išči pogodbe
          </Button>
          <Button @click="resetFilters" variant="outline">
            <XCircleIcon class="h-4 w-4" />
            Počisti filtre
          </Button>
        </div>
      </CardContent>
    </Card>

    <!-- Results -->
    <Card v-if="contracts.data.length > 0 || loadingContracts">
      <CardHeader>
        <div class="flex items-center justify-between">
          <div>
            <CardTitle>Rezultati iskanja (do 500 zapisov)</CardTitle>
            <CardDescription v-if="contracts.meta.total > 0">
              Najdeno {{ contracts.meta.total }}
              {{
                contracts.meta.total === 1
                  ? "pogodba"
                  : contracts.meta.total < 5
                  ? "pogodbe"
                  : "pogodb"
              }}
            </CardDescription>
          </div>

          <!-- Create Button -->
          <div class="flex justify-end gap-2" v-if="selectedContractIds.size > 0">
            <Badge variant="secondary" class="text-sm">
              <CheckCircle2Icon class="h-3 w-3" />
              Izbrano: {{ selectedContractIds.size }}
            </Badge>
            <Button @click="router.visit(route('packages.email.index'))" variant="outline">
              Prekliči
            </Button>
            <Button
              @click="submitCreateFromContracts"
              :disabled="selectedContractIds.size === 0 || creatingFromContracts"
            >
              <SaveIcon class="h-4 w-4" />
              Ustvari paket ({{ selectedContractIds.size }}
              {{
                selectedContractIds.size === 1
                  ? "pogodba"
                  : selectedContractIds.size < 5
                  ? "pogodbe"
                  : "pogodb"
              }})
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent class="p-0">
        <DataTableNew2
          v-if="!loadingContracts"
          :key="tableKey"
          :columns="contractColumns"
          :data="contracts.data"
          :enableRowSelection="true"
          :rowSelection="rowSelection"
          :showPagination="true"
          :page-size="50"
          :page-size-options="[10, 15, 25, 50, 100]"
          :showToolbar="false"
          @selection:change="onSelectionChange"
        >
          <template #cell-reference="{ row }">
            <div v-if="row.original" class="space-y-1">
              <p class="font-medium">{{ row.original.reference || "—" }}</p>
              <p class="text-xs text-muted-foreground font-mono">
                #{{ row.original.id }}
              </p>
            </div>
          </template>

          <template #cell-person="{ row }">
            <span v-if="row.original" class="text-xs">{{
              row.original.person?.full_name || "—"
            }}</span>
          </template>

          <template #cell-client="{ row }">
            <span v-if="row.original" class="text-xs">{{
              row.original.client?.name || "—"
            }}</span>
          </template>

          <template #cell-start_date="{ row }">
            {{ fmtDateDMY(row.start_date) || "—" }}
          </template>

          <template #cell-promise_date="{ row }">
            {{ fmtDateDMY(row.promise_date) || "—" }}
          </template>

          <template #cell-selected_email="{ row }">
            <div v-if="row.selected_email" class="space-y-1 flex flex-col gap-1">
              <div class="flex flex-row gap-1 items-center">
                <span class="text-xs">{{ row.selected_email.value }}</span>
                <BadgeCheckIcon
                  size="18"
                  color="green"
                  v-if="row.selected_email.verified"
                />
              </div>
              <div v-if="row.selected_email.label">
                <Badge variant="secondary" class="break-all text-xs">
                  {{ row.selected_email.label }}
                </Badge>
              </div>
            </div>
            <span v-else class="text-xs text-destructive">Ni e-mail naslova.</span>
          </template>

          <template #cell-no_email_reason="{ row }">
            <span v-if="row.original" class="text-xs text-muted-foreground">{{
              row.original.no_email_reason || "—"
            }}</span>
          </template>
        </DataTableNew2>

        <div v-else class="text-center text-muted-foreground py-24">Nalaganje...</div>
      </CardContent>
    </Card>
  </AppLayout>
</template>
