<x-app-layout>
    <x-module-hero
        title="SMS Integration Documentation"
        description="How to use SMSService in your modules"
        icon="fa-book">
        <x-slot name="tabs">
            <a href="{{ route('config.sms.index') }}"
               class="module-hero-tab text-[#1e293b]">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            <a href="{{ route('config.sms.edit') }}"
               class="module-hero-tab text-[#1e293b]">
                <i class="fas fa-edit"></i> Edit Configuration
            </a>
            <a href="{{ route('config.sms.logs') }}"
               class="module-hero-tab text-[#1e293b]">
                <i class="fas fa-history"></i> Logs
            </a>
            <a href="{{ route('config.sms.documentation') }}"
               class="module-hero-tab active-tab text-[#1e293b]">
                <i class="fas fa-book"></i> Documentation
            </a>
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

            {{-- Sidebar TOC --}}
            <div class="lg:col-span-1">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sticky top-6">
                    <h3 class="text-sm font-semibold text-gray-800 mb-3">Contents</h3>
                    <nav class="space-y-1">
                        <a href="#overview" class="block text-sm text-green-600 hover:underline">Overview</a>
                        <a href="#quick-start" class="block text-sm text-green-600 hover:underline">Quick Start</a>
                        <a href="#methods" class="block text-sm text-green-600 hover:underline">Available Methods</a>
                        <a href="#response" class="block text-sm text-green-600 hover:underline">Response Format</a>
                        <a href="#error-handling" class="block text-sm text-green-600 hover:underline">Error Handling</a>
                        <a href="#phone-format" class="block text-sm text-green-600 hover:underline">Phone Number Format</a>
                        <a href="#best-practices" class="block text-sm text-green-600 hover:underline">Best Practices</a>
                        <a href="#example" class="block text-sm text-green-600 hover:underline">Complete Example</a>
                    </nav>
                </div>
            </div>

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

                {{-- Overview --}}
                <section id="overview" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-info-circle text-blue-500"></i> Overview
                    </h2>
                    <p class="text-gray-600 text-sm">
                        The <code class="bg-gray-100 px-1 rounded">SMSService</code> provides a simple, consistent interface for sending SMS messages throughout your application.
                        It handles all the complexity of API communication, logging, and error handling automatically.
                    </p>
                </section>

                {{-- Quick Start --}}
                <section id="quick-start" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-rocket text-green-500"></i> Quick Start
                    </h2>
                    <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-xs"><code>use App\Services\SMSService;

// Dependency injection
public function sendNotification(SMSService $smsService)
{
    $result = $smsService->send('+254712345678', 'Hello from SSHIA!');

    if ($result['success']) {
        echo "Message ID: " . $result['message_id'];
    } else {
        echo "Error: " . $result['message'];
    }
}

// App helper
$result = app(SMSService::class)->send('+254712345678', 'Your message here');</code></pre>
                </section>

                {{-- Available Methods --}}
                <section id="methods" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                        <i class="fas fa-list text-purple-500"></i> Available Methods
                    </h2>
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2"><code class="bg-gray-100 px-1 rounded">send($phone, $message)</code></h3>
                            <p class="text-sm text-gray-600 mb-2">Send an SMS to a single recipient.</p>
                            <pre class="bg-gray-900 text-green-400 p-3 rounded-lg overflow-x-auto text-xs"><code>$result = $smsService->send('+254712345678', 'Hello!');</code></pre>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2"><code class="bg-gray-100 px-1 rounded">sendBulk($phones, $message)</code></h3>
                            <p class="text-sm text-gray-600 mb-2">Send SMS to multiple recipients.</p>
                            <pre class="bg-gray-900 text-green-400 p-3 rounded-lg overflow-x-auto text-xs"><code>$phones = ['+254712345678', '+254723456789'];
$result = $smsService->sendBulk($phones, 'Bulk message content');
// Returns: ['total' => 2, 'sent' => 2, 'failed' => 0, 'results' => [...]]</code></pre>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2"><code class="bg-gray-100 px-1 rounded">sendTemplate($phone, $template, $variables)</code></h3>
                            <p class="text-sm text-gray-600 mb-2">Send a templated message with variable substitution.</p>
                            <pre class="bg-gray-900 text-green-400 p-3 rounded-lg overflow-x-auto text-xs"><code>$result = $smsService->sendTemplate(
    '+254712345678',
    'Hello {name}, your appointment is on {date}.',
    ['name' => 'John Doe', 'date' => 'March 15, 2024']
);</code></pre>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2"><code class="bg-gray-100 px-1 rounded">sendOTP($phone, $otp, $expiryMinutes)</code></h3>
                            <p class="text-sm text-gray-600 mb-2">Send a one-time password message.</p>
                            <pre class="bg-gray-900 text-green-400 p-3 rounded-lg overflow-x-auto text-xs"><code>$result = $smsService->sendOTP('+254712345678', '123456', 10);
// Sends: "Your verification code is 123456. Valid for 10 minutes."</code></pre>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2">Helper Methods</h3>
                            <pre class="bg-gray-900 text-green-400 p-3 rounded-lg overflow-x-auto text-xs"><code>if ($smsService->isAvailable()) { /* SMS service is ready */ }
$status = $smsService->getStatus(); // ['available' => true, 'environment' => 'production', ...]
$validation = $smsService->validatePhone('0712345678'); // ['valid' => true, 'formatted' => '+254712345678']</code></pre>
                        </div>
                    </div>
                </section>

                {{-- Response Format --}}
                <section id="response" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-code text-indigo-500"></i> Response Format
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2">Success Response</h3>
                            <pre class="bg-gray-900 text-green-400 p-3 rounded-lg overflow-x-auto text-xs"><code>[
    'success' => true,
    'message' => 'SMS sent successfully',
    'message_id' => 'ATXid_abc123',
    'log_id' => 42,
    'cost' => 0.0123,
]</code></pre>
                        </div>
                        <div>
                            <h3 class="text-sm font-semibold text-gray-800 mb-2">Error Response</h3>
                            <pre class="bg-gray-900 text-red-400 p-3 rounded-lg overflow-x-auto text-xs"><code>[
    'success' => false,
    'message' => 'Failed to send SMS',
    'message_id' => null,
    'log_id' => 42,
    'cost' => null,
    'error_code' => 'INVALID_PHONE',
]</code></pre>
                        </div>
                    </div>
                </section>

                {{-- Error Handling --}}
                <section id="error-handling" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-exclamation-triangle text-red-500"></i> Error Handling
                    </h2>
                    <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-xs mb-4"><code>$result = $smsService->send($phone, $message);
if (!$result['success']) {
    switch ($result['error_code'] ?? 'UNKNOWN') {
        case 'NOT_CONFIGURED': /* SMS not configured */ break;
        case 'INVALID_PHONE':  /* Invalid phone number */ break;
        case 'API_ERROR':      /* Africa's Talking API error */ break;
    }
    Log::error('SMS failed', ['phone' => $phone, 'error' => $result['message']]);
}</code></pre>
                    <h3 class="text-sm font-semibold text-gray-800 mb-2">Common Error Codes</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full table-zebra text-sm">
                            <thead>
                                <tr>
                                    <th class="px-3 py-2 text-left th-col-1">Error Code</th>
                                    <th class="px-3 py-2 text-left th-col-2">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0"><td class="px-3 py-2 font-mono text-xs">NOT_CONFIGURED</td><td class="px-3 py-2 text-xs">SMS service is not configured</td></tr>
                                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0"><td class="px-3 py-2 font-mono text-xs">INVALID_PHONE</td><td class="px-3 py-2 text-xs">Phone number format is invalid</td></tr>
                                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0"><td class="px-3 py-2 font-mono text-xs">EMPTY_MESSAGE</td><td class="px-3 py-2 text-xs">Message content is empty</td></tr>
                                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0"><td class="px-3 py-2 font-mono text-xs">API_ERROR</td><td class="px-3 py-2 text-xs">Africa's Talking API returned an error</td></tr>
                                <tr class="odd:bg-white even:bg-gray-50 hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-0"><td class="px-3 py-2 font-mono text-xs">CONNECTION_ERROR</td><td class="px-3 py-2 text-xs">Could not connect to API</td></tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                {{-- Phone Number Format --}}
                <section id="phone-format" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-phone text-teal-500"></i> Phone Number Format
                    </h2>
                    <p class="text-sm text-gray-600 mb-3">The service automatically formats phone numbers. All formats below are accepted:</p>
                    <div class="overflow-x-auto">
                        <table class="w-full table-zebra text-sm">
                            <thead>
                                <tr>
                                    <th class="px-3 py-2 text-left th-col-1">Input Format</th>
                                    <th class="px-3 py-2 text-left th-col-2">Converted To</th>
                                    <th class="px-3 py-2 text-left th-col-3">Notes</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td class="px-3 py-2 font-mono text-xs">+254712345678</td><td class="px-3 py-2 font-mono text-xs">+254712345678</td><td class="px-3 py-2 text-xs">Already international format</td></tr>
                                <tr><td class="px-3 py-2 font-mono text-xs">254712345678</td><td class="px-3 py-2 font-mono text-xs">+254712345678</td><td class="px-3 py-2 text-xs">Adds + prefix</td></tr>
                                <tr><td class="px-3 py-2 font-mono text-xs">0712345678</td><td class="px-3 py-2 font-mono text-xs">+254712345678</td><td class="px-3 py-2 text-xs">Kenyan local format</td></tr>
                                <tr><td class="px-3 py-2 font-mono text-xs">712345678</td><td class="px-3 py-2 font-mono text-xs">+254712345678</td><td class="px-3 py-2 text-xs">9-digit Kenyan number</td></tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                {{-- Best Practices --}}
                <section id="best-practices" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-check-circle text-green-500"></i> Best Practices
                    </h2>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-3"><i class="fas fa-check text-green-500 mt-0.5"></i><div><strong class="text-gray-800 text-sm">Always Check Response</strong><p class="text-xs text-gray-600 mt-0.5">Always verify the <code class="bg-gray-100 px-1 rounded">success</code> key before assuming the message was sent.</p></div></li>
                        <li class="flex items-start gap-3"><i class="fas fa-check text-green-500 mt-0.5"></i><div><strong class="text-gray-800 text-sm">Log Errors</strong><p class="text-xs text-gray-600 mt-0.5">Log failed SMS attempts for debugging and user notification.</p></div></li>
                        <li class="flex items-start gap-3"><i class="fas fa-check text-green-500 mt-0.5"></i><div><strong class="text-gray-800 text-sm">Use Templates</strong><p class="text-xs text-gray-600 mt-0.5">Use <code class="bg-gray-100 px-1 rounded">sendTemplate()</code> for consistent message formatting.</p></div></li>
                        <li class="flex items-start gap-3"><i class="fas fa-check text-green-500 mt-0.5"></i><div><strong class="text-gray-800 text-sm">Test in Sandbox First</strong><p class="text-xs text-gray-600 mt-0.5">Always test SMS functionality in sandbox environment before going live.</p></div></li>
                        <li class="flex items-start gap-3"><i class="fas fa-check text-green-500 mt-0.5"></i><div><strong class="text-gray-800 text-sm">Handle Unavailable Service</strong><p class="text-xs text-gray-600 mt-0.5">Check <code class="bg-gray-100 px-1 rounded">isAvailable()</code> before sending critical notifications.</p></div></li>
                    </ul>
                </section>

                {{-- Complete Example --}}
                <section id="example" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-xl font-bold text-gray-800 mb-3 flex items-center gap-2">
                        <i class="fas fa-file-code text-teal-500"></i> Complete Example
                    </h2>
                    <pre class="bg-gray-900 text-green-400 p-4 rounded-lg overflow-x-auto text-xs"><code>use App\Services\SMSService;
use Illuminate\Support\Facades\Log;

class UserRegistrationService
{
    public function __construct(protected SMSService $smsService) {}

    public function sendWelcomeSms($user): bool
    {
        if (!$this->smsService->isAvailable()) {
            Log::warning('SMS service not available for welcome SMS');
            return false;
        }

        $result = $this->smsService->sendTemplate(
            $user->phone,
            'Welcome to SSHIA, {name}! Your account is now active.',
            ['name' => $user->name]
        );

        if ($result['success']) {
            Log::info('Welcome SMS sent', ['user_id' => $user->id, 'message_id' => $result['message_id']]);
            return true;
        }

        Log::error('Welcome SMS failed', ['user_id' => $user->id, 'error' => $result['message']]);
        return false;
    }

    public function sendVerificationCode($user, string $code): bool
    {
        $result = $this->smsService->sendOTP($user->phone, $code, 10);
        return $result['success'];
    }
}</code></pre>
                </section>

            </div>
        </div>
    </div>
</x-app-layout>
