@extends('layouts.app')

@section('title', 'Dokumentasi API')

@section('content')
<div class="api-docs-container">
    <div class="api-header">
        <h1>Dokumentasi API</h1>
        <p>RESTful API untuk integrasi data gempa dengan aplikasi pihak ketiga</p>
    </div>

    <div class="api-endpoints">
        <h2>Endpoint API</h2>
        
        <!-- Endpoint 1: GET /api/gempa/terkini -->
        <div class="endpoint-card">
            <div class="endpoint-method method-get">GET</div>
            <div class="endpoint-url">/api/gempa/terkini</div>
            <button class="endpoint-copy" onclick="copyToClipboard('/api/gempa/terkini')">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                </svg>
            </button>
            <div class="endpoint-desc">Mendapatkan data gempa terkini</div>
            <div class="endpoint-response">
                <strong>Response Contoh:</strong>
                <pre>{
    "status": "success",
    "data": {
        "magnitude": 5.2,
        "kedalaman": "12 km",
        "lokasi": "8.34° LS, 115.20° BT",
        "waktu": "2026-05-09T07:30:00Z"
    }
}</pre>
            </div>
        </div>

        <!-- Endpoint 2: GET /api/gempa/riwayat -->
        <div class="endpoint-card">
            <div class="endpoint-method method-get">GET</div>
            <div class="endpoint-url">/api/gempa/riwayat</div>
            <button class="endpoint-copy" onclick="copyToClipboard('/api/gempa/riwayat')">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                </svg>
            </button>
            <div class="endpoint-desc">Mendapatkan riwayat gempa (maksimal 50 data terakhir)</div>
            <div class="endpoint-response">
                <strong>Parameter Query:</strong>
                <ul>
                    <li><code>limit</code> (opsional) - Jumlah data yang ditampilkan, default 10</li>
                </ul>
                <strong>Response Contoh:</strong>
                <pre>{
    "status": "success",
    "data": [
        {
            "waktu": "2026-05-09T07:35:00Z",
            "nilai": 560,
            "status": "Sedang"
        }
    ]
}</pre>
            </div>
        </div>

        <!-- Endpoint 3: POST /api/sensor/data -->
        <div class="endpoint-card">
            <div class="endpoint-method method-post">POST</div>
            <div class="endpoint-url">/api/sensor/data</div>
            <button class="endpoint-copy" onclick="copyToClipboard('/api/sensor/data')">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                </svg>
            </button>
            <div class="endpoint-desc">Mengirim data dari sensor (memerlukan API Key)</div>
            <div class="endpoint-response">
                <strong>Request Body:</strong>
                <pre>{
    "sensor_id": "ESP32_01",
    "nilai_getaran": 1240,
    "magnitude": 4.2,
    "api_key": "your-api-key-here"
}</pre>
                <strong>Response:</strong>
                <pre>{
    "status": "success",
    "message": "Data berhasil disimpan"
}</pre>
            </div>
        </div>

        <!-- Endpoint 4: GET /api/sensor/status -->
        <div class="endpoint-card">
            <div class="endpoint-method method-get">GET</div>
            <div class="endpoint-url">/api/sensor/status/{id}</div>
            <button class="endpoint-copy" onclick="copyToClipboard('/api/sensor/status/1')">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                </svg>
            </button>
            <div class="endpoint-desc">Mengecek status sensor berdasarkan ID</div>
            <div class="endpoint-response">
                <strong>Response Contoh:</strong>
                <pre>{
    "status": "success",
    "data": {
        "sensor_id": "ESP32_01",
        "is_online": true,
        "last_heartbeat": "2026-05-09T07:35:00Z",
        "battery": 85
    }
}</pre>
            </div>
        </div>
    </div>

    <div class="api-auth">
        <h2>Autentikasi</h2>
        <p>Untuk endpoint yang memerlukan autentikasi, gunakan API Key di header:</p>
        <pre>X-API-Key: your-api-key-here</pre>
        <p>Hubungi administrator untuk mendapatkan API Key.</p>
    </div>

    <div class="api-rate-limit">
        <h2>Rate Limit</h2>
        <ul>
            <li>Endpoint publik: 100 request/menit</li>
            <li>Endpoint sensor: 10 request/detik</li>
            <li>Melebihi batas akan menerima response <code>429 Too Many Requests</code></li>
        </ul>
    </div>
</div>

<style>
.api-docs-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

.api-header {
    text-align: center;
    margin-bottom: 3rem;
}

.api-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.api-header p {
    color: #6b7280;
}

.api-endpoints h2,
.api-auth h2,
.api-rate-limit h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dc2626;
    display: inline-block;
}

.endpoint-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.endpoint-method {
    position: absolute;
    top: -12px;
    left: 20px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.method-get {
    background: #10b981;
}

.method-post {
    background: #3b82f6;
}

.method-put {
    background: #f59e0b;
}

.method-delete {
    background: #ef4444;
}

.endpoint-url {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.5rem 0 0.5rem 0;
    padding-right: 40px;
}

.endpoint-copy {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    padding: 4px;
}

.endpoint-copy:hover {
    color: #dc2626;
}

.endpoint-desc {
    color: #6b7280;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.endpoint-response {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.endpoint-response strong {
    font-size: 0.875rem;
    display: block;
    margin-bottom: 0.5rem;
}

.endpoint-response pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.75rem;
    font-family: monospace;
}

.endpoint-response ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.api-auth, .api-rate-limit {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 12px;
}

.api-auth pre, .api-rate-limit pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 0.75rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.api-rate-limit ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

@media (max-width: 640px) {
    .api-docs-container {
        padding: 1rem;
    }
    
    .endpoint-url {
        font-size: 0.875rem;
        word-break: break-all;
    }
}
</style>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text);
    alert('URL telah disalin: ' + text);
}
</script>
@endsection