<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { 
    Key, 
    ShieldCheck, 
    Zap, 
    Cpu, 
    Database, 
    Globe, 
    AlertCircle, 
    Loader2
} from 'lucide-vue-next';

defineProps<{
    domain: string;
    status?: string;
    error?: string;
}>();

const form = useForm({
    license_code: '',
});

const formatLicenseKey = (e: Event) => {
    const input = e.target as HTMLInputElement;
    let value = input.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase();
    
    // Support either CP or RL prefix
    let prefix = 'CP';
    if (value.startsWith('RL')) {
        prefix = 'RL';
        value = value.substring(2);
    } else if (value.startsWith('CP')) {
        prefix = 'CP';
        value = value.substring(2);
    }
    
    // Limit remaining characters to 16 (4 blocks of 4)
    value = value.substring(0, 16);
    
    const parts = [prefix];
    for (let i = 0; i < 4; i++) {
        const start = i * 4;
        if (value.length > start) {
            parts.push(value.substring(start, start + 4));
        }
    }
    
    form.license_code = parts.join('-');
};

const submit = () => {
    form.post(route('license.activate.post'));
};
</script>

<template>
    <div class="min-h-screen w-full flex bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 font-sans antialiased overflow-hidden">
        <Head :title="`Activate License - ${$page.props.settings.site_name || 'CafePOS'}`" />

        <!-- Split Left: Branding & Features (hidden on mobile) -->
        <div class="hidden lg:flex lg:w-1/2 relative flex-col justify-between p-12 bg-white dark:bg-slate-950 border-r border-slate-200/50 dark:border-slate-800/30 overflow-hidden">
            
            <!-- Grid Background Pattern -->
            <div class="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-70"></div>

            <!-- Bottom Header: Logo -->
            <div class="relative z-10 flex items-center gap-3">
                <img 
                    v-if="$page.props.settings.site_logo" 
                    :src="$page.props.settings.site_logo" 
                    alt="Logo" 
                    class="h-9 w-9 object-contain flex-shrink-0"
                />
                <div 
                    v-else 
                    class="h-9 w-9 rounded-lg bg-[#8c5a3c] flex items-center justify-center flex-shrink-0 text-white font-bold text-lg shadow-md shadow-[#8c5a3c]/20"
                >
                    <span>{{ $page.props.settings.site_name?.charAt(0) ?? 'C' }}</span>
                </div>
                <span class="font-extrabold text-lg tracking-wider text-slate-900 dark:text-white uppercase leading-none">
                    {{ $page.props.settings.site_name || 'CafePOS' }}
                </span>
            </div>

            <!-- Middle Content: Value Prop -->
            <div class="relative z-10 space-y-8 my-auto">
                <div class="space-y-4 max-w-lg">
                    <!-- Badge -->
                    <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-200/50 dark:border-slate-700/30">
                        <Zap class="h-3.5 w-3.5 text-[#8c5a3c] dark:text-[#a06d4e]" />
                        <span>Security & Licensing</span>
                    </div>

                    <!-- Heading -->
                    <h1 class="text-4xl font-extrabold tracking-tight text-slate-950 dark:text-white leading-[1.15]">
                        Sistem Aktivasi <span class="text-[#8c5a3c] dark:text-[#a06d4e]">Lisensi Terproteksi.</span>
                    </h1>

                    <!-- Description -->
                    <p class="text-slate-500 dark:text-slate-400 text-sm leading-relaxed">
                        Aplikasi ini membutuhkan verifikasi lisensi satu kali untuk dapat berjalan di lingkungan produksi (production environment) demi menjamin keamanan dan keaslian kode sumber.
                    </p>
                </div>

                <!-- Feature Grid -->
                <div class="grid grid-cols-2 gap-x-8 gap-y-4 max-w-md">
                    <div class="flex items-center gap-3">
                        <div class="h-8 w-8 rounded-lg bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center justify-center text-slate-400">
                            <ShieldCheck class="h-4.5 w-4.5" />
                        </div>
                        <span class="text-xs font-medium text-slate-600 dark:text-slate-300">Kriptografi APP_KEY</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="h-8 w-8 rounded-lg bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center justify-center text-slate-400">
                            <Globe class="h-4.5 w-4.5" />
                        </div>
                        <span class="text-xs font-medium text-slate-600 dark:text-slate-300">Verifikasi Hostname</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="h-8 w-8 rounded-lg bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center justify-center text-slate-400">
                            <Database class="h-4.5 w-4.5" />
                        </div>
                        <span class="text-xs font-medium text-slate-600 dark:text-slate-300">Tanda Tangan Lokal</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="h-8 w-8 rounded-lg bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex items-center justify-center text-slate-400">
                            <Cpu class="h-4.5 w-4.5" />
                        </div>
                        <span class="text-xs font-medium text-slate-600 dark:text-slate-300">Aktivasi Satu Kali</span>
                    </div>
                </div>
            </div>

            <!-- Bottom: Footer -->
            <div class="relative z-10 text-xs text-slate-400 dark:text-slate-600">
                <span>© 2026 {{ $page.props.settings.site_name || 'CafePOS' }}. All rights reserved.</span>
            </div>
        </div>

        <!-- Split Right: Activation Form Card -->
        <div class="w-full lg:w-1/2 flex items-center justify-center p-6 sm:p-12 relative">
            
            <!-- Mobile-only logo header (hidden on desktop) -->
            <div class="absolute top-6 left-6 lg:hidden flex items-center gap-2.5">
                <img 
                    v-if="$page.props.settings.site_logo" 
                    :src="$page.props.settings.site_logo" 
                    alt="Logo" 
                    class="h-8 w-8 object-contain flex-shrink-0"
                />
                <div 
                    v-else 
                    class="h-8 w-8 rounded-lg bg-[#8c5a3c] flex items-center justify-center flex-shrink-0 text-white font-bold text-md"
                >
                    <span>{{ $page.props.settings.site_name?.charAt(0) ?? 'C' }}</span>
                </div>
                <span class="font-extrabold text-sm tracking-wider uppercase text-slate-900 dark:text-white leading-none">
                    {{ $page.props.settings.site_name || 'CafePOS' }}
                </span>
            </div>

            <!-- Form Card Wrapper -->
            <div class="w-full max-w-md bg-white dark:bg-slate-955 border border-slate-200 dark:border-slate-800 rounded-2xl p-8 shadow-xl shadow-slate-105/50 dark:shadow-none space-y-6">
                <!-- Card Header -->
                <div class="space-y-1">
                    <h2 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Aktivasi Lisensi</h2>
                    <p class="text-xs text-slate-500 dark:text-slate-400">Masukkan kode lisensi produk Anda untuk membuka akses sistem</p>
                </div>

                <!-- Alert box for generic info/status -->
                <div v-if="status" class="p-3 bg-emerald-50 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/40 rounded-lg text-xs font-medium text-emerald-600 dark:text-emerald-400">
                    {{ status }}
                </div>

                <!-- Alert box for generic error -->
                <div v-if="error" class="p-3 bg-rose-50 dark:bg-rose-955/20 border border-rose-200 dark:border-rose-900/40 rounded-lg text-xs font-medium text-rose-600 dark:text-rose-400 flex items-start gap-2">
                    <AlertCircle class="h-4 w-4 shrink-0 mt-0.5" />
                    <span>{{ error }}</span>
                </div>

                <!-- Current domain indicator -->
                <div class="p-3.5 bg-slate-50 dark:bg-slate-900/50 border border-slate-200/60 dark:border-slate-800 rounded-xl text-xs flex items-center justify-between">
                    <span class="text-slate-500 dark:text-slate-400 font-medium">Domain Aktif:</span>
                    <span class="font-mono font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-1.5">
                        <Globe class="h-3.5 w-3.5 text-slate-400" />
                        {{ domain }}
                    </span>
                </div>

                <!-- Activation Form -->
                <form @submit.prevent="submit" class="space-y-5">
                    <!-- License Code Field -->
                    <div class="space-y-1.5">
                        <label for="license_code" class="text-xs font-semibold text-slate-700 dark:text-slate-300">Kode Lisensi</label>
                        <div class="relative flex items-center">
                            <span class="absolute left-3.5 text-slate-400 dark:text-slate-600">
                                <Key class="h-4.5 w-4.5" />
                            </span>
                            <input
                                id="license_code"
                                v-model="form.license_code"
                                type="text"
                                required
                                autofocus
                                @input="formatLicenseKey"
                                placeholder="CP-XXXX-XXXX-XXXX-XXXX"
                                class="w-full pl-12 pr-3.5 py-2.5 rounded-lg border border-slate-200 dark:border-slate-800 bg-transparent text-sm font-mono tracking-wider text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 focus:border-[#8c5a3c] transition-all"
                            />
                        </div>
                        <p v-if="form.errors.license_code" class="text-[11px] text-rose-600 flex items-start gap-1 mt-1 font-medium leading-normal">
                            <AlertCircle class="h-3.5 w-3.5 shrink-0 mt-0.5" />
                            <span>{{ form.errors.license_code }}</span>
                        </p>
                    </div>

                    <!-- Submit Button -->
                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="w-full py-2.5 bg-[#8c5a3c] hover:bg-[#734a31] dark:bg-[#8c5a3c] dark:hover:bg-[#734a31] text-white font-bold rounded-lg text-sm transition-all focus:outline-none focus:ring-2 focus:ring-[#8c5a3c]/20 disabled:opacity-50 cursor-pointer flex items-center justify-center gap-2 shadow-lg shadow-[#8c5a3c]/20"
                    >
                        <Loader2 v-if="form.processing" class="h-4 w-4 animate-spin" />
                        <span>{{ form.processing ? 'Memverifikasi...' : 'Aktivasi Lisensi' }}</span>
                    </button>
                </form>

                <!-- Help / Support Info -->
                <p class="text-[10px] text-center text-slate-400 dark:text-slate-655 leading-normal">
                    Kode lisensi didapatkan setelah pembelian source code. 
                    Mengalami kendala? Hubungi <a href="mailto:support@radhian.my.id" class="hover:underline font-semibold text-slate-500 dark:text-slate-500">Support Center</a> kami.
                </p>
            </div>
        </div>
    </div>
</template>
