@extends('layouts.app')

@section('title', 'Free Trial Cancellation Reminder')
@section('meta_description',
    'Set reminders for free trial expirations. Add to your calendar with one click. Never pay
    for an accidental subscription renewal again.')

@section('content')
    <div class="max-w-4xl mx-auto space-y-8" x-data="trialAlarm()" x-init="init()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Free Trial Cancellation Reminder</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Sets a reminder <span class="text-amber-400 font-medium">48 hours before</span> your free trial ends so you
                never get charged accidentally.
            </p>
        </div>

        <!-- Main Tool Area -->
        <div class="bg-slate-900/50 border border-white/5 rounded-2xl p-6 md:p-8 space-y-8">

            <div class="grid md:grid-cols-2 gap-8">
                <!-- Left: Inputs -->
                <div class="space-y-6">

                    <!-- Service Name -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Service Name</label>
                        <input type="text" x-model="service" placeholder="e.g. Netflix, Spotify, Adobe"
                            class="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-3 text-white focus:border-amber-500 outline-none transition-colors">
                    </div>

                    <!-- Trial Length -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Trial Length</label>
                        <div class="grid grid-cols-3 gap-2">
                            <button @click="length = 7"
                                :class="length == 7 ? 'bg-amber-500 text-slate-900 font-bold' :
                                    'bg-white/5 text-slate-400 hover:bg-white/10'"
                                class="px-4 py-2 rounded-lg transition-all">7 Days</button>
                            <button @click="length = 14"
                                :class="length == 14 ? 'bg-amber-500 text-slate-900 font-bold' :
                                    'bg-white/5 text-slate-400 hover:bg-white/10'"
                                class="px-4 py-2 rounded-lg transition-all">14 Days</button>
                            <button @click="length = 30"
                                :class="length == 30 ? 'bg-amber-500 text-slate-900 font-bold' :
                                    'bg-white/5 text-slate-400 hover:bg-white/10'"
                                class="px-4 py-2 rounded-lg transition-all">30 Days</button>
                        </div>
                        <div class="flex items-center gap-2 mt-2">
                            <span class="text-xs text-slate-500">Or custom:</span>
                            <input type="number" x-model="length"
                                class="w-20 bg-transparent border-b border-white/10 text-white text-center focus:border-amber-500 outline-none"
                                min="1">
                            <span class="text-xs text-slate-500">days</span>
                        </div>
                    </div>

                    <!-- Start Date -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Start Date</label>
                        <input type="date" x-model="startDate"
                            class="w-full bg-slate-950 border border-white/10 rounded-lg px-4 py-3 text-white focus:border-amber-500 outline-none transition-colors [color-scheme:dark]">
                    </div>

                </div>

                <!-- Right: Preview & Action -->
                <div class="bg-indigo-900/10 border border-indigo-500/20 rounded-xl p-6 flex flex-col justify-between">
                    <div class="space-y-6">
                        <div class="flex items-start gap-4">
                            <div
                                class="w-12 h-12 bg-amber-500/20 rounded-xl flex items-center justify-center text-amber-500 flex-shrink-0">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-white">Your Timeline</h3>
                                <div class="mt-4 space-y-4 relative">
                                    <!-- Vertical Line -->
                                    <div class="absolute left-[7px] top-2 bottom-2 w-0.5 bg-white/10"></div>

                                    <!-- Start -->
                                    <div class="flex items-center gap-4 relative z-10">
                                        <div class="w-4 h-4 rounded-full bg-slate-600 border-2 border-slate-900"></div>
                                        <div>
                                            <p class="text-xs text-slate-500">Started</p>
                                            <p class="text-sm font-medium text-white" x-text="formatDate(startDate)"></p>
                                        </div>
                                    </div>

                                    <!-- Alarm -->
                                    <div class="flex items-center gap-4 relative z-10">
                                        <div
                                            class="w-4 h-4 rounded-full bg-amber-500 border-2 border-slate-900 shadow-[0_0_10px_rgba(245,158,11,0.5)]">
                                        </div>
                                        <div>
                                            <p class="text-xs text-amber-400 font-bold uppercase tracking-wider">Alarm Set
                                                (48h Before)</p>
                                            <p class="text-lg font-bold text-white relative">
                                                <span x-text="formatDate(alarmDate)"></span>
                                            </p>
                                        </div>
                                    </div>

                                    <!-- End -->
                                    <div class="flex items-center gap-4 relative z-10 opacity-50">
                                        <div class="w-4 h-4 rounded-full bg-red-500/50 border-2 border-slate-900"></div>
                                        <div>
                                            <p class="text-xs text-slate-500">Trial Ends (Charged)</p>
                                            <p class="text-sm font-medium text-slate-300" x-text="formatDate(endDate)"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button @click="downloadIcs"
                        class="mt-8 w-full bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold py-4 px-6 rounded-xl transition-all flex items-center justify-center gap-2 transform active:scale-95 shadow-lg shadow-amber-500/20">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                        <span>Download Calendar Event</span>
                    </button>
                    <div class="mt-6 flex flex-col gap-3">
                        <a :href="googleCalendarUrl" target="_blank"
                            class="block w-full text-center text-sm font-medium text-slate-400 hover:text-white transition-colors py-2 border border-white/5 rounded-lg hover:bg-white/5">
                            Add directly to Google Calendar
                        </a>
                        <a :href="outlookCalendarUrl" target="_blank"
                            class="block w-full text-center text-sm font-medium text-slate-400 hover:text-white transition-colors py-2 border border-white/5 rounded-lg hover:bg-white/5">
                            Add directly to Outlook.com
                        </a>
                    </div>
                    <p class="text-center text-xs text-slate-500 mt-2">Compatible with Apple Calendar & Outlook Desktop via
                        Download</p>
                </div>
            </div>

        </div>

        <!-- Info Panel -->
        <div class="grid md:grid-cols-3 gap-6">
            <div class="bg-indigo-900/20 border border-indigo-500/20 p-6 rounded-xl md:col-span-2">
                <h3 class="text-lg font-bold text-indigo-400 mb-2 flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Why 48 hours before?
                </h3>
                <p class="text-slate-400 text-sm leading-relaxed">
                    Most services charge you at 12:01 AM on the day your trial expires. Setting the alarm for the exact end
                    date is risky. A 48-hour buffer gives you time to verify if you want to keep it or cancel it without
                    stress.
                </p>
            </div>

            <div class="bg-slate-900/50 border border-white/5 p-6 rounded-xl">
                <h3 class="text-lg font-bold text-white mb-2">Privacy First</h3>
                <p class="text-slate-400 text-sm">
                    This generated calendar file is created <strong class="text-amber-400">entirely in your
                        browser</strong>. We don't know what subscriptions you have.
                </p>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('trialAlarm', () => ({
                service: '',
                length: 14,
                startDate: new Date().toISOString().split('T')[0],

                init() {
                    // Start today
                },

                get endDate() {
                    if (!this.startDate) return new Date();
                    const d = new Date(this.startDate);
                    d.setDate(d.getDate() + parseInt(this.length));
                    return d;
                },

                get alarmDate() {
                    const d = new Date(this.endDate);
                    d.setDate(d.getDate() - 2); // 48 hours buffer
                    return d;
                },

                formatDate(dateStr) {
                    if (!dateStr) return '';
                    const d = new Date(dateStr);
                    // Handle invalid dates gracefully if input is cleared
                    if (isNaN(d.getTime())) return '';

                    return d.toLocaleDateString('en-US', {
                        weekday: 'short',
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric'
                    });
                },

                get googleCalendarUrl() {
                    const serviceName = this.service || 'Subscription';
                    const alarmDate = this.alarmDate;

                    // Google format: YYYYMMDD
                    // IMPORTANT: To make it an ALL DAY event, you need YYYYMMDD/YYYYMMDD+1
                    const start = alarmDate.toISOString().replace(/-/g, '').split('T')[0];

                    const endD = new Date(alarmDate);
                    endD.setDate(endD.getDate() + 1);
                    const end = endD.toISOString().replace(/-/g, '').split('T')[0];

                    const title = encodeURIComponent(`CANCEL ${serviceName.toUpperCase()} TRIAL`);
                    const details = encodeURIComponent(
                        `Your ${this.length}-day free trial for ${serviceName} is ending in 48 hours. Cancel now to avoid being charged. Generated by Toolbox.`
                    );

                    return `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${start}/${end}&details=${details}`;
                },

                get outlookCalendarUrl() {
                    const serviceName = this.service || 'Subscription';
                    const alarmDate = this.alarmDate;

                    // Outlook format: YYYY-MM-DD
                    const start = alarmDate.toISOString().split('T')[0];
                    const end = start; // Same day for 1-day event allday=true

                    const subject = encodeURIComponent(`CANCEL ${serviceName.toUpperCase()} TRIAL`);
                    const body = encodeURIComponent(
                        `Your ${this.length}-day free trial for ${serviceName} is ending in 48 hours. Cancel now to avoid being charged. Generated by Toolbox.`
                    );

                    return `https://outlook.live.com/calendar/0/deeplink/compose?path=/calendar/action/compose&rru=addevent&subject=${subject}&startdt=${start}&enddt=${end}&allday=true&body=${body}`;
                },

                downloadIcs() {
                    const serviceName = this.service || 'Subscription';
                    const alarmDate = this.alarmDate;

                    // Format date for ICS: YYYYMMDD
                    // IMPORTANT: We want it to be an all-day event so it shows at the top of the calendar
                    const dateString = alarmDate.toISOString().replace(/-/g, '').split('T')[0];

                    // Generate unique ID (compatible with insecure contexts)
                    // crypto.randomUUID requires Secure Context (HTTPS)
                    const uid = Date.now().toString(36) + Math.random().toString(36).substr(2);
                    const now = new Date().toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';

                    // ICS Content
                    // We set DTSTART as Value=DATE to make it an all-day event
                    const icsContent = `BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//Toolbox//Trial Alarm//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
UID:${uid}
DTSTAMP:${now}
DTSTART;VALUE=DATE:${dateString}
SUMMARY:CANCEL ${serviceName.toUpperCase()} TRIAL
DESCRIPTION:Your ${this.length}-day free trial for ${serviceName} is ending in 48 hours. Cancel now to avoid being charged. Generated by Toolbox.
STATUS:CONFIRMED
TRANSP:TRANSPARENT
BEGIN:VALARM
TRIGGER:-PT9H
ACTION:DISPLAY
DESCRIPTION:Reminder
END:VALARM
END:VEVENT
END:VCALENDAR`;

                    // Create Blob and download
                    const blob = new Blob([icsContent], {
                        type: 'text/calendar;charset=utf-8'
                    });
                    const url = window.URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download',
                        `cancel-${serviceName.toLowerCase().replace(/\s+/g, '-')}-trial.ics`);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            }));
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.local-time') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Stateless
                Local Time Linker</a>
            <a href="{{ route('tools.meeting.index') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Golden
                Hour Meeting Planner</a>
        </div>
    </div>
@endsection