<?php
$folderOptions = contact_folder_options();
$selectedContacts = $contactsByFolder[$folder] ?? [];
$baseParams = array_filter(['token' => $token]);
?>
<main class="container py-4 py-md-5">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <span class="badge text-bg-warning text-dark rounded-pill px-3 py-2 mb-2">Painel do Instrutor</span>
            <h1 class="h3 fw-bold text-cfc-dark mb-1"><i class="bi bi-folder2-open"></i> Pasta de contatos</h1>
            <p class="text-muted mb-0">Organize seus contatos em Alunos, Trabalho e Outros.</p>
        </div>
        <a class="btn btn-outline-primary rounded-pill" href="<?= e(url('professional/panel', $baseParams)) ?>"><i class="bi bi-arrow-left"></i> Voltar ao painel</a>
    </div>

    <div class="row g-3 mb-4">
        <?php foreach ($folderOptions as $folderKey => $folderLabel): ?>
            <?php $count = count($contactsByFolder[$folderKey] ?? []); ?>
            <div class="col-md-4">
                <a class="text-decoration-none" href="<?= e(url('professional/contacts', array_merge($baseParams, ['folder'=>$folderKey]))) ?>">
                    <div class="card border-0 shadow-soft rounded-4 h-100 contact-folder-card <?= $folder === $folderKey ? 'contact-folder-card-active' : '' ?>">
                        <div class="card-body p-4 d-flex align-items-center gap-3">
                            <span class="contact-folder-icon"><i class="bi <?= e(contact_folder_icon($folderKey)) ?>"></i></span>
                            <div class="flex-grow-1"><h2 class="h5 fw-bold mb-1 text-cfc-dark"><?= e($folderLabel) ?></h2><span class="text-muted"><?= $count ?> contato(s)</span></div>
                            <i class="bi bi-chevron-right fs-4 text-muted"></i>
                        </div>
                    </div>
                </a>
            </div>
        <?php endforeach; ?>
    </div>

    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card border-0 shadow-soft rounded-4 h-100">
                <div class="card-body p-4">
                    <h2 class="h5 fw-bold mb-3"><i class="bi bi-person-plus"></i> Criar contato em <?= e(contact_folder_label($folder)) ?></h2>
                    <form method="post" action="<?= e(url('professional/contacts/save')) ?>" class="row g-3 js-mask-form">
                        <?= CSRF::input() ?>
                        <input type="hidden" name="token" value="<?= e($token) ?>">
                        <input type="hidden" name="folder" value="<?= e($folder) ?>">
                        <input type="hidden" name="category" value="<?= e($folder) ?>">
                        <div class="col-12"><label class="form-label">Nome</label><input name="name" class="form-control" maxlength="160" required></div>
                        <div class="col-12"><label class="form-label">WhatsApp</label><input name="whatsapp" class="form-control whatsapp-mask" inputmode="tel" placeholder="(00) 00000-0000" required></div>
                        <div class="col-12"><label class="form-label">Observação <span class="text-muted">(opcional)</span></label><textarea name="notes" rows="3" class="form-control"></textarea></div>
                        <div class="col-12"><button class="btn btn-success rounded-pill w-100"><i class="bi bi-folder-plus"></i> Salvar na pasta <?= e(contact_folder_label($folder)) ?></button></div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card border-0 shadow-soft rounded-4 h-100">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center gap-3 mb-3">
                        <h2 class="h5 fw-bold mb-0"><i class="bi <?= e(contact_folder_icon($folder)) ?>"></i> Contatos de <?= e(contact_folder_label($folder)) ?></h2>
                        <span class="badge text-bg-light border rounded-pill"><?= count($selectedContacts) ?> contato(s)</span>
                    </div>
                    <?php if (!$selectedContacts): ?>
                        <div class="alert alert-light border rounded-4 mb-0">Esta pasta ainda está vazia. Use o formulário ao lado para criar o primeiro contato.</div>
                    <?php else: ?>
                        <div class="list-group list-group-flush">
                            <?php foreach ($selectedContacts as $contact): ?>
                                <div class="list-group-item px-0 py-3 d-flex flex-column flex-sm-row align-items-sm-center gap-3">
                                    <span class="contact-avatar"><i class="bi bi-person"></i></span>
                                    <div class="flex-grow-1">
                                        <strong class="d-block"><?= e($contact['name']) ?></strong>
                                        <span class="text-muted"><?= e(format_whatsapp($contact['whatsapp'])) ?></span>
                                        <?php if (!empty($contact['notes'])): ?><small class="d-block text-muted mt-1"><?= e($contact['notes']) ?></small><?php endif; ?>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <a target="_blank" class="btn btn-success rounded-pill" href="<?= e(whatsapp_url($contact['whatsapp'], 'Olá, tudo bem?')) ?>"><i class="bi bi-whatsapp"></i> Conversar</a>
                                        <form method="post" action="<?= e(url('professional/contacts/delete')) ?>" onsubmit="return confirm('Apagar este contato?');">
                                            <?= CSRF::input() ?><input type="hidden" name="token" value="<?= e($token) ?>"><input type="hidden" name="folder" value="<?= e($folder) ?>"><input type="hidden" name="contact_id" value="<?= (int)$contact['id'] ?>">
                                            <button class="btn btn-outline-danger rounded-pill" title="Apagar"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

<script>
document.querySelectorAll('.whatsapp-mask').forEach(function(input) {
    input.addEventListener('input', function() {
        let v = input.value.replace(/\D/g, '').slice(0, 11);
        if (v.length > 10) v = v.replace(/^(\d{2})(\d{5})(\d{0,4}).*/, '($1) $2-$3');
        else if (v.length > 6) v = v.replace(/^(\d{2})(\d{4})(\d{0,4}).*/, '($1) $2-$3');
        else if (v.length > 2) v = v.replace(/^(\d{2})(\d{0,5})/, '($1) $2');
        else if (v.length > 0) v = v.replace(/^(\d*)/, '($1');
        input.value = v;
    });
});
</script>
</main>
