<script setup lang="ts">
import { computed, type Component } from "vue";
import { X } from "lucide-vue-next";
import ChartWidget from "./widgets/ChartWidget.vue";
import CounterWidget from "./widgets/CounterWidget.vue";
import StatsWidget from "./widgets/StatsWidget.vue";
import SystemInfoWidget from "./widgets/SystemInfoWidget.vue";
import TextWidget from "./widgets/TextWidget.vue";
import { registry } from "../registry";
import { useTranslations } from "../composables/useTranslations";

const { t } = useTranslations();

type WidgetDefinition = {
  key: string;
  label: string;
  component: string;
  width: "full" | "half" | "third";
  data: Record<string, unknown>;
  permission: string | null;
  hideable: boolean;
};

const props = defineProps<{
  widgets: WidgetDefinition[];
  hiddenWidgetKeys: string[];
}>();

const emit = defineEmits<{
  hide: [key: string];
}>();

const builtinWidgetMap: Record<string, Component> = {
  CounterWidget,
  TextWidget,
  ChartWidget,
  SystemInfoWidget,
  StatsWidget,
};

function resolveWidget(componentName: string): Component | null {
  const fromRegistry = registry.resolveComponent(componentName);
  if (fromRegistry) return fromRegistry;
  return builtinWidgetMap[componentName] ?? null;
}

const widthClass: Record<string, string> = {
  full: "col-span-12",
  half: "col-span-12 sm:col-span-6",
  third: "col-span-12 sm:col-span-6 lg:col-span-4",
};

function getWidthClass(width: string): string {
  return widthClass[width] ?? "col-span-12";
}

const visibleWidgets = computed(() =>
  props.widgets.filter((w) => !props.hiddenWidgetKeys.includes(w.key)),
);
</script>

<template>
  <!-- Empty state when all widgets are hidden -->
  <div
    v-if="visibleWidgets.length === 0"
    class="flex items-center justify-center rounded-xl border border-dashed bg-muted/30 p-12 text-sm text-muted-foreground"
  >
    {{ t("builder.dashboard.no_widgets_visible") }}
  </div>

  <!-- Widget grid -->
  <div v-else class="grid grid-cols-12 gap-4">
    <template v-for="widget in visibleWidgets" :key="widget.key">
      <div :class="getWidthClass(widget.width)" class="group relative">
        <component
          :is="resolveWidget(widget.component)"
          v-if="resolveWidget(widget.component)"
          :data="widget.data"
          :widget="widget"
        />
        <!-- Unknown component fallback -->
        <div
          v-else
          class="flex items-center justify-center rounded-xl border border-dashed bg-muted/30 p-8 text-sm text-muted-foreground"
        >
          {{
            t("builder.dashboard.unknown_widget", {
              component: widget.component,
            })
          }}
        </div>
        <!-- Hide button (×) shown on hover -->
        <button
          v-if="widget.hideable"
          class="absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-muted text-muted-foreground opacity-0 transition-opacity hover:bg-destructive hover:text-destructive-foreground group-hover:opacity-100"
          title="Hide widget"
          @click="emit('hide', widget.key)"
        >
          <X class="h-3 w-3" />
        </button>
      </div>
    </template>
  </div>
</template>
