{% extends "base.html" %}

{% block page_title %}Notification Preferences{% endblock %}

{% block content %}
<div class="max-w-3xl">

    {# Page header #}
    <div class="flex items-center justify-between mb-6">
        <div>
            <div class="flex items-center gap-3">
                <a href="{% url 'notifications:list' %}" class="text-stone-400 hover:text-stone-600 transition-colors duration-150">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </a>
                <h2 class="text-xl font-semibold text-stone-900 tracking-tight">Notification Preferences</h2>
            </div>
            <p class="text-sm text-stone-500 mt-1 ml-8">Choose which notifications you receive and how.</p>
        </div>
    </div>

    <form method="post" action="{% url 'notifications:preferences' %}">
        {% csrf_token %}

        {# Channel toggles matrix #}
        <div class="bg-white border border-stone-200 rounded-xl overflow-hidden shadow-[0_1px_2px_rgba(23,20,18,0.05)] mb-5">
            <div class="px-5 py-4 border-b border-stone-100 bg-stone-50/50">
                <h3 class="text-[13px] font-semibold text-stone-900">Event Channels</h3>
                <p class="text-xs text-stone-500 mt-0.5">Toggle delivery channels for each event type.</p>
            </div>

            {# Table header #}
            <div class="grid grid-cols-[1fr_80px_80px_80px] gap-0 px-5 py-2.5 border-b border-stone-100 bg-stone-50/30">
                <div class="text-[10px] font-bold text-stone-400 uppercase tracking-widest">Event</div>
                {% for ch_value, ch_label in channel_choices %}
                <div class="text-[10px] font-bold text-stone-400 uppercase tracking-widest text-center">{{ ch_label }}</div>
                {% endfor %}
            </div>

            {# Rows #}
            {% for row in matrix %}
            <div class="grid grid-cols-[1fr_80px_80px_80px] gap-0 px-5 py-3 border-b border-stone-50 last:border-b-0 hover:bg-stone-50/50 transition-colors duration-100 items-center">
                <div class="text-[13px] text-stone-700 font-medium pr-4">{{ row.event_label }}</div>
                {% for toggle in row.channel_toggles %}
                <div class="flex justify-center">
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input
                            type="checkbox"
                            name="{{ toggle.field_name }}"
                            {% if toggle.enabled %}checked{% endif %}
                            class="sr-only peer"
                        >
                        <div class="w-8 h-[18px] bg-stone-200 rounded-full peer peer-checked:bg-orange-500 peer-focus-visible:ring-2 peer-focus-visible:ring-orange-200 transition-colors duration-200 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-[14px] after:w-[14px] after:shadow-sm after:transition-transform after:duration-200 peer-checked:after:translate-x-[14px]"></div>
                    </label>
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>

        {# Quiet hours & digest #}
        <div class="bg-white border border-stone-200 rounded-xl overflow-hidden shadow-[0_1px_2px_rgba(23,20,18,0.05)] mb-5" x-data="{ quietEnabled: {{ quiet_hours.is_enabled|yesno:'true,false' }} }">
            <div class="px-5 py-4 border-b border-stone-100 bg-stone-50/50">
                <h3 class="text-[13px] font-semibold text-stone-900">Quiet Hours & Digest</h3>
                <p class="text-xs text-stone-500 mt-0.5">Suppress non-critical notifications during specific hours.</p>
            </div>

            <div class="p-5 space-y-5">
                {# Quiet hours toggle #}
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-[13px] font-semibold text-stone-900">Enable quiet hours</p>
                        <p class="text-xs text-stone-500 mt-0.5">Non-critical notifications are held until quiet hours end.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input
                            type="checkbox"
                            name="quiet_hours_enabled"
                            {% if quiet_hours.is_enabled %}checked{% endif %}
                            class="sr-only peer"
                            x-model="quietEnabled"
                        >
                        <div class="w-9 h-5 bg-stone-200 rounded-full peer peer-checked:bg-orange-500 peer-focus-visible:ring-2 peer-focus-visible:ring-orange-200 transition-colors duration-200 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:shadow-sm after:transition-transform after:duration-200 peer-checked:after:translate-x-4"></div>
                    </label>
                </div>

                {# Time range - shown when quiet hours enabled #}
                <div x-show="quietEnabled" x-collapse class="space-y-4 pl-0">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="quiet-start" class="block text-xs font-semibold text-stone-600 mb-1.5">Start time</label>
                            <input
                                type="time"
                                name="quiet_hours_start"
                                id="quiet-start"
                                value="{{ quiet_hours.start_time|default_if_none:'' }}"
                                class="form-datetime"
                            >
                        </div>
                        <div>
                            <label for="quiet-end" class="block text-xs font-semibold text-stone-600 mb-1.5">End time</label>
                            <input
                                type="time"
                                name="quiet_hours_end"
                                id="quiet-end"
                                value="{{ quiet_hours.end_time|default_if_none:'' }}"
                                class="form-datetime"
                            >
                        </div>
                    </div>
                    <div>
                        <label for="quiet-tz" class="block text-xs font-semibold text-stone-600 mb-1.5">Timezone</label>
                        <input
                            type="text"
                            name="quiet_hours_timezone"
                            id="quiet-tz"
                            value="{{ quiet_hours.timezone }}"
                            placeholder="e.g. America/New_York"
                            class="w-full text-[13px] text-stone-700 bg-stone-50 border border-stone-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-orange-200 focus:border-orange-500 transition-all duration-150 font-mono"
                        >
                        <p class="text-[11px] text-stone-400 mt-1">IANA timezone identifier. Leave as UTC if unsure.</p>
                    </div>
                </div>

                {# Divider #}
                <div class="border-t border-stone-100"></div>

                {# Digest mode #}
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-[13px] font-semibold text-stone-900">Daily digest</p>
                        <p class="text-xs text-stone-500 mt-0.5">Batch email notifications into a single daily summary instead of individual emails.</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input
                            type="checkbox"
                            name="digest_mode"
                            {% if quiet_hours.digest_mode %}checked{% endif %}
                            class="sr-only peer"
                        >
                        <div class="w-9 h-5 bg-stone-200 rounded-full peer peer-checked:bg-orange-500 peer-focus-visible:ring-2 peer-focus-visible:ring-orange-200 transition-colors duration-200 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:shadow-sm after:transition-transform after:duration-200 peer-checked:after:translate-x-4"></div>
                    </label>
                </div>
            </div>
        </div>

        {# Save button #}
        <div class="flex justify-end">
            <button
                type="submit"
                class="inline-flex items-center gap-2 px-6 py-2.5 text-[13px] font-semibold text-white bg-orange-500 rounded-full hover:bg-orange-600 transition-all duration-150 shadow-[0_4px_14px_rgba(249,115,22,0.28)] hover:shadow-[0_6px_20px_rgba(249,115,22,0.35)] hover:-translate-y-px"
            >
                Save Preferences
            </button>
        </div>
    </form>

</div>
{% endblock %}