<script setup lang="ts">
import { toast } from "vue-sonner";
import { useTranslations } from "../../composables/useTranslations";
import Card from "../ui/Card.vue";
import CardContent from "../ui/CardContent.vue";
import CardHeader from "../ui/CardHeader.vue";
import CardTitle from "../ui/CardTitle.vue";

defineProps<{
  data: {
    builder_version?: string;
    php_version?: string;
    laravel_version?: string;
    modules?: {
      key: string;
      label: string;
      version?: string | null;
      author?: string | null;
      author_url?: string | null;
    }[];
  };
  widget: {
    key: string;
    label: string;
    width: string;
    hideable: boolean;
  };
}>();

const { t } = useTranslations();
</script>

<template>
  <Card class="h-full">
    <CardHeader>
      <CardTitle>{{ widget.label }}</CardTitle>
    </CardHeader>
    <CardContent class="space-y-3">
      <dl class="space-y-2 text-sm">
        <div class="flex items-center justify-between gap-4">
          <dt class="text-muted-foreground">Builder</dt>
          <dd class="font-mono text-xs font-medium">
            {{ data.builder_version ?? "—" }}
          </dd>
        </div>
        <div class="flex items-center justify-between gap-4">
          <dt class="text-muted-foreground">PHP</dt>
          <dd class="font-mono text-xs font-medium">
            {{ data.php_version ?? "—" }}
          </dd>
        </div>
        <div class="flex items-center justify-between gap-4">
          <dt class="text-muted-foreground">Laravel</dt>
          <dd class="font-mono text-xs font-medium">
            {{ data.laravel_version ?? "—" }}
          </dd>
        </div>
      </dl>

      <div v-if="data.modules && data.modules.length > 0" class="pt-2">
        <p class="mb-1.5 text-xs font-medium text-muted-foreground">
          {{ t("builder.dashboard.active_modules") }}
        </p>
        <ul class="space-y-1">
          <li
            v-for="mod in data.modules"
            :key="mod.key"
            class="flex items-start gap-2 text-sm"
          >
            <span
              class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-primary"
            />
            <div class="min-w-0 flex-1">
              <span>{{ mod.label }}</span>
              <span
                v-if="mod.version || mod.author"
                class="mt-0.5 flex flex-wrap gap-x-2 text-xs text-muted-foreground"
              >
                <span v-if="mod.version" class="font-mono">{{
                  mod.version
                }}</span>
                <a
                  v-if="mod.author && mod.author_url"
                  :href="mod.author_url"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="hover:underline"
                  >{{ mod.author }}</a
                >
                <span v-else-if="mod.author">{{ mod.author }}</span>
              </span>
            </div>
          </li>
        </ul>
      </div>
      <p v-else class="text-sm text-muted-foreground">
        {{ t("builder.dashboard.no_modules") }}
      </p>

      <div class="border-t pt-3">
        <p class="mb-2 text-xs font-medium text-muted-foreground">
          {{ t("builder.dashboard.test_toasts") }}
        </p>
        <div class="flex flex-wrap gap-1.5">
          <button
            class="rounded-md bg-green-100 px-2.5 py-1 text-xs font-medium text-green-700 hover:bg-green-200"
            @click="toast.success('This is a success toast')"
          >
            {{ t("builder.dashboard.toast_success") }}
          </button>
          <button
            class="rounded-md bg-red-100 px-2.5 py-1 text-xs font-medium text-red-700 hover:bg-red-200"
            @click="toast.error('This is an error toast')"
          >
            {{ t("builder.dashboard.toast_error") }}
          </button>
          <button
            class="rounded-md bg-yellow-100 px-2.5 py-1 text-xs font-medium text-yellow-700 hover:bg-yellow-200"
            @click="toast.warning('This is a warning toast')"
          >
            {{ t("builder.dashboard.toast_warning") }}
          </button>
          <button
            class="rounded-md bg-blue-100 px-2.5 py-1 text-xs font-medium text-blue-700 hover:bg-blue-200"
            @click="toast.info('This is an info toast')"
          >
            {{ t("builder.dashboard.toast_info") }}
          </button>
        </div>
      </div>
    </CardContent>
  </Card>
</template>
