<div class="channel-row" style="background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:12px; padding:18px 20px; position:relative; display:flex; flex-direction:column; gap:14px;">
    <input type="hidden" name="channels[<?= $index ?>][id]" value="<?= h($channel['id'] ?? '') ?>">

    <!-- Remover -->
    <button type="button" onclick="this.closest('.channel-row').remove()" title="Remover canal" style="position:absolute;top:14px;right:14px;background:transparent;border:none;padding:6px;border-radius:8px;cursor:pointer;color:#cbd5e1;transition:all .15s;" onmouseover="this.style.background='#fee2e2';this.style.color='#ef4444';" onmouseout="this.style.background='transparent';this.style.color='#cbd5e1';">
        <svg width="16" height="16" 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"/></svg>
    </button>

    <div style="display:grid; grid-template-columns: 200px 1fr; gap:14px; padding-right:32px;">
        <div class="field-wrap">
            <label class="field-label">Tipo</label>
            <select name="channels[<?= $index ?>][type]" class="field-input" style="padding:9px 12px;" onchange="updateChannelHint(this)">
                <option value="email"    <?= (($channel['type'] ?? '') === 'email')    ? 'selected' : '' ?>>📧 E-mail</option>
                <option value="webhook"  <?= (($channel['type'] ?? '') === 'webhook')  ? 'selected' : '' ?>>🔗 Webhook</option>
                <option value="whatsapp" <?= (($channel['type'] ?? '') === 'whatsapp') ? 'selected' : '' ?>>💬 WhatsApp</option>
                <option value="telegram" <?= (($channel['type'] ?? '') === 'telegram') ? 'selected' : '' ?>>✈️ Telegram</option>
                <option value="sms"      <?= (($channel['type'] ?? '') === 'sms')      ? 'selected' : '' ?>>📱 SMS</option>
            </select>
        </div>
        <div class="field-wrap">
            <label class="field-label">Destino / Endpoint</label>
            <input type="text" name="channels[<?= $index ?>][target]" value="<?= h($channel['target'] ?? '') ?>" placeholder="e-mail, URL do webhook, número, chat_id..." class="field-input">
            <span class="field-hint channel-hint" style="font-size:.75rem;color:#94a3b8;">
                <?php
                $t = $channel['type'] ?? 'email';
                if ($t === 'telegram') echo 'Chat ID do Telegram (use @userinfobot para descobrir). Bot Token configurado em Administração → Configurações.';
                elseif ($t === 'webhook') echo 'URL completa do endpoint (ex: https://n8n.meusite.com/webhook/...)';
                elseif ($t === 'whatsapp') echo 'Número com DDI (ex: +5511999999999)';
                elseif ($t === 'sms') echo 'Número com DDI (ex: +5511999999999)';
                else echo 'Endereço de e-mail para receber os alertas.';
                ?>
            </span>
        </div>
    </div>

    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:14px;">
        <div class="field-wrap">
            <label class="field-label">Min. falhas p/ disparar</label>
            <input type="number" name="channels[<?= $index ?>][min_failures]" min="1" value="<?= h($channel['min_failures'] ?? 1) ?>" class="field-input" style="padding:8px 12px;">
        </div>
        <div class="field-wrap">
            <label class="field-label">Cooldown <span class="badge">min</span></label>
            <input type="number" name="channels[<?= $index ?>][cooldown_minutes]" min="0" value="<?= h($channel['cooldown_minutes'] ?? 0) ?>" class="field-input" style="padding:8px 12px;">
        </div>
        <div class="field-wrap">
            <label class="field-label">Silêncio início</label>
            <input type="time" name="channels[<?= $index ?>][silence_start]" value="<?= h(substr((string)($channel['silence_start'] ?? ''), 0, 5)) ?>" class="field-input" style="padding:8px 12px;">
        </div>
        <div class="field-wrap">
            <label class="field-label">Silêncio fim</label>
            <input type="time" name="channels[<?= $index ?>][silence_end]" value="<?= h(substr((string)($channel['silence_end'] ?? ''), 0, 5)) ?>" class="field-input" style="padding:8px 12px;">
        </div>
    </div>

    <div style="display:flex; gap:20px; flex-wrap:wrap;">
        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
            <input type="checkbox" name="channels[<?= $index ?>][active]" <?= (($channel['active'] ?? 1) ? 'checked' : '') ?> style="width:16px;height:16px;accent-color:#3b82f6;margin:0;">
            <span style="font-size:.88rem;font-weight:600;color:#374151;">Canal ativo</span>
        </label>
        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
            <input type="checkbox" name="channels[<?= $index ?>][notify_recovery]" <?= (($channel['notify_recovery'] ?? 1) ? 'checked' : '') ?> style="width:16px;height:16px;accent-color:#22c55e;margin:0;">
            <span style="font-size:.88rem;font-weight:600;color:#374151;">Notificar recuperação</span>
        </label>
    </div>
</div>
<script>
function updateChannelHint(sel) {
    const row = sel.closest('.channel-row');
    const hint = row.querySelector('.channel-hint');
    const input = row.querySelector('input[name*="[target]"]');
    const hints = {
        email: 'Endereço de e-mail para receber os alertas.',
        webhook: 'URL completa do endpoint (ex: https://n8n.meusite.com/webhook/...)',
        whatsapp: 'Número com DDI (ex: +5511999999999)',
        telegram: 'Chat ID do Telegram (use @userinfobot para descobrir). Bot Token configurado em Administração → Configurações.',
        sms: 'Número com DDI (ex: +5511999999999)'
    };
    const placeholders = {
        email: 'alertas@empresa.com',
        webhook: 'https://n8n.meusite.com/webhook/abc123',
        whatsapp: '+5511999999999',
        telegram: '-100123456789  ou  @meucanal',
        sms: '+5511999999999'
    };
    if (hint) hint.textContent = hints[sel.value] || '';
    if (input) input.placeholder = placeholders[sel.value] || '';
}
</script>
