@extends('layouts.portal.app')

@section('title', "App Detail InsightsReady")

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="{{ asset("portal-assets/portal.css") }}"/>
@endpush

@section('content')

    <style>
        .app-header {
            display: flex;
            align-items: center;
            gap: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 20px;
        }
        .app-icon {
            width: 64px;
            height: 64px;
            border-radius: 12px;
            border: 1px solid var(--border);
            flex-shrink: 0;
            object-fit: cover;
        }
        .app-header h1 {
            font-size: 28px;
            margin: 0;
        }
        .app-vendor {
            font-size: 16px;
            color: var(--ink-700);
        }

        .app-detail-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
        }
        @media (min-width: 992px) {
            .app-detail-layout {
                grid-template-columns: 1fr 320px;
            }
        }

        .main-content h2 {
            font-size: 20px;
            margin-bottom: 12px;
        }
        .main-content .description {
            color: var(--ink-600);
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
        }
        .gallery-item {
            width: 100%;
            aspect-ratio: 16 / 10;
            border-radius: 12px;
            background: #f5f7f9;
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #8a9099;
            font-size: 14px;
            font-weight: 500;
            overflow: hidden;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .sidebar .panel {
            padding: 20px;
            margin-bottom: 20px;
        }
        .sidebar .panel:last-child {
            margin-bottom: 0;
        }
        .sidebar .btn {
            width: 100%;
            padding: 12px;
            font-size: 16px;
        }
        .sidebar .btn--danger {
            background-color: #fbe9e7;
            border-color: #ffab91;
            color: #c94a25;
        }
        .sidebar .btn--danger:hover {
            background-color: #ffccbc;
        }

        .info-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .info-list li {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-light);
        }
        .info-list li:last-child {
            border-bottom: none;
        }
        .info-list .label {
            color: var(--ink-600);
        }
        .info-list .value {
            font-weight: 600;
            text-align: right;
        }
        .info-list .pill {
            font-size: 13px;
        }
    </style>

    <main class="container page">

        <header class="app-header">
            <img src="http://localhost:8000/insights_ready_logo.svg" alt="{{ $app->name }}" class="app-icon">
            <div>
                <h1>{{ $app->name ?? 'App' }}</h1>
                <p class="app-vendor">by {{ $app->vendor ?? 'InsightsReady' }}</p>
            </div>
        </header>

        <div class="app-detail-layout">
            <div class="main-content">
                <div class="panel">
                    <h2>Description</h2>
                    <p class="description">{{ $app->long_description ?? 'No description provided.' }}</p>

                    @if(!empty($app->screenshots) && is_array($app->screenshots))
                        <h2>Gallery</h2>
                        <div class="gallery-grid">
                            @foreach($app->screenshots as $img)
                                <div class="gallery-item">
                                    {{-- In a real app, you'd use an <img> tag like below --}}
                                    {{-- <img src="{{ asset($img) }}" alt="Screenshot"> --}}
                                    <span>{{ basename($img) }}</span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            <aside class="sidebar">
                <div class="panel">
                    @if($is_installed)
                        <form action="{{ route('marketplace.uninstall', $app->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn--danger">Uninstall App</button>
                        </form>
                    @else
                        <form action="{{ route('marketplace.install', $app->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn--brand">Install App</button>
                        </form>
                    @endif
                </div>

                <div class="panel">
                    <ul class="info-list">
                        <li>
                            <span class="label">Pricing</span>
                            @php $price = isset($app->price_cents) ? number_format($app->price_cents/100, 2) : null; @endphp
                            <span class="value">
                                 @if($price)
                                    From ${{ $price }}/mo
                                @else
                                    Contact vendor
                                @endif
                             </span>
                        </li>
                        @if(!empty($app->category))
                            <li>
                                <span class="label">Category</span>
                                <span class="value"><span class="pill">{{ $app->category }}</span></span>
                            </li>
                        @endif
                        @if(!empty($app->rating))
                            <li>
                                <span class="label">Rating</span>
                                <span class="value">★★★★★ ({{ $app->reviews ?? 0 }})</span>
                            </li>
                        @endif
                    </ul>
                </div>
            </aside>
        </div>
    </main>

@endsection

@push('scripts')

@endpush