<?php

/**
 * Guest List Import Form View
 * Location: app/views/guest/import.php
 *
 * Variables expected:
 *   $errors — array — Keyed validation errors map if upload failed.
 *
 * @package Inveetaire
 * @ref     RC-012
 */
$role = \App\Core\Session::get('role_snapshot') === 'crew' ? 'crew' : 'couple';
/** @var array $errors */
$errors = $errors ?? [];

?>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
    
    <!-- Title Section -->
    <div class="mb-6">
        <div class="page-breadcrumb">
            <a href="<?= url("/app/{$role}/guests") ?>">Guest List</a>
            <span class="sep">/</span>
            <span>Import</span>
        </div>
        <h1 class="page-h1">
            <span class="page-header-icon">
                <i class="fa-solid fa-file-import"></i>
            </span>
            Import Guest List
        </h1>
        <p class="page-subtitle">Upload an Excel (.xlsx) or CSV file to bulk-import guests.</p>
    </div>

    <!-- Error Summary Alerts -->
    <?php if (!empty($errors)): ?>
        <div class="p-4 bg-rose-50 border border-rose-150 text-rose-800 rounded-2xl text-sm shadow-sm mb-4">
            <div class="font-bold mb-2 flex items-center gap-2">
                <i class="fa-solid fa-circle-xmark text-rose-500"></i> Upload Validation Failed
            </div>
            <ul class="list-disc pl-5 text-xs space-y-1">
                <?php foreach ($errors as $error): ?>
                    <li><?= escape_html($error) ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <!-- Left 2 Columns: Upload Form Card -->
        <div class="md:col-span-2 space-y-6">
            <div class="card p-0 overflow-hidden">
                <form action="<?= url("/app/{$role}/guests/import/preview") ?>" method="POST" enctype="multipart/form-data" class="p-6 space-y-6">
                    <?= csrf_field() ?>

                    <!-- Upload drop zone area style -->
                    <div class="form-group">
                        <label class="form-label font-bold text-slate-700">Select Spreadsheet File</label>
                        <div class="mt-2 flex justify-center px-6 pt-10 pb-10 border-2 border-slate-300 border-dashed rounded-xl hover:border-purple-400 transition bg-slate-50/50">
                            <div class="space-y-2 text-center">
                                <span class="text-4xl block">📊</span>
                                <div class="flex text-sm text-slate-600 justify-center">
                                    <label for="guest_file" class="relative cursor-pointer bg-transparent rounded-md font-bold link-elegant">
                                        <span>Upload Excel/CSV file</span>
                                        <input id="guest_file" name="guest_file" type="file" accept=".xlsx,.csv" class="sr-only" required>
                                    </label>
                                    <p class="pl-1 text-slate-500">or drag and drop</p>
                                </div>
                                <p class="text-[10px] text-slate-400">Microsoft Excel (.xlsx) or CSV up to 5MB (Max 500 rows)</p>
                            </div>
                        </div>
                        
                        <!-- File info indicator -->
                        <div id="file-info-bar" class="hidden mt-3 p-2.5 bg-slate-100 border border-slate-200 rounded-lg text-xs font-semibold text-slate-700 items-center justify-between">
                            <span id="file-name-span" class="truncate max-w-[80%]"></span>
                            <button type="button" onclick="resetFile()" class="text-red-500 hover:text-red-700 text-xs font-bold">Remove</button>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="pt-4 border-t border-slate-100 flex justify-end gap-3">
                        <a href="<?= url("/app/{$role}/guests") ?>" class="btn btn-secondary text-xs font-semibold px-5 py-2.5">
                            Cancel
                        </a>
                        <button type="submit" onclick="if(this.form.checkValidity()){this.disabled=true; this.innerHTML='<i class=\'fa-solid fa-spinner fa-spin\'></i> Processing... Please wait...'; this.form.submit();}" class="btn btn-primary text-xs font-semibold px-5 py-2.5 flex items-center gap-1.5">
                            <i class="fa-solid fa-magnifying-glass"></i> Preview &amp; Validate Data
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Right 1 Column: Import Guidelines Sidebar -->
        <div class="md:col-span-1 space-y-6">
            <!-- Template download helper card -->
            <div class="card p-5 space-y-3 bg-purple-50/30 border border-purple-100/50">
                <span class="text-2xl text-purple-650"><i class="fa-solid fa-file-import"></i></span>
                <h4 class="text-xs font-bold text-purple-800">Download Spreadsheet Template</h4>
                <p class="text-[10px] text-slate-500 leading-normal">Download our standard pre-formatted Excel template structure to quickly organize your guest names, phone numbers, and categories.</p>
                <a href="<?= url("/app/{$role}/guests/template") ?>" class="btn btn-secondary w-full py-2 text-center text-xs font-bold block transition-all flex items-center justify-center gap-1.5">
                    <i class="fa-solid fa-download"></i> Get Template File
                </a>
            </div>

            <!-- Format Guidelines -->
            <div class="card p-5 space-y-4 text-xs leading-relaxed text-slate-650">
                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-wider">Format Guidelines</h3>
                
                <div class="space-y-2">
                    <p class="font-bold text-slate-700">Supported Headers</p>
                    <ul class="list-disc pl-4 space-y-1.5 text-slate-500 text-[11px]">
                        <li><strong>Guest Name *</strong> (Required): full name of the guest</li>
                        <li><strong>Phone Number</strong>: WhatsApp-compatible contact format</li>
                        <li><strong>Category</strong>: guest category description</li>
                        <li><strong>Group</strong>: family, relatives, friends, colleagues, church, business_partners, vip, others</li>
                        <li><strong>Address</strong>: physical address text</li>
                        <li><strong>Seat Number</strong>: table or seat allocation</li>
                        <li><strong>Pax</strong>: number of invited seats (defaults to 1)</li>
                    </ul>
                </div>

                <div class="border-t border-slate-100 pt-3">
                    <p class="font-bold text-slate-700">Validation Notice</p>
                    <ul class="list-disc pl-4 space-y-1 text-slate-500 text-[11px]">
                        <li>Duplicate guest names or phone numbers are filtered out.</li>
                        <li>Invalid phone number formats or positive integer boundaries for Pax are highlighted in the report prior to import.</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    document.getElementById('guest_file').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            document.getElementById('file-name-span').textContent = file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
            document.getElementById('file-info-bar').style.display = 'flex';
        }
    });

    function resetFile() {
        document.getElementById('guest_file').value = '';
        document.getElementById('file-info-bar').style.display = 'none';
    }
</script>
