{% extends "base.html" %}
{% block title %}Integrations — Jadwa AI{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-12">
    <div class="mb-8">
        <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">INTEGRATIONS & WEBHOOKS</div>
        <h1 class="text-2xl font-bold text-white">التكاملات والأتمتة</h1>
    </div>

    <div class="grid md:grid-cols-3 gap-4 mb-10">
        {% for key, name, url, desc in platforms %}
        <div class="glass p-5 rounded-xl border border-white/10">
            <div class="text-white font-semibold mb-1">{{ name }}</div>
            <p class="text-xs text-slate-400 mb-3">{{ desc }}</p>
            {% if key == 'n8n' %}
            <a href="{{ url_for('integrations.n8n_setup') }}" class="text-xs text-gold-400 hover:underline">Setup Guide &rarr;</a>
            {% elif key == 'zapier' %}
            <a href="{{ url_for('integrations.zapier_setup') }}" class="text-xs text-gold-400 hover:underline">Setup Guide &rarr;</a>
            {% else %}
            <a href="{{ url }}" target="_blank" class="text-xs text-blue-400 hover:underline">{{ url }} &rarr;</a>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <div class="glass p-5 rounded-xl border border-white/10 mb-8">
        <h3 class="text-white font-semibold mb-4">إضافة Webhook جديد</h3>
        <form method="POST" action="{{ url_for('integrations.create_webhook') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="grid md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="text-xs text-slate-400 block mb-1">الاسم</label>
                    <input name="name" placeholder="My Zapier Hook" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                </div>
                <div>
                    <label class="text-xs text-slate-400 block mb-1">Webhook URL</label>
                    <input name="url" type="url" required placeholder="https://hooks.zapier.com/..." class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                </div>
            </div>
            <div class="mb-4">
                <label class="text-xs text-slate-400 block mb-1">Secret (HMAC-SHA256 signing, optional)</label>
                <input name="secret" placeholder="optional-signing-secret" class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            </div>
            <div class="mb-4">
                <label class="text-xs text-slate-400 block mb-2">الأحداث (Events)</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                    {% for ev in events %}
                    <label class="flex items-center gap-2 text-xs text-slate-300">
                        <input type="checkbox" name="events" value="{{ ev }}" class="rounded border-white/20 bg-white/5 text-gold-500">
                        {{ ev }}
                    </label>
                    {% endfor %}
                </div>
            </div>
            <button type="submit" class="bg-gold-500/20 border border-gold-500/30 text-gold-400 px-5 py-2 rounded-lg text-sm font-medium hover:bg-gold-500/30 transition">إنشاء Webhook</button>
        </form>
    </div>

    <div class="space-y-3">
        {% for wh in webhooks %}
        <div class="glass p-4 rounded-xl border border-white/10 flex items-center justify-between">
            <div>
                <div class="text-white font-medium text-sm">{{ wh.name }}</div>
                <div class="text-xs text-slate-500">{{ wh.url[:60] }}... • {{ (wh.events or [])|length }} events</div>
            </div>
            <div class="flex items-center gap-2">
                <span class="text-xs px-2 py-0.5 rounded-full {{ 'bg-emerald-500/20 text-emerald-400' if wh.is_active else 'bg-red-500/20 text-red-400' }}">{{ 'Active' if wh.is_active else 'Inactive' }}</span>
                <form method="POST" action="{{ url_for('integrations.toggle_webhook', wh_id=wh.id) }}" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button class="text-xs text-slate-400 hover:text-white">Toggle</button>
                </form>
                <form method="POST" action="{{ url_for('integrations.test_webhook', wh_id=wh.id) }}" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button class="text-xs text-blue-400 hover:text-blue-300">Test</button>
                </form>
                <form method="POST" action="{{ url_for('integrations.delete_webhook', wh_id=wh.id) }}" class="inline">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button class="text-xs text-red-400 hover:text-red-300">Delete</button>
                </form>
            </div>
        </div>
        {% else %}
        <div class="text-center py-8 text-slate-500">لا توجد Webhooks بعد</div>
        {% endfor %}
    </div>

    <div class="mt-6">
        <a href="{{ url_for('integrations.activity_feed') }}" class="text-sm text-gold-400 hover:underline">Activity Feed &rarr;</a>
    </div>
</div>
{% endblock %}