radionica3d/src/pages/Orders.vue

<template>
  <div class="min-h-screen bg-background flex flex-col">
    <Header />
    <main class="flex-grow pt-24 pb-20">
      <div class="container mx-auto px-4 max-w-5xl">
        <div class="mb-10">
          <RouterLink to="/" class="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors mb-6 group">
            <ArrowLeft class="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />{{ t("auth.back") }}
          </RouterLink>
          <h1 class="font-display text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/60">
            {{ t("nav.myOrders") }}
          </h1>
          <p class="text-muted-foreground mt-2">{{ t("orders.titleSubtitle") }}</p>
        </div>

        <div v-if="isLoading" class="flex flex-col items-center justify-center py-20 gap-4">
          <Loader2 class="w-10 h-10 animate-spin text-primary" />
          <p class="text-muted-foreground animate-pulse">{{ t("orders.loading") }}</p>
        </div>

        <div v-else-if="orders.length === 0"
          v-motion :initial="{ opacity: 0, y: 20 }" :enter="{ opacity: 1, y: 0 }"
          class="bg-card/40 backdrop-blur-xl border border-border/50 rounded-3xl p-20 text-center">
          <div class="w-20 h-20 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-6">
            <Package class="w-10 h-10 text-primary opacity-60" />
          </div>
          <h2 class="text-2xl font-bold mb-2">{{ t("orders.noOrders") }}</h2>
          <p class="text-muted-foreground mb-8 max-w-sm mx-auto">{{ t("orders.startProjectDesc") }}</p>
          <button @click="router.push('/#upload')" class="bg-primary hover:bg-primary/90 text-primary-foreground px-8 py-3 rounded-xl font-bold transition-all transform hover:scale-105">
            {{ t("orders.startProject") }}
          </button>
        </div>

        <div v-else class="space-y-4">
          <div
            v-for="(order, idx) in orders"
            :key="order.id"
            v-motion
            :initial="{ opacity: 0, x: -20 }"
            :enter="{ opacity: 1, x: 0, transition: { delay: idx * 50 } }"
            class="bg-card/40 backdrop-blur-xl border border-border/50 rounded-2xl p-6 hover:border-primary/30 transition-all group overflow-hidden relative"
          >
            <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl -mr-16 -mt-16 group-hover:bg-primary/10 transition-colors" />

            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 relative z-10">
              <div class="flex items-center gap-5">
                <div class="w-12 h-12 bg-background/80 rounded-xl flex items-center justify-center border border-border/50">
                  <Package class="w-6 h-6 text-primary" />
                </div>
                <div>
                  <h3 class="font-bold text-lg leading-none mb-1">{{ t("common.orderId", { id: order.id }) }}</h3>
                  <p class="text-xs text-muted-foreground">{{ formatDate(order.created_at) }}</p>
                </div>
              </div>

              <div class="flex flex-wrap items-center gap-4 md:gap-8">
                <div class="flex flex-col">
                  <span class="text-[10px] uppercase tracking-wider text-muted-foreground font-bold mb-1">{{ t("orders.labels.quantity") }}</span>
                  <div class="flex items-center gap-1.5 px-2.5 py-1 bg-primary/10 rounded-lg text-primary font-bold">
                    <Hash class="w-3 h-3" /><span class="text-sm">{{ order.quantity || 1 }}</span>
                  </div>
                </div>
                <div class="flex flex-col">
                  <span class="text-[10px] uppercase tracking-wider text-muted-foreground font-bold mb-1">{{ t("orders.labels.status") }}</span>
                  <StatusBadge :status="order.status" />
                </div>
                <div class="flex flex-col">
                  <span class="text-[10px] uppercase tracking-wider text-muted-foreground font-bold mb-1">{{ t("orders.labels.estimate") }}</span>
                  <span class="font-display font-bold text-lg">{{ order.total_price ? `${order.total_price} €` : t("common.pending") }}</span>
                </div>
                <div class="flex flex-col border-l border-border/50 pl-4">
                  <span class="text-[10px] uppercase tracking-wider text-muted-foreground font-bold mb-1">{{ t("orders.labels.materialColor") }}</span>
                  <div class="flex flex-col">
                    <span class="text-xs font-bold uppercase text-primary">{{ order.material_name || "PLA" }}</span>
                    <div class="flex items-center gap-1.5 mt-0.5">
                      <div class="w-2.5 h-2.5 rounded-full border border-border/50" :style="order.color_name ? { backgroundColor: order.color_name.toLowerCase() } : { backgroundColor: '#ccc' }"></div>
                      <span class="text-[9px] text-muted-foreground font-medium">{{ order.color_name || t("common.default") }}</span>
                    </div>
                  </div>
                </div>
                <div class="flex items-center gap-2">
                  <a v-if="order.model_link && !order.model_link.startsWith('javascript:')"
                    :href="order.model_link" target="_blank" rel="noopener noreferrer"
                    class="p-2 hover:bg-secondary rounded-lg transition-colors">
                    <ExternalLink class="w-4 h-4" />
                  </a>
                  <!-- Removed obsolete routing link -->
                  <Button variant="ghost" size="sm" @click="toggleChat(order.id)" class="relative">
                    <span v-if="order.unread_count > 0" class="absolute -top-2 -right-2 bg-red-500 text-white text-[10px] w-5 h-5 flex items-center justify-center rounded-full shadow-sm animate-pulse z-10">{{ order.unread_count }}</span>
                    <MessageCircle class="w-4 h-4" :class="openChatId === order.id ? 'text-primary' : ''" />
                    <span class="ml-1 text-xs">{{ t("chat.open") }}</span>
                  </Button>
                </div>
              </div>
            </div>

            <div v-if="order.notes" class="mt-8 p-4 bg-primary/5 border border-primary/10 rounded-2xl relative z-10">
              <div class="flex items-center gap-2 mb-2">
                <FileText class="w-3.5 h-3.5 text-primary" />
                <span class="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">{{ t("orders.labels.myNotes") }}</span>
              </div>
              <p class="text-xs text-muted-foreground italic leading-relaxed">"{{ order.notes }}"</p>
            </div>

            <!-- Items Specification -->
            <div v-if="order.items && order.items.length > 0" class="mt-8 p-4 bg-secondary/20 border border-border/50 rounded-2xl relative z-10">
              <div class="flex items-center gap-2 mb-4">
                <Hash class="w-3.5 h-3.5 text-primary" />
                <span class="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">{{ t("orders.labels.specification") }}</span>
              </div>
              <div class="space-y-2">
                <div v-for="item in order.items" :key="item.id" class="flex justify-between items-center text-xs">
                  <span class="text-muted-foreground">{{ item.description }} <span v-if="item.quantity > 1" class="text-primary font-bold">x{{ item.quantity }}</span></span>
                  <span class="font-bold">{{ item.total_price }} €</span>
                </div>
                <div class="pt-2 mt-2 border-t border-border/50 flex justify-between items-center font-bold">
                  <span class="text-[10px] uppercase tracking-wider">{{ t("orders.labels.total") }}</span>
                  <span class="text-lg text-primary">{{ order.total_price }} €</span>
                </div>
              </div>
            </div>

            <!-- Pizza Tracker -->
            <div class="mt-8 pt-6 border-t border-border/50 relative z-10 px-2 sm:px-8">
              <OrderTracker :status="order.status" />
            </div>

            <!-- Files -->
            <div v-if="order.files && order.files.length > 0" class="mt-8 pt-6 border-t border-border/50 relative z-10">
              <div class="flex items-center gap-2 mb-4">
                <FileBox class="w-3.5 h-3.5 text-primary" />
                <span class="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">{{ t("orders.labels.projectFiles") }}</span>
              </div>
              <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                <template v-for="file in order.files" :key="file.id">
                  <div v-if="file.id" 
                    class="bg-background/40 border border-border/50 rounded-2xl overflow-hidden group/file hover:border-primary/30 transition-all flex flex-col h-full">
                    <div class="aspect-square bg-muted/20 flex items-center justify-center p-2 relative overflow-hidden">
                      <img v-if="file.preview_path" :src="`${RESOURCES_BASE_URL}/${file.preview_path}`" class="w-full h-full object-contain" />
                      <FileBox v-else class="w-8 h-8 text-muted-foreground/20" />
                      <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover/file:opacity-100 transition-opacity flex items-center justify-center">
                         <a :href="`${RESOURCES_BASE_URL}/${file.file_path}`" target="_blank" class="bg-card w-8 h-8 rounded-full flex items-center justify-center shadow-lg"><Download class="w-4 h-4 text-primary" /></a>
                      </div>
                    </div>
                    <div class="p-3">
                      <p class="text-[10px] font-bold truncate">{{ file.filename }}</p>
                      <div class="flex items-center gap-2 mt-1">
                        <span v-if="file.quantity > 1" class="text-[8px] font-bold text-primary">x{{ file.quantity }}</span>
                      </div>
                      <div v-if="file.print_time || file.filament_g" class="flex flex-col gap-0.5 mt-2 pt-2 border-t border-border/10">
                        <span v-if="file.print_time" class="text-[8px] text-primary/80">⏱️ {{ file.print_time }}</span>
                        <span v-if="file.filament_g" class="text-[8px] text-primary/80">⚖️ {{ file.filament_g.toFixed(1) }}g</span>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>

            <div v-if="order.photos && order.photos.length > 0" class="mt-8 pt-6 border-t border-border/50 relative z-10">
              <div class="flex items-center gap-2 mb-4">
                <ImageIcon class="w-3.5 h-3.5 text-primary" />
                <span class="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">{{ t("orders.labels.progressReport") }}</span>
              </div>
              <div class="flex flex-wrap gap-3">
                <div v-for="photo in order.photos" :key="photo.id"
                  class="group/photo relative w-20 h-20 rounded-xl overflow-hidden border border-border/50 bg-background/50">
                  <img :src="`${RESOURCES_BASE_URL}/${photo.file_path}`" class="w-full h-full object-cover" alt="Print Progress" />
                  <a :href="`${RESOURCES_BASE_URL}/${photo.file_path}`" target="_blank"
                    class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover/photo:opacity-100 transition-opacity">
                    <ExternalLink class="w-4 h-4 text-white" />
                  </a>
                </div>
              </div>
            </div>

            <div v-if="openChatId === order.id" :id="`chat-${order.id}`" class="mt-6 pt-4 border-t border-border/50 relative z-10">
              <OrderChat :orderId="order.id" compact closable @close="openChatId = null" />
            </div>
          </div>
        </div>

        <!-- Pagination -->
        <div v-if="totalOrders > pageSize" class="flex flex-wrap items-center justify-center gap-2 mt-12 mb-8">
          <button v-for="p in Math.ceil(totalOrders / pageSize)" :key="p"
            @click="currentPage = p"
            v-motion :initial="{ opacity: 0, scale: 0.9 }" :enter="{ opacity: 1, scale: 1, transition: { delay: p * 50 } }"
            :class="['w-10 h-10 rounded-xl font-bold transition-all border', 
              currentPage === p ? 'bg-primary text-primary-foreground border-primary shadow-glow' : 'bg-card/40 border-border/50 text-muted-foreground hover:border-primary/30']">
            {{ p }}
          </button>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineComponent, h, watch, nextTick } from "vue";
import { RouterLink, useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { Package, Clock, ShieldCheck, Truck, XCircle, ArrowLeft, Loader2, ExternalLink, Hash, FileText, Image as ImageIcon, MessageCircle, FileBox, Download } from "lucide-vue-next";
import Button from "@/components/ui/button.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import OrderChat from "@/components/OrderChat.vue";
import OrderTracker from "@/components/OrderTracker.vue";
import { getMyOrders, API_BASE_URL, RESOURCES_BASE_URL } from "@/lib/api";
import { useAuthStore } from "@/stores/auth";
import { toast } from "vue-sonner";

const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const authStore = useAuthStore();
const orders = ref<any[]>([]);
const totalOrders = ref(0);
const currentPage = ref(1);
const pageSize = 10;
const isLoading = ref(true);
const openChatId = ref<number | null>(route.query.chat ? parseInt(route.query.chat.toString()) : null);

async function toggleChat(orderId: number) {
  const isOpening = openChatId.value !== orderId;
  openChatId.value = isOpening ? orderId : null;
  
  if (isOpening) {
    // Clear unread count locally for instant UI feedback
    const order = orders.value.find(o => o.id === orderId);
    if (order) order.unread_count = 0;
    authStore.refreshUnreadCount();

    await nextTick();
    const el = document.getElementById(`chat-${orderId}`);
    if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }
}

watch(openChatId, (newId) => {
  if (route.query.chat?.toString() !== newId?.toString()) {
    router.replace({ query: { ...route.query, chat: newId || undefined } });
  }
});

// StatusBadge component defined inline
const StatusBadge = defineComponent({
  props: { status: String },
  setup(props) {
    const styles: Record<string, string> = {
      pending: "bg-amber-500/10 text-amber-500 border-amber-500/20",
      processing: "bg-blue-500/10 text-blue-500 border-blue-500/20",
      shipped: "bg-indigo-500/10 text-indigo-500 border-indigo-500/20",
      completed: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
      cancelled: "bg-destructive/10 text-destructive border-destructive/20",
    };
    const icons: Record<string, any> = { pending: Clock, processing: ShieldCheck, shipped: Truck, completed: Package, cancelled: XCircle };
    return () => {
      const s = props.status ?? "pending";
      const Icon = icons[s] || Clock;
      return h("span", { class: `inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold border ${styles[s] ?? styles.pending}` }, [
        h(Icon, { class: "w-3.5 h-3.5" }),
        h("span", null, t("statuses." + s)),
      ]);
    };
  },
});

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

async function fetchOrders() {
  isLoading.value = true;
  try { 
    const res = await getMyOrders(currentPage.value, pageSize); 
    orders.value = res.orders;
    totalOrders.value = res.total;
  }
  catch (e) { console.error("Failed to fetch orders:", e); }
  finally { isLoading.value = false; }
}

onMounted(async () => {
  if (!localStorage.getItem("token")) { router.push("/auth"); return; }
  await fetchOrders();
  
  window.addEventListener("radionica:order_updated", handleRemoteUpdate);
});

import { onUnmounted } from "vue";
onUnmounted(() => {
  window.removeEventListener("radionica:order_updated", handleRemoteUpdate);
});

async function handleRemoteUpdate(e: any) {
  const orderId = e.detail?.order_id;
  await fetchOrders();
  toast.success(t("chat.new_status", { id: orderId || "" }), {
    description: "Order data has been updated by administrator.",
    icon: h(Package, { class: "w-4 h-4 text-emerald-500" })
  });
}

watch(currentPage, () => {
  fetchOrders();
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

watch(() => authStore.unreadMessagesCount, async (newVal, oldVal) => {
  if (newVal !== oldVal) {
    try {
      await fetchOrders();
    } catch (e) {
      console.error("Failed to auto-refresh orders:", e);
    }
  }
});
</script>