<?php
if (!defined('ABSPATH')) {
    exit;
}

$month_label = isset($month_label) ? (string) $month_label : '';
$weekday_labels = isset($weekday_labels) && is_array($weekday_labels) ? $weekday_labels : [];
$cells = isset($cells) && is_array($cells) ? $cells : [];
$prev_url = isset($prev_url) ? (string) $prev_url : '';
$next_url = isset($next_url) ? (string) $next_url : '';
$events_url = isset($events_url) ? (string) $events_url : $this->get_profile_route_default_url('events');
$max_inline_per_day = isset($max_inline_per_day) ? max(1, (int) $max_inline_per_day) : 2; // Matching the mockup's preference of 2 events
$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$calendar_title = sanitize_text_field((string) ($ui_labels['calendar_title'] ?? __('Events Calendar', 'nexdirectory')));
$calendar_description = sanitize_text_field((string) ($ui_labels['calendar_description'] ?? __('Browse upcoming events in a monthly calendar view.', 'nexdirectory')));
$page_kicker = sanitize_text_field((string) get_option('eep_event_hero_kicker_text', (string) ($ui_labels['hero_kicker_default'] ?? $this->get_white_label_brand_name())));

if ($page_kicker === '') {
    $page_kicker = $this->get_white_label_brand_name();
}

$singular_label = sanitize_text_field((string) ($ui_labels['singular'] ?? __('Event', 'nexdirectory')));
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$archive_title = sanitize_text_field((string) ($ui_labels['archive_title'] ?? __('View Events', 'nexdirectory')));
$calendar_page_id = absint((int) get_queried_object_id());
$calendar_featured_hero = '';
if ($calendar_page_id > 0 && has_post_thumbnail($calendar_page_id)) {
    $calendar_featured_candidate = get_the_post_thumbnail_url($calendar_page_id, 'full');
    if (is_string($calendar_featured_candidate) && $calendar_featured_candidate !== '') {
        $calendar_featured_hero = esc_url($calendar_featured_candidate);
    }
}
$calendar_fallback_hero = esc_url((string) get_option('eep_style_fallback_hero_url', ''));
$calendar_banner_hero = $calendar_featured_hero !== '' ? $calendar_featured_hero : $calendar_fallback_hero;
$calendar_banner_has_image = $calendar_banner_hero !== '';
$calendar_hero_img_src = $calendar_banner_has_image
    ? $calendar_banner_hero
    : 'https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?q=80&w=2070&auto=format&fit=crop';

// Prepare events data for AlpineJS
$js_events = [];
$fallback_selected_date = wp_date('Y-m-d'); 

foreach ($cells as $cell) {
    if ($cell !== null) {
        if (!empty($cell['is_today']) && !empty($cell['day_key'])) {
            $fallback_selected_date = (string) $cell['day_key'];
        }
        if (!empty($cell['events']) && is_array($cell['events'])) {
            foreach ($cell['events'] as $event) {
                $js_events[] = [
                    'date'  => (string) ($cell['day_key'] ?? ''),
                    'time'  => (string) ($event['time'] ?? ''),
                    'title' => (string) ($event['title'] ?? ''),
                    'city'  => (string) ($event['city'] ?? ''),
                    'type'  => (string) ($event['type'] ?? 'event'), // Fallback to 'event' if type is empty
                    'url'   => (string) ($event['url'] ?? '#')
                ];
            }
        }
    }
}
$js_events_json = wp_json_encode($js_events);

echo $this->render_notice();
echo $this->render_platform_breadcrumbs($calendar_title); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<style>
    .eep-calendar-day-modal .eep-calendar-modal-event-title {
        font-size: 1.125rem !important;
        line-height: 1.35 !important;
        font-weight: 700 !important;
    }
    .eep-calendar-day-modal .eep-calendar-modal-time {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    .eep-calendar-day-modal .eep-calendar-modal-city {
        font-size: 0.875rem !important;
    }
    .eep-calendar-day-modal .eep-calendar-modal-tag {
        font-size: 0.625rem !important;
        letter-spacing: 0.04em;
    }
</style>

<script>
    tailwind.config = {
        theme: {
            extend: {
                fontFamily: { sans: ['Inter', 'sans-serif'] },
                colors: {
                    brand: {
                        50: 'color-mix(in srgb, var(--eep-primary) 8%, #ffffff)',
                        100: 'color-mix(in srgb, var(--eep-primary) 14%, #ffffff)',
                        200: 'color-mix(in srgb, var(--eep-primary) 24%, #ffffff)',
                        300: 'color-mix(in srgb, var(--eep-primary) 36%, #ffffff)',
                        400: 'color-mix(in srgb, var(--eep-primary) 52%, #ffffff)',
                        500: 'var(--eep-primary)',
                        600: 'var(--eep-primary-hover)',
                        700: 'color-mix(in srgb, var(--eep-primary-hover) 80%, #000000)',
                        800: 'color-mix(in srgb, var(--eep-primary-hover) 64%, #000000)',
                        900: 'color-mix(in srgb, var(--eep-primary-hover) 48%, #000000)',
                    }
                }
            }
        }
    }
</script>

<div class="bg-gray-50 text-gray-800 font-sans antialiased selection:bg-brand-100 selection:text-brand-700 min-h-screen pb-24 md:pb-12" 
     x-data="calendarApp(<?php echo htmlspecialchars($js_events_json, ENT_QUOTES, 'UTF-8'); ?>, '<?php echo esc_js($fallback_selected_date); ?>')">

    <div class="bg-white/90 backdrop-blur-md border-b border-gray-200 sticky top-0 z-40 transition-all shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-brand-500 text-white flex items-center justify-center shadow-sm">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                    <div>
                        <p class="text-[10px] sm:text-xs font-bold text-brand-500 uppercase tracking-wider mb-0.5"><?php echo esc_html($page_kicker); ?></p>
                        <h1 class="text-lg sm:text-xl font-bold text-gray-900 leading-none"><?php echo esc_html($calendar_title); ?></h1>
                    </div>
                </div>
                
                <div class="hidden md:flex items-center gap-4">
                    <a href="<?php echo esc_url($events_url); ?>" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 active:scale-95 text-gray-700 text-sm font-semibold rounded-lg transition-all duration-200">
                        <?php echo esc_html($archive_title); ?>
                    </a>
                    <a href="#" class="px-4 py-2 bg-brand-600 hover:bg-brand-700 active:scale-95 text-white text-sm font-semibold rounded-lg shadow-sm transition-all duration-200 flex items-center gap-2">
                        <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="M12 4v16m8-8H4"></path></svg>
                        Add Event
                    </a>
                </div>
            </div>
        </div>
    </div>

    <main class="max-w-7xl mx-auto px-0 sm:px-6 lg:px-8 mt-6 sm:mt-8">
        <div class="relative sm:rounded-2xl overflow-hidden mb-6 sm:mb-8 shadow-sm group bg-gray-900 flex flex-col justify-end min-h-[34vh] sm:min-h-[300px]">
            <img src="<?php echo esc_url($calendar_hero_img_src); ?>" alt="<?php echo esc_attr($calendar_title); ?>" class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 sm:group-hover:scale-105 opacity-80 sm:opacity-100" <?php echo $calendar_banner_has_image ? ' data-eep-hero-parallax="1"' : ''; ?>>

            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 via-gray-900/70 to-transparent"></div>

            <div class="relative z-10 p-6 sm:p-8 lg:p-12 w-full mt-auto">
                <div class="inline-flex items-center px-3 py-1 rounded-full bg-brand-500/20 text-white text-[10px] sm:text-xs font-semibold uppercase tracking-wider mb-3 sm:mb-4 backdrop-blur-sm border border-brand-500/30">
                    <?php echo esc_html($page_kicker); ?>
                </div>
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-3 sm:mb-4 leading-tight tracking-tight drop-shadow-md">
                    <?php echo esc_html($calendar_title); ?>
                </h1>
                <?php if ($calendar_description !== '') : ?>
                    <p class="text-gray-300 text-base sm:text-lg max-w-2xl leading-relaxed">
                        <?php echo esc_html($calendar_description); ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>
        
        <div class="bg-white sm:rounded-2xl shadow-sm border-y sm:border border-gray-100 overflow-hidden flex flex-col">
            
            <div class="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                <div class="flex items-center gap-4">
                    <h2 class="text-xl sm:text-2xl font-bold text-gray-900 w-auto"><?php echo esc_html($month_label); ?></h2>
                </div>
                
                <div class="flex items-center gap-2 sm:gap-4">
                    <div class="flex items-center bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
                        <a href="<?php echo esc_url($prev_url); ?>" class="p-2 text-gray-400 hover:text-gray-900 hover:bg-gray-50 transition-colors focus:outline-none">
                            <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="M15 19l-7-7 7-7"></path></svg>
                        </a>
                        <div class="w-px h-5 bg-gray-200"></div>
                        <a href="<?php echo esc_url($next_url); ?>" class="p-2 text-gray-400 hover:text-gray-900 hover:bg-gray-50 transition-colors focus:outline-none">
                            <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="M9 5l7 7-7 7"></path></svg>
                        </a>
                    </div>
                </div>
            </div>

            <div class="flex flex-col">
                <div class="grid grid-cols-7 border-b border-gray-100 bg-gray-50">
                    <?php foreach ($weekday_labels as $weekday) : ?>
                        <div class="px-2 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">
                            <?php echo esc_html((string) $weekday); ?>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="grid grid-cols-7 bg-gray-100 gap-[1px]">
                    <?php foreach ($cells as $cell) : ?>
                        <?php if ($cell === null) : ?>
                            <div class="bg-white min-h-[80px] sm:min-h-[120px] p-2 transition-colors md:hover:bg-gray-50/50 hidden md:block opacity-40"></div>
                        <?php else : ?>
                            <?php
                                $day_num = $cell['day'] ?? '';
                                $day_key = $cell['day_key'] ?? '';
                                $is_today = !empty($cell['is_today']);
                                $cell_events = !empty($cell['events']) ? array_values((array) $cell['events']) : [];
                                $visible_events = array_slice($cell_events, 0, $max_inline_per_day);
                                $overflow_count = max(0, count($cell_events) - count($visible_events));
                            ?>
                            <div @click="selectDate('<?php echo esc_js($day_key); ?>')"
                                 class="relative bg-white min-h-[60px] sm:min-h-[140px] p-1 sm:p-2 transition-colors cursor-pointer border-t-2 <?php echo $is_today ? 'border-brand-500 md:bg-brand-50/20' : 'border-transparent md:hover:bg-gray-50'; ?>"
                                 :class="{ 'bg-brand-50 md:bg-white': selectedDate === '<?php echo esc_js($day_key); ?>' && !<?php echo $is_today ? 'true' : 'false'; ?> }">
                                
                                <div class="flex flex-col h-full">
                                    <div class="flex items-center justify-between mb-1 sm:mb-2 px-1">
                                        <span class="text-sm font-semibold flex items-center justify-center w-7 h-7 rounded-full <?php echo $is_today ? 'bg-brand-500 text-white shadow-sm' : ''; ?>"
                                              :class="{
                                                  'text-brand-600 bg-brand-100': selectedDate === '<?php echo esc_js($day_key); ?>' && !<?php echo $is_today ? 'true' : 'false'; ?>,
                                                  'text-gray-700': !<?php echo $is_today ? 'true' : 'false'; ?> && selectedDate !== '<?php echo esc_js($day_key); ?>'
                                              }">
                                            <?php echo esc_html((string) $day_num); ?>
                                        </span>
                                    </div>

                                    <div class="hidden md:flex flex-col gap-1 overflow-y-auto scrollbar-hide flex-1">
                                        <?php foreach ($visible_events as $event) : ?>
                                            <div @click.stop="openEventUrl('<?php echo esc_url($event['url'] ?? '#'); ?>')" 
                                                 class="px-2 py-1 text-xs rounded-md border truncate cursor-pointer transition-colors"
                                                 :class="getEventColorClass('<?php echo esc_js($event['type'] ?? 'event'); ?>')">
                                                <span class="font-bold opacity-75 mr-1"><?php echo esc_html((string) ($event['time'] ?? '')); ?></span>
                                                <span class="font-medium"><?php echo esc_html((string) ($event['title'] ?? '')); ?></span>
                                            </div>
                                        <?php endforeach; ?>
                                        
                                        <?php if ($overflow_count > 0) : ?>
                                            <button @click.stop="openDayModal('<?php echo esc_js($day_key); ?>')" class="text-[11px] font-semibold text-gray-500 hover:text-brand-600 text-left px-1 mt-1 transition-colors">
                                                +<?php echo esc_html((string) $overflow_count); ?> more
                                            </button>
                                        <?php endif; ?>
                                    </div>

                                    <div class="md:hidden flex flex-wrap gap-1 justify-center mt-auto pb-1">
                                        <?php foreach (array_slice($cell_events, 0, 3) as $event) : ?>
                                            <div class="w-1.5 h-1.5 rounded-full" :class="getEventDotColor('<?php echo esc_js($event['type'] ?? 'event'); ?>')"></div>
                                        <?php endforeach; ?>
                                        <?php if (count($cell_events) > 3) : ?>
                                            <div class="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <div class="md:hidden mt-6 px-4 space-y-4 pb-8">
            <h3 class="text-lg font-bold text-gray-900 border-b border-gray-200 pb-2" x-text="formatFullDate(selectedDate)"></h3>
            
            <template x-if="getEventsForDate(selectedDate).length === 0">
                <div class="text-center py-8 bg-white rounded-2xl border border-gray-100 shadow-sm">
                    <div class="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-3 text-gray-400">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                    <p class="text-sm font-medium text-gray-500">No events scheduled.</p>
                </div>
            </template>

            <div class="space-y-3">
                <template x-for="(event, i) in getEventsForDate(selectedDate)" :key="i">
                    <article @click="openEventUrl(event.url)" class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 flex gap-4 items-start active:scale-95 transition-transform cursor-pointer">
                        <div class="flex-shrink-0 text-center w-16">
                            <span class="block text-xs font-bold text-brand-600 mb-0.5" x-text="event.time.split(' ')[0]"></span>
                            <span class="block text-[10px] font-semibold text-gray-400 uppercase" x-text="event.time.split(' ')[1] || ''"></span>
                        </div>
                        <div class="border-l-2 pl-4 w-full" :class="getEventBorderColorClass(event.type)">
                            <h4 class="text-base font-bold text-gray-900 mb-1" x-text="event.title"></h4>
                            <div class="flex items-center gap-2 text-xs text-gray-500">
                                <template x-if="event.city">
                                    <span class="flex items-center gap-1">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                        <span x-text="event.city"></span>
                                    </span>
                                </template>
                                <span class="px-2 py-0.5 rounded uppercase text-[9px] font-bold" :class="getEventColorClass(event.type)" x-text="event.type"></span>
                            </div>
                        </div>
                    </article>
                </template>
            </div>
        </div>
    </main>

    <div x-show="isModalOpen" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div x-show="isModalOpen" x-transition.opacity class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm" @click="closeModal()"></div>
        
        <div x-show="isModalOpen" 
             x-transition:enter="transition ease-out duration-300" 
             x-transition:enter-start="opacity-0 scale-95 translate-y-4" 
             x-transition:enter-end="opacity-100 scale-100 translate-y-0" 
             x-transition:leave="transition ease-in duration-200" 
             x-transition:leave-start="opacity-100 scale-100 translate-y-0" 
             x-transition:leave-end="opacity-0 scale-95 translate-y-4" 
             class="eep-calendar-day-modal relative w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[80vh]">
            
            <div class="flex items-center justify-between p-5 border-b border-gray-100 bg-gray-50/50">
                <div>
                    <h3 class="text-lg font-bold text-gray-900" id="modal-title" x-text="formatFullDate(modalDate)"></h3>
                    <p class="text-xs text-brand-600 font-semibold" x-text="getEventsForDate(modalDate).length + ' <?php echo esc_js($plural_label); ?>'"></p>
                </div>
                <button type="button" @click="closeModal()" class="text-gray-400 hover:text-gray-900 transition-colors p-2 rounded-lg hover:bg-gray-100 focus:outline-none">
                    <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="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>

            <div class="p-5 overflow-y-auto space-y-3">
                <template x-for="(event, i) in getEventsForDate(modalDate)" :key="i">
                    <div @click="openEventUrl(event.url)" class="p-4 rounded-xl border transition-colors hover:shadow-md cursor-pointer group" :class="getEventModalHoverClass(event.type)">
                        <div class="flex items-start justify-between mb-1">
                            <h4 class="eep-calendar-modal-event-title text-gray-900 group-hover:text-brand-700 transition-colors" x-text="event.title"></h4>
                            <span class="eep-calendar-modal-time text-xs font-bold px-2 py-1 rounded bg-gray-100 text-gray-600 ml-2 whitespace-nowrap" x-text="event.time"></span>
                        </div>
                        <div class="flex items-center justify-between text-sm text-gray-500 mt-2">
                            <span class="eep-calendar-modal-city flex items-center gap-1" x-show="event.city">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path></svg>
                                <span x-text="event.city"></span>
                            </span>
                            <span class="eep-calendar-modal-tag px-2 py-0.5 rounded uppercase text-[10px] font-bold border" :class="getEventColorClass(event.type)" x-text="event.type"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

<script>
    function calendarApp(eventsJson, initialDate) {
        return {
            events: eventsJson || [],
            selectedDate: initialDate || '',
            isModalOpen: false,
            modalDate: null,

            selectDate(dateStr) {
                if (!dateStr) return;
                this.selectedDate = dateStr;
                
                // On desktop, open modal if there are events and window is wide enough
                if (window.innerWidth >= 768 && this.getEventsForDate(dateStr).length > 0) {
                    this.openDayModal(dateStr);
                }
            },

            formatFullDate(dateStr) {
                if (!dateStr) return '';
                // Prevents off-by-one errors from timezones by splitting the string
                const parts = dateStr.split('-');
                if (parts.length !== 3) return dateStr;
                const d = new Date(parts[0], parts[1] - 1, parts[2]);
                return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
            },

            getEventsForDate(dateStr) {
                return this.events.filter(e => e.date === dateStr);
            },

            openDayModal(dateStr) {
                this.modalDate = dateStr;
                this.isModalOpen = true;
            },

            closeModal() {
                this.isModalOpen = false;
            },
            
            openEventUrl(url) {
                if(url && url !== '#') {
                    window.location.href = url;
                }
            },

            // Dynamic Styling based on Event Types
            getEventColorClass(type) {
                const map = {
                    'workshop': 'bg-purple-50 text-purple-700 border-purple-200',
                    'meeting':  'bg-blue-50 text-blue-700 border-blue-200',
                    'audit':    'bg-red-50 text-red-700 border-red-200',
                    'social':   'bg-orange-50 text-orange-700 border-orange-200',
                    'event':    'bg-green-50 text-green-700 border-green-200'
                };
                return map[type] || 'bg-gray-50 text-gray-700 border-gray-200';
            },
            
            getEventDotColor(type) {
                const map = {
                    'workshop': 'bg-purple-500', 'meeting': 'bg-blue-500',
                    'audit':    'bg-red-500',    'social':  'bg-orange-500', 'event': 'bg-green-500'
                };
                return map[type] || 'bg-gray-500';
            },
            
            getEventBorderColorClass(type) {
                 const map = {
                    'workshop': 'border-purple-500', 'meeting': 'border-blue-500',
                    'audit':    'border-red-500',    'social':  'border-orange-500', 'event': 'border-green-500'
                };
                return map[type] || 'border-gray-500';
            },

            getEventModalHoverClass(type) {
                const map = {
                    'workshop': 'border-gray-100 hover:border-purple-300',
                    'meeting':  'border-gray-100 hover:border-blue-300',
                    'audit':    'border-gray-100 hover:border-red-300',
                    'social':   'border-gray-100 hover:border-orange-300',
                    'event':    'border-gray-100 hover:border-green-300'
                };
                return map[type] || 'border-gray-100 hover:border-gray-300';
            }
        }
    }
</script>
