<script setup lang="ts">
import { onMounted, computed } from 'vue';
import { Head } from '@inertiajs/vue3';
import { Printer } from 'lucide-vue-next';

interface Modifier {
    name: string;
}

interface Item {
    id: number;
    qty: number;
    variant: 'hot' | 'ice' | null;
    product?: { id: number; name: string } | null;
    modifiers: Modifier[];
}

interface Transaction {
    id: number;
    transaction_number: string;
    order_type: 'dine_in' | 'take_away' | 'delivery';
    queue_number: string | null;
    table?: { id: number; number: string } | null;
    created_at: string;
    outlet?: { id: number; name: string } | null;
    items: Item[];
}

const props = defineProps<{
    transaction: Transaction;
    appName: string;
}>();

// Check if raw query param is present
const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
const isRaw = computed(() => urlParams.get('raw') === 'true');

onMounted(() => {
    // Automatically trigger browser print window on mount ONLY if not in raw mode
    if (!isRaw.value) {
        window.print();
    }
});

const handlePrint = () => {
    window.print();
};
</script>

<template>
    <Head title="Cetak Tiket Dapur" />

    <!-- Raw content version for QZ Tray silent print -->
    <div v-if="isRaw" class="w-[58mm] text-black font-mono leading-tight p-0 m-0 bg-white" style="zoom: 0.8; transform-origin: top left; max-width: 58mm;">
        <!-- Slip Header -->
        <div class="text-center space-y-1 pb-2.5 border-b border-dashed border-black text-black">
            <h1 class="text-[13px] font-black uppercase tracking-wider">TIKET DAPUR</h1>
            <div class="text-[10.5px] font-black">
                Outlet: <span>{{ transaction.outlet?.name }}</span>
            </div>
            <div class="text-[10.5px] font-black">
                Waktu: {{ transaction.created_at }}
            </div>
        </div>

        <!-- Dining Details Header -->
        <div class="py-2.5 border-b border-dashed border-black text-center text-black">
            <div class="text-[11px] font-black uppercase tracking-wide">
                {{ transaction.order_type === 'dine_in' ? '*** DINE IN ***' : (transaction.order_type === 'delivery' ? '*** DELIVERY ***' : '*** TAKE AWAY ***') }}
            </div>
            
            <div v-if="transaction.order_type === 'dine_in' && transaction.table" class="mt-1.5 text-[16px] font-black tracking-wider">
                MEJA: {{ transaction.table.number }}
            </div>
            
            <div v-if="transaction.queue_number" class="mt-1 text-[16px] font-black tracking-wider">
                ANTREAN: #{{ transaction.queue_number }}
            </div>
            
            <div class="text-[9px] font-black pt-1.5 truncate">
                ID: {{ transaction.transaction_number }}
            </div>
        </div>

        <!-- Items List -->
        <div class="py-2 divide-y divide-dotted divide-black text-black">
            <div v-for="item in transaction.items" :key="item.id" class="py-2">
                <div class="flex items-start gap-2.5">
                    <!-- Qty Box -->
                    <span class="text-[13px] font-black px-1.5 py-0.5 border-2 border-black rounded min-w-[28px] text-center text-black bg-transparent">
                        {{ item.qty }}
                    </span>
                    
                    <div class="flex-1">
                        <span class="text-[11px] font-black uppercase tracking-wide">{{ item.product?.name || 'Unknown Item' }}</span>
                        <span v-if="item.variant" class="block text-[9px] font-extrabold uppercase mt-0.5">
                            [ VARIAN: {{ item.variant }} ]
                        </span>
                        
                        <!-- Selected Modifiers add-ons -->
                        <div v-if="item.modifiers.length > 0" class="mt-1 pl-1.5 border-l border-black space-y-0.5">
                            <div v-for="m in item.modifiers" :key="m.name" class="text-[9px] font-black uppercase flex items-center gap-1">
                                <span>*</span>
                                <span>{{ m.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slip Footer -->
        <div class="pt-2.5 border-t border-dashed border-black text-center text-black">
            <p class="text-[9px] font-black uppercase tracking-wider">*** DAPUR CAFE POS ***</p>
            <p class="text-[8.5px] mt-0.5 font-bold">Harap segera diproses & disajikan.</p>
        </div>
    </div>

    <!-- Normal version with wrappers & print controls for browser print -->
    <div v-else class="min-h-screen bg-slate-100 dark:bg-slate-900 py-8 px-4 flex flex-col items-center print:items-start print:p-0 print:bg-white">
        <!-- Floating print controls for manual trigger if window dialog is closed -->
        <div class="no-print mb-6 w-full max-w-[58mm] flex items-center justify-between gap-4 bg-white dark:bg-slate-950 p-3.5 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm">
            <span class="text-xs font-bold text-slate-500">Tiket Dapur</span>
            <button
                @click="handlePrint"
                class="flex items-center justify-center gap-1.5 px-3 py-1.5 bg-[#8c5a3c] hover:bg-[#734a31] text-white text-xs font-bold rounded-lg cursor-pointer"
            >
                <Printer class="h-3.5 w-3.5" />
                Cetak Ulang
            </button>
        </div>

        <!-- 58mm Kitchen Slip Container -->
        <div class="print-container bg-white text-black p-4 w-[58mm] border border-slate-250 shadow-md font-mono leading-tight print:p-0 print:m-0">
            <!-- Slip Header -->
            <div class="text-center space-y-1 pb-2.5 border-b border-dashed border-black text-black">
                <h1 class="text-[13px] font-black uppercase tracking-wider">TIKET DAPUR</h1>
                <div class="text-[10.5px] font-black">
                    Outlet: <span>{{ transaction.outlet?.name }}</span>
                </div>
                <div class="text-[10.5px] font-black">
                    Waktu: {{ transaction.created_at }}
                </div>
            </div>

            <!-- Dining Details Header -->
            <div class="py-2.5 border-b border-dashed border-black text-center text-black">
                <div class="text-[11px] font-black uppercase tracking-wide">
                    {{ transaction.order_type === 'dine_in' ? '*** DINE IN ***' : (transaction.order_type === 'delivery' ? '*** DELIVERY ***' : '*** TAKE AWAY ***') }}
                </div>
                
                <div v-if="transaction.order_type === 'dine_in' && transaction.table" class="mt-1.5 text-[16px] font-black tracking-wider">
                    MEJA: {{ transaction.table.number }}
                </div>
                
                <div v-if="transaction.queue_number" class="mt-1 text-[16px] font-black tracking-wider">
                    ANTREAN: #{{ transaction.queue_number }}
                </div>
                
                <div class="text-[9px] font-black pt-1.5 truncate">
                    ID: {{ transaction.transaction_number }}
                </div>
            </div>

            <!-- Items List -->
            <div class="py-2 divide-y divide-dotted divide-black text-black">
                <div v-for="item in transaction.items" :key="item.id" class="py-2">
                    <div class="flex items-start gap-2.5">
                        <!-- Qty Box -->
                        <span class="text-[13px] font-black px-1.5 py-0.5 border-2 border-black rounded min-w-[28px] text-center text-black bg-transparent">
                            {{ item.qty }}
                        </span>
                        
                        <div class="flex-1">
                            <span class="text-[11px] font-black uppercase tracking-wide">{{ item.product?.name || 'Unknown Item' }}</span>
                            <span v-if="item.variant" class="block text-[9px] font-extrabold uppercase mt-0.5">
                                [ VARIAN: {{ item.variant }} ]
                            </span>
                            
                            <!-- Selected Modifiers add-ons -->
                            <div v-if="item.modifiers.length > 0" class="mt-1 pl-1.5 border-l border-black space-y-0.5">
                                <div v-for="m in item.modifiers" :key="m.name" class="text-[9px] font-black uppercase flex items-center gap-1">
                                    <span>*</span>
                                    <span>{{ m.name }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slip Footer -->
            <div class="pt-2.5 border-t border-dashed border-black text-center text-black">
                <p class="text-[9px] font-black uppercase tracking-wider">*** DAPUR CAFE POS ***</p>
                <p class="text-[8.5px] mt-0.5 font-bold">Harap segera diproses & disajikan.</p>
            </div>
        </div>
    </div>
</template>

<style>
/* print CSS configurations */
@media print {
    @page {
        size: auto;
        margin: 0;
    }

    body {
        background: white !important;
        color: #000000 !important;
        font-family: 'Courier New', Courier, monospace !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    * {
        color: #000000 !important;
        border-color: #000000 !important;
        fill: #000000 !important;
        stroke: #000000 !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }

    /* Force kitchen ticket text to be extremely bold for visibility under heat printing */
    span, p, div, h1, h2, h3, h4, th, td, td *, span * {
        font-weight: 900 !important;
    }
    
    .no-print {
        display: none !important;
    }
    
    .print-container {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 58mm !important;
    }
}
</style>
