{{--
    Mis Proyectos — vista CLIENT-FACING (owner del proyecto).

    Branding por proyecto: intenta cargar el favicon/logo desde el dominio del
    tenant (sin necesidad de saber el path exacto, el navegador resuelve la
    URL del propio sitio). Si falla, fallback a avatar con inicial del nombre.

    Diferencia con index.blade.php (reseller): sin handoff / showcase /
    delivery_notes (esos viven en /reseller/projects).
--}}
<x-base-layout>
    <x-admin-header
        module="dashboard"
        title="Mis Proyectos"
        subtitle="Gestioná tus proyectos profesionales — sitio, plan, pagos y más."
        icon="ki-grid"
        :breadcrumbs="[
            ['title' => 'Inicio', 'url' => url('/')],
            ['title' => 'Mis Proyectos', 'active' => true]
        ]"
    />

    @push('styles')
    <style>
        /* Project card — moderna: header con gradient, avatar/logo, status flotante */
        .bp-project-card {
            position: relative;
            border-radius: 14px;
            overflow: hidden;
            transition: transform .15s ease, box-shadow .15s ease;
            background: #fff;
            border: 1px solid #e9ecef;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .bp-project-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(0,0,0,0.08);
            border-color: #d1d5db;
        }
        .bp-project-hero {
            position: relative;
            height: 84px;
            background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
        }
        .bp-project-hero.tone-success { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
        .bp-project-hero.tone-warning { background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%); }
        .bp-project-hero.tone-danger  { background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); }
        .bp-project-hero.tone-info    { background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%); }

        /* Avatar circular (logo o letra) — sobresale del hero */
        .bp-project-avatar {
            position: absolute;
            bottom: -28px;
            left: 20px;
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: #fff;
            border: 3px solid #fff;
            box-shadow: 0 4px 14px rgba(0,0,0,0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .bp-project-avatar img {
            width: 100%; height: 100%;
            object-fit: contain;
            padding: 6px;
        }
        .bp-project-avatar-fallback {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 800;
            font-size: 26px;
            color: #fff;
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }

        /* Status badge flotante en hero (esquina sup. der.) */
        .bp-status-floating {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(8px);
            color: #111827;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 4px 10px;
            border-radius: 999px;
        }
        .bp-status-floating .dot {
            display: inline-block;
            width: 7px; height: 7px;
            border-radius: 999px;
            margin-right: 5px;
            vertical-align: middle;
        }
        .bp-status-floating .dot.green { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
        .bp-status-floating .dot.amber { background: #f59e0b; }
        .bp-status-floating .dot.red   { background: #ef4444; }
        .bp-status-floating .dot.blue  { background: #3b82f6; }

        /* Body */
        .bp-project-body {
            padding: 36px 20px 18px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .bp-project-name {
            font-weight: 700;
            font-size: 1.15rem;
            color: #111827;
            margin: 0 0 4px;
            line-height: 1.25;
        }
        .bp-project-domain {
            font-size: 12px;
            color: #6b7280;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 12px;
        }
        .bp-project-domain:hover { color: #2563eb; }

        /* Stats grid */
        .bp-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 12px 0;
            border-top: 1px solid #f3f4f6;
            border-bottom: 1px solid #f3f4f6;
            margin: 0 0 14px;
        }
        .bp-stat-label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
        .bp-stat-value { font-size: 13.5px; color: #111827; font-weight: 700; margin-top: 2px; }
        .bp-stat-value .muted { color: #6b7280; font-weight: 400; font-size: 12px; }

        /* Trial chip */
        .bp-trial-chip {
            display: inline-block;
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            color: #78350f;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 999px;
            margin-bottom: 12px;
        }

        /* Actions */
        .bp-actions {
            display: flex;
            gap: 6px;
            margin-top: auto;
            flex-wrap: wrap;
        }
        .bp-actions .btn { flex: 1 1 auto; }

        /* Dark mode */
        [data-bs-theme="dark"] .bp-project-card { background: #1f2937; border-color: rgba(255,255,255,0.08); }
        [data-bs-theme="dark"] .bp-project-card:hover { border-color: rgba(255,255,255,0.18); box-shadow: 0 12px 28px rgba(0,0,0,0.4); }
        [data-bs-theme="dark"] .bp-project-name { color: #f9fafb; }
        [data-bs-theme="dark"] .bp-project-domain { color: #9ca3af; }
        [data-bs-theme="dark"] .bp-stats { border-color: rgba(255,255,255,0.08); }
        [data-bs-theme="dark"] .bp-stat-value { color: #f3f4f6; }
        [data-bs-theme="dark"] .bp-stat-value .muted { color: #9ca3af; }
        [data-bs-theme="dark"] .bp-status-floating { background: rgba(31,41,55,0.95); color: #f9fafb; }
        [data-bs-theme="dark"] .bp-project-avatar { background: #1f2937; border-color: #1f2937; }

        /* Mobile */
        @media (max-width: 575.98px) {
            .bp-project-hero { height: 72px; }
            .bp-project-avatar { width: 52px; height: 52px; bottom: -22px; left: 16px; }
            .bp-project-body { padding: 32px 16px 16px; }
        }
    </style>
    @endpush

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

        {{-- Trial banner ──────────────────────────────────────────────── --}}
        @if($trialEndingSoon && $trialEndingSoon->count() > 0)
            <div class="alert alert-light-warning mb-4">
                <div class="d-flex align-items-center">
                    <i class="fas fa-clock text-warning fs-2 me-3"></i>
                    <div>
                        <div class="fw-bold fs-6">Tu período de prueba está por terminar</div>
                        <div class="fs-7 text-muted">
                            Agregá un método de pago para que tus proyectos sigan funcionando sin interrupciones.
                            <a href="{{ url('/my-projects/billing') }}" class="ms-2 fw-semibold">Gestionar pagos →</a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Provisioning banner ──────────────────────────────────────── --}}
        @php $provisioning = $projects->whereIn('pipeline_status', ['required', 'on_development']); @endphp
        @if($provisioning->count() > 0)
            <div class="alert alert-light-info mb-4">
                <div class="d-flex align-items-center">
                    <i class="fas fa-cog fa-spin text-info fs-2 me-3"></i>
                    <div class="flex-grow-1">
                        <div class="fw-bold fs-6">
                            {{ $provisioning->count() === 1 ? 'Tu proyecto se está preparando' : "{$provisioning->count()} proyectos se están preparando" }}
                        </div>
                        <div class="fs-7 text-muted">
                            Recibirás un email con las credenciales cuando esté listo (~20-30 min desde la compra).
                            Revisá la carpeta de spam si no llega.
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Stats cards ──────────────────────────────────────────────── --}}
        <div class="row g-3 mb-4">
            <div class="col-12 col-md-4">
                <div class="card h-100">
                    <div class="card-body d-flex align-items-center">
                        <i class="fas fa-grid-2 text-primary fs-1 me-3"></i>
                        <div>
                            <div class="fs-3 fw-bold text-gray-900">{{ $activeCount }}</div>
                            <div class="fs-7 text-muted">{{ $activeCount === 1 ? 'proyecto activo' : 'proyectos activos' }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="card h-100">
                    <div class="card-body d-flex align-items-center">
                        <i class="fas fa-dollar-sign text-success fs-1 me-3"></i>
                        <div>
                            <div class="fs-3 fw-bold text-gray-900">${{ number_format($mrrUsd, 0) }}<span class="fs-7 text-muted">/mes</span></div>
                            <div class="fs-7 text-muted">tu plan mensual</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="card h-100">
                    <div class="card-body d-flex align-items-center">
                        <i class="fas fa-calendar-day text-warning fs-1 me-3"></i>
                        <div>
                            @if($nextBilling)
                                <div class="fs-3 fw-bold text-gray-900">{{ $nextBilling->next_billing_date->format('d/m') }}</div>
                                <div class="fs-7 text-muted">próximo cobro · {{ $nextBilling->project_name }}</div>
                            @else
                                <div class="fs-3 fw-bold text-muted">—</div>
                                <div class="fs-7 text-muted">sin próximo cobro programado</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Empty state o grilla de proyectos ────────────────────────── --}}
        @if($projects->count() === 0)
            <x-empty-state
                icon="fa-grid-2"
                title="Todavía no tenés proyectos"
                description="Empezá tu primer proyecto profesional en minutos — elegí entre 12 modelos premium."
                ctaLabel="Ver modelos disponibles"
                ctaUrl="https://bewpro.com/modelos" />
        @else
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                <h3 class="fw-bold mb-0">Tus proyectos <span class="text-muted fs-6 ms-2">({{ $projects->count() }})</span></h3>
                <a href="https://bewpro.com/modelos" class="btn btn-light-primary btn-sm">
                    <i class="fas fa-plus me-1"></i>Sumar proyecto
                </a>
            </div>

            <div class="row g-4">
                @foreach($projects as $project)
                    @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;

                        // Hero color tone según estado
                        $heroTone = $isLive ? 'tone-success' : ($isFailed ? 'tone-danger' : ($isPaused ? 'tone-warning' : 'tone-info'));

                        // Status dot color
                        $dotColor = $isLive ? 'green' : ($isFailed ? 'red' : ($isPaused ? 'amber' : 'blue'));

                        // Inicial para el avatar fallback
                        $initial = strtoupper(mb_substr($project->project_name, 0, 1, 'UTF-8'));

                        // URL del logo del tenant — cacheado en master DB por
                        // bewpro:refresh-tenant-logos (scraping diario del home
                        // del tenant). Si null, fallback al avatar con inicial.
                        $logoUrl = $project->logo_url;
                    @endphp

                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="bp-project-card">
                            {{-- Hero con avatar y status floating --}}
                            <div class="bp-project-hero {{ $heroTone }}">
                                <span class="bp-status-floating">
                                    <span class="dot {{ $dotColor }}"></span>{{ $badgeLabel }}
                                </span>
                                <div class="bp-project-avatar">
                                    @if($logoUrl)
                                        {{-- Intento de cargar logo del tenant — onerror cambia a fallback --}}
                                        <img src="{{ $logoUrl }}"
                                             alt="{{ $project->project_name }}"
                                             loading="lazy"
                                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                        <div class="bp-project-avatar-fallback" style="display:none;">{{ $initial }}</div>
                                    @else
                                        <div class="bp-project-avatar-fallback">{{ $initial }}</div>
                                    @endif
                                </div>
                            </div>

                            {{-- Body --}}
                            <div class="bp-project-body">
                                <h4 class="bp-project-name">{{ $project->project_name }}</h4>
                                @if($project->domain)
                                    <a href="{{ $project->public_url ?? ('https://' . $project->domain) }}"
                                       target="_blank" rel="noopener" class="bp-project-domain">
                                        <i class="fas fa-globe"></i>{{ $project->domain }}
                                    </a>
                                @endif

                                @if($project->trial_ends_at && $project->trial_ends_at->isFuture())
                                    <div>
                                        <span class="bp-trial-chip">
                                            🎁 Prueba hasta {{ $project->trial_ends_at->format('d/m') }}
                                        </span>
                                    </div>
                                @endif

                                <div class="bp-stats">
                                    <div>
                                        <div class="bp-stat-label">Plan</div>
                                        <div class="bp-stat-value">{{ $project->product_label ?? $project->product_name ?? '—' }}</div>
                                    </div>
                                    <div>
                                        <div class="bp-stat-label">Precio</div>
                                        <div class="bp-stat-value">
                                            @if($project->amount_usd > 0)
                                                ${{ number_format($project->amount_usd, 0) }}<span class="muted">/mes</span>
                                            @else
                                                <span class="muted">—</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div>
                                        <div class="bp-stat-label">Próximo cobro</div>
                                        <div class="bp-stat-value">
                                            @if($project->next_billing_date)
                                                {{ $project->next_billing_date->format('d/m/y') }}
                                                @if($project->next_billing_date->isPast())
                                                    <span class="muted">⚠ vencido</span>
                                                @endif
                                            @else
                                                <span class="muted">—</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div>
                                        <div class="bp-stat-label">Activo desde</div>
                                        <div class="bp-stat-value">{{ $project->created_at->format('M Y') }}</div>
                                    </div>
                                </div>

                                @if($isProvisioning)
                                    <div class="alert alert-light-info py-2 px-3 mb-3 fs-8 mb-3">
                                        <i class="fas fa-cog fa-spin me-1"></i>
                                        Configurando tu sitio (~20-30 min)
                                    </div>
                                @elseif($isFailed)
                                    <div class="alert alert-light-danger py-2 px-3 mb-3 fs-8 mb-3">
                                        <i class="fas fa-triangle-exclamation me-1"></i>
                                        Hubo un problema. <a href="mailto:soporte@bewpro.com" class="fw-semibold">Contactá soporte</a>
                                    </div>
                                @endif

                                {{-- Acciones --}}
                                <div class="bp-actions">
                                    @if($isLive)
                                        <a href="https://{{ $project->domain }}/login" target="_blank" rel="noopener" class="btn btn-sm btn-primary">
                                            <i class="fas fa-arrow-up-right-from-square me-1"></i>Abrir admin
                                        </a>
                                    @endif
                                    <a href="{{ url('/my-projects/' . $project->id) }}" class="btn btn-sm btn-light">
                                        <i class="fas fa-cog me-1"></i>Gestionar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        {{-- Soporte ──────────────────────────────────────────────────── --}}
        <div class="card mt-4">
            <div class="card-body d-flex align-items-center flex-wrap gap-3">
                <i class="fas fa-life-ring text-primary fs-1"></i>
                <div class="flex-grow-1">
                    <div class="fw-bold fs-6">¿Necesitás ayuda?</div>
                    <div class="text-muted fs-7">
                        Respondemos en menos de 4 horas hábiles. Adjuntá screenshots si es algo visual.
                    </div>
                </div>
                <a href="{{ route('client.support.new') }}" class="btn btn-light-primary">
                    <i class="fas fa-comment-medical me-1"></i>Abrir un ticket
                </a>
            </div>
        </div>

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