@extends('install.layout', ['currentStep' => 5])

@section('title', 'Installation Complete')

@section('content')
<div class="p-8 flex flex-col flex-1 items-center justify-center text-center">

    {{-- ── Success icon ── --}}
    <div class="w-20 h-20 rounded-full bg-emerald-100 flex items-center justify-center mb-6 shadow-inner">
        <svg class="w-10 h-10 text-emerald-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
    </div>

    <h2 class="text-2xl font-extrabold text-slate-800 mb-2">Installation Complete!</h2>
    <p class="text-slate-500 max-w-md mb-8">
        TicketDjama has been successfully installed. The setup wizard has been
        permanently disabled. Your API is now live.
    </p>

    {{-- ── Info cards ── --}}
    <div class="w-full max-w-md space-y-3 text-left mb-8">

        {{-- API base URL --}}
        <div class="flex items-start gap-3 px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-xl">
            <svg class="w-5 h-5 text-brand-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9"/>
            </svg>
            <div>
                <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">API Base URL</p>
                <code class="text-sm text-slate-800 font-mono">{{ url('/api') }}</code>
            </div>
        </div>

        {{-- First login endpoint --}}
        <div class="flex items-start gap-3 px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-xl">
            <svg class="w-5 h-5 text-brand-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
            </svg>
            <div>
                <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Staff Login Endpoint</p>
                <code class="text-sm text-slate-800 font-mono">POST {{ url('/api/auth/login') }}</code>
            </div>
        </div>

        {{-- Tenant header --}}
        <div class="flex items-start gap-3 px-4 py-3.5 bg-slate-50 border border-slate-200 rounded-xl">
            <svg class="w-5 h-5 text-brand-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A2 2 0 013 12V7a2 2 0 012-2z"/>
            </svg>
            <div>
                <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Required Header</p>
                <code class="text-sm text-slate-800 font-mono">X-Tenant-Slug: &lt;your-slug&gt;</code>
            </div>
        </div>
    </div>

    {{-- ── Next steps ── --}}
    <div class="w-full max-w-md text-left mb-8">
        <p class="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">Next Steps</p>
        <ol class="space-y-2">
            @foreach ([
                'Use the Flutter app or a REST client to call POST /api/auth/login with your admin credentials.',
                'Add routers, hotspots, and packages via the management API.',
                'For production: set APP_DEBUG=false in .env and configure a queue worker.',
                'Optionally update SESSION_DRIVER=database in .env once the database is confirmed stable.',
            ] as $i => $step)
                <li class="flex items-start gap-3">
                    <span class="w-5 h-5 rounded-full bg-brand-100 text-brand-700 text-xs font-bold flex items-center justify-center flex-shrink-0 mt-0.5">
                        {{ $i + 1 }}
                    </span>
                    <p class="text-sm text-slate-600">{{ $step }}</p>
                </li>
            @endforeach
        </ol>
    </div>

    {{-- ── API spec link ── --}}
    <div class="flex items-center gap-3 px-5 py-3 bg-brand-50 border border-brand-200 rounded-xl text-sm text-brand-800 w-full max-w-md">
        <svg class="w-5 h-5 text-brand-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
        <p>
            Refer to <strong>API_SPEC.md</strong> in your project root for the full
            endpoint documentation.
        </p>
    </div>
</div>
@endsection