{{define "content"}}
<div class="page-header">
    <h1>Invitations</h1>
    <span>{{.TotalCount}} invitation{{if ne .TotalCount 1}}s{{end}}</span>
</div>

<div class="invitation-controls">
    <div class="search-controls">
        <input type="text"
               name="filter"
               placeholder="Search by email..."
               value="{{.EmailFilter}}"
               hx-get="/invitations/search"
               hx-trigger="input changed delay:300ms, keyup[key=='Enter']"
               hx-target="#invitations-table-body"
               hx-swap="innerHTML"
               hx-include="[name='status_filter']"
               class="search-input">
        <select name="status_filter"
                hx-get="/invitations/search"
                hx-trigger="change"
                hx-target="#invitations-table-body"
                hx-swap="innerHTML"
                hx-include="[name='filter']"
                class="status-filter">
            <option value="0" {{if eq .StatusFilter 0}}selected{{end}}>All Status</option>
            <option value="1" {{if eq .StatusFilter 1}}selected{{end}}>Pending</option>
            <option value="2" {{if eq .StatusFilter 2}}selected{{end}}>Redeemed</option>
            <option value="3" {{if eq .StatusFilter 3}}selected{{end}}>Expired</option>
            <option value="4" {{if eq .StatusFilter 4}}selected{{end}}>Revoked</option>
        </select>
    </div>
    <button class="btn-primary" onclick="openCreateModal()">Create Invitation</button>
</div>

<div id="feedback" class="feedback-area"></div>

{{if .Invitations}}
<table class="invitations-table">
    <thead>
        <tr>
            <th>Email</th>
            <th>Status</th>
            <th>Created By</th>
            <th>Created</th>
            <th>Expires</th>
            <th>Redeemed By</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody id="invitations-table-body" hx-trigger="invitationUpdated from:body" hx-get="/invitations/search?filter={{.EmailFilter}}&status_filter={{.StatusFilter}}" hx-swap="innerHTML">
        {{range .Invitations}}
        <tr class="invitation-row status-{{.StatusName}}" id="invitation-{{.InvitationCodeShort}}">
            <td class="invitation-email">{{.Email}}</td>
            <td class="invitation-status">
                <span class="status-badge {{.StatusName}}">{{.StatusName}}</span>
            </td>
            <td class="invitation-created-by">
                {{if .CreatedByDisplayName}}{{.CreatedByDisplayName}}{{else}}{{.CreatedByUserID}}{{end}}
            </td>
            <td class="invitation-created">{{.CreatedAt}}</td>
            <td class="invitation-expires">{{.ExpiresAt}}</td>
            <td class="invitation-redeemed-by">
                {{if .RedeemedByDisplayName}}{{.RedeemedByDisplayName}}{{else if .RedeemedByUserID}}{{.RedeemedByUserID}}{{else}}-{{end}}
            </td>
            <td class="invitation-actions">
                {{if eq .StatusName "pending"}}
                <button class="btn-small"
                        hx-post="/invitations/{{.InvitationCode}}/resend"
                        hx-target="#feedback"
                        hx-swap="innerHTML">
                    Resend
                </button>
                <button class="btn-small btn-danger"
                        hx-post="/invitations/{{.InvitationCode}}/revoke"
                        hx-target="#feedback"
                        hx-swap="innerHTML"
                        hx-confirm="Are you sure you want to revoke this invitation?">
                    Revoke
                </button>
                <button class="btn-small btn-secondary"
                        onclick="copyInvitationCode('{{.InvitationCode}}')">
                    Copy Code
                </button>
                {{else}}
                <button class="btn-small btn-danger"
                        hx-post="/invitations/{{.InvitationCode}}/delete"
                        hx-target="#feedback"
                        hx-swap="innerHTML"
                        hx-confirm="Are you sure you want to permanently delete this invitation?">
                    Delete
                </button>
                {{end}}
            </td>
        </tr>
        {{end}}
    </tbody>
</table>
{{else}}
<div class="empty-state">
    <p>No invitations found.</p>
</div>
{{end}}

<!-- Create Invitation Modal -->
<dialog id="create-modal">
    <article>
        <header>
            <h3>Create Invitation</h3>
            <button aria-label="Close" class="close" onclick="document.getElementById('create-modal').close()"></button>
        </header>
        <form id="create-form" hx-post="/invitations/create" hx-target="#create-feedback" hx-swap="innerHTML">
            <label for="create-email">Email Address</label>
            <input type="email" id="create-email" name="email" placeholder="user@example.com" required>

            <label for="create-expires">Expires In (days)</label>
            <input type="number" id="create-expires" name="expires_in_days" value="30" min="1" max="365">
            <small>Default: 30 days</small>

            <div id="create-feedback"></div>
        </form>
        <footer>
            <button type="button" class="secondary" onclick="document.getElementById('create-modal').close()">Cancel</button>
            <button type="submit" form="create-form">Create & Send</button>
        </footer>
    </article>
</dialog>

<script>
function openCreateModal() {
    document.getElementById('create-email').value = '';
    document.getElementById('create-expires').value = '30';
    document.getElementById('create-feedback').innerHTML = '';
    document.getElementById('create-modal').showModal();
}

function copyInvitationCode(code) {
    navigator.clipboard.writeText(code).then(() => {
        document.getElementById('feedback').innerHTML = '<div class="alert alert-success">Invitation code copied to clipboard</div>';
        setTimeout(() => {
            document.getElementById('feedback').innerHTML = '';
        }, 3000);
    }).catch(err => {
        console.error('Failed to copy:', err);
        document.getElementById('feedback').innerHTML = '<div class="alert alert-error">Failed to copy code</div>';
    });
}

// Handle successful invitation creation
document.body.addEventListener('htmx:afterRequest', function(evt) {
    if (evt.detail.pathInfo.requestPath === '/invitations/create' && evt.detail.successful) {
        const response = evt.detail.xhr.responseText;
        if (response.includes('alert-success')) {
            // Close modal and refresh table
            setTimeout(() => {
                document.getElementById('create-modal').close();
                htmx.trigger(document.getElementById('invitations-table-body'), 'invitationUpdated');
            }, 1500);
        }
    } else if (evt.detail.pathInfo.requestPath.includes('/revoke') ||
               evt.detail.pathInfo.requestPath.includes('/resend') ||
               evt.detail.pathInfo.requestPath.includes('/delete')) {
        if (evt.detail.successful) {
            htmx.trigger(document.getElementById('invitations-table-body'), 'invitationUpdated');
        }
    }
});
</script>

<style>
.invitation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.search-controls {
    display: flex;
    gap: 0.5rem;
    flex: 1;
}

.search-input {
    max-width: 300px;
}

.status-filter {
    max-width: 150px;
}

.invitations-table {
    width: 100%;
    border-collapse: collapse;
}

.invitations-table th, .invitations-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.status-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.status-badge.pending {
    background-color: #ffc107;
    color: #000;
}

.status-badge.redeemed {
    background-color: #28a745;
    color: white;
}

.status-badge.expired {
    background-color: #6c757d;
    color: white;
}

.status-badge.revoked {
    background-color: #dc3545;
    color: white;
}

.invitation-row.status-redeemed,
.invitation-row.status-expired,
.invitation-row.status-revoked {
    opacity: 0.7;
}

.invitation-actions {
    display: flex;
    gap: 0.25rem;
}

.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 4px;
}

.no-actions {
    color: var(--pico-muted-color);
}

.feedback-area {
    margin-bottom: 1rem;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#create-modal article {
    max-width: 500px;
}

#create-modal small {
    display: block;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    color: var(--pico-muted-color);
}
</style>
{{end}}