<script setup lang="ts">
import { Head, useForm, Link } from '@inertiajs/vue3';
import {
    Plus,
    Trash2,
    Link as LinkIcon,
    DollarSign,
    RotateCw,
    Award,
    XSquare,
    Star,
    ArrowLeft,
} from 'lucide-vue-next';
import { ref, watch } from 'vue';

interface PredefinedBadge {
    label: string;
    class: string;
}

const props = defineProps<{
    predefinedBadges: PredefinedBadge[];
    predefinedKeyFeatures: string[];
}>();

const form = useForm({
    name: '',
    description: '',
    image_path: '', // For URL input
    image_file: null as File | null, // For file upload
    brand_color: '#a855f7', // Default purple
    hover_color: 'rgba(168, 85, 247, 0.8)', // Default purple rgba
    badges: [],
    min_deposit: '',
    max_bet: '',
    wagering: '',
    free_spins: '',
    button_link: '',
    key_features: [],
    is_sticky: false,
    is_no_deposit: false,
    is_featured: false,
    order: 0,
});

const newBadge = ref('');
const addBadge = () => {
    if (newBadge.value.trim()) {
        form.badges.push({
            label: newBadge.value.trim(),
            class: 'bg-white/10',
        });
        newBadge.value = '';
    }
};

const removeBadge = (index: number) => {
    form.badges.splice(index, 1);
};

const addPredefinedBadge = (badge: PredefinedBadge) => {
    if (!form.badges.some((b) => b.label === badge.label)) {
        form.badges.push(badge);
    }
};

const newFeature = ref('');
const addFeature = () => {
    if (newFeature.value.trim()) {
        form.key_features.push(newFeature.value.trim());
        newFeature.value = '';
    }
};

const removeFeature = (index: number) => {
    form.key_features.splice(index, 1);
};

const addPredefinedFeature = (feature: string) => {
    if (!form.key_features.includes(feature)) {
        form.key_features.push(feature);
    }
};

const imagePreviewUrl = ref<string | null>(null);

const handleImageFileChange = (e: Event) => {
    const target = e.target as HTMLInputElement;
    if (target.files && target.files[0]) {
        form.image_file = target.files[0];
        imagePreviewUrl.value = URL.createObjectURL(target.files[0]);
        form.image_path = ''; // Clear image_path if a file is uploaded
    } else {
        form.image_file = null;
        imagePreviewUrl.value = null;
    }
};

// Watch for changes in image_path to update preview if it's a URL
watch(
    () => form.image_path,
    (newPath) => {
        if (newPath && !form.image_file) {
            imagePreviewUrl.value = newPath;
        } else if (!newPath && !form.image_file) {
            imagePreviewUrl.value = null;
        }
    },
);

const submit = () => {
    form.post('/admin/bonuses', {
        onSuccess: () => {
            // Handled by AdminLayout flash messages
        },
        onError: (errors) => {
            console.error(errors);
            // You might want to show a generic error notification here
        },
    });
};
</script>

<template>
    <Head title="Create Bonus" />

    <div class="space-y-8">
        <!-- Header Section -->
        <div
            class="flex items-center justify-between gap-6 rounded-[32px] border border-white/5 bg-[#0f172a] p-8 shadow-xl"
        >
            <div class="flex items-center gap-4">
                <Link
                    href="/admin/bonuses"
                    class="flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 text-gray-400 transition hover:bg-white/10 hover:text-white"
                >
                    <ArrowLeft :size="20" />
                </Link>
                <h1
                    class="text-3xl font-black tracking-tighter uppercase italic"
                >
                    Create New <span class="text-purple-500">Bonus</span>
                </h1>
            </div>
        </div>

        <form
            @submit.prevent="submit"
            class="space-y-10 rounded-[32px] border border-white/5 bg-[#0f172a] p-8 shadow-xl"
        >
            <div class="grid grid-cols-1 gap-12 lg:grid-cols-2">
                <!-- Left Column: Content -->
                <div class="space-y-8">
                    <section class="space-y-6">
                        <h2
                            class="flex items-center gap-3 text-xl font-black tracking-tight text-blue-400 uppercase italic"
                        >
                            <span class="h-[2px] w-8 bg-blue-400"></span> Main
                            Info
                        </h2>

                        <div class="space-y-4">
                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Casino Name</span
                                >
                                <input
                                    v-model="form.name"
                                    type="text"
                                    class="form-input"
                                    required
                                    placeholder="e.g. STAKE.COM"
                                />
                            </label>

                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Description / Bonus Text</span
                                >
                                <textarea
                                    v-model="form.description"
                                    class="form-textarea"
                                    rows="4"
                                    placeholder="Exklusiver 200% Bonus bis zu 1000€..."
                                ></textarea>
                            </label>
                        </div>
                    </section>

                    <section class="space-y-6">
                        <h2
                            class="flex items-center gap-3 text-xl font-black tracking-tight text-purple-400 uppercase italic"
                        >
                            <span class="h-[2px] w-8 bg-purple-400"></span>
                            Visuals & Branding
                        </h2>

                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Brand Primary Color</span
                                >
                                <div class="flex gap-3">
                                    <input
                                        v-model="form.brand_color"
                                        type="color"
                                        class="form-color-input w-14"
                                    />
                                    <input
                                        v-model="form.brand_color"
                                        type="text"
                                        class="form-input flex-1 font-mono text-xs uppercase"
                                        placeholder="#A855F7"
                                    />
                                </div>
                            </label>

                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Hover Glow Color (RGBA)</span
                                >
                                <input
                                    v-model="form.hover_color"
                                    type="text"
                                    class="form-input font-mono text-xs"
                                    placeholder="rgba(168, 85, 247, 0.8)"
                                />
                            </label>
                        </div>

                        <div
                            class="grid grid-cols-1 items-end gap-6 sm:grid-cols-2"
                        >
                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Background Image URL</span
                                >
                                <input
                                    v-model="form.image_path"
                                    type="text"
                                    class="form-input"
                                    :disabled="!!form.image_file"
                                />
                            </label>

                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Or Upload New File</span
                                >
                                <input
                                    type="file"
                                    @change="handleImageFileChange"
                                    class="form-file-input"
                                    accept="image/*"
                                />
                            </label>
                        </div>

                        <div
                            v-if="imagePreviewUrl"
                            class="group relative aspect-video overflow-hidden rounded-2xl border border-white/5 bg-black/40"
                        >
                            <img
                                :src="imagePreviewUrl"
                                class="h-full w-full object-cover opacity-60"
                            />
                            <div
                                class="absolute inset-0 flex items-center justify-center"
                            >
                                <span
                                    class="rounded-full border border-white/10 bg-black/60 px-4 py-2 text-[10px] font-black tracking-widest uppercase backdrop-blur-md"
                                    >Image Preview</span
                                >
                            </div>
                        </div>
                    </section>
                </div>

                <!-- Right Column: Stats & Features -->
                <div class="space-y-8">
                    <section class="space-y-6">
                        <h2
                            class="flex items-center gap-3 text-xl font-black tracking-tight text-green-400 uppercase italic"
                        >
                            <span class="h-[2px] w-8 bg-green-400"></span> Bonus
                            Details
                        </h2>

                        <div class="grid grid-cols-2 gap-4">
                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Min Deposit</span
                                >
                                <div class="relative">
                                    <DollarSign
                                        class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
                                        :size="14"
                                    />
                                    <input
                                        v-model="form.min_deposit"
                                        type="text"
                                        class="form-input pl-10"
                                        placeholder="20€"
                                    />
                                </div>
                            </label>
                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Max Bet</span
                                >
                                <div class="relative">
                                    <XSquare
                                        class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
                                        :size="14"
                                    />
                                    <input
                                        v-model="form.max_bet"
                                        type="text"
                                        class="form-input pl-10"
                                        placeholder="5€"
                                    />
                                </div>
                            </label>
                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Wagering</span
                                >
                                <div class="relative">
                                    <RotateCw
                                        class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
                                        :size="14"
                                    />
                                    <input
                                        v-model="form.wagering"
                                        type="text"
                                        class="form-input pl-10"
                                        placeholder="35x"
                                    />
                                </div>
                            </label>
                            <label class="block">
                                <span
                                    class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                    >Free Spins</span
                                >
                                <div class="relative">
                                    <Award
                                        class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
                                        :size="14"
                                    />
                                    <input
                                        v-model="form.free_spins"
                                        type="text"
                                        class="form-input pl-10"
                                        placeholder="100 FS"
                                    />
                                </div>
                            </label>
                        </div>

                        <label class="block">
                            <span
                                class="mb-2 block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                >Affiliate / Button Link</span
                            >
                            <div class="relative">
                                <LinkIcon
                                    class="absolute top-1/2 left-4 -translate-y-1/2 text-gray-600"
                                    :size="14"
                                />
                                <input
                                    v-model="form.button_link"
                                    type="text"
                                    class="form-input pl-10"
                                    placeholder="https://..."
                                />
                            </div>
                        </label>
                    </section>

                    <section class="space-y-6">
                        <h2
                            class="flex items-center gap-3 text-xl font-black tracking-tight text-orange-400 uppercase italic"
                        >
                            <span class="h-[2px] w-8 bg-orange-400"></span>
                            Configuration
                        </h2>

                        <div class="flex flex-wrap gap-6">
                            <label
                                class="group flex cursor-pointer items-center gap-3"
                            >
                                <div
                                    class="relative h-6 w-12 rounded-full border border-white/10 bg-white/5 transition group-hover:border-orange-500/50"
                                >
                                    <input
                                        v-model="form.is_sticky"
                                        type="checkbox"
                                        class="peer sr-only"
                                    />
                                    <div
                                        class="absolute top-1 left-1 h-4 w-4 rounded-full bg-gray-500 transition-all peer-checked:left-7 peer-checked:bg-orange-500"
                                    ></div>
                                </div>
                                <span
                                    class="text-[10px] font-black tracking-widest text-gray-400 uppercase peer-checked:text-white"
                                    >Sticky Bonus</span
                                >
                            </label>

                            <label
                                class="group flex cursor-pointer items-center gap-3"
                            >
                                <div
                                    class="relative h-6 w-12 rounded-full border border-white/10 bg-white/5 transition group-hover:border-cyan-500/50"
                                >
                                    <input
                                        v-model="form.is_no_deposit"
                                        type="checkbox"
                                        class="peer sr-only"
                                    />
                                    <div
                                        class="absolute top-1 left-1 h-4 w-4 rounded-full bg-gray-500 transition-all peer-checked:left-7 peer-checked:bg-cyan-500"
                                    ></div>
                                </div>
                                <span
                                    class="text-[10px] font-black tracking-widest text-gray-400 uppercase"
                                    >No Deposit</span
                                >
                            </label>

                            <label
                                class="group flex cursor-pointer items-center gap-3"
                            >
                                <div
                                    class="relative h-6 w-12 rounded-full border border-white/10 bg-white/5 transition group-hover:border-yellow-500/50"
                                >
                                    <input
                                        v-model="form.is_featured"
                                        type="checkbox"
                                        class="peer sr-only"
                                    />
                                    <div
                                        class="absolute top-1 left-1 h-4 w-4 rounded-full bg-gray-500 transition-all peer-checked:left-7 peer-checked:bg-yellow-500"
                                    ></div>
                                </div>
                                <span
                                    class="flex items-center gap-2 text-[10px] font-black tracking-widest text-gray-400 uppercase"
                                    ><Star :size="12" /> Super Card</span
                                >
                            </label>

                            <label class="ml-auto flex items-center gap-4">
                                <span
                                    class="text-[10px] font-black tracking-widest text-gray-500 uppercase"
                                    >Sort Order</span
                                >
                                <input
                                    v-model="form.order"
                                    type="number"
                                    class="form-input w-20 text-center"
                                />
                            </label>
                        </div>

                        <!-- Badges -->
                        <div class="space-y-4">
                            <span
                                class="block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                >Status Badges</span
                            >
                            <div class="mb-2 flex flex-wrap gap-2">
                                <div
                                    v-for="(badge, idx) in form.badges"
                                    :key="idx"
                                    :class="[
                                        'group flex items-center gap-2 rounded-lg px-3 py-1.5 transition hover:border-red-500/30',
                                        badge.class ||
                                            'border border-white/10 bg-white/5',
                                    ]"
                                >
                                    <span
                                        class="text-[10px] font-bold uppercase"
                                        >{{ badge.label }}</span
                                    >
                                    <button
                                        type="button"
                                        @click="removeBadge(idx)"
                                        class="text-gray-600 transition group-hover:text-red-500"
                                    >
                                        <Trash2 :size="12" />
                                    </button>
                                </div>
                            </div>
                            <div
                                class="flex flex-wrap gap-2 border-t border-white/5 pt-4"
                            >
                                <span
                                    class="w-full text-xs font-bold text-gray-500 uppercase"
                                    >Predefined:</span
                                >
                                <button
                                    type="button"
                                    v-for="badge in predefinedBadges"
                                    :key="badge.label"
                                    @click="addPredefinedBadge(badge)"
                                    :class="[
                                        'rounded-lg px-3 py-1.5 text-[10px] font-bold uppercase transition',
                                        badge.class,
                                        form.badges.some(
                                            (b) => b.label === badge.label,
                                        )
                                            ? 'cursor-not-allowed opacity-50'
                                            : 'hover:opacity-75',
                                    ]"
                                    :disabled="
                                        form.badges.some(
                                            (b) => b.label === badge.label,
                                        )
                                    "
                                >
                                    {{ badge.label }}
                                </button>
                            </div>
                            <div class="mt-2 flex w-full gap-2">
                                <input
                                    v-model="newBadge"
                                    type="text"
                                    class="form-input flex-1 py-2 text-xs"
                                    placeholder="Add Custom Badge (e.g. VIP DEAL)"
                                />
                                <button
                                    type="button"
                                    @click="addBadge"
                                    class="btn-secondary py-2"
                                >
                                    <Plus :size="14" />
                                </button>
                            </div>
                        </div>

                        <!-- Key Features -->
                        <div class="space-y-4">
                            <span
                                class="block text-[10px] font-black tracking-[0.2em] text-gray-500 uppercase"
                                >Key Features (Pros)</span
                            >
                            <div class="mb-2 space-y-2">
                                <div
                                    v-for="(feature, idx) in form.key_features"
                                    :key="idx"
                                    class="flex items-center justify-between rounded-xl border border-white/5 bg-white/[0.02] p-3"
                                >
                                    <span class="text-xs text-gray-300">{{
                                        feature
                                    }}</span>
                                    <button
                                        type="button"
                                        @click="removeFeature(idx)"
                                        class="text-gray-600 transition hover:text-red-500"
                                    >
                                        <Trash2 :size="14" />
                                    </button>
                                </div>
                            </div>
                            <div
                                class="flex flex-wrap gap-2 border-t border-white/5 pt-4"
                            >
                                <span
                                    class="w-full text-xs font-bold text-gray-500 uppercase"
                                    >Predefined:</span
                                >
                                <button
                                    type="button"
                                    v-for="feature in predefinedKeyFeatures"
                                    :key="feature"
                                    @click="addPredefinedFeature(feature)"
                                    :class="[
                                        'rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-[10px] font-bold uppercase transition',
                                        form.key_features.includes(feature)
                                            ? 'cursor-not-allowed opacity-50'
                                            : 'hover:opacity-75',
                                    ]"
                                    :disabled="
                                        form.key_features.includes(feature)
                                    "
                                >
                                    {{ feature }}
                                </button>
                            </div>
                            <div class="mt-2 flex w-full gap-2">
                                <input
                                    v-model="newFeature"
                                    type="text"
                                    class="form-input flex-1 py-2 text-xs"
                                    placeholder="Add Custom Feature (e.g. Instant Rakeback)"
                                />
                                <button
                                    type="button"
                                    @click="addFeature"
                                    class="btn-secondary py-2"
                                >
                                    <Plus :size="14" />
                                </button>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <div class="flex justify-end gap-4 border-t border-white/5 pt-10">
                <Link
                    href="/admin/bonuses"
                    class="rounded-2xl px-8 py-4 text-xs font-black tracking-widest text-gray-500 uppercase transition hover:text-white"
                    >Cancel</Link
                >
                <button
                    type="submit"
                    class="btn-primary flex items-center gap-3"
                    :disabled="form.processing"
                >
                    {{ form.processing ? 'Saving...' : 'Save Bonus' }}
                </button>
            </div>
        </form>
    </div>
</template>

<style scoped>
@reference "../../../../css/app.css";

.form-input,
.form-textarea {
    @apply w-full rounded-2xl border border-white/5 bg-white/[0.03] px-6 py-4 text-sm font-medium text-white placeholder-gray-600 transition outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20;
}
.form-file-input {
    @apply w-full text-xs text-gray-500 transition-all duration-300 file:mr-4 file:rounded-2xl file:border-0 file:bg-white/5 file:px-6 file:py-3 file:text-[10px] file:font-black file:tracking-widest file:text-white file:uppercase hover:file:bg-white/10;
}
.form-color-input {
    @apply h-14 cursor-pointer overflow-hidden rounded-2xl border-none bg-white/5 p-1;
}
.form-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}
.form-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 12px;
}

.btn-primary {
    @apply rounded-2xl bg-gradient-to-r from-blue-600 to-purple-600 px-10 py-4 text-xs font-black tracking-widest text-white uppercase shadow-xl shadow-blue-500/20 transition-all duration-300 hover:scale-[1.02] active:scale-[0.98];
}
.btn-secondary {
    @apply rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-white transition hover:bg-white/10;
}
</style>
