<?php
require_once __DIR__ . '/bootstrap.php';
$pageTitle = 'Console';
include 'partials/head.php';
?>

<div class="flex h-full min-h-screen">
    <?php include 'partials/sidebar.php'; ?>

    <main class="flex-1 lg:ml-48 pb-16 lg:pb-0">
        <!-- Header -->
        <header class="sticky top-0 bg-white/80 backdrop-blur border-b border-slate-200 px-4 lg:px-5 py-3 z-10">
            <div>
                <h1 class="text-base font-semibold">Console</h1>
                <p class="text-xs text-slate-400">API endpoints & documentation</p>
            </div>
        </header>

        <div class="p-4 lg:p-5 space-y-5">
            <!-- Documentation Export -->
            <div>
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-sm font-medium text-slate-700">Documentation</h2>
                    <div class="flex items-center gap-2">
                        <button onclick="copyDocs()" class="h-7 px-2.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-xs font-medium transition-colors flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                            Copy
                        </button>
                        <button onclick="downloadDocs()" class="h-7 px-2.5 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg text-xs font-medium transition-colors flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                            Download as MD
                        </button>
                    </div>
                </div>
                <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                    <textarea id="docs-content" class="w-full h-80 p-4 text-xs font-mono text-slate-600 bg-slate-50 border-0 resize-none focus:ring-0" readonly># Notifier API Documentation

## Overview

Notifier exposes a JSON API used by the UI and by external clients.

## Authentication

All API requests require an API token header:

```
X-API-Token: YOUR_API_TOKEN
```

## Base URL

```
/notifier/api
```

## Endpoints

### Categories
GET /api/categories
GET /api/categories/{id}
POST /api/categories
PUT /api/categories/{id}
DELETE /api/categories/{id}

### Notifications
GET /api/notifications?category_id=&status=&search=
GET /api/notifications/{id}
POST /api/notifications
PUT /api/notifications/{id}
DELETE /api/notifications/{id}
POST /api/notifications/{id}/pause
POST /api/notifications/{id}/resume
GET /api/notifications/{id}/preview
POST /api/notifications/{id}/test

### Schedule Preview (no save)
POST /api/preview

### Uploads
POST /api/upload

### History
GET /api/history?page=&limit=
GET /api/history/{notificationId}

### Jobs (admin/debug)
GET /api/jobs
GET /api/jobs?status=pending,retrying,failed
POST /api/jobs/{id}/retry

### Test Message (raw)
POST /api/test-message

## Email Alerts (MailerSend)

Endpoint:
POST https://api.mailersend.com/v1/email

Headers:
Authorization: Bearer YOUR_API_KEY
Content-Type: application/json

Important:
- from.email must be a verified sender or verified domain.
- Use the MailerSend test domain if needed (example: test-51ndgwvq29nlzqx8.mlsender.net).

Example JSON:
{
  "from": { "email": "notifier@test-51ndgwvq29nlzqx8.mlsender.net", "name": "Notifier" },
  "to": [{ "email": "contact@maurosicard.com", "name": "Mauro Sicard" }],
  "subject": "Notifier alert",
  "text": "Cron health alert from Notifier.",
  "html": "<p>Cron health alert from <strong>Notifier</strong>.</p>"
}

## Cron Health Scripts

- PHP checker: /scripts/cron-health-check.php
- Cron wrapper: /scripts/cron-health-check.sh
- Config: cron_health in config.php

## Error Handling

All errors follow this format:

```json
{
  "success": false,
  "error": "Error message"
}
```</textarea>
                </div>
            </div>

            <!-- API Endpoints -->
            <div>
                <h2 class="text-sm font-medium text-slate-700 mb-3">API Endpoints</h2>
                <div class="bg-white rounded-xl border border-slate-200 shadow-sm divide-y divide-slate-100 overflow-hidden">
                    <!-- GET Notifications -->
                    <div class="p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded bg-emerald-100 text-emerald-700">GET</span>
                            <code class="text-sm font-mono text-slate-700">/api/notifications</code>
                        </div>
                        <p class="text-xs text-slate-400 mb-3">Retrieve all notifications for the authenticated user.</p>
                        <pre class="p-3 bg-slate-50 rounded-lg overflow-x-auto text-xs text-slate-600"><code>{
  "success": true,
  "data": [
    {
      "id": 1,
      "title": "Meeting Reminder",
      "message": "Team standup in 15 minutes",
      "status": "active",
      "category_id": 2,
      "next_trigger": "2025-01-12T09:00:00Z"
    }
  ]
}</code></pre>
                    </div>

                    <!-- POST Notification -->
                    <div class="p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded bg-blue-100 text-blue-700">POST</span>
                            <code class="text-sm font-mono text-slate-700">/api/notifications</code>
                        </div>
                        <p class="text-xs text-slate-400 mb-3">Create a new notification.</p>
                        <pre class="p-3 bg-slate-50 rounded-lg overflow-x-auto text-xs text-slate-600"><code>{
  "title": "New Reminder",
  "message": "Don't forget to...",
  "category_id": 1,
  "schedule": {
    "type": "once",
    "datetime": "2025-01-15T10:00:00Z"
  }
}</code></pre>
                    </div>

                    <!-- PUT Notification -->
                    <div class="p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded bg-amber-100 text-amber-700">PUT</span>
                            <code class="text-sm font-mono text-slate-700">/api/notifications/:id</code>
                        </div>
                        <p class="text-xs text-slate-400">Update an existing notification by ID.</p>
                    </div>

                    <!-- DELETE Notification -->
                    <div class="p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded bg-red-100 text-red-700">DELETE</span>
                            <code class="text-sm font-mono text-slate-700">/api/notifications/:id</code>
                        </div>
                        <p class="text-xs text-slate-400">Delete a notification by ID.</p>
                    </div>

                    <!-- GET Categories -->
                    <div class="p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded bg-emerald-100 text-emerald-700">GET</span>
                            <code class="text-sm font-mono text-slate-700">/api/categories</code>
                        </div>
                        <p class="text-xs text-slate-400">Retrieve all categories.</p>
                    </div>

                    <!-- POST Test Send -->
                    <div class="p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded bg-blue-100 text-blue-700">POST</span>
                            <code class="text-sm font-mono text-slate-700">/api/notifications/:id/test</code>
                        </div>
                        <p class="text-xs text-slate-400">Send a notification to the test chat.</p>
                    </div>

                    <!-- GET History -->
                    <div class="p-4">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded bg-emerald-100 text-emerald-700">GET</span>
                            <code class="text-sm font-mono text-slate-700">/api/history</code>
                        </div>
                        <p class="text-xs text-slate-400 mb-3">Retrieve notification delivery history.</p>
                        <div class="p-3 bg-slate-50 rounded-lg text-xs text-slate-600 space-y-1">
                            <div class="font-medium text-slate-500 mb-2">Query Parameters:</div>
                            <div><code class="text-indigo-600">page</code> - Page number (default: 1)</div>
                            <div><code class="text-indigo-600">limit</code> - Results per page (default: 50)</div>
                            <div><code class="text-indigo-600">notification_id</code> - Optional filter</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<?php include 'partials/mobile-nav.php'; ?>

<?php include 'partials/scripts.php'; ?>
<script>
    function copyDocs() {
        const textarea = document.getElementById('docs-content');
        textarea.select();
        document.execCommand('copy');
        Toast.success('Copied!', 'Documentation copied to clipboard');
    }

    function downloadDocs() {
        const content = document.getElementById('docs-content').value;
        const blob = new Blob([content], { type: 'text/markdown' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'notifier-api-docs.md';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        Toast.success('Downloaded!', 'notifier-api-docs.md saved');
    }
</script>
</body>
</html>
