@extends('layouts.app')

@section('title', 'Global Meeting Planner - 100 Toolbox')
@section('meta_description',
    'Plan international meetings with ease. Visual time zone comparison, optimal slot finder,
    and shareable meeting links.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Golden Hour Meeting Planner</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Visually find the perfect time to meet across multiple time zones.
            </p>
        </div>

        <!-- Controls -->
        <div
            class="flex flex-col md:flex-row gap-4 items-center justify-between bg-slate-900/50 p-4 rounded-xl border border-white/5">
            <div class="flex gap-2 w-full md:w-auto">
                <input type="text" x-model="newCity" @keydown.enter="addCity" placeholder="City or Timezone (e.g. London)"
                    class="flex-1 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-white focus:border-amber-500 outline-none">
                <button @click="addCity"
                    class="bg-amber-500 hover:bg-amber-400 text-slate-900 font-bold px-4 py-2 rounded-lg transition-colors">
                    Add
                </button>
            </div>

            <div class="flex items-center gap-4 text-sm text-slate-400">
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full bg-emerald-500"></span>
                    <span>7am - 7pm (Work)</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 rounded-full bg-indigo-900/50 border border-white/10"></span>
                    <span>Off Hours</span>
                </div>
            </div>
        </div>

        <!-- Timeline Container -->
        <div class="relative overflow-x-auto pb-4 custom-scrollbar">
            <div class="min-w-[800px] space-y-1">

                <!-- Time Header -->
                <div class="flex border-b border-white/10 pb-2 mb-2 sticky top-0 bg-slate-900 z-10">
                    <div class="w-48 flex-shrink-0"></div> <!-- City Name Spacer -->
                    <template x-for="hour in 24">
                        <div
                            class="flex-1 text-center text-xs text-slate-500 font-mono border-l border-white/5 h-6 leading-6">
                            <span x-text="(hour - 1).toString().padStart(2, '0')"></span>
                        </div>
                    </template>
                </div>

                <!-- City Rows -->
                <template x-for="(city, index) in cities" :key="index">
                    <div class="flex items-center group hover:bg-white/5 rounded-lg transition-colors">

                        <!-- City Info -->
                        <div class="w-48 flex-shrink-0 p-3 border-r border-white/10 relative">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h3 class="font-bold text-white" x-text="city.name"></h3>
                                    <p class="text-xs text-slate-400" x-text="city.timezone"></p>
                                    <p class="text-xs text-amber-500 mt-1" x-text="getCurrentTime(city.timezone)"></p>
                                </div>
                                <button @click="removeCity(index)"
                                    class="text-slate-600 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100">
                                    <svg class="w-4 h-4" 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>
                                </button>
                            </div>
                        </div>

                        <!-- Time Bars -->
                        <div class="flex-1 flex h-16 relative">
                            <!-- Golden Hour Highlighter (Vertical) -->
                            <template x-for="hour in 24">
                                <div class="flex-1 border-l border-white/5 relative h-full transition-colors duration-300"
                                    :class="{
                                        'bg-emerald-500/20': isWorkingHour(city.timezone, hour - 1),
                                        'bg-indigo-900/20': !isWorkingHour(city.timezone, hour - 1),
                                        'ring-2 ring-amber-400/50 z-20': isGoldenHour(hour - 1)
                                    }">

                                    <!-- Hour Label inside pill for quick scanning -->
                                    <div class="absolute inset-0 flex items-center justify-center text-[10px] font-medium opacity-50 select-none pointer-events-none"
                                        :class="isWorkingHour(city.timezone, hour - 1) ? 'text-emerald-200' : 'text-slate-600'"
                                        x-text="getLocalHour(city.timezone, hour - 1)">
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>

                <!-- Golden Hour Summary -->
                <div class="mt-8 p-6 bg-gradient-to-r from-amber-500/10 to-transparent border border-amber-500/20 rounded-xl"
                    x-show="goldenHours.length > 0">
                    <h3 class="text-xl font-bold text-amber-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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                        Golden Hours Found!
                    </h3>
                    <p class="text-slate-300">
                        The best time to meet is between <span class="font-bold text-white bg-amber-500/20 px-1 rounded"
                            x-text="goldenHours[0] + ':00'"></span>
                        and <span class="font-bold text-white bg-amber-500/20 px-1 rounded"
                            x-text="(goldenHours[goldenHours.length-1] + 1) + ':00'"></span> UTC.
                    </p>
                </div>

                <div class="mt-8 p-6 bg-red-500/10 border border-red-500/20 rounded-xl"
                    x-show="cities.length > 1 && goldenHours.length === 0">
                    <h3 class="text-xl font-bold text-red-400 mb-2">No Overlap Found</h3>
                    <p class="text-slate-300">
                        Try moving the meeting time or reducing the number of participants.
                    </p>
                </div>

                <!-- Info Panel -->
                <div class="mt-12 pt-8 border-t border-white/10 text-slate-400 space-y-4">
                    <h3 class="text-xl font-bold text-white">About the Golden Hour Meeting Planner</h3>
                    <p>
                        This tool is designed for <strong class="text-amber-400">digital nomads</strong>, <strong
                            class="text-amber-400">remote teams</strong>, and <strong class="text-amber-400">distributed
                            companies</strong>.
                    </p>
                    <p>
                        The <span class="text-white font-medium">"Golden Hour"</span> is that magical time of day when
                        everyone on your team is awake and in working mode (7am - 7pm).
                    </p>
                    <ul class="list-disc list-inside space-y-1 ml-2">
                        <li>Visualizes time overlap instantly.</li>
                        <li>Auto-detects timezones for major cities.</li>
                        <li>Saves your team's locations for next time.</li>
                        <li>No login required.</li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('meetingPlanner', () => ({
                newCity: '',
                cities: [],
                baseDate: new Date(), // Today

                init() {
                    // Load from local storage
                    const saved = localStorage.getItem('meetingPlannerCities');
                    if (saved) {
                        this.cities = JSON.parse(saved);
                    } else {
                        // Defaults
                        this.cities = [{
                                name: 'London',
                                timezone: 'Europe/London'
                            },
                            {
                                name: 'New York',
                                timezone: 'America/New_York'
                            },
                            {
                                name: 'Tokyo',
                                timezone: 'Asia/Tokyo'
                            }
                        ];
                    }
                },

                addCity() {
                    if (!this.newCity) return;

                    // Simple timezone 'search' - in a real app use a library or extensive list
                    // For now, naive mapping or try to guess. 
                    // To keep it simple without heavy libs, we'll try to find a valid IANA zone 
                    // matching the input string, or fallback to user input.

                    let zone = this.findTimezone(this.newCity);
                    if (zone) {
                        this.cities.push({
                            name: this.newCity,
                            timezone: zone
                        });
                        this.newCity = '';
                        this.save();
                    } else {
                        alert('Could not find a timezone for "' + this.newCity +
                            '". Please try a major city name (e.g. Paris, Los Angeles).');
                    }
                },

                removeCity(index) {
                    this.cities.splice(index, 1);
                    this.save();
                },

                save() {
                    localStorage.setItem('meetingPlannerCities', JSON.stringify(this.cities));
                },

                // Helper to resolve city name to IANA timezone
                findTimezone(city) {
                    const cleanCity = city.toLowerCase().trim();

                    // Comprehensive City -> IANA Timezone Map
                    const map = {
                        // Europe
                        'london': 'Europe/London',
                        'dublin': 'Europe/Dublin',
                        'lisbon': 'Europe/Lisbon',
                        'paris': 'Europe/Paris',
                        'berlin': 'Europe/Berlin',
                        'rome': 'Europe/Rome',
                        'madrid': 'Europe/Madrid',
                        'amsterdam': 'Europe/Amsterdam',
                        'brussels': 'Europe/Brussels',
                        'vienna': 'Europe/Vienna',
                        'stockholm': 'Europe/Stockholm',
                        'oslo': 'Europe/Oslo',
                        'copenhagen': 'Europe/Copenhagen',
                        'warsaw': 'Europe/Warsaw',
                        'prague': 'Europe/Prague',
                        'budapest': 'Europe/Budapest',
                        'helsinki': 'Europe/Helsinki',
                        'athens': 'Europe/Athens',
                        'bucharest': 'Europe/Bucharest',
                        'moscow': 'Europe/Moscow',
                        'kyiv': 'Europe/Kiev',
                        'kiev': 'Europe/Kiev',
                        'istanbul': 'Europe/Istanbul',
                        'zurich': 'Europe/Zurich',

                        // North America
                        'new york': 'America/New_York',
                        'nyc': 'America/New_York',
                        'boston': 'America/New_York',
                        'washington': 'America/New_York',
                        'miami': 'America/New_York',
                        'toronto': 'America/Toronto',
                        'montreal': 'America/Toronto',
                        'chicago': 'America/Chicago',
                        'dallas': 'America/Chicago',
                        'houston': 'America/Chicago',
                        'mexico city': 'America/Mexico_City',
                        'denver': 'America/Denver',
                        'phoenix': 'America/Phoenix',
                        'calgary': 'America/Edmonton',
                        'los angeles': 'America/Los_Angeles',
                        'sf': 'America/Los_Angeles',
                        'san francisco': 'America/Los_Angeles',
                        'seattle': 'America/Los_Angeles',
                        'vancouver': 'America/Vancouver',
                        'san diego': 'America/Los_Angeles',
                        'las vegas': 'America/Los_Angeles',
                        'honolulu': 'Pacific/Honolulu',
                        'hawaii': 'Pacific/Honolulu',

                        // Asia & Middle East
                        'tokyo': 'Asia/Tokyo',
                        'osaka': 'Asia/Tokyo',
                        'seoul': 'Asia/Seoul',
                        'beijing': 'Asia/Shanghai',
                        'shanghai': 'Asia/Shanghai',
                        'hong kong': 'Asia/Hong_Kong',
                        'taipei': 'Asia/Taipei',
                        'singapore': 'Asia/Singapore',
                        'kuala lumpur': 'Asia/Kuala_Lumpur',
                        'manila': 'Asia/Manila',
                        'bangkok': 'Asia/Bangkok',
                        'jakarta': 'Asia/Jakarta',
                        'hanoi': 'Asia/Ho_Chi_Minh',
                        'ho chi minh city': 'Asia/Ho_Chi_Minh',
                        'mumbai': 'Asia/Kolkata',
                        'delhi': 'Asia/Kolkata',
                        'bangalore': 'Asia/Kolkata',
                        'kolkata': 'Asia/Kolkata',
                        'india': 'Asia/Kolkata',
                        'dhaka': 'Asia/Dhaka',
                        'dubai': 'Asia/Dubai',
                        'abudhabi': 'Asia/Dubai',
                        'riyadh': 'Asia/Riyadh',
                        'tel aviv': 'Asia/Jerusalem',
                        'jerusalem': 'Asia/Jerusalem',
                        'tehran': 'Asia/Tehran',

                        // Australia & Pacific
                        'sydney': 'Australia/Sydney',
                        'melbourne': 'Australia/Melbourne',
                        'brisbane': 'Australia/Brisbane',
                        'perth': 'Australia/Perth',
                        'adelaide': 'Australia/Adelaide',
                        'canberra': 'Australia/Sydney',
                        'auckland': 'Pacific/Auckland',
                        'wellington': 'Pacific/Auckland',
                        'fiji': 'Pacific/Fiji',

                        // South America
                        'sao paulo': 'America/Sao_Paulo',
                        'rio de janeiro': 'America/Sao_Paulo',
                        'brasilia': 'America/Sao_Paulo',
                        'buenos aires': 'America/Argentina/Buenos_Aires',
                        'santiago': 'America/Santiago',
                        'lima': 'America/Lima',
                        'bogota': 'America/Bogota',

                        // Africa
                        'cairo': 'Africa/Cairo',
                        'johannesburg': 'Africa/Johannesburg',
                        'cape town': 'Africa/Johannesburg',
                        'lagos': 'Africa/Lagos',
                        'nairobi': 'Africa/Nairobi'
                    };

                    // Direct match
                    if (map[cleanCity]) return map[cleanCity];

                    // Try to generate timezone from city name (e.g. Rome -> Europe/Rome)
                    // Capitalize first letter of each word for IANA format
                    const capitalized = cleanCity.split(' ')
                        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                        .join('_');

                    // Attempt common region prefixes
                    const regions = ['Europe', 'America', 'Asia', 'Africa', 'Australia', 'Pacific',
                        'Atlantic', 'Indian'
                    ];

                    for (const region of regions) {
                        try {
                            const zone = `${region}/${capitalized}`;
                            Intl.DateTimeFormat(undefined, {
                                timeZone: zone
                            });
                            return zone; // If no error thrown, it's valid
                        } catch (e) {
                            // Continue trying
                        }
                    }

                    // Strict check for valid IANA string passed directly
                    try {
                        Intl.DateTimeFormat(undefined, {
                            timeZone: city
                        });
                        return city;
                    } catch (e) {
                        return null;
                    }
                },

                getCurrentTime(timezone) {
                    return new Intl.DateTimeFormat('en-US', {
                        timeZone: timezone,
                        hour: 'numeric',
                        minute: 'numeric',
                        hour12: true
                    }).format(new Date());
                },

                // Get the local hour (0-23) for a given UTC hour
                // We assume the grid represents UTC 0-23 for simplicity of alignment,
                // OR we make the grid represent USER'S local time.
                // Let's make the grid represent UTC 0-23 (Standard Reference)
                getLocalHour(timezone, utcHour) {
                    const date = new Date();
                    date.setUTCHours(utcHour);
                    date.setUTCMinutes(0);

                    const fmt = new Intl.DateTimeFormat('en-US', {
                        timeZone: timezone,
                        hour: 'numeric',
                        hour12: false // simplify math
                    });

                    return parseInt(fmt.format(date));
                },

                isWorkingHour(timezone, utcHour) {
                    const localHour = this.getLocalHour(timezone, utcHour);
                    // 7 AM to 7 PM (19:00)
                    return localHour >= 7 && localHour < 19;
                },

                // Check if this UTC hour is working hours for ALL cities
                isGoldenHour(utcHour) {
                    if (this.cities.length === 0) return false;
                    return this.cities.every(city => this.isWorkingHour(city.timezone, utcHour));
                },

                get goldenHours() {
                    let hours = [];
                    for (let i = 0; i < 24; i++) {
                        if (this.isGoldenHour(i)) hours.push(i);
                    }
                    return hours;
                }
            }));
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-6xl 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.cron-translator') }}"
                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">Cron
                Translator</a>
        </div>
    </div>
@endsection