@extends('layouts.app')

@section('content')
@php
    use Illuminate\Support\Str;

    $user = auth()->user();
    $prestataire = $user->prestataire ?? null;

    $displayName = $user->name ?? 'Prestataire';
    $initial = strtoupper(mb_substr($displayName, 0, 1));

    $categoryLabel =
        data_get($prestataire, 'subcategory.name')
        ?? data_get($prestataire, 'category.name')
        ?? data_get($prestataire, 'categorie.name')
        ?? data_get($prestataire, 'serviceCategory.name')
        ?? data_get($prestataire, 'metier.name')
        ?? data_get($prestataire, 'secteur.name')
        ?? data_get($prestataire, 'jobCategory.name')
        ?? data_get($prestataire, 'profession.name')
        ?? $prestataire->subcategory_name
        ?? $prestataire->category_name
        ?? $prestataire->categorie_name
        ?? $prestataire->metier
        ?? $prestataire->secteur
        ?? $prestataire->job_category
        ?? $prestataire->profession
        ?? $prestataire->category
        ?? $prestataire->categorie
        ?? $prestataire->specialty
        ?? null;

    $city =
        $prestataire->city
        ?? $prestataire->ville
        ?? data_get($prestataire, 'address_city')
        ?? null;

    $description = !empty($prestataire->description)
        ? Str::limit(strip_tags($prestataire->description), 95)
        : null;

    $avatarUrl = null;
    if ($prestataire && !empty($prestataire->photo)) {
        $avatarUrl = filter_var($prestataire->photo, FILTER_VALIDATE_URL)
            ? $prestataire->photo
            : asset('storage/' . $prestataire->photo);
    } elseif (!empty($user->avatar)) {
        $avatarUrl = filter_var($user->avatar, FILTER_VALIDATE_URL)
            ? $user->avatar
            : asset('storage/' . $user->avatar);
    } elseif (!empty($user->profile_photo_url)) {
        $avatarUrl = $user->profile_photo_url;
    }

    $publicProfileUrl = $prestataire
        ? route('prestataires.show', $prestataire)
        : url('/');

    $shortUrl = preg_replace('#^https?://#', '', $publicProfileUrl);
@endphp

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

.qrpro-page{
    min-height:100vh;
    padding:24px 16px 46px;
    font-family:'Inter',system-ui,sans-serif;
    background:
        radial-gradient(circle at top left, rgba(236,72,153,.12), transparent 24%),
        radial-gradient(circle at top right, rgba(59,130,246,.16), transparent 28%),
        radial-gradient(circle at bottom left, rgba(124,58,237,.11), transparent 24%),
        #f3f4f6;
    -webkit-font-smoothing:antialiased;
}

.qrpro-shell{
    max-width:470px;
    margin:0 auto;
}

.qrpro-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    color:#6b7280;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    transition:.2s ease;
}
.qrpro-back:hover{color:#111827}
.qrpro-back svg{width:16px;height:16px}

.qrpro-screen{
    background:#fff;
    border:1px solid #e5e7eb;
    box-shadow:
        0 16px 40px rgba(15,23,42,.08),
        0 4px 16px rgba(15,23,42,.04);
    overflow:hidden;
}

.qrpro-top{
    position:relative;
    padding:18px 18px 24px;
    color:#fff;
    background:linear-gradient(135deg,#0f172a 0%, #1d4ed8 45%, #7c3aed 100%);
}
.qrpro-top::before{
    content:'';
    position:absolute;
    right:-58px;
    top:-58px;
    width:180px;
    height:180px;
    border-radius:999px;
    background:rgba(255,255,255,.09);
}
.qrpro-top::after{
    content:'';
    position:absolute;
    left:-46px;
    bottom:-78px;
    width:190px;
    height:190px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
}
.qrpro-top>*{position:relative;z-index:1}

.qrpro-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.qrpro-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.14);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.qrpro-state{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    font-weight:700;
    color:rgba(255,255,255,.86);
}
.qrpro-state-dot{
    width:8px;
    height:8px;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.16);
}

.qrpro-profile{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.qrpro-avatar{
    width:74px;
    height:74px;
    overflow:hidden;
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
    flex-shrink:0;
}
.qrpro-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.qrpro-avatar-ph{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:31px;
    font-weight:900;
    color:#fff;
}

.qrpro-name{
    margin:2px 0 0;
    font-size:28px;
    line-height:1.04;
    font-weight:900;
    letter-spacing:-.02em;
    word-break:break-word;
}

.qrpro-category{
    display:inline-flex;
    align-items:center;
    margin-top:10px;
    padding:8px 12px;
    background:linear-gradient(135deg,#ec4899,#8b5cf6);
    color:#fff;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    box-shadow:0 8px 18px rgba(236,72,153,.22);
}

.qrpro-meta{
    margin-top:10px;
    font-size:13px;
    color:rgba(255,255,255,.84);
    line-height:1.5;
    font-weight:500;
}
.qrpro-desc{
    margin-top:8px;
    max-width:290px;
    font-size:12px;
    line-height:1.6;
    color:rgba(255,255,255,.72);
}

.qrpro-body{
    padding:16px;
    background:linear-gradient(180deg,#ffffff 0%, #fbfbfd 100%);
}

.qrpro-preview{
    background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
    border:1px solid #e5e7eb;
    padding:14px;
}

.qrpro-title{
    font-size:16px;
    font-weight:800;
    color:#111827;
}
.qrpro-subtitle{
    margin-top:4px;
    font-size:12px;
    line-height:1.5;
    color:#6b7280;
}

.qrpro-qrbox{
    margin-top:14px;
    position:relative;
    padding:16px;
    background:
        linear-gradient(135deg, rgba(37,99,235,.05), rgba(124,58,237,.05)),
        #ffffff;
    border:1px solid #e5e7eb;
    display:flex;
    justify-content:center;
    align-items:center;
}
.qrpro-qrbox::before,
.qrpro-qrbox::after{
    content:'';
    position:absolute;
    width:14px;
    height:14px;
    border:2px solid #2563eb;
}
.qrpro-qrbox::before{
    top:8px;
    left:8px;
    border-right:none;
    border-bottom:none;
}
.qrpro-qrbox::after{
    right:8px;
    bottom:8px;
    border-left:none;
    border-top:none;
}

#qrcode-preview{
    display:flex;
    align-items:center;
    justify-content:center;
}
#qrcode-preview img,
#qrcode-preview canvas{
    width:100% !important;
    height:auto !important;
    max-width:220px;
    display:block;
}

.qrpro-url{
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    color:#64748b;
    word-break:break-all;
}
.qrpro-url-dot{
    width:8px;
    height:8px;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.12);
    flex-shrink:0;
}

.qrpro-actions{
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.qrpro-btn{
    min-height:48px;
    border:none;
    text-decoration:none;
    cursor:pointer;
    padding:12px 14px;
    font-family:'Inter',system-ui,sans-serif;
    font-size:13px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.2s ease;
}

.qrpro-btn-primary{
    background:linear-gradient(135deg,#111827 0%, #2563eb 100%);
    color:#fff;
    box-shadow:0 10px 20px rgba(37,99,235,.18);
}
.qrpro-btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 26px rgba(37,99,235,.24);
}

.qrpro-btn-secondary{
    background:#fff;
    color:#111827;
    border:1px solid #d1d5db;
}
.qrpro-btn-secondary:hover{background:#f9fafb}

.qrpro-btn-link{
    margin-top:10px;
    width:100%;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
    color:#2563eb;
    border:1px dashed #cbd5e1;
}
.qrpro-btn-link:hover{background:#f8fbff}

.qrpro-feedback{
    min-height:18px;
    margin-top:10px;
    text-align:center;
    font-size:12px;
    font-weight:800;
}

.qrpro-note{
    margin-top:14px;
    padding:14px;
    background:#fff;
    border:1px solid #e5e7eb;
    display:flex;
    align-items:flex-start;
    gap:10px;
    box-shadow:0 4px 10px rgba(15,23,42,.03);
}
.qrpro-note i{
    color:#f59e0b;
    font-size:15px;
    margin-top:2px;
    flex-shrink:0;
}
.qrpro-note p{
    margin:0;
    font-size:12.5px;
    line-height:1.6;
    color:#6b7280;
}
.qrpro-note strong{color:#111827}

/* EXPORT */
.qrpro-export-stage{
    position:fixed;
    left:-99999px;
    top:0;
    width:860px;
    padding:40px;
    background:#eef2f7;
}

.qrpro-export-card{
    width:760px;
    overflow:hidden;
    background:linear-gradient(135deg,#ffffff 0%, #f8fafc 100%);
    border:1px solid #dbe3ec;
    box-shadow:0 20px 50px rgba(15,23,42,.12);
}

.qrpro-export-top{
    position:relative;
    padding:28px 30px;
    color:#fff;
    background:linear-gradient(135deg,#0f172a 0%, #1d4ed8 50%, #7c3aed 100%);
}
.qrpro-export-top::before{
    content:'';
    position:absolute;
    top:-55px;
    right:-55px;
    width:170px;
    height:170px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
}
.qrpro-export-top::after{
    content:'';
    position:absolute;
    left:-45px;
    bottom:-75px;
    width:190px;
    height:190px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
}
.qrpro-export-top>*{position:relative;z-index:1}

.qrpro-export-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}
.qrpro-export-mark{
    font-size:11px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.78);
}
.qrpro-export-status{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    color:rgba(255,255,255,.84);
}
.qrpro-export-status-dot{
    width:8px;
    height:8px;
    background:#22c55e;
}

.qrpro-export-profile{
    display:flex;
    align-items:center;
    gap:18px;
}
.qrpro-export-avatar{
    width:88px;
    height:88px;
    overflow:hidden;
    background:linear-gradient(135deg,#0ea5e9,#2563eb);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 10px 24px rgba(0,0,0,.20);
    flex-shrink:0;
}
.qrpro-export-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.qrpro-export-avatar-ph{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:#fff;
    font-weight:900;
}

.qrpro-export-name{
    margin:0;
    font-size:34px;
    line-height:1.06;
    font-weight:900;
    letter-spacing:-.03em;
}
.qrpro-export-category{
    display:inline-flex;
    align-items:center;
    margin-top:10px;
    padding:9px 14px;
    background:linear-gradient(135deg,#ec4899,#8b5cf6);
    color:#fff;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    box-shadow:0 10px 20px rgba(236,72,153,.18);
}
.qrpro-export-meta{
    margin-top:10px;
    font-size:14px;
    line-height:1.5;
    color:rgba(255,255,255,.86);
}
.qrpro-export-desc{
    margin-top:10px;
    max-width:420px;
    font-size:13px;
    line-height:1.65;
    color:rgba(255,255,255,.72);
}

.qrpro-export-body{
    padding:28px 30px;
    display:grid;
    grid-template-columns:1fr 250px;
    gap:28px;
    align-items:center;
}

.qrpro-export-title{
    margin:0;
    font-size:26px;
    line-height:1.16;
    font-weight:900;
    color:#0f172a;
}
.qrpro-export-text{
    margin-top:12px;
    font-size:14px;
    line-height:1.75;
    color:#64748b;
}
.qrpro-export-url{
    margin-top:18px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:800;
    color:#334155;
    word-break:break-all;
}
.qrpro-export-url-dot{
    width:10px;
    height:10px;
    background:#22c55e;
    flex-shrink:0;
}

.qrpro-export-qr{
    position:relative;
    background:#fff;
    border:1px solid #e5e7eb;
    padding:18px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.qrpro-export-qr::before,
.qrpro-export-qr::after{
    content:'';
    position:absolute;
    width:16px;
    height:16px;
    border:3px solid #2563eb;
}
.qrpro-export-qr::before{
    top:8px;
    left:8px;
    border-right:none;
    border-bottom:none;
}
.qrpro-export-qr::after{
    right:8px;
    bottom:8px;
    border-left:none;
    border-top:none;
}

#qrcode-export{
    display:flex;
    align-items:center;
    justify-content:center;
}
#qrcode-export img,
#qrcode-export canvas{
    width:100% !important;
    height:auto !important;
    max-width:190px;
    display:block;
}

.qrpro-export-footer{
    padding:0 30px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}
.qrpro-export-footer-left{
    font-size:12px;
    line-height:1.7;
    color:#64748b;
}
.qrpro-export-brand{
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#94a3b8;
}

@media (max-width:640px){
    .qrpro-page{padding:18px 12px 40px}
    .qrpro-name{font-size:24px}
}
</style>

<div class="qrpro-page">
    <div class="qrpro-shell">

        <a href="{{ route('prestataire.dashboard') }}" class="qrpro-back">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Retour au dashboard
        </a>

        <div class="qrpro-screen">
            <div class="qrpro-top">
                <div class="qrpro-topbar">
                    <div class="qrpro-badge">
                        <i class="fas fa-qrcode"></i>
                        Carte QR
                    </div>

                    <div class="qrpro-state">
                        <span class="qrpro-state-dot"></span>
                        Profil actif
                    </div>
                </div>

                <div class="qrpro-profile">
                    <div class="qrpro-avatar">
                        @if($avatarUrl)
                            <img src="{{ $avatarUrl }}" alt="{{ $displayName }}">
                        @else
                            <div class="qrpro-avatar-ph">{{ $initial }}</div>
                        @endif
                    </div>

                    <div>
                        <h1 class="qrpro-name">{{ $displayName }}</h1>

                        @if($categoryLabel)
                            <div class="qrpro-category">{{ $categoryLabel }}</div>
                        @endif

                        @if($city)
                            <div class="qrpro-meta">{{ $city }}</div>
                        @endif

                        @if($description)
                            <div class="qrpro-desc">{{ $description }}</div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="qrpro-body">
                <div class="qrpro-preview">
                    <div class="qrpro-title">Aperçu de la carte à télécharger</div>
                    <div class="qrpro-subtitle">Le téléchargement génère une vraie carte de partage, sans boutons ni éléments d’interface.</div>

                    <div class="qrpro-qrbox">
                        <div id="qrcode-preview"></div>
                    </div>

                    <div class="qrpro-url">
                        <span class="qrpro-url-dot"></span>
                        <span>{{ $shortUrl }}</span>
                    </div>
                </div>

                <div class="qrpro-actions">
                    <button id="download-btn" class="qrpro-btn qrpro-btn-primary" type="button">
                        <i class="fas fa-download"></i>
                        Télécharger
                    </button>

                    <button class="qrpro-btn qrpro-btn-secondary" type="button" onclick="copyPublicUrl()">
                        <i class="fas fa-link"></i>
                        Copier le lien
                    </button>
                </div>

                @if($prestataire)
                    <a href="{{ $publicProfileUrl }}" class="qrpro-btn qrpro-btn-link">
                        <i class="fas fa-external-link-alt"></i>
                        Voir le profil public
                    </a>
                @endif

                <div class="qrpro-feedback" id="copy-feedback"></div>
            </div>
        </div>

        <div class="qrpro-note">
            <i class="fas fa-lightbulb"></i>
            <p>
                <strong>Astuce :</strong> le QR et le bouton copier utilisent exactement le même lien public vers ton profil.
            </p>
        </div>
    </div>
</div>

<div class="qrpro-export-stage">
    <div class="qrpro-export-card" id="export-card">
        <div class="qrpro-export-top">
            <div class="qrpro-export-bar">
                <div class="qrpro-export-mark">Carte de visite digitale</div>
                <div class="qrpro-export-status">
                    <span class="qrpro-export-status-dot"></span>
                    Profil actif
                </div>
            </div>

            <div class="qrpro-export-profile">
                <div class="qrpro-export-avatar">
                    @if($avatarUrl)
                        <img src="{{ $avatarUrl }}" alt="{{ $displayName }}">
                    @else
                        <div class="qrpro-export-avatar-ph">{{ $initial }}</div>
                    @endif
                </div>

                <div>
                    <h2 class="qrpro-export-name">{{ $displayName }}</h2>

                    @if($categoryLabel)
                        <div class="qrpro-export-category">{{ $categoryLabel }}</div>
                    @endif

                    @if($city)
                        <div class="qrpro-export-meta">{{ $city }}</div>
                    @endif

                    @if($description)
                        <div class="qrpro-export-desc">{{ $description }}</div>
                    @endif
                </div>
            </div>
        </div>

        <div class="qrpro-export-body">
            <div>
                <h3 class="qrpro-export-title">Scannez pour accéder directement à mon profil</h3>

                <div class="qrpro-export-text">
                    Retrouvez mes prestations, mes informations et mon profil public en un seul scan. Idéal pour devis, flyer, réseaux sociaux, story ou vitrine.
                </div>

                <div class="qrpro-export-url">
                    <span class="qrpro-export-url-dot"></span>
                    <span>{{ $shortUrl }}</span>
                </div>
            </div>

            <div class="qrpro-export-qr">
                <div id="qrcode-export"></div>
            </div>
        </div>

        <div class="qrpro-export-footer">
            <div class="qrpro-export-footer-left">
                Carte de contact professionnelle<br>
                QR direct vers le profil prestataire
            </div>

            <div class="qrpro-export-brand">Taprestation</div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

<script>
    const publicUrl = @json($publicProfileUrl);
    const feedback = document.getElementById('copy-feedback');
    const previewTarget = document.getElementById('qrcode-preview');
    const exportTarget = document.getElementById('qrcode-export');

    previewTarget.innerHTML = '';
    exportTarget.innerHTML = '';

    new QRCode(previewTarget, {
        text: publicUrl,
        width: 220,
        height: 220,
        colorDark: "#0f172a",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    new QRCode(exportTarget, {
        text: publicUrl,
        width: 190,
        height: 190,
        colorDark: "#0f172a",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    document.getElementById('download-btn').addEventListener('click', async function () {
        const card = document.getElementById('export-card');
        const button = this;

        try {
            button.disabled = true;
            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Génération...';

            const canvas = await html2canvas(card, {
                backgroundColor: '#eef2f7',
                scale: 3,
                useCORS: true,
                allowTaint: false
            });

            const link = document.createElement('a');
            link.href = canvas.toDataURL('image/png');
            link.download = 'carte-visite-{{ Str::slug($displayName) }}.png';
            link.click();

            feedback.textContent = '✓ Carte téléchargée';
            feedback.style.color = '#16a34a';
        } catch (error) {
            console.error(error);
            feedback.textContent = '✗ Erreur lors du téléchargement';
            feedback.style.color = '#dc2626';
        } finally {
            button.disabled = false;
            button.innerHTML = '<i class="fas fa-download"></i> Télécharger';

            setTimeout(() => {
                feedback.textContent = '';
            }, 3000);
        }
    });

    function copyPublicUrl() {
        navigator.clipboard.writeText(publicUrl).then(function () {
            feedback.textContent = '✓ Lien copié';
            feedback.style.color = '#16a34a';

            setTimeout(() => {
                feedback.textContent = '';
            }, 3000);
        }).catch(function () {
            feedback.textContent = '✗ Impossible de copier le lien';
            feedback.style.color = '#dc2626';

            setTimeout(() => {
                feedback.textContent = '';
            }, 3000);
        });
    }
</script>
@endpush
@endsection