{{--
    Show — vista individual del proyecto (CLIENT-FACING).

    Sigue la misma estética moderna que las cards del index-client:
    hero gradient color-coded, avatar con logo del tenant, status floating,
    stats grid, sections como cards minimalistas.
--}}
<x-base-layout>
    <x-admin-header
        module="dashboard"
        :title="$project->project_name"
        subtitle="Gestioná tu proyecto: sitio, plan, pagos y configuración."
        icon="ki-grid"
        :breadcrumbs="[
            ['title' => 'Inicio', 'url' => url('/')],
            ['title' => 'Mis Proyectos', 'url' => route('client.projects.index')],
            ['title' => $project->project_name, 'active' => true]
        ]"
    />

    @push('styles')
    <style>
        /* Hero del proyecto — espejo de las cards del index */
        .bp-show-hero {
            position: relative;
            border-radius: 14px;
            overflow: hidden;
            height: 180px;
            margin-bottom: 70px;
            background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
        }
        .bp-show-hero.tone-success { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
        .bp-show-hero.tone-warning { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
        .bp-show-hero.tone-danger  { background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); }
        .bp-show-hero.tone-info    { background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%); }

        .bp-show-status {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(8px);
            color: #111827;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 6px 14px;
            border-radius: 999px;
        }
        .bp-show-status .dot {
            display: inline-block;
            width: 9px; height: 9px;
            border-radius: 999px;
            margin-right: 6px;
            vertical-align: middle;
        }
        .bp-show-status .dot.green { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.25); }
        .bp-show-status .dot.amber { background: #f59e0b; }
        .bp-show-status .dot.red   { background: #ef4444; }
        .bp-show-status .dot.blue  { background: #3b82f6; }

        .bp-show-avatar {
            position: absolute;
            bottom: -55px;
            left: 28px;
            width: 110px;
            height: 110px;
            border-radius: 22px;
            background: #fff;
            border: 4px solid #fff;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .bp-show-avatar img {
            width: 100%; height: 100%;
            object-fit: contain;
            padding: 10px;
        }
        .bp-show-avatar-fallback {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 800;
            font-size: 44px;
            color: #fff;
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .bp-show-name-block {
            position: absolute;
            bottom: -55px;
            left: 156px;
            right: 28px;
            color: #fff;
        }
        .bp-show-name-block .name {
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 2px;
            text-shadow: 0 1px 6px rgba(0,0,0,0.15);
        }
        .bp-show-name-block .domain {
            font-size: 13px;
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .bp-show-name-block .domain:hover { color: #fff; text-decoration: underline; }

        /* Stats grid: bloque card por stat */
        .bp-show-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
        .bp-stat-card {
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 14px 16px;
        }
        .bp-stat-card .label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
        .bp-stat-card .value { font-size: 17px; color: #111827; font-weight: 700; margin-top: 4px; }
        .bp-stat-card .value .muted { color: #6b7280; font-weight: 400; font-size: 13px; }
        .bp-stat-card .meta { font-size: 11px; color: #6b7280; margin-top: 4px; }

        /* Section cards genéricas */
        .bp-section-card {
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 14px;
            padding: 22px;
            margin-bottom: 16px;
        }
        .bp-section-card.danger { border-color: #fecaca; }
        .bp-section-title {
            font-weight: 800;
            font-size: 1rem;
            color: #111827;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Dark mode */
        [data-bs-theme="dark"] .bp-stat-card,
        [data-bs-theme="dark"] .bp-section-card {
            background: #1f2937;
            border-color: rgba(255,255,255,0.08);
        }
        [data-bs-theme="dark"] .bp-stat-card .value,
        [data-bs-theme="dark"] .bp-section-title { color: #f9fafb; }
        [data-bs-theme="dark"] .bp-section-card.danger { border-color: rgba(239,68,68,0.3); }
        [data-bs-theme="dark"] .bp-show-status { background: rgba(31,41,55,0.95); color: #f9fafb; }
        [data-bs-theme="dark"] .bp-show-avatar { background: #1f2937; border-color: #1f2937; }

        @media (max-width: 767.98px) {
            .bp-show-hero { height: 150px; margin-bottom: 90px; }
            .bp-show-avatar { width: 80px; height: 80px; bottom: -40px; left: 20px; }
            .bp-show-name-block { left: 20px; right: 20px; bottom: -85px; }
            .bp-show-name-block .name { color: #111827; font-size: 1.25rem; text-shadow: none; }
            .bp-show-name-block .domain { color: #6b7280; }
            [data-bs-theme="dark"] .bp-show-name-block .name { color: #f9fafb; }
            [data-bs-theme="dark"] .bp-show-name-block .domain { color: #9ca3af; }
            .bp-show-stats { grid-template-columns: 1fr 1fr; }
        }
    </style>
    @endpush

    <div id="kt_content_container" class="container-xxl">

        @php
            [$badgeLabel, $badgeClass] = $project->status_badge;
            $isLive = $project->isLive() && $project->domain;
            $isProvisioning = $project->isProvisioning();
            $isFailed = $project->pipeline_status === \App\Models\TenantProject::STATUS_FAILED;
            $isPaused = $project->pipeline_status === \App\Models\TenantProject::STATUS_PAUSED;

            $heroTone = $isLive ? 'tone-success' : ($isFailed ? 'tone-danger' : ($isPaused ? 'tone-warning' : 'tone-info'));
            $dotColor = $isLive ? 'green' : ($isFailed ? 'red' : ($isPaused ? 'amber' : 'blue'));
            $initial = strtoupper(mb_substr($project->project_name, 0, 1, 'UTF-8'));
            $logoUrl = $project->logo_url;
        @endphp

        @if(session('success'))
            <div class="alert alert-light-success mb-4">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-light-danger mb-4">{{ session('error') }}</div>
        @endif

        {{-- ─── Hero del proyecto ────────────────────────────────────── --}}
        <div class="bp-show-hero {{ $heroTone }}">
            <span class="bp-show-status">
                <span class="dot {{ $dotColor }}"></span>{{ $badgeLabel }}
            </span>
            <div class="bp-show-avatar">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}"
                         alt="{{ $project->project_name }}"
                         loading="lazy"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="bp-show-avatar-fallback" style="display:none;">{{ $initial }}</div>
                @else
                    <div class="bp-show-avatar-fallback">{{ $initial }}</div>
                @endif
            </div>
            <div class="bp-show-name-block">
                <div class="name">{{ $project->project_name }}</div>
                @if($project->domain)
                    <a href="{{ $project->public_url ?? ('https://' . $project->domain) }}"
                       target="_blank" rel="noopener" class="domain">
                        <i class="fas fa-globe"></i>{{ $project->domain }}
                        <i class="fas fa-arrow-up-right-from-square fs-9 ms-1"></i>
                    </a>
                @endif
            </div>
        </div>

        {{-- ─── Mensaje + CTA según estado ───────────────────────────── --}}
        @if($isProvisioning)
            <div class="alert alert-light-info py-3 px-4 d-flex align-items-center mb-4">
                <i class="fas fa-cog fa-spin fs-2 text-info me-3"></i>
                <div>
                    <div class="fw-bold mb-1">Tu sitio se está preparando</div>
                    <div class="fs-7 text-muted">
                        Vas a recibir un email con las credenciales cuando esté listo (~20-30 min desde la compra).
                    </div>
                </div>
            </div>
        @elseif($isFailed)
            <div class="alert alert-light-danger py-3 px-4 d-flex align-items-center mb-4">
                <i class="fas fa-triangle-exclamation fs-2 text-danger me-3"></i>
                <div>
                    <div class="fw-bold mb-1">Hubo un problema con el provisioning</div>
                    <div class="fs-7 text-muted">
                        Escribinos a <a href="mailto:soporte@bewpro.com">soporte@bewpro.com</a> y lo resolvemos.
                    </div>
                </div>
            </div>
        @elseif($isLive)
            <div class="d-flex gap-2 flex-wrap mb-4">
                <a href="https://{{ $project->domain }}/login" target="_blank" rel="noopener" class="btn btn-primary">
                    <i class="fas fa-arrow-up-right-from-square me-1"></i>Abrir admin del sitio
                </a>
                <a href="{{ $project->public_url ?? ('https://' . $project->domain) }}" target="_blank" rel="noopener" class="btn btn-light">
                    <i class="fas fa-eye me-1"></i>Ver sitio público
                </a>
            </div>
        @endif

        {{-- ─── Stats grid ────────────────────────────────────────────── --}}
        <div class="bp-show-stats">
            <div class="bp-stat-card">
                <div class="label">Plan</div>
                <div class="value">{{ $project->product_label ?? $project->product_name ?? '—' }}</div>
            </div>
            <div class="bp-stat-card">
                <div class="label">Precio mensual</div>
                <div class="value">
                    @if($project->amount_usd > 0)
                        ${{ number_format($project->amount_usd, 0) }}<span class="muted">/mes</span>
                    @else
                        <span class="muted">Sin cobro</span>
                    @endif
                </div>
            </div>
            <div class="bp-stat-card">
                <div class="label">Próximo cobro</div>
                <div class="value">
                    @if($project->next_billing_date)
                        {{ $project->next_billing_date->format('d/m/y') }}
                        @if($project->next_billing_date->isPast())
                            <span class="muted">⚠</span>
                        @endif
                    @else
                        <span class="muted">—</span>
                    @endif
                </div>
                @if($project->trial_ends_at && $project->trial_ends_at->isFuture())
                    <div class="meta">🎁 Prueba hasta {{ $project->trial_ends_at->format('d/m') }}</div>
                @endif
            </div>
            <div class="bp-stat-card">
                <div class="label">Activo desde</div>
                <div class="value">{{ $project->created_at->format('d/m/Y') }}</div>
                <div class="meta">{{ $project->created_at->diffForHumans() }}</div>
            </div>
        </div>

        {{-- ─── Section: Tu suscripción ──────────────────────────────── --}}
        <div class="bp-section-card">
            <div class="bp-section-title">
                <i class="fas fa-credit-card text-primary"></i>Tu suscripción
            </div>
            <p class="text-muted fs-7 mb-3">
                @if($project->trial_ends_at && $project->trial_ends_at->isFuture())
                    Tu período de prueba termina el <strong>{{ $project->trial_ends_at->format('d/m/Y') }}</strong>.
                    Asegurate de tener un método de pago configurado antes para que no haya interrupciones.
                @else
                    Gestioná tu método de pago, descargá facturas o cancelá la suscripción desde el portal de Stripe.
                @endif
            </p>
            <div class="d-flex gap-2 flex-wrap">
                @if($project->stripe_customer_id)
                    <form method="POST" action="{{ route('client.projects.billing', $project) }}" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-sm btn-light-primary">
                            <i class="fab fa-stripe-s me-1"></i>Gestionar en Stripe
                        </button>
                    </form>
                @endif
                <a href="{{ route('client.projects.billing.history') }}" class="btn btn-sm btn-light">
                    <i class="fas fa-receipt me-1"></i>Ver historial de pagos
                </a>
            </div>
        </div>

        {{-- ─── Section: Acciones rápidas ────────────────────────────── --}}
        @if($isLive)
            <div class="bp-section-card">
                <div class="bp-section-title">
                    <i class="fas fa-bolt text-warning"></i>Acciones rápidas
                </div>
                <div class="row g-3">
                    <div class="col-md-4">
                        <a href="https://{{ $project->domain }}/login" target="_blank" rel="noopener"
                           class="d-block p-3 bg-light-primary rounded text-decoration-none h-100">
                            <i class="fas fa-cog fs-2 text-primary mb-2"></i>
                            <div class="fw-bold text-gray-900">Editar contenido</div>
                            <div class="fs-8 text-muted">Servicios, blog, fotos, contacto…</div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="https://{{ $project->domain }}/admin/onboarding" target="_blank" rel="noopener"
                           class="d-block p-3 bg-light-info rounded text-decoration-none h-100">
                            <i class="fas fa-palette fs-2 text-info mb-2"></i>
                            <div class="fw-bold text-gray-900">Cambiar logos y colores</div>
                            <div class="fs-8 text-muted">Identidad de marca</div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="{{ route('client.support.new') }}"
                           class="d-block p-3 bg-light-warning rounded text-decoration-none h-100">
                            <i class="fas fa-life-ring fs-2 text-warning mb-2"></i>
                            <div class="fw-bold text-gray-900">Pedir ayuda</div>
                            <div class="fs-8 text-muted">Soporte humano en &lt; 4hs</div>
                        </a>
                    </div>
                </div>
            </div>
        @endif

        {{-- ─── Section: Zona peligrosa ──────────────────────────────── --}}
        @can('delete', $project)
            <div class="bp-section-card danger">
                <div class="bp-section-title text-danger">
                    <i class="fas fa-triangle-exclamation"></i>Zona peligrosa
                </div>
                <p class="text-muted fs-7 mb-3">
                    Al eliminar el proyecto se cancela la suscripción, se borra el sitio y se elimina el dominio.
                    <strong>Esta acción no se puede deshacer.</strong>
                </p>
                <button type="button" class="btn btn-light-danger btn-sm" data-bs-toggle="modal" data-bs-target="#confirmDeleteProject">
                    <i class="fas fa-trash me-1"></i>Eliminar este proyecto
                </button>
            </div>

            <x-confirm-dialog
                id="confirmDeleteProject"
                title="¿Eliminar {{ $project->project_name }}?"
                message="Se cancela la suscripción, se borra el sitio y se elimina el dominio. <strong>No se puede deshacer.</strong>"
                confirmLabel="Sí, eliminar"
                :action="route('client.projects.destroy', $project)"
                method="DELETE"
                confirmClass="btn-danger"
                icon="fa-trash"
                iconColor="text-danger"
            />
        @endcan

    </div>
</x-base-layout>