<div class="p-8 max-w-7xl mx-auto space-y-8">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white tracking-tight">Automation & Chatbots</h1>
            <p class="text-slate-400 text-xs">Configure keyword triggers, welcome auto-responders, and business working hours.</p>
        </div>
        <button onclick="document.getElementById('create-rule-modal').classList.remove('hidden')" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 text-xs font-bold px-4 py-2.5 rounded-xl shadow-lg shadow-emerald-500/20 transition flex items-center space-x-1.5">
            <i class="fa-solid fa-plus text-xs"></i>
            <span>Create Bot Rule</span>
        </button>
    </div>

    <!-- Working Hours Card -->
    <div class="bg-slate-900 border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800/80 pb-3">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center text-amber-400 text-lg">
                    <i class="fa-solid fa-business-time"></i>
                </div>
                <div>
                    <h3 class="font-bold text-white text-sm">Business Working Hours & Out-of-Office Bot</h3>
                    <p class="text-xs text-slate-400">Automatically reply to leads when contacted outside official support hours.</p>
                </div>
            </div>
        </div>

        <form method="POST" action="/automations/working-hours" class="space-y-4">
            <div class="flex items-center space-x-3">
                <input type="checkbox" id="working_hours_enabled" name="working_hours_enabled" value="1" <?= ($workingHours['enabled'] == '1') ? 'checked' : '' ?>
                       class="w-4 h-4 rounded text-emerald-500 bg-slate-950 border-slate-800 focus:ring-emerald-500">
                <label for="working_hours_enabled" class="text-xs font-semibold text-white">Enable Out-of-Office Automatic Reply</label>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Working Hours Start</label>
                    <input type="time" name="working_hours_start" value="<?= htmlspecialchars($workingHours['start']) ?>" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Working Hours End</label>
                    <input type="time" name="working_hours_end" value="<?= htmlspecialchars($workingHours['end']) ?>" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
            </div>

            <div>
                <label class="block text-xs text-slate-400 mb-1">Out-of-Office Automated Reply Message</label>
                <textarea name="out_of_office_reply" rows="2" class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-white focus:outline-none focus:border-emerald-500 resize-none"><?= htmlspecialchars($workingHours['reply']) ?></textarea>
            </div>

            <button type="submit" class="bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold py-2 px-4 rounded-xl transition">
                Save Working Hours
            </button>
        </form>
    </div>

    <!-- Active Bot Rules Grid -->
    <div class="space-y-4">
        <h3 class="font-bold text-white text-base">Active Bot & Keyword Rules</h3>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <?php foreach ($rules as $rule): ?>
                <div class="bg-slate-900 border border-slate-800 rounded-3xl p-5 shadow-xl space-y-3 relative group">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2">
                            <span class="w-2.5 h-2.5 rounded-full <?= $rule['is_active'] ? 'bg-emerald-500 shadow-sm shadow-emerald-500/50' : 'bg-slate-600' ?>"></span>
                            <h4 class="font-bold text-white text-sm"><?= htmlspecialchars($rule['name']) ?></h4>
                        </div>
                        <div class="flex items-center space-x-2">
                            <form method="POST" action="/automations/<?= $rule['id'] ?>/toggle">
                                <button type="submit" class="text-xs px-2.5 py-1 rounded-lg font-semibold transition <?= $rule['is_active'] ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-slate-800 text-slate-400' ?>">
                                    <?= $rule['is_active'] ? 'Active' : 'Paused' ?>
                                </button>
                            </form>
                            <form method="POST" action="/automations/<?= $rule['id'] ?>/delete" onsubmit="return confirm('Delete this rule?');">
                                <button type="submit" class="p-1 text-slate-500 hover:text-red-400 rounded transition">
                                    <i class="fa-solid fa-trash-can text-xs"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="bg-slate-950/70 p-3 rounded-2xl border border-slate-800/80 space-y-2 text-xs">
                        <div class="flex items-center justify-between text-slate-400">
                            <span>Trigger:</span>
                            <span class="font-mono text-purple-300 font-semibold"><?= htmlspecialchars($rule['trigger_event']) ?></span>
                        </div>
                        <?php if ($rule['trigger_keyword']): ?>
                            <div class="flex items-center justify-between text-slate-400">
                                <span>Keywords:</span>
                                <span class="font-mono text-amber-300"><?= htmlspecialchars($rule['trigger_keyword']) ?></span>
                            </div>
                        <?php endif; ?>
                        <?php if ($rule['action_type'] !== 'none'): ?>
                            <div class="flex items-center justify-between text-slate-400">
                                <span>Action:</span>
                                <span class="text-blue-400 font-semibold"><?= htmlspecialchars($rule['action_type']) ?> (<?= htmlspecialchars($rule['action_value'] ?? '') ?>)</span>
                            </div>
                        <?php endif; ?>
                    </div>

                    <div>
                        <span class="text-[10px] uppercase font-semibold text-slate-500 block mb-1">Bot Automated Response</span>
                        <p class="text-xs text-slate-300 bg-slate-950 p-2.5 rounded-xl border border-slate-800/60 leading-relaxed"><?= htmlspecialchars($rule['reply_content']) ?></p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

</div>

<!-- Create Rule Modal -->
<div id="create-rule-modal" class="hidden fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-3xl max-w-lg w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-slate-800 pb-3">
            <h3 class="font-bold text-white text-base">New Automation Rule</h3>
            <button onclick="document.getElementById('create-rule-modal').classList.add('hidden')" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <form method="POST" action="/automations" class="space-y-4">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Rule Name</label>
                <input type="text" name="name" required placeholder="e.g. Pricing Keyword Bot" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Trigger Event</label>
                    <select name="trigger_event" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        <option value="message_contains">Message Contains Keywords</option>
                        <option value="message_exact">Message Exactly Matches</option>
                        <option value="welcome_new_contact">First Message from New Lead</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Keywords (comma separated)</label>
                    <input type="text" name="trigger_keyword" placeholder="price, quote, plans" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Action Type</label>
                    <select name="action_type" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                        <option value="none">No Action (Reply Only)</option>
                        <option value="add_tag">Add Tag</option>
                        <option value="move_stage">Move Deal Stage</option>
                        <option value="assign_agent">Assign Agent</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">Action Target Value (ID)</label>
                    <input type="text" name="action_value" placeholder="Tag ID / Stage ID / Agent ID" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-emerald-500">
                </div>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Automated WhatsApp Response Text (supports {{name}}, {{company}})</label>
                <textarea name="reply_content" rows="3" required placeholder="Hello {{name}}, thank you for reaching out..." class="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-white focus:outline-none focus:border-emerald-500 resize-none"></textarea>
            </div>
            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-bold py-2.5 rounded-xl transition">
                Create Automation Rule
            </button>
        </form>
    </div>
</div>
