@extends('layouts.public')

@section('title', 'Dokumentasi API — Daisy Risk Global Supply Chain Intelligence')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/info-pages.css') }}">
<style>
    .api-hero {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
        color: white;
        padding: 4rem 0;
        position: relative;
        overflow: hidden;
    }

    .api-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 40%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        transform: rotate(-15deg);
    }

    .endpoint-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .endpoint-header {
        padding: 1rem 1.5rem;
        background: linear-gradient(45deg, #f8fafc, #f1f5f9);
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .http-method {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .method-get { background: #dcfce7; color: #166534; }
    .method-post { background: #dbeafe; color: #1d4ed8; }
    .method-put { background: #fef3c7; color: #92400e; }
    .method-delete { background: #fecaca; color: #991b1b; }

    .endpoint-path {
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 0.875rem;
        color: #475569;
        background: #f8fafc;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        border: 1px solid #e2e8f0;
    }

    .endpoint-body {
        padding: 1.5rem;
    }

    .code-block {
        background: #0f172a;
        color: #e2e8f0;
        padding: 1.5rem;
        border-radius: 8px;
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 0.875rem;
        overflow-x: auto;
        position: relative;
        margin: 1rem 0;
    }

    .code-header {
        display: flex;
        align-items: center;
        justify-content: between;
        margin-bottom: 1rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        font-weight: 600;
        color: #94a3b8;
    }

    .copy-button {
        background: #374151;
        color: #d1d5db;
        border: none;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        cursor: pointer;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .copy-button:hover {
        background: #4b5563;
    }

    .parameter-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
    }

    .parameter-table th,
    .parameter-table td {
        padding: 0.75rem;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
    }

    .parameter-table th {
        background: #f8fafc;
        font-weight: 600;
        color: #374151;
    }

    .param-name {
        font-family: 'Monaco', 'Menlo', monospace;
        font-size: 0.875rem;
        color: #dc2626;
        font-weight: 600;
    }

    .param-type {
        background: #f1f5f9;
        color: #475569;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .auth-section {
        background: linear-gradient(45deg, #fef3c7, #fde68a);
        border: 1px solid #f59e0b;
        border-radius: 12px;
        padding: 1.5rem;
        margin: 2rem 0;
    }

    .rate-limit-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: linear-gradient(45deg, #dcfce7, #bbf7d0);
        border: 1px solid #10b981;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #065f46;
    }

    .status-code {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 600;
        font-family: monospace;
    }

    .status-200 { background: #dcfce7; color: #166534; }
    .status-400 { background: #fef3c7; color: #92400e; }
    .status-401 { background: #fecaca; color: #991b1b; }
    .status-429 { background: #fdf4ff; color: #86198f; }

    .sidebar {
        position: sticky;
        top: 2rem;
        height: fit-content;
    }

    .nav-link {
        display: block;
        padding: 0.5rem 1rem;
        color: #64748b;
        text-decoration: none;
        border-radius: 6px;
        margin-bottom: 0.25rem;
        transition: all 0.2s;
    }

    .nav-link:hover,
    .nav-link.active {
        background: #f1f5f9;
        color: #3b82f6;
    }

    @media (max-width: 1024px) {
        .sidebar {
            position: static;
            margin-bottom: 2rem;
        }
    }
</style>
@endpush

@section('content')

{{-- Hero Section --}}
<section class="api-hero">
    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
            <span class="text-6xl mb-4 block">⚡</span>
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
                Dokumentasi API
            </h1>
            <p class="text-xl text-blue-100 max-w-3xl mx-auto leading-relaxed">
                RESTful API yang powerful untuk mengintegrasikan data supply chain intelligence ke dalam sistem Anda. Simple, fast, dan reliable.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
                <div class="inline-flex items-center gap-2 px-6 py-3 bg-white bg-opacity-20 text-white font-semibold rounded-lg">
                    <span>🚀</span>
                    REST API v1.0
                </div>
                <div class="rate-limit-badge">
                    <span>⏱️</span>
                    1000 requests/hour
                </div>
            </div>
        </div>
    </div>
</section>

<div class="container mx-auto px-4 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        
        {{-- Sidebar Navigation --}}
        <div class="lg:col-span-1">
            <div class="sidebar">
                <h3 class="font-bold text-slate-800 mb-4">📚 Navigation</h3>
                <nav class="space-y-1">
                    <a href="#authentication" class="nav-link">🔐 Authentication</a>
                    <a href="#rate-limits" class="nav-link">⏱️ Rate Limits</a>
                    <a href="#risk-scores" class="nav-link">📊 Risk Scores</a>
                    <a href="#countries" class="nav-link">🌍 Countries</a>
                    <a href="#weather" class="nav-link">🌤️ Weather</a>
                    <a href="#ports" class="nav-link">⚓ Ports</a>
                    <a href="#currency" class="nav-link">💱 Currency</a>
                    <a href="#news" class="nav-link">📰 News</a>
                    <a href="#errors" class="nav-link">❌ Error Handling</a>
                </nav>

                {{-- Quick Start --}}
                <div class="mt-8 p-4 bg-slate-50 rounded-lg">
                    <h4 class="font-bold text-slate-800 mb-2">🚀 Quick Start</h4>
                    <p class="text-sm text-slate-600 mb-3">
                        Get your API key dan mulai dalam 2 menit:
                    </p>
                    <ol class="text-sm text-slate-600 space-y-1">
                        <li>1. Register akun</li>
                        <li>2. Generate API key</li>
                        <li>3. Make first request</li>
                    </ol>
                </div>
            </div>
        </div>

        {{-- Main Content --}}
        <div class="lg:col-span-3">

            {{-- Authentication --}}
            <section id="authentication" class="mb-12">
                <h2 class="text-3xl font-bold text-slate-800 mb-6">🔐 Authentication</h2>
                
                <div class="auth-section">
                    <h3 class="font-bold text-slate-800 mb-3">API Key Authentication</h3>
                    <p class="text-slate-600 mb-4">
                        Semua API requests memerlukan API key yang valid. Include API key di header request atau sebagai query parameter.
                    </p>
                    
                    <div class="grid md:grid-cols-2 gap-4">
                        <div>
                            <p class="font-medium text-slate-800 mb-2">Header Authentication (Recommended):</p>
                            <div class="code-block">
                                <div class="code-header">curl</div>
                                <code>curl -H "X-API-Key: your_api_key_here" \
     https://api.daisyrisk.com/v1/countries</code>
                            </div>
                        </div>
                        <div>
                            <p class="font-medium text-slate-800 mb-2">Query Parameter:</p>
                            <div class="code-block">
                                <div class="code-header">url</div>
                                <code>https://api.daisyrisk.com/v1/countries?api_key=your_api_key_here</code>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Rate Limits --}}
            <section id="rate-limits" class="mb-12">
                <h2 class="text-3xl font-bold text-slate-800 mb-6">⏱️ Rate Limits</h2>
                <p class="text-slate-600 mb-4">
                    Rate limits diterapkan per API key untuk memastikan fair usage dan performance optimal.
                </p>

                <div class="grid md:grid-cols-3 gap-4 mb-6">
                    <div class="text-center p-4 bg-green-50 border border-green-200 rounded-lg">
                        <div class="font-bold text-2xl text-green-600">1,000</div>
                        <div class="text-sm text-green-800">Requests per hour</div>
                    </div>
                    <div class="text-center p-4 bg-blue-50 border border-blue-200 rounded-lg">
                        <div class="font-bold text-2xl text-blue-600">50</div>
                        <div class="text-sm text-blue-800">Requests per minute</div>
                    </div>
                    <div class="text-center p-4 bg-purple-50 border border-purple-200 rounded-lg">
                        <div class="font-bold text-2xl text-purple-600">10</div>
                        <div class="text-sm text-purple-800">Concurrent requests</div>
                    </div>
                </div>

                <p class="text-sm text-slate-600">
                    Rate limit headers included dalam setiap response: <code>X-RateLimit-Limit</code>, <code>X-RateLimit-Remaining</code>, <code>X-RateLimit-Reset</code>
                </p>
            </section>

            {{-- Risk Scores API --}}
            <section id="risk-scores" class="mb-12">
                <h2 class="text-3xl font-bold text-slate-800 mb-6">📊 Risk Scores API</h2>
                
                {{-- Get All Risk Scores --}}
                <div class="endpoint-card">
                    <div class="endpoint-header">
                        <div class="flex items-center gap-3">
                            <span class="http-method method-get">GET</span>
                            <div class="endpoint-path">/api/v1/risk-scores</div>
                        </div>
                        <span class="text-sm text-slate-600">Get all country risk scores</span>
                    </div>
                    <div class="endpoint-body">
                        <p class="text-slate-600 mb-4">
                            Retrieve risk scores untuk semua negara dengan breakdown detail per kategori risiko.
                        </p>

                        {{-- Parameters --}}
                        <h4 class="font-semibold text-slate-800 mb-3">Query Parameters</h4>
                        <table class="parameter-table">
                            <thead>
                                <tr>
                                    <th>Parameter</th>
                                    <th>Type</th>
                                    <th>Required</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="param-name">limit</span></td>
                                    <td><span class="param-type">integer</span></td>
                                    <td>No</td>
                                    <td>Number of results (default: 50, max: 200)</td>
                                </tr>
                                <tr>
                                    <td><span class="param-name">offset</span></td>
                                    <td><span class="param-type">integer</span></td>
                                    <td>No</td>
                                    <td>Pagination offset (default: 0)</td>
                                </tr>
                                <tr>
                                    <td><span class="param-name">sort</span></td>
                                    <td><span class="param-type">string</span></td>
                                    <td>No</td>
                                    <td>Sort field: risk_score, country_name (default: risk_score)</td>
                                </tr>
                                <tr>
                                    <td><span class="param-name">order</span></td>
                                    <td><span class="param-type">string</span></td>
                                    <td>No</td>
                                    <td>Sort order: asc, desc (default: desc)</td>
                                </tr>
                            </tbody>
                        </table>

                        {{-- Example Request --}}
                        <h4 class="font-semibold text-slate-800 mb-3 mt-6">Example Request</h4>
                        <div class="code-block">
                            <button class="copy-button">Copy</button>
                            <div class="code-header">curl</div>
                            <code>curl -H "X-API-Key: your_api_key" \
     "https://api.daisyrisk.com/v1/risk-scores?limit=10&sort=risk_score&order=desc"</code>
                        </div>

                        {{-- Example Response --}}
                        <h4 class="font-semibold text-slate-800 mb-3 mt-6">Example Response</h4>
                        <div class="flex gap-2 mb-2">
                            <span class="status-code status-200">200 OK</span>
                        </div>
                        <div class="code-block">
                            <button class="copy-button">Copy</button>
                            <div class="code-header">json</div>
                            <code>{
  "status": "success",
  "data": [
    {
      "country_code": "ID",
      "country_name": "Indonesia",
      "risk_score": 67.5,
      "risk_level": "Medium",
      "breakdown": {
        "weather_score": 23.5,
        "economy_score": 18.2,
        "inflation_score": 12.8,
        "currency_score": 8.7,
        "port_score": 4.3
      },
      "last_updated": "2026-07-21T09:30:00Z"
    }
  ],
  "pagination": {
    "total": 195,
    "limit": 10,
    "offset": 0,
    "has_more": true
  }
}</code>
                        </div>
                    </div>
                </div>

                {{-- Get Single Country Risk --}}
                <div class="endpoint-card">
                    <div class="endpoint-header">
                        <div class="flex items-center gap-3">
                            <span class="http-method method-get">GET</span>
                            <div class="endpoint-path">/api/v1/risk-scores/{country_code}</div>
                        </div>
                        <span class="text-sm text-slate-600">Get specific country risk score</span>
                    </div>
                    <div class="endpoint-body">
                        <p class="text-slate-600 mb-4">
                            Retrieve detailed risk analysis untuk negara tertentu dengan historical data.
                        </p>

                        {{-- Path Parameters --}}
                        <h4 class="font-semibold text-slate-800 mb-3">Path Parameters</h4>
                        <table class="parameter-table">
                            <thead>
                                <tr>
                                    <th>Parameter</th>
                                    <th>Type</th>
                                    <th>Required</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="param-name">country_code</span></td>
                                    <td><span class="param-type">string</span></td>
                                    <td>Yes</td>
                                    <td>ISO 3166-1 alpha-2 country code (e.g., ID, US, CN)</td>
                                </tr>
                            </tbody>
                        </table>

                        <h4 class="font-semibold text-slate-800 mb-3 mt-6">Example Request</h4>
                        <div class="code-block">
                            <button class="copy-button">Copy</button>
                            <div class="code-header">curl</div>
                            <code>curl -H "X-API-Key: your_api_key" \
     "https://api.daisyrisk.com/v1/risk-scores/ID"</code>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Countries API --}}
            <section id="countries" class="mb-12">
                <h2 class="text-3xl font-bold text-slate-800 mb-6">🌍 Countries API</h2>
                
                <div class="endpoint-card">
                    <div class="endpoint-header">
                        <div class="flex items-center gap-3">
                            <span class="http-method method-get">GET</span>
                            <div class="endpoint-path">/api/v1/countries</div>
                        </div>
                        <span class="text-sm text-slate-600">Get all countries data</span>
                    </div>
                    <div class="endpoint-body">
                        <p class="text-slate-600 mb-4">
                            Retrieve basic information untuk semua negara termasuk koordinat geografis dan metadata.
                        </p>

                        <div class="code-block">
                            <button class="copy-button">Copy</button>
                            <div class="code-header">javascript</div>
                            <code>// JavaScript Example
const response = await fetch('https://api.daisyrisk.com/v1/countries', {
  headers: {
    'X-API-Key': 'your_api_key_here'
  }
});

const data = await response.json();
console.log(data.data); // Array of countries</code>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Weather API --}}
            <section id="weather" class="mb-12">
                <h2 class="text-3xl font-bold text-slate-800 mb-6">🌤️ Weather API</h2>
                
                <div class="endpoint-card">
                    <div class="endpoint-header">
                        <div class="flex items-center gap-3">
                            <span class="http-method method-get">GET</span>
                            <div class="endpoint-path">/api/v1/weather/{country_code}</div>
                        </div>
                        <span class="text-sm text-slate-600">Get weather data for country</span>
                    </div>
                    <div class="endpoint-body">
                        <p class="text-slate-600 mb-4">
                            Current weather conditions dan forecast untuk negara tertentu dengan severe weather alerts.
                        </p>

                        <div class="code-block">
                            <button class="copy-button">Copy</button>
                            <div class="code-header">python</div>
                            <code># Python Example
import requests

headers = {'X-API-Key': 'your_api_key'}
response = requests.get(
    'https://api.daisyrisk.com/v1/weather/ID', 
    headers=headers
)

weather_data = response.json()
print(f"Temperature: {weather_data['data']['temperature']}°C")</code>
                        </div>
                    </div>
                </div>
            </section>

            {{-- Ports API --}}
            <section id="ports" class="mb-12">
                <h2 class="text-3xl font-bold text-slate-800 mb-6">⚓ Ports API</h2>
                
                <div class="endpoint-card">
                    <div class="endpoint-header">
                        <div class="flex items-center gap-3">
                            <span class="http-method method-get">GET</span>
                            <div class="endpoint-path">/api/v1/ports</div>
                        </div>
                        <span class="text-sm text-slate-600">Get ports data with status</span>
                    </div>
                    <div class="endpoint-body">
                        <p class="text-slate-600 mb-4">
                            Real-time port status, congestion levels, dan operational information untuk major ports worldwide.
                        </p>

                        <h4 class="font-semibold text-slate-800 mb-3">Query Parameters</h4>
                        <table class="parameter-table">
                            <thead>
                                <tr>
                                    <th>Parameter</th>
                                    <th>Type</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><span class="param-name">country</span></td>
                                    <td><span class="param-type">string</span></td>
                                    <td>Filter by country code</td>
                                </tr>
                                <tr>
                                    <td><span class="param-name">status</span></td>
                                    <td><span class="param-type">string</span></td>
                                    <td>Filter by status: operational, congested, closed</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>

            {{-- Error Handling --}}
            <section id="errors" class="mb-12">
                <h2 class="text-3xl font-bold text-slate-800 mb-6">❌ Error Handling</h2>
                
                <p class="text-slate-600 mb-6">
                    API menggunakan standard HTTP status codes dan error format yang konsisten.
                </p>

                <div class="grid md:grid-cols-2 gap-4 mb-6">
                    <div class="p-4 border border-green-200 rounded-lg">
                        <span class="status-code status-200">200 OK</span>
                        <p class="text-sm text-slate-600 mt-2">Request successful</p>
                    </div>
                    <div class="p-4 border border-yellow-200 rounded-lg">
                        <span class="status-code status-400">400 Bad Request</span>
                        <p class="text-sm text-slate-600 mt-2">Invalid request parameters</p>
                    </div>
                    <div class="p-4 border border-red-200 rounded-lg">
                        <span class="status-code status-401">401 Unauthorized</span>
                        <p class="text-sm text-slate-600 mt-2">Invalid or missing API key</p>
                    </div>
                    <div class="p-4 border border-purple-200 rounded-lg">
                        <span class="status-code status-429">429 Too Many Requests</span>
                        <p class="text-sm text-slate-600 mt-2">Rate limit exceeded</p>
                    </div>
                </div>

                <h4 class="font-semibold text-slate-800 mb-3">Error Response Format</h4>
                <div class="code-block">
                    <div class="code-header">json</div>
                    <code>{
  "status": "error",
  "error": {
    "code": 401,
    "message": "Invalid API key",
    "details": "The provided API key is not valid or has expired"
  },
  "timestamp": "2026-07-21T09:30:00Z"
}</code>
                </div>
            </section>

        </div>
    </div>
</div>

{{-- CTA Section --}}
<section class="py-16 bg-gradient-to-br from-blue-50 to-indigo-50">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl font-bold text-slate-800 mb-4">Siap Mengintegrasikan API?</h2>
        <p class="text-slate-600 text-lg mb-8 max-w-2xl mx-auto">
            Dapatkan API key gratis dan mulai integrasikan supply chain intelligence ke aplikasi Anda.
        </p>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            @guest
                <a href="{{ route('register') }}" class="inline-flex items-center gap-2 px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg shadow-lg hover:bg-blue-700 transition-colors">
                    <span>🔑</span>
                    Get Free API Key
                </a>
            @else
                <a href="{{ route('user.dashboard') }}" class="inline-flex items-center gap-2 px-8 py-4 bg-blue-600 text-white font-semibold rounded-lg shadow-lg hover:bg-blue-700 transition-colors">
                    <span>🔑</span>
                    Generate API Key
                </a>
            @endguest
            <a href="{{ route('info.data-sources') }}" class="inline-flex items-center gap-2 px-8 py-4 border-2 border-blue-600 text-blue-600 font-semibold rounded-lg hover:bg-blue-600 hover:text-white transition-colors">
                <span>📚</span>
                Explore Data Sources
            </a>
        </div>
    </div>
</section>

@endsection

{{-- Include Footer --}}
@section('footer')
    @include('partials.footer')
@endsection

@push('scripts')
<script>
// Copy code functionality
document.addEventListener('DOMContentLoaded', function() {
    const copyButtons = document.querySelectorAll('.copy-button');
    
    copyButtons.forEach(button => {
        button.addEventListener('click', function() {
            const codeBlock = this.parentElement;
            const code = codeBlock.querySelector('code');
            
            navigator.clipboard.writeText(code.textContent).then(() => {
                this.textContent = 'Copied!';
                setTimeout(() => {
                    this.textContent = 'Copy';
                }, 2000);
            });
        });
    });

    // Smooth scrolling for navigation links
    const navLinks = document.querySelectorAll('.nav-link');
    
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
                
                // Update active nav item
                navLinks.forEach(l => l.classList.remove('active'));
                this.classList.add('active');
            }
        });
    });
});
</script>
@endpush