<script setup lang="ts">
import { Head, router } from '@inertiajs/vue3';
import { ref } from 'vue';

interface Props {
    token: string;
    email?: string;
}

const props = defineProps<Props>();

const isProcessing = ref(false);
const message = ref('');
const isSuccess = ref(false);

const confirmUnsubscribe = async () => {
    isProcessing.value = true;
    
    try {
        const response = await fetch(`/api/unsubscribe/${props.token}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            },
        });

        const data = await response.json();

        if (data.success) {
            isSuccess.value = true;
            message.value = data.message;
        } else {
            isSuccess.value = false;
            message.value = data.message;
        }
    } catch (error) {
        isSuccess.value = false;
        message.value = 'An error occurred. Please try again.';
    } finally {
        isProcessing.value = false;
    }
};

const goHome = () => {
    window.location.href = '/';
};
</script>

<template>
    <Head title="Unsubscribe - Court Docket Notifications" />

    <div class="min-h-screen flex items-center justify-center px-4" style="background-color: #6E6362;">
        <div class="max-w-md w-full">
            <!-- Unsubscribe Card -->
            <div class="bg-white rounded-lg shadow-lg p-8">
                <div v-if="!message" class="text-center">
                    <!-- Icon -->
                    <div class="mx-auto w-16 h-16 rounded-full flex items-center justify-center mb-4"
                         style="background-color: #FEF3C7;">
                        <svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                        </svg>
                    </div>

                    <h1 class="text-2xl font-bold text-gray-900 mb-2">
                        Unsubscribe from Notifications?
                    </h1>
                    
                    <p class="text-gray-600 mb-6">
                        Are you sure you want to unsubscribe from email notifications for court docket updates?
                    </p>

                    <p v-if="email" class="text-sm text-gray-500 mb-6">
                        Email: <span class="font-semibold">{{ email }}</span>
                    </p>

                    <!-- Action Buttons -->
                    <div class="space-y-3">
                        <button
                            @click="confirmUnsubscribe"
                            :disabled="isProcessing"
                            class="w-full px-6 py-3 rounded-lg font-semibold text-white transition-colors"
                            :class="isProcessing ? 'opacity-50 cursor-not-allowed' : ''"
                            style="background-color: #EF4444;"
                            @mouseover="!isProcessing && (($event.target as HTMLElement).style.backgroundColor = '#DC2626')"
                            @mouseout="!isProcessing && (($event.target as HTMLElement).style.backgroundColor = '#EF4444')"
                        >
                            {{ isProcessing ? 'Processing...' : 'Yes, Unsubscribe' }}
                        </button>

                        <button
                            @click="goHome"
                            :disabled="isProcessing"
                            class="w-full px-6 py-3 rounded-lg font-semibold transition-colors"
                            :class="isProcessing ? 'opacity-50 cursor-not-allowed' : ''"
                            style="background-color: #6b9080; color: white;"
                            @mouseover="!isProcessing && (($event.target as HTMLElement).style.backgroundColor = '#5a8070')"
                            @mouseout="!isProcessing && (($event.target as HTMLElement).style.backgroundColor = '#6b9080')"
                        >
                            Cancel
                        </button>
                    </div>
                </div>

                <!-- Success/Error Message -->
                <div v-else class="text-center">
                    <!-- Success Icon -->
                    <div v-if="isSuccess" class="mx-auto w-16 h-16 rounded-full flex items-center justify-center mb-4"
                         style="background-color: #D1FAE5;">
                        <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </div>

                    <!-- Error Icon -->
                    <div v-else class="mx-auto w-16 h-16 rounded-full flex items-center justify-center mb-4"
                         style="background-color: #FEE2E2;">
                        <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </div>

                    <h2 class="text-2xl font-bold text-gray-900 mb-2">
                        {{ isSuccess ? 'Unsubscribed Successfully' : 'Error' }}
                    </h2>

                    <p class="text-gray-600 mb-6">
                        {{ message }}
                    </p>

                    <button
                        @click="goHome"
                        class="w-full px-6 py-3 rounded-lg font-semibold text-white transition-colors"
                        style="background-color: #6b9080;"
                        @mouseover="($event.target as HTMLElement).style.backgroundColor = '#5a8070'"
                        @mouseout="($event.target as HTMLElement).style.backgroundColor = '#6b9080'"
                    >
                        Return to Home
                    </button>
                </div>
            </div>

            <!-- Footer -->
            <div class="text-center mt-6">
                <p class="text-sm text-gray-300">
                    You can resubscribe anytime from the homepage
                </p>
            </div>
        </div>
    </div>
</template>
