<script setup lang="ts">
import { useForm } from "@inertiajs/vue3";
import { useBuilderPrefix } from "@/composables/useBuilderPrefix";
import { useTranslations } from "@/composables/useTranslations";
import PageHeader from "@/components/PageHeader.vue";
import Button from "@/components/ui/Button.vue";
import Select from "@/components/ui/Select.vue";
import SelectContent from "@/components/ui/SelectContent.vue";
import SelectItem from "@/components/ui/SelectItem.vue";
import SelectTrigger from "@/components/ui/SelectTrigger.vue";
import SelectValue from "@/components/ui/SelectValue.vue";

interface Menu {
  id: number;
  name: string;
}

const props = defineProps<{
  locations: Record<string, string>;
  assignments: Record<string, number | null>;
  menus: Menu[];
}>();

const { t } = useTranslations();
const prefix = useBuilderPrefix();

const NONE = "_none";

const initialLocations: Record<string, string> = {};
for (const slug of Object.keys(props.locations)) {
  const id = props.assignments[slug];
  initialLocations[slug] = id != null ? String(id) : NONE;
}

const form = useForm({ locations: initialLocations });

function submit(): void {
  const payload: Record<string, string | number> = {};
  for (const [slug, value] of Object.entries(form.locations)) {
    payload[slug] = value === NONE ? "" : value;
  }
  form
    .transform(() => ({ locations: payload }))
    .post(`/${prefix}/menus/locations`);
}
</script>

<template>
  <div>
    <PageHeader :title="t('menu.locations.title')" />

    <!-- Action bar -->
    <div
      class="sticky top-0 z-10 -mx-6 flex items-center justify-between border-y bg-background px-6 py-3"
    >
      <p class="text-sm text-muted-foreground">
        {{ t("menu.locations.description") }}
      </p>
      <Button type="button" :disabled="form.processing" @click="submit">
        {{ t("menu.locations.save") }}
      </Button>
    </div>

    <!-- Content -->
    <div class="py-6">
      <p
        v-if="Object.keys(locations).length === 0"
        class="rounded-md border border-dashed py-8 text-center text-sm text-muted-foreground"
      >
        {{ t("menu.locations.no_locations") }}
      </p>

      <div v-else class="rounded-lg border">
        <table class="w-full text-sm">
          <thead>
            <tr class="border-b bg-muted/40">
              <th
                class="px-4 py-2.5 text-left font-medium text-muted-foreground"
              >
                {{ t("menu.locations.column_location") }}
              </th>
              <th
                class="px-4 py-2.5 text-left font-medium text-muted-foreground"
              >
                {{ t("menu.locations.column_menu") }}
              </th>
            </tr>
          </thead>
          <tbody class="divide-y">
            <tr v-for="(label, slug) in locations" :key="slug" class="bg-card">
              <td class="px-4 py-3">
                <p class="font-medium">{{ label }}</p>
                <p class="font-mono text-xs text-muted-foreground">
                  {{ slug }}
                </p>
              </td>
              <td class="w-64 px-4 py-3">
                <Select v-model="form.locations[slug]">
                  <SelectTrigger>
                    <SelectValue :placeholder="t('menu.locations.none')" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem :value="NONE">
                      {{ t("menu.locations.none") }}
                    </SelectItem>
                    <SelectItem
                      v-for="menu in menus"
                      :key="menu.id"
                      :value="String(menu.id)"
                    >
                      {{ menu.name }}
                    </SelectItem>
                  </SelectContent>
                </Select>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
