<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
if (!defined('ABSPATH')) {
    exit;
}

$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$organizer_profiles = isset($organizer_profiles) && is_array($organizer_profiles) ? array_values($organizer_profiles) : [];
$selected_profile = isset($selected_profile) && is_array($selected_profile) ? $selected_profile : [];
$selected_profile_id = isset($selected_profile_id) ? absint((int) $selected_profile_id) : 0;
$organizers_title = sanitize_text_field((string) ($ui_labels['organizers_title'] ?? __('Organizers', 'nexdirectory')));
$organizers_description = sanitize_text_field((string) ($ui_labels['organizers_description'] ?? __('Meet trusted local organizers, discover their work, and choose exactly what profile details you share.', 'nexdirectory')));
$organizer_items_cta = sanitize_text_field((string) ($ui_labels['organizer_items_cta'] ?? __('View listings', 'nexdirectory')));
$singular_label = sanitize_text_field((string) ($ui_labels['singular'] ?? __('Listing', 'nexdirectory')));
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Listings', 'nexdirectory')));
$page_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());
$directory_url = esc_url((string) nexdirectory_remove_query_arg('organizer_profile', $this->current_url()));

$make_initials = static function ($name) {
    $parts = preg_split('/\s+/u', trim((string) $name)) ?: [];
    $initials = '';
    foreach ($parts as $part) {
        if ($part === '') {
            continue;
        }
        $initials .= strtoupper((string) substr($part, 0, 1));
        if (strlen($initials) >= 2) {
            break;
        }
    }
    return $initials !== '' ? $initials : 'OR';
};

echo wp_kses_post($this->render_notice());
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Breadcrumb markup is sanitized by esc_nexdirectory_plugin_markup() against the plugin-owned allow-list.
echo esc_nexdirectory_plugin_markup((string) $this->render_platform_breadcrumbs($organizers_title));
?>

<div x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)" class="bg-gray-50 min-h-screen pb-16">
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
        <section class="mb-8 sm:mb-12 transition-all duration-700 ease-out transform"
                 :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'">
            <?php if ($page_kicker !== '') : ?>
                <span class="inline-flex items-center px-3 py-1 rounded-full bg-brand-50 text-brand-700 text-xs font-bold uppercase tracking-wider border border-brand-100 mb-4 shadow-sm">
                    <?php echo esc_html($page_kicker); ?>
                </span>
            <?php endif; ?>
            <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-5">
                <div>
                    <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 mb-3 tracking-tight">
                        <?php echo esc_html($selected_profile_id > 0 && !empty($selected_profile['name']) ? (string) $selected_profile['name'] : $organizers_title); ?>
                    </h1>
                    <p class="text-gray-500 text-base sm:text-lg max-w-2xl leading-relaxed">
                        <?php
                        echo esc_html(
                            $selected_profile_id > 0 && !empty($selected_profile['tagline'])
                                ? (string) $selected_profile['tagline']
                                : $organizers_description
                        );
                        ?>
                    </p>
                </div>
                <?php if ($selected_profile_id > 0) : ?>
                    <a href="<?php echo esc_url($directory_url); ?>" class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-white border border-gray-200 text-sm font-semibold text-gray-700 hover:border-brand-200 hover:text-brand-700 shadow-sm transition-all">
                        <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="M15 19l-7-7 7-7"></path></svg>
                        <?php esc_html_e('All organizers', 'nexdirectory'); ?>
                    </a>
                <?php endif; ?>
            </div>
        </section>

        <?php if ($selected_profile_id > 0) : ?>
            <?php if (empty($selected_profile)) : ?>
                <section class="bg-white border border-gray-200 rounded-3xl p-8 sm:p-12 text-center shadow-sm max-w-3xl mx-auto">
                    <div class="w-14 h-14 rounded-2xl bg-gray-100 text-gray-500 flex items-center justify-center mx-auto mb-5">
                        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422A12.083 12.083 0 0118.7 17c-2.25.999-4.73 1.5-6.7 1.5s-4.45-.501-6.7-1.5a12.083 12.083 0 01.54-6.422L12 14z"></path></svg>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-2"><?php esc_html_e('Profile unavailable', 'nexdirectory'); ?></h2>
                    <p class="text-gray-500 mb-6"><?php esc_html_e('This organizer has chosen a private profile or the account is no longer available.', 'nexdirectory'); ?></p>
                    <a href="<?php echo esc_url($directory_url); ?>" class="inline-flex px-5 py-3 rounded-xl bg-brand-600 text-white font-semibold hover:bg-brand-700 transition-colors"><?php esc_html_e('Browse organizers', 'nexdirectory'); ?></a>
                </section>
            <?php else : ?>
                <?php
                $profile_name = sanitize_text_field((string) ($selected_profile['name'] ?? __('Organizer', 'nexdirectory')));
                $profile_initials = $make_initials($profile_name);
                $profile_avatar = esc_url((string) ($selected_profile['avatar_url'] ?? ''));
                $profile_phone = sanitize_text_field((string) ($selected_profile['phone'] ?? ''));
                $profile_phone_href = preg_replace('/[^0-9+]/', '', $profile_phone);
                ?>
                <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_340px] gap-6 lg:gap-8">
                    <article class="bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden">
                        <div class="h-28 sm:h-36 bg-gradient-to-br from-brand-600 via-brand-500 to-indigo-500"></div>
                        <div class="px-5 sm:px-8 pb-7 sm:pb-9">
                            <div class="-mt-12 sm:-mt-14 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-5 mb-7">
                                <div class="flex items-end gap-4">
                                    <div class="w-24 h-24 sm:w-28 sm:h-28 rounded-3xl border-4 border-white bg-gray-900 text-white flex items-center justify-center text-3xl font-bold shadow-lg overflow-hidden shrink-0">
                                        <?php if ($profile_avatar !== '') : ?>
                                            <img src="<?php echo esc_url($profile_avatar); ?>" alt="" class="w-full h-full object-cover">
                                        <?php else : ?>
                                            <?php echo esc_html($profile_initials); ?>
                                        <?php endif; ?>
                                    </div>
                                    <div class="pb-1 min-w-0">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900"><?php echo esc_html($profile_name); ?></h2>
                                            <?php if (!empty($selected_profile['verified'])) : ?>
                                                <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 border border-blue-100 px-2.5 py-1 text-xs font-bold text-blue-700">
                                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                                                    <?php esc_html_e('Verified', 'nexdirectory'); ?>
                                                </span>
                                            <?php endif; ?>
                                        </div>
                                        <?php if (!empty($selected_profile['location'])) : ?>
                                            <p class="text-sm text-gray-500 mt-1"><?php echo esc_html((string) $selected_profile['location']); ?></p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <?php if (!empty($selected_profile['events_url'])) : ?>
                                    <a href="<?php echo esc_url((string) $selected_profile['events_url']); ?>" class="inline-flex justify-center items-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-white text-sm font-semibold hover:bg-black active:scale-95 transition-all shadow-sm">
                                        <?php echo esc_html($organizer_items_cta); ?>
                                        <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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                    </a>
                                <?php endif; ?>
                            </div>

                            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-8">
                                <div class="rounded-2xl border border-gray-100 bg-gray-50 p-4">
                                    <p class="text-2xl font-bold text-gray-900"><?php echo esc_html((string) absint((int) ($selected_profile['listing_count'] ?? 0))); ?></p>
                                    <p class="text-xs font-semibold text-gray-500 mt-1"><?php echo esc_html($plural_label); ?></p>
                                </div>
                                <?php if (!empty($selected_profile['member_since'])) : ?>
                                    <div class="rounded-2xl border border-gray-100 bg-gray-50 p-4 col-span-1 sm:col-span-2">
                                        <p class="text-sm font-bold text-gray-900"><?php echo esc_html((string) $selected_profile['member_since']); ?></p>
                                        <p class="text-xs font-semibold text-gray-500 mt-1"><?php esc_html_e('Member since', 'nexdirectory'); ?></p>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <section>
                                <h3 class="text-lg font-bold text-gray-900 mb-3"><?php esc_html_e('About', 'nexdirectory'); ?></h3>
                                <?php if (!empty($selected_profile['bio'])) : ?>
                                    <p class="text-gray-600 leading-relaxed whitespace-pre-line"><?php echo esc_html((string) $selected_profile['bio']); ?></p>
                                <?php else : ?>
                                    <p class="text-gray-500"><?php esc_html_e('This organizer has not added a public biography yet.', 'nexdirectory'); ?></p>
                                <?php endif; ?>
                            </section>
                        </div>
                    </article>

                    <aside class="space-y-5">
                        <section class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 sm:p-6">
                            <div class="flex items-center gap-3 mb-4">
                                <div class="w-10 h-10 rounded-xl bg-brand-50 text-brand-700 flex items-center justify-center">
                                    <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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 4v-4z"></path></svg>
                                </div>
                                <div>
                                    <h3 class="font-bold text-gray-900"><?php esc_html_e('Connect', 'nexdirectory'); ?></h3>
                                    <p class="text-xs text-gray-500"><?php esc_html_e('Only details the organizer chose to publish.', 'nexdirectory'); ?></p>
                                </div>
                            </div>
                            <div class="space-y-2">
                                <?php if (!empty($selected_profile['email'])) : ?>
                                    <a href="mailto:<?php echo esc_attr((string) $selected_profile['email']); ?>" class="flex items-center justify-between gap-3 rounded-xl border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-700 hover:border-brand-200 hover:text-brand-700 transition-colors">
                                        <span class="truncate"><?php echo esc_html((string) $selected_profile['email']); ?></span>
                                        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                    </a>
                                <?php endif; ?>
                                <?php if ($profile_phone !== '') : ?>
                                    <a href="tel:<?php echo esc_attr((string) $profile_phone_href); ?>" class="flex items-center justify-between gap-3 rounded-xl border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-700 hover:border-brand-200 hover:text-brand-700 transition-colors">
                                        <span><?php echo esc_html($profile_phone); ?></span>
                                        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                    </a>
                                <?php endif; ?>
                                <?php if (!empty($selected_profile['website_url'])) : ?>
                                    <a href="<?php echo esc_url((string) $selected_profile['website_url']); ?>" target="_blank" rel="noopener noreferrer nofollow ugc" class="flex items-center justify-between gap-3 rounded-xl border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-700 hover:border-brand-200 hover:text-brand-700 transition-colors">
                                        <span><?php esc_html_e('Visit website', 'nexdirectory'); ?></span>
                                        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                    </a>
                                <?php endif; ?>
                                <?php if (empty($selected_profile['email']) && $profile_phone === '' && empty($selected_profile['website_url'])) : ?>
                                    <p class="rounded-xl bg-gray-50 border border-gray-100 px-4 py-3 text-sm text-gray-500"><?php esc_html_e('Use the Message button on one of this organizer’s listings to contact them privately.', 'nexdirectory'); ?></p>
                                <?php endif; ?>
                            </div>
                            <?php if (!empty($selected_profile['linkedin_url']) || !empty($selected_profile['instagram_url'])) : ?>
                                <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-gray-100">
                                    <?php if (!empty($selected_profile['linkedin_url'])) : ?>
                                        <a href="<?php echo esc_url((string) $selected_profile['linkedin_url']); ?>" target="_blank" rel="noopener noreferrer nofollow ugc" class="px-3 py-2 rounded-lg bg-gray-50 text-xs font-bold text-gray-600 hover:text-brand-700"><?php esc_html_e('LinkedIn', 'nexdirectory'); ?></a>
                                    <?php endif; ?>
                                    <?php if (!empty($selected_profile['instagram_url'])) : ?>
                                        <a href="<?php echo esc_url((string) $selected_profile['instagram_url']); ?>" target="_blank" rel="noopener noreferrer nofollow ugc" class="px-3 py-2 rounded-lg bg-gray-50 text-xs font-bold text-gray-600 hover:text-brand-700"><?php esc_html_e('Instagram', 'nexdirectory'); ?></a>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>
                        </section>

                        <?php if (!empty($selected_profile['calendar_url'])) : ?>
                            <section class="bg-gray-900 text-white rounded-2xl shadow-sm p-5 sm:p-6">
                                <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center mb-4">
                                    <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 002 2z"></path></svg>
                                </div>
                                <h3 class="font-bold text-lg mb-1"><?php esc_html_e('Follow this calendar', 'nexdirectory'); ?></h3>
                                <p class="text-sm text-gray-300 mb-4"><?php esc_html_e('New and updated public listings appear automatically.', 'nexdirectory'); ?></p>
                                <div class="grid grid-cols-1 gap-2">
                                    <?php if (!empty($selected_profile['calendar_webcal_url'])) : ?>
                                        <a href="<?php echo esc_url((string) $selected_profile['calendar_webcal_url'], ['webcal']); ?>" class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl bg-white text-gray-900 text-sm font-bold hover:bg-gray-100"><?php esc_html_e('Subscribe in calendar app', 'nexdirectory'); ?></a>
                                    <?php endif; ?>
                                    <a href="<?php echo esc_url((string) $selected_profile['calendar_url']); ?>" class="inline-flex items-center justify-center px-4 py-2.5 rounded-xl border border-white/20 text-white text-sm font-semibold hover:bg-white/10"><?php esc_html_e('Download calendar feed', 'nexdirectory'); ?></a>
                                </div>
                            </section>
                        <?php endif; ?>
                    </aside>
                </div>
            <?php endif; ?>
        <?php else : ?>
            <?php if (!empty($organizer_profiles)) : ?>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
                    <?php foreach ($organizer_profiles as $index => $profile) : ?>
                        <?php
                        $profile = is_array($profile) ? $profile : [];
                        $display_name = sanitize_text_field((string) ($profile['name'] ?? __('Organizer', 'nexdirectory')));
                        $initials = $make_initials($display_name);
                        $avatar_url = esc_url((string) ($profile['avatar_url'] ?? ''));
                        $count = absint((int) ($profile['listing_count'] ?? 0));
                        $profile_url = esc_url((string) ($profile['profile_url'] ?? ''));
                        $delay = 100 + (min(8, absint((int) $index)) * 45);
                        ?>
                        <article x-data="{ shown: false }" x-intersect.once="shown = true"
                                 :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
                                 class="transition-all duration-700 ease-out flex flex-col bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6 hover:border-brand-200 hover:-translate-y-1 hover:shadow-md group"
                                 style="transition-delay: <?php echo esc_attr((string) $delay); ?>ms;">
                            <div class="flex items-start gap-4 mb-5">
                                <div class="w-14 h-14 rounded-2xl border-2 border-brand-100 bg-brand-500 flex items-center justify-center text-white font-bold text-xl group-hover:scale-105 transition-transform duration-300 shadow-sm shrink-0 overflow-hidden">
                                    <?php if ($avatar_url !== '') : ?>
                                        <img src="<?php echo esc_url($avatar_url); ?>" alt="" class="w-full h-full object-cover">
                                    <?php else : ?>
                                        <?php echo esc_html($initials); ?>
                                    <?php endif; ?>
                                </div>
                                <div class="min-w-0 pt-1">
                                    <div class="flex items-center gap-2">
                                        <h2 class="text-lg font-bold text-gray-900 leading-tight group-hover:text-brand-700 transition-colors truncate"><?php echo esc_html($display_name); ?></h2>
                                        <?php if (!empty($profile['verified'])) : ?>
                                            <svg class="w-4 h-4 text-blue-600 shrink-0" aria-label="<?php esc_attr_e('Verified organizer', 'nexdirectory'); ?>" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                                        <?php endif; ?>
                                    </div>
                                    <?php if (!empty($profile['tagline'])) : ?>
                                        <p class="text-sm text-gray-500 line-clamp-2 mt-1"><?php echo esc_html((string) $profile['tagline']); ?></p>
                                    <?php elseif (!empty($profile['location'])) : ?>
                                        <p class="text-sm text-gray-500 mt-1"><?php echo esc_html((string) $profile['location']); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <?php if (!empty($profile['bio'])) : ?>
                                <p class="text-sm text-gray-600 leading-relaxed line-clamp-3 mb-5 flex-1"><?php echo esc_html((string) $profile['bio']); ?></p>
                            <?php else : ?>
                                <div class="flex-1"></div>
                            <?php endif; ?>

                            <div class="flex items-center justify-between gap-3 pt-4 border-t border-gray-100">
                                <span class="text-xs font-semibold text-gray-500">
                                    <?php
                                    $count_label = $count === 1 ? strtolower((string) $singular_label) : strtolower((string) $plural_label);
                                    /* translators: 1: Public listing count. 2: Singular/plural listing label. */
                                    echo esc_html(sprintf(_n('%1$d %2$s', '%1$d %2$s', $count, 'nexdirectory'), $count, $count_label));
                                    ?>
                                </span>
                                <?php if ($profile_url !== '') : ?>
                                    <a href="<?php echo esc_url($profile_url); ?>" class="inline-flex items-center gap-1.5 text-sm font-bold text-brand-700 hover:text-brand-800">
                                        <?php esc_html_e('View profile', 'nexdirectory'); ?>
                                        <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>
            <?php else : ?>
                <section class="bg-white border border-gray-200 rounded-3xl p-8 sm:p-12 text-center shadow-sm max-w-3xl mx-auto">
                    <h2 class="text-2xl font-bold text-gray-900 mb-2"><?php esc_html_e('Organizer profiles are on the way', 'nexdirectory'); ?></h2>
                    <p class="text-gray-500"><?php esc_html_e('Public organizer profiles will appear here once organizers publish a listing and choose to be discoverable.', 'nexdirectory'); ?></p>
                </section>
            <?php endif; ?>
        <?php endif; ?>
    </main>
</div>
