<x-app-layout>
    <x-module-hero
        title="Email Service Documentation"
        description="Integration guide for developers"
        icon="fa-book">
        <x-slot name="tabs">
            @can('view email configuration')
            <a href="{{ route('config.email.index') }}"
               class="module-hero-tab {{ request()->routeIs('config.email.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-tachometer-alt"></i> Dashboard
            </a>
            @endcan
            @can('create email configuration')
            <a href="{{ route('config.email.create') }}"
               class="module-hero-tab {{ request()->routeIs('config.email.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-plus"></i> New Configuration
            </a>
            @endcan
            @can('view email logs')
            <a href="{{ route('config.email.logs') }}"
               class="module-hero-tab {{ request()->routeIs('config.email.logs') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <i class="fas fa-history"></i> Logs
            </a>
            @endcan
            <a href="{{ route('config.email.documentation') }}"
               class="module-hero-tab {{ request()->routeIs('config.email.documentation') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium transition">
                <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 Navigation --}}
            <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="#installation" class="block text-sm text-green-600 hover:underline">Installation</a>
                        <a href="#usage" class="block text-sm text-green-600 hover:underline">Basic Usage</a>
                        <a href="#sending" class="block text-sm text-green-600 hover:underline">Sending Emails</a>
                        <a href="#receiving" class="block text-sm text-green-600 hover:underline">Receiving Emails</a>
                        <a href="#templates" class="block text-sm text-green-600 hover:underline">Email Templates</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="#examples" class="block text-sm text-green-600 hover:underline">Complete Examples</a>
                        <a href="#best-practices" class="block text-sm text-green-600 hover:underline">Best Practices</a>
                    </nav>
                </div>
            </div>

            {{-- Main Documentation 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 mb-3">
                        The <code class="bg-gray-100 px-1 rounded">EmailService</code> provides a simple, reusable interface for sending and receiving emails
                        in your Laravel application. It handles SMTP/IMAP configuration, connection testing,
                        and comprehensive error handling automatically.
                    </p>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Key Features</h3>
                    <ul class="list-disc list-inside space-y-1 text-sm text-gray-600">
                        <li>Simple, clean API for email operations</li>
                        <li>Automatic configuration management</li>
                        <li>Support for HTML and plain text emails</li>
                        <li>Template-based email rendering</li>
                        <li>Connection testing and validation</li>
                        <li>Comprehensive error handling</li>
                        <li>Operation logging for debugging</li>
                        <li>Multi-recipient support</li>
                    </ul>
                </section>

                {{-- Installation --}}
                <section id="installation" 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-download text-green-500"></i> Installation
                    </h2>
                    <p class="text-gray-600 text-sm mb-3">
                        The EmailService is automatically registered in the service container.
                        Simply inject it into your class or use the facade.
                    </p>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Dependency Injection</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>use App\Services\EmailService;

class YourController extends Controller
{
    public function __construct(
        protected EmailService $emailService
    ) {}

    public function sendNotification()
    {
        $result = $this->emailService->send(
            'user@example.com',
            'Notification Subject',
            'Email body content'
        );
    }
}</code></pre>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">App Helper</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>$emailService = app(EmailService::class);
$result = $emailService->send('user@example.com', 'Subject', 'Body');</code></pre>
                </section>

                {{-- Basic Usage --}}
                <section id="usage" 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-play text-purple-500"></i> Basic Usage
                    </h2>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Check if Email is Configured</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>if ($emailService->isReady()) {
    // Email is configured
}
if ($emailService->hasSmtp()) {
    // SMTP is configured
}
if ($emailService->hasImap()) {
    // IMAP is configured
}</code></pre>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Get Sender Information</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>$sender = $emailService->getSenderInfo();
// Returns: ['address' => 'noreply@example.com', 'name' => 'App Name']</code></pre>
                </section>

                {{-- Sending Emails --}}
                <section id="sending" 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-paper-plane text-blue-500"></i> Sending Emails
                    </h2>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Send Plain Text Email</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>$result = $emailService->sendText(
    'user@example.com',
    'Welcome!',
    'Thank you for registering with us.'
);
if ($result['success']) {
    echo "Email sent! Message ID: " . $result['messageId'];
}</code></pre>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Send HTML Email</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>$result = $emailService->sendHtml(
    'user@example.com',
    'Welcome!',
    '&lt;h1&gt;Welcome!&lt;/h1&gt;&lt;p&gt;Thank you for registering.&lt;/p&gt;'
);</code></pre>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Send to Multiple Recipients</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>$recipients = ['user1@example.com', 'user2@example.com'];
$result = $emailService->sendToMany($recipients, 'Newsletter', '&lt;h1&gt;Content&lt;/h1&gt;', true);
echo "Total: {$result['total']}, Success: {$result['successful']}, Failed: {$result['failed']}";</code></pre>
                </section>

                {{-- Receiving Emails --}}
                <section id="receiving" 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-inbox text-purple-500"></i> Receiving Emails
                    </h2>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>$result = $emailService->receive(10);
if ($result['success']) {
    foreach ($result['data']['emails'] as $email) {
        echo "From: {$email['from']['email']}\n";
        echo "Subject: {$email['subject']}\n";
    }
}</code></pre>
                </section>

                {{-- Templates --}}
                <section id="templates" 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-orange-500"></i> Email Templates
                    </h2>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Using Blade Templates</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>$result = $emailService->sendTemplate(
    'user@example.com',
    'Welcome to Our Platform!',
    'emails.welcome',
    [
        'userName' => 'John Doe',
        'verificationUrl' => route('verify', ['token' => $token]),
    ]
);</code></pre>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Example Blade Template</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>@verbatim{{-- resources/views/emails/welcome.blade.php --}}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body style="font-family: sans-serif;"&gt;
    &lt;h1&gt;Welcome, {{ $userName }}!&lt;/h1&gt;
    &lt;a href="{{ $verificationUrl }}"&gt;Verify Email&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;@endverbatim</code></pre>
                </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>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>[
    'success' => bool,
    'messageId' => string|null,
    'message' => string,
    'data' => array|null,
    'error' => string|null,
    'execution_time_ms' => int,
]</code></pre>
                </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-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>$result = $emailService->send($to, $subject, $body);
if (!$result['success']) {
    Log::error('Email send failed', [
        'recipient' => $to,
        'error' => $result['error'],
    ]);
    return back()->with('error', 'Failed to send email: ' . $result['message']);
}
return back()->with('success', 'Email sent successfully!');</code></pre>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">Common Errors</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</th>
                                    <th class="px-3 py-2 text-left th-col-2">Cause</th>
                                    <th class="px-3 py-2 text-left th-col-3">Solution</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">No active email configuration</td><td class="px-3 py-2">SMTP not configured</td><td class="px-3 py-2">Configure SMTP settings</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">Connection timed out</td><td class="px-3 py-2">Network/host unreachable</td><td class="px-3 py-2">Check host and port</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">Authentication failed</td><td class="px-3 py-2">Invalid credentials</td><td class="px-3 py-2">Verify username/password</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">Invalid email address</td><td class="px-3 py-2">Bad recipient format</td><td class="px-3 py-2">Validate email format</td></tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                {{-- Complete Examples --}}
                <section id="examples" 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-laptop-code text-teal-500"></i> Complete Examples
                    </h2>
                    <h3 class="text-sm font-semibold text-gray-800 mt-4 mb-2">User Registration Notification</h3>
                    <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-xs"><code>use App\Services\EmailService;

class RegistrationController extends Controller
{
    public function __construct(protected EmailService $emailService) {}

    public function register(Request $request)
    {
        $user = User::create($request->validated());

        $result = $this->emailService->sendTemplate(
            $user->email,
            'Welcome to ' . config('app.name'),
            'emails.welcome',
            ['userName' => $user->name, 'loginUrl' => route('login')]
        );

        if (!$result['success']) {
            Log::warning('Welcome email failed', ['user_id' => $user->id]);
        }

        return redirect()->route('dashboard')->with('success', 'Registration complete!');
    }
}</code></pre>
                </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">Always check the result</strong><p class="text-sm text-gray-600 mt-0.5">Never assume email sending succeeded. Always check <code class="bg-gray-100 px-1 rounded">$result['success']</code>.</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">Use templates for complex emails</strong><p class="text-sm text-gray-600 mt-0.5">Keep email content in Blade templates for maintainability.</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">Log failures appropriately</strong><p class="text-sm text-gray-600 mt-0.5">Log email failures for debugging but don't expose error details to users.</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">Validate emails before sending</strong><p class="text-sm text-gray-600 mt-0.5">Use <code class="bg-gray-100 px-1 rounded">$emailService->validateEmail($email)</code> to validate addresses.</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">Handle gracefully when not configured</strong><p class="text-sm text-gray-600 mt-0.5">Check <code class="bg-gray-100 px-1 rounded">isReady()</code> before sending to avoid errors.</p></div>
                        </li>
                    </ul>
                </section>

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