<script setup lang="ts">
import { Link, router, usePage, WhenVisible } from "@inertiajs/vue3";
import Button from "./ui/Button.vue";
import DropdownMenu from "./ui/DropdownMenu.vue";
import DropdownMenuContent from "./ui/DropdownMenuContent.vue";
import DropdownMenuItem from "./ui/DropdownMenuItem.vue";
import DropdownMenuSeparator from "./ui/DropdownMenuSeparator.vue";
import DropdownMenuTrigger from "./ui/DropdownMenuTrigger.vue";
import { useTranslations } from "../composables/useTranslations";

const { t } = useTranslations();
const page = usePage();

export interface RecordActionDef {
  key: string;
  label: string;
  confirm: boolean;
  url: string;
}

const props = defineProps<{
  isEditing: boolean;
  record: Record<string, unknown> | null;
  processing: boolean;
  showTimestamps: boolean;
  canDelete: boolean;
  recordActions?: RecordActionDef[];
  duplicateUrl?: string | null;
  isRevisable?: boolean;
  revisionsUrl?: string | null;
}>();

defineEmits<{
  delete: [];
}>();

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString(undefined, {
    day: "numeric",
    month: "short",
    year: "numeric",
  });
}

function handleRecordAction(action: RecordActionDef): void {
  if (
    action.confirm &&
    !confirm(t("builder.resources.delete_confirm_message"))
  ) {
    return;
  }
  router.post(action.url);
}

const hasDropdown =
  props.canDelete ||
  (props.recordActions?.length ?? 0) > 0 ||
  !!props.duplicateUrl;
</script>

<template>
  <div
    class="sticky top-0 z-10 flex items-center justify-between border-y py-3 -mx-6 px-6 bg-background"
  >
    <div class="flex items-center gap-8 text-sm text-muted-foreground">
      <span v-if="showTimestamps && isEditing && record?.updated_at">
        {{ t("builder.resources.modified") }}
        {{ formatDate(record.updated_at as string) }}
      </span>
      <span v-if="showTimestamps && isEditing && record?.created_at">
        {{ t("builder.resources.created_label") }}
        {{ formatDate(record.created_at as string) }}
      </span>
      <WhenVisible
        v-if="isEditing && isRevisable && revisionsUrl"
        data="revision_count"
      >
        <template #default>
          <Link
            v-if="(page.props.revision_count as number) > 0"
            :href="revisionsUrl"
            class="inline-flex items-center gap-1.5 hover:text-foreground transition-colors"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
              <path d="M3 3v5h5" />
              <path d="M12 7v5l4 2" />
            </svg>
            {{
              t("builder.revisions.count", { count: page.props.revision_count })
            }}
          </Link>
        </template>
        <template #fallback>
          <div class="h-3.5 w-20 animate-pulse rounded bg-muted" />
        </template>
      </WhenVisible>
      <span v-if="!isEditing" class="italic text-muted-foreground/70">
        {{ t("builder.resources.draft") }}
      </span>
    </div>

    <div class="flex items-center gap-2">
      <Button type="submit" :disabled="processing">
        {{ t("builder.resources.save") }}
      </Button>

      <DropdownMenu v-if="hasDropdown">
        <DropdownMenuTrigger as-child>
          <Button
            type="button"
            variant="outline"
            size="icon"
            aria-label="More options"
          >
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
              <path
                d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"
              />
            </svg>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem
            v-if="duplicateUrl"
            @click="router.post(duplicateUrl)"
          >
            {{ t("builder.resources.duplicate") }}
          </DropdownMenuItem>
          <DropdownMenuItem
            v-for="action in recordActions"
            :key="action.key"
            @click="handleRecordAction(action)"
          >
            {{ action.label }}
          </DropdownMenuItem>
          <DropdownMenuSeparator
            v-if="
              canDelete && (duplicateUrl || (recordActions?.length ?? 0) > 0)
            "
          />
          <DropdownMenuItem
            v-if="canDelete"
            class="text-destructive focus:text-destructive"
            @click="$emit('delete')"
          >
            {{ t("builder.resources.delete") }}
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  </div>
</template>
