<?php
if (!defined('ABSPATH')) {
    exit;
}
$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$singular_label = isset($singular_label) ? sanitize_text_field((string) $singular_label) : sanitize_text_field((string) ($ui_labels['singular'] ?? __('Event', 'nexdirectory')));
$singular_lower = isset($singular_lower) ? sanitize_text_field((string) $singular_lower) : sanitize_text_field((string) ($ui_labels['singular_lower'] ?? strtolower((string) $singular_label)));
$plural_label = isset($plural_label) ? sanitize_text_field((string) $plural_label) : sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$is_events_profile = (string) ($ui_labels['is_events_profile'] ?? '1') === '1';
$page_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());
$date_label = $is_events_profile ? __('Date', 'nexdirectory') : __('Available From', 'nexdirectory');

$status = sanitize_key((string) ($claim_status ?? ''));
$event_cover = isset($event_cover) ? esc_url((string) $event_cover) : '';
$event_date = isset($event_date) ? sanitize_text_field((string) $event_date) : '';
$event_location = isset($event_location) ? sanitize_text_field((string) $event_location) : '';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php esc_html_e('Claim Listing', 'nexdirectory'); ?></title>
    
    <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@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <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)',
                            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)',
                        }
                    }
                }
            },
            plugins: [
                function ({ addUtilities }) {
                    addUtilities({
                        '.scrollbar-hide': {
                            '-ms-overflow-style': 'none',
                            'scrollbar-width': 'none',
                            '&::-webkit-scrollbar': { display: 'none' }
                        }
                    })
                }
            ]
        }
    </script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased selection:bg-brand-100 selection:text-brand-700 pb-24 md:pb-12 min-h-screen">

    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
        
        <?php
        echo $this->render_notice();
        echo $this->render_platform_breadcrumbs(__('Claim Listing', 'nexdirectory')); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
        ?>

        <div class="relative rounded-2xl overflow-hidden mb-8 shadow-sm bg-gray-900 flex flex-col justify-end min-h-[220px] sm:min-h-[280px]" x-data="{ shown: false }" x-intersect.once="shown = true" :class="shown ? 'opacity-100 scale-100' : 'opacity-0 scale-[0.98]'" class="transition-all duration-700 ease-out">
            <div class="absolute inset-0 bg-gradient-to-br from-brand-800 to-gray-950 opacity-80"></div>
            <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay"></div>
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 via-gray-900/60 to-transparent"></div>
            
            <div class="relative z-10 p-6 sm:p-8 w-full mt-auto text-center sm:text-left">
                <span class="inline-flex items-center px-3 py-1 rounded-full bg-brand-500/20 text-brand-100 text-[10px] sm:text-xs font-semibold uppercase tracking-wider mb-3 backdrop-blur-sm border border-brand-500/30">
                    <?php echo esc_html($page_kicker); ?>
                </span>
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-3 leading-tight tracking-tight drop-shadow-md">
                    <?php esc_html_e('Claim Listing', 'nexdirectory'); ?>
                </h1>
                <p class="text-gray-300 text-sm sm:text-base max-w-2xl leading-relaxed mx-auto sm:mx-0">
                    <?php echo esc_html(sprintf(__('Request ownership if this %s belongs to your organization.', 'nexdirectory'), $singular_lower)); ?>
                </p>
            </div>
        </div>

        <div class="max-w-4xl mx-auto" 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 delay-150">
            
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-5 lg:p-6 mb-6 flex flex-col sm:flex-row gap-5 items-start sm:items-center hover:border-brand-200 transition-colors duration-300">
                <?php if ($event_cover !== '') : ?>
                    <div class="w-full sm:w-32 shrink-0">
                        <div class="aspect-[16/10] sm:aspect-square rounded-xl overflow-hidden bg-gray-100 border border-gray-200 shadow-sm relative group">
                            <img src="<?php echo $event_cover; ?>" alt="<?php echo esc_attr((string) ($event_title ?? '')); ?>" loading="lazy" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                        </div>
                    </div>
                <?php endif; ?>
                
                <div class="flex-1 min-w-0 w-full">
                    <h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-2 truncate"><?php echo esc_html((string) ($event_title ?? '')); ?></h2>
                    <p class="text-sm text-gray-500 mb-4 leading-relaxed line-clamp-2">
                        <?php echo esc_html(sprintf(__('You are requesting ownership for this %s listing. Admin approval may be required based on platform settings.', 'nexdirectory'), $singular_lower)); ?>
                    </p>
                    
                    <div class="flex flex-wrap gap-2 sm:gap-3 mb-5">
                        <?php if ($event_date !== '') : ?>
                            <div class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-gray-50 border border-gray-200 text-xs font-medium text-gray-700 shadow-sm">
                                <svg class="w-3.5 h-3.5 text-gray-400" 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>
                                <span class="text-gray-500 hidden sm:inline"><?php echo esc_html($date_label); ?>:</span>
                                <span><?php echo esc_html($event_date); ?></span>
                            </div>
                        <?php endif; ?>
                        
                        <?php if ($event_location !== '') : ?>
                            <div class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-gray-50 border border-gray-200 text-xs font-medium text-gray-700 shadow-sm max-w-full">
                                <svg class="w-3.5 h-3.5 text-gray-400 shrink-0" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                <span class="truncate"><?php echo esc_html($event_location); ?></span>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    <div class="flex items-center gap-3 sm:gap-4 text-sm font-semibold">
                        <a href="<?php echo esc_url((string) ($event_url ?? '#')); ?>" class="text-brand-600 hover:text-brand-700 transition-colors flex items-center gap-1">
                            <?php esc_html_e('View Listing', 'nexdirectory'); ?>
                            <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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
                        </a>
                        <span class="text-gray-300">|</span>
                        <a href="<?php echo esc_url((string) ($events_url ?? $this->get_profile_route_default_url('events'))); ?>" class="text-gray-500 hover:text-gray-800 transition-colors">
                            <?php echo esc_html(sprintf(__('Back To %s', 'nexdirectory'), $plural_label)); ?>
                        </a>
                    </div>
                </div>
            </div>

            <?php if ($status === 'pending') : ?>
                <div class="mb-6 px-4 py-4 sm:px-5 rounded-xl border border-amber-200 bg-amber-50 text-amber-900 flex items-start gap-3 shadow-sm">
                    <div class="p-1 bg-amber-100 text-amber-600 rounded-lg shrink-0">
                        <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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                    <div class="text-sm font-medium pt-1">
                        <?php echo esc_html(sprintf(__('You already have a pending claim request for this %s.', 'nexdirectory'), $singular_lower)); ?>
                    </div>
                </div>
            <?php elseif ($status === 'approved') : ?>
                <div class="mb-6 px-4 py-4 sm:px-5 rounded-xl border border-green-200 bg-green-50 text-green-900 flex items-start gap-3 shadow-sm">
                    <div class="p-1 bg-green-100 text-green-600 rounded-lg shrink-0">
                        <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="M5 13l4 4L19 7"></path></svg>
                    </div>
                    <div class="text-sm font-medium pt-1">
                        <?php echo esc_html(sprintf(__('Your claim for this %s was approved.', 'nexdirectory'), $singular_lower)); ?>
                    </div>
                </div>
            <?php elseif ($status === 'rejected') : ?>
                <div class="mb-6 px-4 py-4 sm:px-5 rounded-xl border border-red-200 bg-red-50 text-red-900 flex items-start gap-3 shadow-sm">
                    <div class="p-1 bg-red-100 text-red-600 rounded-lg shrink-0">
                        <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 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"></path></svg>
                    </div>
                    <div class="text-sm font-medium pt-1">
                        <?php echo esc_html(sprintf(__('Your previous claim request for this %s was rejected. You can submit a new request with more detail.', 'nexdirectory'), $singular_lower)); ?>
                    </div>
                </div>
            <?php endif; ?>

            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden relative">
                <div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-brand-400 to-brand-600"></div>
                
                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" class="p-5 sm:p-6 lg:p-8 space-y-6" x-data="{ submitting: false }" @submit="submitting = true">
                    <input type="hidden" name="action" value="eep_claim_listing">
                    <input type="hidden" name="event_id" value="<?php echo esc_attr((string) ($event_id ?? 0)); ?>">
                    <?php echo $claim_nonce_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

                    <div>
                        <label for="eep-claim-reason" class="block text-sm font-bold text-gray-900 mb-3">
                            <?php echo esc_html(sprintf(__('Why should this %s be assigned to you?', 'nexdirectory'), $singular_lower)); ?>
                        </label>
                        <div class="mb-3 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-xs sm:text-sm text-gray-700 leading-relaxed">
                            <p class="font-semibold text-gray-900 mb-1"><?php esc_html_e('Proof examples you can include:', 'nexdirectory'); ?></p>
                            <p>
                                <?php esc_html_e('An email from your organization domain used on the event website, a role-confirmation link on your official site, matching organizer social profiles, or a business document showing ownership of the event brand.', 'nexdirectory'); ?>
                            </p>
                        </div>
                        <textarea
                            id="eep-claim-reason"
                            name="claim_reason"
                            rows="5"
                            required
                            class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all placeholder-gray-400 text-gray-900 <?php echo ($status === 'pending') ? 'opacity-60 cursor-not-allowed' : ''; ?>"
                            placeholder="<?php echo esc_attr(sprintf(__('Example: I am the %s and can provide verification details.', 'nexdirectory'), strtolower((string) ($ui_labels['owner_singular'] ?? __('owner', 'nexdirectory'))))); ?>"
                            <?php disabled($status === 'pending'); ?>
                        ></textarea>
                    </div>

                    <div class="pt-2 sm:pt-4 border-t border-gray-100 flex items-center justify-end">
                        <button
                            type="submit"
                            class="w-full sm:w-auto inline-flex items-center justify-center gap-2 py-3 px-6 bg-brand-600 hover:bg-brand-700 active:bg-brand-800 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-brand-600 disabled:active:scale-100 text-white text-sm font-bold rounded-xl transition-all shadow-sm"
                            style="color:#ffffff !important;"
                            <?php disabled($status === 'pending'); ?>
                            :disabled="submitting || '<?php echo $status; ?>' === 'pending'"
                        >
                            <svg x-show="submitting" x-cloak class="animate-spin -ml-1 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            <svg x-show="!submitting" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <span x-show="!submitting"><?php esc_html_e('Submit Claim Request', 'nexdirectory'); ?></span>
                            <span x-show="submitting" x-cloak><?php esc_html_e('Submitting...', 'nexdirectory'); ?></span>
                        </button>
                    </div>
                </form>
            </div>
            
        </div>
    </main>

</body>
</html>
