{% extends "layouts/base.html" %}
{% from "components/ui/card.html" import card, card_header, card_title, card_description, card_content, card_footer %}
{% from "components/ui/button.html" import button %}
{% from "components/ui/alert.html" import alert, alert_title, alert_description %}
{% from "components/ui/input.html" import input, label, form_group %}

{% block title %}Mail Sources - DMARQ{% endblock %}

{% block page_title %}Mail Sources{% endblock %}

{% block content %}
<div class="grid gap-4 md:gap-8 py-4" x-data="mailSourcesApp()">

    <!-- Page header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold">Mail Sources</h1>
            <p class="text-muted-foreground mt-1">
                Manage inbox accounts used to automatically retrieve DMARC reports.
                Multiple accounts and connection methods (IMAP, POP3, Gmail API, Microsoft 365) are supported.
            </p>
        </div>
        <button class="btn btn-default btn-md" x-on:click="openAddForm()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Add Mail Source
        </button>
    </div>

    <!-- Feedback alerts -->
    <template x-if="feedback.message && feedback.type === 'success'">
        {% call alert(variant="success") %}
            {% call alert_description() %}
                <span x-text="feedback.message"></span>
                <div class="mt-2 text-xs" x-show="feedback.diagnostic_summary" x-text="feedback.diagnostic_summary"></div>
            {% endcall %}
        {% endcall %}
    </template>
    <template x-if="feedback.message && feedback.type === 'error'">
        {% call alert(variant="error") %}
            {% call alert_description() %}
                <span x-text="feedback.message"></span>
                <div class="mt-2 text-xs font-medium" x-show="feedback.diagnostic_summary" x-text="feedback.diagnostic_summary"></div>
                <ul class="mt-2 list-disc pl-5 text-xs space-y-1" x-show="feedback.recovery_steps && feedback.recovery_steps.length">
                    <template x-for="step in feedback.recovery_steps" :key="step">
                        <li x-text="step"></li>
                    </template>
                </ul>
            {% endcall %}
        {% endcall %}
    </template>

    <!-- Sources list -->
    {% call card() %}
        {% call card_header() %}
            {% call card_title() %}Configured Accounts{% endcall %}
            {% call card_description() %}Click a row to edit. Use the toggle to enable or disable polling for an account.{% endcall %}
        {% endcall %}
        {% call card_content() %}
            <template x-if="sources.length === 0">
                <p class="text-muted-foreground text-sm py-4 text-center">
                    No mail sources configured yet. Click <strong>Add Mail Source</strong> to get started.
                </p>
            </template>
            <template x-if="sources.length > 0">
                <div class="overflow-x-auto">
                    <table class="table w-full">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Method</th>
                                <th>Server / Account</th>
                                <th>User / Status</th>
                                <th>Last Checked</th>
                                <th>Enabled</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="source in sources" :key="source.id">
                                <tr class="hover">
                                    <td x-text="source.name" class="font-medium"></td>
                                    <td>
                                        <span class="badge badge-outline" x-text="source.method"></span>
                                    </td>
                                    <td x-text="sourceAccountLabel(source)"></td>
                                    <td x-text="sourceStatusLabel(source)"></td>
                                    <td x-text="source.last_checked ? new Date(source.last_checked).toLocaleString() : 'Never'"></td>
                                    <td>
                                        <input
                                            type="checkbox"
                                            class="toggle toggle-success toggle-sm"
                                            :checked="source.enabled"
                                            x-on:change="toggleSource(source.id)"
                                        />
                                    </td>
                                    <td>
                                        <div class="flex items-center gap-2">
                                            <button class="btn btn-ghost btn-xs" x-on:click="openEditForm(source)" title="Edit">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round">
                                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                                </svg>
                                            </button>
                                            <button class="btn btn-ghost btn-xs" x-on:click="testSource(source.id)" title="Test connection"
                                                :disabled="testing[source.id]">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round">
                                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                                </svg>
                                            </button>
                                            <button class="btn btn-ghost btn-xs" x-on:click="fetchSource(source)" title="Run import now"
                                                :disabled="Boolean(fetching[source.id])">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round">
                                                    <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.8 1.04 6.43 2.72"></path>
                                                    <path d="M21 3v6h-6"></path>
                                                </svg>
                                            </button>
                                            <button class="btn btn-ghost btn-xs" x-on:click="openBackfill(source)" title="Backfill date range"
                                                :disabled="Boolean(fetching[source.id])">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round">
                                                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                                    <line x1="16" y1="2" x2="16" y2="6"></line>
                                                    <line x1="8" y1="2" x2="8" y2="6"></line>
                                                    <line x1="3" y1="10" x2="21" y2="10"></line>
                                                </svg>
                                            </button>
                                            <button class="btn btn-ghost btn-xs" x-on:click="loadImportHistory(source)" title="Import history">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round">
                                                    <circle cx="12" cy="12" r="10"></circle>
                                                    <polyline points="12 6 12 12 16 14"></polyline>
                                                </svg>
                                            </button>
                                            <button class="btn btn-ghost btn-xs text-error" x-on:click="confirmDelete(source)" title="Delete">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                    stroke-linejoin="round">
                                                    <polyline points="3 6 5 6 21 6"></polyline>
                                                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
                                                    <path d="M10 11v6"></path>
                                                    <path d="M14 11v6"></path>
                                                    <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </template>
        {% endcall %}
    {% endcall %}

    <!-- Import history -->
    <template x-if="historySource">
        {% call card() %}
            {% call card_header() %}
                <div class="flex items-start justify-between gap-4">
                    <div>
                        {% call card_title() %}Import History{% endcall %}
                        {% call card_description() %}
                            <span x-text="historySource ? `${historySource.name} • ${sourceTargetLabel(historySource)}` : ''"></span>
                        {% endcall %}
                    </div>
                    <button class="btn btn-ghost btn-sm" x-on:click="closeHistory()">Close</button>
                </div>
            {% endcall %}
            {% call card_content() %}
                <template x-if="historyLoading">
                    <p class="text-muted-foreground text-sm py-4 text-center">Loading import history…</p>
                </template>
                <template x-if="!historyLoading && importHistory.length === 0">
                    <p class="text-muted-foreground text-sm py-4 text-center">No import attempts recorded yet.</p>
                </template>
                <template x-if="!historyLoading && importHistory.length > 0">
                    <div class="overflow-x-auto">
                        <table class="table w-full">
                            <thead>
                                <tr>
                                    <th>Started</th>
                                    <th>Status</th>
                                    <th>Trigger</th>
                                    <th>Emails</th>
                                    <th>Reports</th>
                                    <th>Duplicates</th>
                                    <th>New Domains</th>
                                    <th>Errors</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="entry in importHistory" :key="entry.id">
                                    <tr>
                                        <td x-text="formatDate(entry.started_at)"></td>
                                        <td>
                                            <span class="badge" :class="statusBadgeClass(entry.status)" x-text="entry.status"></span>
                                        </td>
                                        <td x-text="entry.trigger"></td>
                                        <td x-text="entry.processed"></td>
                                        <td x-text="entry.reports_found"></td>
                                        <td x-text="entry.duplicate_reports"></td>
                                        <td x-text="formatList(entry.new_domains)"></td>
                                        <td>
                                            <template x-if="entry.errors && entry.errors.length">
                                                <details class="max-w-xs">
                                                    <summary class="cursor-pointer" x-text="`${entry.error_count} error${entry.error_count === 1 ? '' : 's'}`"></summary>
                                                    <ul class="list-disc pl-4 mt-2 text-xs space-y-1">
                                                        <template x-for="error in entry.errors" :key="error">
                                                            <li x-text="error"></li>
                                                        </template>
                                                    </ul>
                                                </details>
                                            </template>
                                            <template x-if="!entry.errors || entry.errors.length === 0">
                                                <span class="text-muted-foreground">None</span>
                                            </template>
                                        </td>
                                        <td>
                                            <template x-if="entry.details && entry.details.length">
                                                <details class="max-w-sm">
                                                    <summary class="cursor-pointer" x-text="formatDetailsSummary(entry.details)"></summary>
                                                    <div class="mt-2 space-y-2 text-xs">
                                                        <template x-for="detail in entry.details" :key="`${detail.status}-${detail.message_id || ''}-${detail.filename || ''}-${detail.report_id || ''}`">
                                                            <div class="rounded border border-base-300 p-2">
                                                                <div class="flex flex-wrap items-center gap-2">
                                                                    <span class="badge badge-sm" :class="detailBadgeClass(detail.status)" x-text="detail.status"></span>
                                                                    <span class="font-mono" x-show="detail.report_id" x-text="detail.report_id"></span>
                                                                </div>
                                                                <div class="mt-1 text-muted-foreground">
                                                                    <span x-show="detail.mailbox || detail.folder" x-text="`${detail.mailbox || 'mailbox'} / ${detail.folder || 'folder'}`"></span>
                                                                    <span x-show="(detail.mailbox || detail.folder) && (detail.filename || detail.domain || detail.reason || detail.error)"> • </span>
                                                                    <span x-show="detail.filename" x-text="detail.filename"></span>
                                                                    <span x-show="detail.domain" x-text="` • ${detail.domain}`"></span>
                                                                    <span x-show="detail.reason" x-text="` • ${(detail.reason || '').replaceAll('_', ' ')}`"></span>
                                                                    <span x-show="detail.error" x-text="` • ${detail.error}`"></span>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </div>
                                                </details>
                                            </template>
                                            <template x-if="!entry.details || entry.details.length === 0">
                                                <span class="text-muted-foreground">None</span>
                                            </template>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </template>
            {% endcall %}
        {% endcall %}
    </template>

    <!-- Add / Edit modal -->
    <div x-show="showForm" x-cloak
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
        x-on:keydown.escape.window="closeForm()">
        <div class="bg-base-100 rounded-lg shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <div class="p-6 space-y-4">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold" x-text="editingId ? 'Edit Mail Source' : 'Add Mail Source'"></h2>
                    <button class="btn btn-ghost btn-sm btn-circle" x-on:click="closeForm()">✕</button>
                </div>

                <form id="source-form" x-on:submit.prevent="saveSource()" class="space-y-4">

                    <!-- Name -->
                    <div>
                        <label class="label"><span class="label-text font-medium">Name <span class="text-error">*</span></span></label>
                        <input type="text" x-model="form.name" placeholder="e.g. DMARC Reports Inbox"
                            class="input input-bordered w-full" required />
                    </div>

                    <!-- Method -->
                    <div>
                        <label class="label"><span class="label-text font-medium">Method</span></label>
                        <select x-model="form.method" class="select select-bordered w-full">
                            <option value="IMAP">IMAP</option>
                            <option value="POP3">POP3 (coming soon)</option>
                            <option value="GMAIL_API">Gmail API (OAuth2)</option>
                            <option value="M365_GRAPH">Microsoft 365 (Graph OAuth2)</option>
                        </select>
                    </div>

                    <!-- Server + Port (IMAP / POP3) -->
                    <template x-if="form.method === 'IMAP' || form.method === 'POP3'">
                        <div class="grid grid-cols-3 gap-3">
                            <div class="col-span-2">
                                <label class="label"><span class="label-text font-medium">Server <span class="text-error">*</span></span></label>
                                <input type="text" x-model="form.server" placeholder="imap.example.com"
                                    class="input input-bordered w-full" />
                            </div>
                            <div>
                                <label class="label"><span class="label-text font-medium">Port</span></label>
                                <input type="number" x-model.number="form.port" class="input input-bordered w-full" />
                            </div>
                        </div>
                    </template>

                    <!-- Username -->
                    <template x-if="form.method === 'IMAP' || form.method === 'POP3'">
                        <div>
                            <label class="label"><span class="label-text font-medium">Username <span class="text-error">*</span></span></label>
                            <input type="text" x-model="form.username" placeholder="dmarc@example.com"
                                class="input input-bordered w-full" />
                        </div>
                    </template>

                    <!-- Password -->
                    <template x-if="form.method === 'IMAP' || form.method === 'POP3'">
                        <div>
                            <label class="label">
                                <span class="label-text font-medium">Password <span class="text-error">*</span></span>
                                <span class="label-text-alt text-muted-foreground" x-show="editingId">Leave blank to keep existing</span>
                            </label>
                            <div class="relative">
                                <input :type="showPassword ? 'text' : 'password'" x-model="form.password"
                                    class="input input-bordered w-full pr-10" />
                                <button type="button" class="absolute right-2 top-3 text-muted-foreground hover:text-foreground"
                                    x-on:click="showPassword = !showPassword">
                                    <svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
                                        <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
                                        <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
                                        <line x1="2" x2="22" y1="2" y2="22"></line>
                                    </svg>
                                    <svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" x-cloak>
                                        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
                                        <circle cx="12" cy="12" r="3"></circle>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </template>

                    <!-- SSL toggle -->
                    <template x-if="form.method === 'IMAP' || form.method === 'POP3'">
                        <div class="flex items-center gap-3">
                            <input type="checkbox" x-model="form.use_ssl" class="toggle toggle-sm" id="form-ssl" />
                            <label for="form-ssl" class="label-text">Use SSL/TLS (recommended)</label>
                        </div>
                    </template>

                    <!-- Folder -->
                    <template x-if="form.method === 'IMAP'">
                        <div>
                            <label class="label"><span class="label-text font-medium">Folder</span></label>
                            <input type="text" x-model="form.folder" placeholder="INBOX"
                                class="input input-bordered w-full" />
                        </div>
                    </template>

                    <!-- Gmail API fields -->
                    <template x-if="form.method === 'GMAIL_API'">
                        <div class="space-y-4">
                            <div class="alert alert-info text-sm p-3">
                                <div>
                                    <p class="font-semibold">Gmail API Setup</p>
                                    <p class="mt-1">Enter your Google OAuth2 Client ID and Secret from
                                    <a href="https://console.cloud.google.com/apis/credentials" target="_blank"
                                       class="underline">Google Cloud Console</a>.
                                    Enable the <strong>Gmail API</strong>, create an OAuth2 client (Web application),
                                    and add your callback URL as an authorised redirect URI.
                                    Then save this source and click <strong>Connect Gmail</strong> to authorise access.</p>
                                </div>
                            </div>

                            <div>
                                <label class="label"><span class="label-text font-medium">Google Client ID <span class="text-error">*</span></span></label>
                                <input type="text" x-model="form.gmail_client_id"
                                    placeholder="123456789-abc.apps.googleusercontent.com"
                                    class="input input-bordered w-full" />
                            </div>

                            <div>
                                <label class="label">
                                    <span class="label-text font-medium">Google Client Secret <span class="text-error">*</span></span>
                                    <span class="label-text-alt text-muted-foreground" x-show="editingId">Leave blank to keep existing</span>
                                </label>
                                <div class="relative">
                                    <input :type="showPassword ? 'text' : 'password'"
                                        x-model="form.gmail_client_secret"
                                        class="input input-bordered w-full pr-10"
                                        placeholder="GOCSPX-…" />
                                    <button type="button"
                                        class="absolute right-2 top-3 text-muted-foreground hover:text-foreground"
                                        x-on:click="showPassword = !showPassword">
                                        <svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                            <circle cx="12" cy="12" r="3"></circle>
                                        </svg>
                                        <svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"></path>
                                            <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"></path>
                                            <line x1="1" y1="1" x2="23" y2="23"></line>
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <!-- OAuth connection status (when editing) -->
                            <template x-if="editingId && gmailConnected">
                                <div class="alert alert-success text-sm p-3">
                                    <span>✅ Connected as <strong x-text="gmailEmail || 'Gmail account'"></strong></span>
                                </div>
                            </template>
                            <template x-if="editingId && !gmailConnected">
                                <div class="alert alert-warning text-sm p-3">
                                    <span>⚠️ Not yet authorised. Save this source first, then click <strong>Connect Gmail</strong>.</span>
                                </div>
                            </template>
                        </div>
                    </template>

                    <!-- Microsoft 365 Graph fields -->
                    <template x-if="form.method === 'M365_GRAPH'">
                        <div class="space-y-4">
                            <div class="alert alert-info text-sm p-3">
                                <div>
                                    <p class="font-semibold">Microsoft 365 Setup</p>
                                    <p class="mt-1">Enter an app registration Client ID and client secret from Microsoft Entra admin center. Add this app's callback URL as a Web redirect URI, then save and click <strong>Connect Microsoft 365</strong>.</p>
                                </div>
                            </div>

                            <div>
                                <label class="label"><span class="label-text font-medium">Tenant ID</span></label>
                                <input type="text" x-model="form.m365_tenant_id"
                                    placeholder="common, organizations, or tenant GUID"
                                    class="input input-bordered w-full" />
                            </div>

                            <div>
                                <label class="label"><span class="label-text font-medium">Microsoft Client ID <span class="text-error">*</span></span></label>
                                <input type="text" x-model="form.m365_client_id"
                                    placeholder="Application (client) ID"
                                    class="input input-bordered w-full" />
                            </div>

                            <div>
                                <label class="label">
                                    <span class="label-text font-medium">Microsoft Client Secret <span class="text-error">*</span></span>
                                    <span class="label-text-alt text-muted-foreground" x-show="editingId">Leave blank to keep existing</span>
                                </label>
                                <div class="relative">
                                    <input :type="showPassword ? 'text' : 'password'"
                                        x-model="form.m365_client_secret"
                                        class="input input-bordered w-full pr-10" />
                                    <button type="button"
                                        class="absolute right-2 top-3 text-muted-foreground hover:text-foreground"
                                        x-on:click="showPassword = !showPassword">
                                        <svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                            <circle cx="12" cy="12" r="3"></circle>
                                        </svg>
                                        <svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"></path>
                                            <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"></path>
                                            <line x1="1" y1="1" x2="23" y2="23"></line>
                                        </svg>
                                    </button>
                                </div>
                            </div>

                            <div>
                                <label class="label"><span class="label-text font-medium">Mailbox</span></label>
                                <input type="text" x-model="form.m365_mailbox"
                                    placeholder="Leave blank for the authorised account"
                                    class="input input-bordered w-full" />
                            </div>

                            <div>
                                <label class="label"><span class="label-text font-medium">Folder</span></label>
                                <div class="flex flex-col gap-2 md:flex-row">
                                    <select class="select select-bordered w-full md:flex-1"
                                        x-model="form.m365_folder_id"
                                        x-on:change="applyM365FolderSelection($event.target.value)">
                                        <option value="">Use folder name below</option>
                                        <template x-for="folder in m365Folders" :key="folder.id">
                                            <option :value="folder.id" x-text="folder.path || folder.display_name"></option>
                                        </template>
                                    </select>
                                    <button type="button" class="btn btn-outline"
                                        x-on:click="loadM365Folders()"
                                        :disabled="!editingId || !m365Connected || m365FoldersLoading">
                                        <span x-text="m365FoldersLoading ? 'Loading…' : 'Load folders'"></span>
                                    </button>
                                </div>
                                <input type="text" x-model="form.folder" placeholder="INBOX"
                                    x-on:input="form.m365_folder_id = ''"
                                    class="input input-bordered w-full mt-2" />
                                <p class="text-xs text-muted-foreground mt-1">Use a listed folder when available; otherwise enter a well-known folder such as INBOX.</p>
                                <p class="text-xs text-error mt-1" x-show="m365FoldersError" x-text="m365FoldersError"></p>
                            </div>

                            <template x-if="editingId && m365Connected">
                                <div class="alert alert-success text-sm p-3">
                                    <span>Connected as <strong x-text="m365Email || 'Microsoft 365 account'"></strong></span>
                                </div>
                            </template>
                            <template x-if="editingId && !m365Connected">
                                <div class="alert alert-warning text-sm p-3">
                                    <span>Not yet authorised. Save this source first, then click <strong>Connect Microsoft 365</strong>.</span>
                                </div>
                            </template>
                        </div>
                    </template>

                    <!-- Polling interval -->
                    <div>
                        <label class="label"><span class="label-text font-medium">Polling Interval (minutes)</span></label>
                        <input type="number" x-model.number="form.polling_interval" min="15" max="1440"
                            class="input input-bordered w-full" />
                        <p class="text-xs text-muted-foreground mt-1">How often to check for new reports (min 15 min)</p>
                    </div>

                    <!-- Enabled -->
                    <div class="flex items-center gap-3">
                        <input type="checkbox" x-model="form.enabled" class="toggle toggle-sm" id="form-enabled" />
                        <label for="form-enabled" class="label-text">Enable this mail source</label>
                    </div>

                    <!-- Test connection result -->
                    <template x-if="testResult.message">
                        <div :class="testResult.success ? 'alert alert-success' : 'alert alert-error'" class="text-sm p-3 rounded">
                            <div>
                                <span x-text="testResult.message"></span>
                                <div class="mt-2 text-xs font-medium" x-show="testResult.diagnostic_summary" x-text="testResult.diagnostic_summary"></div>
                                <ul class="mt-2 list-disc pl-5 text-xs space-y-1" x-show="testResult.recovery_steps && testResult.recovery_steps.length">
                                    <template x-for="step in testResult.recovery_steps" :key="step">
                                        <li x-text="step"></li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                    </template>

                    <!-- Form actions -->
                    <div class="flex justify-between pt-2">
                        <!-- Test Connection (IMAP/POP3) or Connect Gmail button -->
                        <div class="flex gap-2">
                            <template x-if="form.method !== 'GMAIL_API' && form.method !== 'M365_GRAPH'">
                                <button type="button" class="btn btn-outline btn-sm"
                                    x-on:click="testAdHoc()"
                                    :disabled="isTesting || isSaving">
                                    <span x-show="!isTesting">Test Connection</span>
                                    <span x-show="isTesting" class="flex items-center" x-cloak>
                                        <svg class="animate-spin h-4 w-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                        </svg>
                                        Testing...
                                    </span>
                                </button>
                            </template>
                            <template x-if="form.method === 'GMAIL_API' && editingId">
                                <button type="button" class="btn btn-outline btn-sm"
                                    x-on:click="connectGmail()"
                                    :disabled="isTesting || isSaving">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1">
                                        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                                    </svg>
                                    Connect Gmail
                                </button>
                            </template>
                            <template x-if="form.method === 'M365_GRAPH' && editingId">
                                <button type="button" class="btn btn-outline btn-sm"
                                    x-on:click="connectM365()"
                                    :disabled="isTesting || isSaving">
                                    Connect Microsoft 365
                                </button>
                            </template>
                        </div>
                        <div class="flex gap-2">
                            <button type="button" class="btn btn-ghost btn-sm" x-on:click="closeForm()">Cancel</button>
                            <button type="submit" class="btn btn-default btn-sm" :disabled="isSaving">
                                <span x-show="!isSaving" x-text="editingId ? 'Update' : 'Save'"></span>
                                <span x-show="isSaving" x-cloak>Saving…</span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Backfill modal -->
    <div x-show="backfillSource" x-cloak
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
        x-on:keydown.escape.window="closeBackfill()">
        <div class="bg-base-100 rounded-lg shadow-xl w-full max-w-sm p-6 space-y-4">
            <div class="flex items-center justify-between">
                <h2 class="text-lg font-semibold">Backfill Mail Source</h2>
                <button class="btn btn-ghost btn-sm btn-circle" x-on:click="closeBackfill()">✕</button>
            </div>
            <div class="space-y-3">
                <p class="text-sm text-muted-foreground" x-text="backfillSource ? backfillSource.name : ''"></p>
                <div class="join w-full">
                    <button type="button" class="btn btn-sm join-item flex-1" x-on:click="backfillDays = 7">7 days</button>
                    <button type="button" class="btn btn-sm join-item flex-1" x-on:click="backfillDays = 30">30 days</button>
                    <button type="button" class="btn btn-sm join-item flex-1" x-on:click="backfillDays = 90">90 days</button>
                </div>
                <label class="form-control">
                    <span class="label-text">Days to search</span>
                    <input type="number" class="input input-bordered" min="1" max="365" x-model.number="backfillDays">
                </label>
            </div>
            <div class="flex justify-end gap-2">
                <button class="btn btn-ghost btn-sm" x-on:click="closeBackfill()">Cancel</button>
                <button class="btn btn-primary btn-sm" x-on:click="runBackfill()" :disabled="!validBackfillDays() || Boolean(fetching[backfillSource && backfillSource.id])">
                    Run Backfill
                </button>
            </div>
        </div>
    </div>

    <!-- Delete confirmation modal -->
    <div x-show="deleteTarget" x-cloak
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
        <div class="bg-base-100 rounded-lg shadow-xl w-full max-w-sm p-6 space-y-4">
            <h2 class="text-lg font-semibold">Delete Mail Source</h2>
            <p class="text-sm text-muted-foreground">
                Are you sure you want to delete <strong x-text="deleteTarget && deleteTarget.name"></strong>?
                This action cannot be undone.
            </p>
            <div class="flex justify-end gap-2">
                <button class="btn btn-ghost btn-sm" x-on:click="deleteTarget = null">Cancel</button>
                <button class="btn btn-error btn-sm" x-on:click="deleteSource()">Delete</button>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function mailSourcesApp() {
    return {
        sources: [],
        showForm: false,
        editingId: null,
        deleteTarget: null,
        showPassword: false,
        isTesting: false,
        isSaving: false,
        testing: {},
        fetching: {},
        backfillSource: null,
        backfillDays: 30,
        historySource: null,
        importHistory: [],
        historyLoading: false,
        feedback: { message: '', type: '', diagnostic_summary: '', recovery_steps: [] },
        testResult: { message: '', success: false, diagnostic_summary: '', recovery_steps: [] },
        gmailConnected: false,
        gmailEmail: '',
        m365Connected: false,
        m365Email: '',
        m365Folders: [],
        m365FoldersLoading: false,
        m365FoldersError: '',

        form: {
            name: '',
            method: 'IMAP',
            server: '',
            port: 993,
            username: '',
            password: '',
            use_ssl: true,
            folder: 'INBOX',
            polling_interval: 60,
            enabled: true,
            gmail_client_id: '',
            gmail_client_secret: '',
            m365_tenant_id: 'common',
            m365_client_id: '',
            m365_client_secret: '',
            m365_mailbox: '',
            m365_folder_id: '',
        },

        async init() {
            await this.loadSources();
        },

        async loadSources() {
            try {
                const resp = await fetch('/api/v1/mail-sources');
                if (resp.ok) {
                    this.sources = await resp.json();
                }
            } catch (e) {
                console.error('Failed to load mail sources', e);
            }
        },

        async fetchSource(source, days = 7) {
            this.fetching[source.id] = true;
            this.feedback = { message: '', type: '' };
            try {
                const safeDays = Math.min(365, Math.max(1, Number(days) || 7));
                const resp = await fetch(`/api/v1/mail-sources/${source.id}/fetch?days=${safeDays}`, {
                    method: 'POST',
                });
                const result = await resp.json();
                if (!resp.ok) {
                    throw new Error(result.detail || 'Import failed');
                }
                this.feedback = {
                    message: `Import finished for ${source.name} (${safeDays} day${safeDays === 1 ? '' : 's'}): ${result.reports_found} report${result.reports_found === 1 ? '' : 's'}, ${result.duplicate_reports || 0} duplicate${result.duplicate_reports === 1 ? '' : 's'}.`,
                    type: result.success ? 'success' : 'error',
                };
                await this.loadSources();
                if (this.historySource && this.historySource.id === source.id) {
                    const updated = this.sources.find(s => s.id === source.id) || source;
                    await this.loadImportHistory(updated);
                }
            } catch (e) {
                this.feedback = { message: `Import error: ${e.message}`, type: 'error' };
            } finally {
                this.fetching[source.id] = false;
            }
        },

        openBackfill(source) {
            this.backfillSource = source;
            this.backfillDays = 30;
            this.feedback = { message: '', type: '' };
        },

        closeBackfill() {
            this.backfillSource = null;
            this.backfillDays = 30;
        },

        validBackfillDays() {
            const days = Number(this.backfillDays);
            return Number.isInteger(days) && days >= 1 && days <= 365;
        },

        async runBackfill() {
            if (!this.backfillSource || !this.validBackfillDays()) return;
            const source = this.backfillSource;
            const days = Number(this.backfillDays);
            this.closeBackfill();
            await this.fetchSource(source, days);
        },

        async loadImportHistory(source) {
            this.historySource = source;
            this.importHistory = [];
            this.historyLoading = true;
            this.feedback = { message: '', type: '' };
            try {
                const resp = await fetch(`/api/v1/mail-sources/${source.id}/imports?limit=20`);
                if (!resp.ok) {
                    const err = await resp.json();
                    throw new Error(err.detail || 'Failed to load import history');
                }
                this.importHistory = await resp.json();
            } catch (e) {
                this.feedback = { message: `Error: ${e.message}`, type: 'error' };
            } finally {
                this.historyLoading = false;
            }
        },

        closeHistory() {
            this.historySource = null;
            this.importHistory = [];
            this.historyLoading = false;
        },

        formatDate(value) {
            return value ? new Date(value).toLocaleString() : '—';
        },

        sourceAccountLabel(source) {
            if (source.method === 'GMAIL_API') {
                return source.gmail_email || '—';
            }
            if (source.method === 'M365_GRAPH') {
                return source.m365_mailbox || source.m365_email || 'authorized account';
            }
            return source.server ? `${source.server}:${source.port}` : '—';
        },

        sourceTargetLabel(source) {
            if (!source) return '—';
            if (source.method === 'M365_GRAPH') {
                const mailbox = source.m365_mailbox || source.m365_email || 'authorized account';
                return `${mailbox} / ${source.folder || 'INBOX'}`;
            }
            return this.sourceAccountLabel(source);
        },

        sourceStatusLabel(source) {
            if (source.method === 'GMAIL_API') {
                return source.gmail_connected ? 'Connected' : 'Not authorised';
            }
            if (source.method === 'M365_GRAPH') {
                return source.m365_connected ? 'Connected' : 'Not authorised';
            }
            return source.username || '—';
        },

        formatList(value) {
            return value && value.length ? value.join(', ') : '—';
        },

        formatDetailsSummary(details) {
            const counts = details.reduce((acc, detail) => {
                const key = detail.status || 'unknown';
                acc[key] = (acc[key] || 0) + 1;
                return acc;
            }, {});
            return Object.entries(counts)
                .map(([key, count]) => `${count} ${key}`)
                .join(', ');
        },

        statusBadgeClass(status) {
            if (status === 'success') return 'badge-success';
            if (status === 'warning') return 'badge-warning';
            if (status === 'failed') return 'badge-error';
            return 'badge-outline';
        },

        detailBadgeClass(status) {
            if (status === 'imported') return 'badge-success';
            if (status === 'duplicate' || status === 'skipped') return 'badge-warning';
            if (status === 'error') return 'badge-error';
            return 'badge-outline';
        },

        emptyTestResult() {
            return { message: '', success: false, diagnostic_summary: '', recovery_steps: [] };
        },

        emptyFeedback() {
            return { message: '', type: '', diagnostic_summary: '', recovery_steps: [] };
        },

        diagnosticFromResult(result) {
            const diagnostic = result.diagnostic || {};
            return {
                diagnostic_summary: diagnostic.summary || '',
                recovery_steps: result.recovery_steps || diagnostic.recovery_steps || [],
            };
        },

        openAddForm() {
            this.editingId = null;
            this.gmailConnected = false;
            this.gmailEmail = '';
            this.m365Connected = false;
            this.m365Email = '';
            this.m365Folders = [];
            this.m365FoldersError = '';
            this.form = {
                name: '',
                method: 'IMAP',
                server: '',
                port: 993,
                username: '',
                password: '',
                use_ssl: true,
                folder: 'INBOX',
                polling_interval: 60,
                enabled: true,
                gmail_client_id: '',
                gmail_client_secret: '',
                m365_tenant_id: 'common',
                m365_client_id: '',
                m365_client_secret: '',
                m365_mailbox: '',
                m365_folder_id: '',
            };
            this.testResult = this.emptyTestResult();
            this.showForm = true;
        },

        openEditForm(source) {
            this.editingId = source.id;
            this.gmailConnected = source.gmail_connected || false;
            this.gmailEmail = source.gmail_email || '';
            this.m365Connected = source.m365_connected || false;
            this.m365Email = source.m365_email || '';
            this.m365Folders = [];
            this.m365FoldersError = '';
            this.form = {
                name: source.name,
                method: source.method,
                server: source.server || '',
                port: source.port || 993,
                username: source.username || '',
                password: '',   // never pre-fill password
                use_ssl: source.use_ssl !== false,
                folder: source.folder || 'INBOX',
                polling_interval: source.polling_interval || 60,
                enabled: source.enabled !== false,
                gmail_client_id: source.gmail_client_id || '',
                gmail_client_secret: '',  // never pre-fill client secret
                m365_tenant_id: source.m365_tenant_id || 'common',
                m365_client_id: source.m365_client_id || '',
                m365_client_secret: '',  // never pre-fill client secret
                m365_mailbox: source.m365_mailbox || '',
                m365_folder_id: source.m365_folder_id || '',
            };
            this.testResult = this.emptyTestResult();
            this.showForm = true;
        },

        closeForm() {
            this.showForm = false;
            this.editingId = null;
            this.m365Folders = [];
            this.m365FoldersError = '';
            this.testResult = this.emptyTestResult();
        },

        async connectGmail() {
            if (!this.editingId) return;
            try {
                const resp = await fetch(
                    `/api/v1/mail-sources/${this.editingId}/gmail/authorize-url`
                );
                if (!resp.ok) {
                    const err = await resp.json();
                    this.feedback = { message: `Error: ${err.detail || 'Failed to get authorization URL'}`, type: 'error' };
                    return;
                }
                const data = await resp.json();
                // Open the OAuth2 URL in a new popup window
                const popup = window.open(
                    data.authorization_url,
                    'gmail_oauth',
                    'width=600,height=700,scrollbars=yes'
                );
                // Poll for popup close and refresh source list
                const pollInterval = setInterval(async () => {
                    if (popup && popup.closed) {
                        clearInterval(pollInterval);
                        await this.loadSources();
                        // Refresh the editing form state
                        const updated = this.sources.find(s => s.id === this.editingId);
                        if (updated) {
                            this.gmailConnected = updated.gmail_connected || false;
                            this.gmailEmail = updated.gmail_email || '';
                            if (this.gmailConnected) {
                                this.feedback = {
                                    message: `Gmail connected successfully (${this.gmailEmail}).`,
                                    type: 'success',
                                };
                            }
                        }
                    }
                }, 1000);
            } catch (e) {
                this.feedback = { message: `Error: ${e.message}`, type: 'error' };
            }
        },

        async connectM365() {
            if (!this.editingId) return;
            try {
                const resp = await fetch(
                    `/api/v1/mail-sources/${this.editingId}/m365/authorize-url`
                );
                if (!resp.ok) {
                    const err = await resp.json();
                    this.feedback = { message: `Error: ${err.detail || 'Failed to get authorization URL'}`, type: 'error' };
                    return;
                }
                const data = await resp.json();
                const popup = window.open(
                    data.authorization_url,
                    'm365_oauth',
                    'width=700,height=760,scrollbars=yes'
                );
                const pollInterval = setInterval(async () => {
                    if (popup && popup.closed) {
                        clearInterval(pollInterval);
                        await this.loadSources();
                        const updated = this.sources.find(s => s.id === this.editingId);
                        if (updated) {
                            this.m365Connected = updated.m365_connected || false;
                            this.m365Email = updated.m365_email || '';
                            this.form.m365_folder_id = updated.m365_folder_id || this.form.m365_folder_id || '';
                            if (this.m365Connected) {
                                this.feedback = {
                                    message: `Microsoft 365 connected successfully (${this.m365Email || 'account connected'}).`,
                                    type: 'success',
                                };
                            }
                        }
                    }
                }, 1000);
            } catch (e) {
                this.feedback = { message: `Error: ${e.message}`, type: 'error' };
            }
        },

        applyM365FolderSelection(folderId) {
            if (!folderId) return;
            const selected = this.m365Folders.find(folder => folder.id === folderId);
            if (selected) {
                this.form.folder = selected.display_name || 'INBOX';
            }
        },

        async loadM365Folders() {
            if (!this.editingId) return;
            this.m365FoldersLoading = true;
            this.m365FoldersError = '';
            try {
                const resp = await fetch(`/api/v1/mail-sources/${this.editingId}/m365/folders`);
                const data = await resp.json();
                if (!resp.ok) {
                    throw new Error(data.detail || 'Could not load Microsoft 365 folders');
                }
                this.m365Folders = data.folders || [];
                if (this.m365Folders.length === 0) {
                    this.m365FoldersError = 'No selectable folders were returned for this mailbox.';
                }
            } catch (e) {
                this.m365FoldersError = e.message;
            } finally {
                this.m365FoldersLoading = false;
            }
        },

        async saveSource() {
            this.isSaving = true;
            this.feedback = { message: '', type: '' };
            try {
                const payload = { ...this.form };
                // Don't send empty password on edit
                if (this.editingId && !payload.password) {
                    delete payload.password;
                }
                // Don't send empty gmail_client_secret on edit
                if (this.editingId && !payload.gmail_client_secret) {
                    delete payload.gmail_client_secret;
                }
                // Don't send empty m365_client_secret on edit
                if (this.editingId && !payload.m365_client_secret) {
                    delete payload.m365_client_secret;
                }

                const url = this.editingId
                    ? `/api/v1/mail-sources/${this.editingId}`
                    : '/api/v1/mail-sources';
                const method = this.editingId ? 'PUT' : 'POST';

                const resp = await fetch(url, {
                    method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
                if (!resp.ok) {
                    const err = await resp.json();
                    throw new Error(err.detail || 'Save failed');
                }
                this.feedback = {
                    message: this.editingId
                        ? 'Mail source updated successfully.'
                        : 'Mail source created successfully.',
                    type: 'success',
                };
                await this.loadSources();
                this.closeForm();
            } catch (e) {
                this.feedback = { message: `Error: ${e.message}`, type: 'error' };
            } finally {
                this.isSaving = false;
            }
        },

        async toggleSource(id) {
            try {
                const resp = await fetch(`/api/v1/mail-sources/${id}/toggle`, { method: 'POST' });
                if (!resp.ok) throw new Error('Toggle failed');
                await this.loadSources();
            } catch (e) {
                this.feedback = { message: `Error toggling source: ${e.message}`, type: 'error' };
            }
        },

        confirmDelete(source) {
            this.deleteTarget = source;
        },

        async deleteSource() {
            if (!this.deleteTarget) return;
            try {
                const resp = await fetch(`/api/v1/mail-sources/${this.deleteTarget.id}`, {
                    method: 'DELETE',
                });
                if (!resp.ok && resp.status !== 204) throw new Error('Delete failed');
                this.feedback = {
                    message: `Mail source "${this.deleteTarget.name}" deleted.`,
                    type: 'success',
                };
                this.deleteTarget = null;
                await this.loadSources();
            } catch (e) {
                this.feedback = { message: `Error: ${e.message}`, type: 'error' };
                this.deleteTarget = null;
            }
        },

        async testSource(id) {
            this.testing[id] = true;
            this.feedback = this.emptyFeedback();
            try {
                const resp = await fetch(`/api/v1/mail-sources/${id}/test`, { method: 'POST' });
                const result = await resp.json();
                const diagnostic = this.diagnosticFromResult(result);
                if (result.success) {
                    this.feedback = {
                        message: `Connection test successful for source #${id}: ${result.message}`,
                        type: 'success',
                        ...diagnostic,
                    };
                    await this.loadSources();
                } else {
                    this.feedback = {
                        message: `Connection test failed for source #${id}: ${result.message}`,
                        type: 'error',
                        ...diagnostic,
                    };
                }
            } catch (e) {
                this.feedback = { message: `Test error: ${e.message}`, type: 'error' };
            } finally {
                this.testing[id] = false;
            }
        },

        async testAdHoc() {
            this.isTesting = true;
            this.testResult = this.emptyTestResult();
            try {
                const payload = {
                    server: this.form.server,
                    port: this.form.port,
                    username: this.form.username,
                    password: this.form.password,
                    ssl: this.form.use_ssl,
                    method: this.form.method,
                };
                const resp = await fetch('/api/v1/mail-sources/test-connection', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                });
                const result = await resp.json();
                const diagnostic = this.diagnosticFromResult(result);
                this.testResult = {
                    success: result.success,
                    message: result.success
                        ? `✓ Connected. ${result.message_count || 0} messages, ${result.dmarc_count || 0} potential DMARC reports.`
                        : `✗ ${result.message}`,
                    ...diagnostic,
                };
            } catch (e) {
                this.testResult = { success: false, message: `Error: ${e.message}` };
            } finally {
                this.isTesting = false;
            }
        },
    };
}
</script>
{% endblock %}