@extends('admin.layout')

@section('title', 'Demo account aangemaakt')

@section('content')
<div class="max-w-lg">
    <div class="mb-6">
        <h1 class="text-xl font-bold text-gray-900">Demo account aangemaakt ✓</h1>
        <p class="mt-1 text-sm text-gray-500">
            Deel onderstaande inloggegevens met de potentiële abonnee.
            Het wachtwoord is na het sluiten van deze pagina niet meer opvraagbaar.
        </p>
    </div>

    {{-- Credentials card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 space-y-5"
         x-data="{ copiedEmail: false, copiedPw: false, copiedAll: false }">

        <div class="flex items-center justify-between pb-4 border-b border-gray-100">
            <div>
                <p class="text-sm font-semibold text-gray-800">{{ $user->name }}</p>
                <p class="text-xs text-gray-500 mt-0.5">
                    {{ $user->pro_type === 'organization' ? '🏢 Hulporganisatie' : '🧑‍⚕️ Hulpverlener' }}
                    &nbsp;·&nbsp;
                    Verloopt {{ $user->subscription_ends_at?->format('d/m/Y') }}
                    ({{ $user->subscription_ends_at?->diffForHumans() }})
                </p>
            </div>
            <a href="{{ route('admin.users.show', $user) }}"
               class="text-xs text-indigo-600 hover:underline">Gebruikerspagina →</a>
        </div>

        {{-- Email --}}
        <div>
            <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-1.5">E-mailadres</p>
            <div class="flex items-center gap-2">
                <code class="flex-1 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 text-sm font-mono text-gray-800 select-all">{{ $user->email }}</code>
                <button type="button"
                        @click="navigator.clipboard.writeText('{{ $user->email }}'); copiedEmail = true; setTimeout(() => copiedEmail = false, 2000)"
                        class="shrink-0 px-3 py-2 rounded-lg text-xs font-medium border transition"
                        :class="copiedEmail ? 'bg-green-50 border-green-200 text-green-700' : 'bg-gray-50 border-gray-200 text-gray-600 hover:bg-gray-100'">
                    <span x-show="!copiedEmail">Kopieer</span>
                    <span x-show="copiedEmail">✓ Gekopieerd</span>
                </button>
            </div>
        </div>

        {{-- Password --}}
        <div>
            <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-1.5">
                Wachtwoord
                <span class="ml-1 font-normal normal-case text-red-400">— éénmalig zichtbaar</span>
            </p>
            @if ($password)
                <div class="flex items-center gap-2">
                    <code class="flex-1 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 text-sm font-mono text-amber-900 select-all">{{ $password }}</code>
                    <button type="button"
                            @click="navigator.clipboard.writeText('{{ $password }}'); copiedPw = true; setTimeout(() => copiedPw = false, 2000)"
                            class="shrink-0 px-3 py-2 rounded-lg text-xs font-medium border transition"
                            :class="copiedPw ? 'bg-green-50 border-green-200 text-green-700' : 'bg-amber-50 border-amber-200 text-amber-700 hover:bg-amber-100'">
                        <span x-show="!copiedPw">Kopieer</span>
                        <span x-show="copiedPw">✓ Gekopieerd</span>
                    </button>
                </div>
            @else
                <p class="text-sm text-red-500 italic">
                    Wachtwoord niet meer beschikbaar — navigeer terug en maak een nieuw account aan als het wachtwoord kwijt is.
                </p>
            @endif
        </div>

        {{-- Copy all button --}}
        @if ($password)
        @php
            $copyText = implode("\n", [
                'Inloggegevens ND-Link demo',
                '',
                'URL: ' . url('/login'),
                'E-mail: ' . $user->email,
                'Wachtwoord: ' . $password,
                '',
                'Dit account verloopt op ' . $user->subscription_ends_at?->format('d/m/Y') . '.',
            ]);
        @endphp
        <div class="pt-3 border-t border-gray-100">
            <button type="button"
                    @click="
                        navigator.clipboard.writeText(@js($copyText));
                        copiedAll = true;
                        setTimeout(() => copiedAll = false, 2500)
                    "
                    class="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold border-2 transition"
                    :class="copiedAll ? 'bg-green-50 border-green-400 text-green-700' : 'bg-indigo-50 border-indigo-300 text-indigo-700 hover:bg-indigo-100'">
                <svg x-show="!copiedAll" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
                </svg>
                <svg x-show="copiedAll" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                </svg>
                <span x-show="!copiedAll">Kopieer alles (klaar om te plakken in e-mail of WhatsApp)</span>
                <span x-show="copiedAll">✓ Gekopieerd naar klembord</span>
            </button>
        </div>
        @endif
    </div>

    {{-- Next steps --}}
    <div class="mt-5 bg-blue-50 border border-blue-100 rounded-xl p-4 text-sm text-blue-800 space-y-1.5">
        <p class="font-semibold">Volgende stappen</p>
        <ul class="list-disc list-inside space-y-1 text-blue-700">
            <li>Stuur de inloggegevens per e-mail of WhatsApp naar de kandidaat-abonnee.</li>
            <li>Wijs hen op de <strong>{{ $user->subscription_ends_at?->format('d/m/Y') }}</strong> vervaldatum.</li>
            <li>Na de demo: abonnement verlengen via <a href="{{ route('admin.users.show', $user) }}" class="underline">de gebruikerspagina</a> of het account intrekken.</li>
        </ul>
    </div>

    <div class="mt-5 flex flex-wrap gap-3">
        <form method="POST" action="{{ route('admin.users.impersonate', $user) }}">
            @csrf
            <button type="submit"
                    class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold rounded-lg transition">
                ✏️ Profiel invullen als deze gebruiker
            </button>
        </form>
        <a href="{{ route('admin.demo.create') }}"
           class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition">
            + Nog een demo account
        </a>
        <a href="{{ route('admin.users.index') }}"
           class="px-4 py-2 border border-gray-200 text-gray-600 text-sm rounded-lg hover:bg-gray-50 transition">
            Terug naar gebruikers
        </a>
    </div>
</div>
@endsection