@extends('layouts.app') {{-- Use your main layout file --}}

@section('title', 'Dashboard')

@section('content')
    {{-- Alpine component to manage view state for this page, default is 'grid' --}}
    <div x-data="{ viewMode: 'grid' }">
        {{-- Header Row: Title, Add Buttons, View Toggle --}}
        <div class="md:flex md:justify-between md:items-center mb-6 gap-4">
            <h1 class="text-2xl md:text-3xl font-semibold text-gray-800 mb-4 md:mb-0">Dashboard</h1>
            {{-- Action Buttons Container --}}
            <div class="flex items-center justify-start md:justify-end flex-wrap gap-3">
                {{-- Add Conventional Product Button --}}
                <a href="{{ route('admin.products.create') }}"
                    class="inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out whitespace-nowrap">
                    + Add Conventional Product
                </a>
                {{-- Add Amazon Business Product Button --}}
                <a href="{{ route('admin.product-search.form') }}"
                    class="inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out whitespace-nowrap">
                    + Add Amazon Business Product
                </a>
                {{-- Add New Campaign Button/Link --}}
                <a href="{{ route('admin.campaigns.create') }}"
                    class="inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out whitespace-nowrap">
                    + Add Campaign
                </a>
                {{-- View Mode Toggle Buttons --}}
                <div class="flex space-x-1 border border-gray-300 rounded-md p-0.5 bg-gray-100">
                    <button type="button" @click="viewMode = 'list'"
                        :class="{ 'bg-white shadow-sm text-indigo-700': viewMode === 'list', 'text-gray-500 hover:text-gray-700': viewMode !== 'list' }"
                        class="px-3 py-1 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors duration-150"
                        aria-label="List View">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
                        </svg>
                    </button>
                    <button type="button" @click="viewMode = 'grid'"
                        :class="{ 'bg-white shadow-sm text-indigo-700': viewMode === 'grid', 'text-gray-500 hover:text-gray-700': viewMode !== 'grid' }"
                        class="px-3 py-1 rounded-md text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-colors duration-150"
                        aria-label="Grid View">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                            stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        {{-- Welcome Block --}}
        <div class="mb-6 p-4 bg-gradient-to-r from-blue-50 to-indigo-100 border border-blue-200 rounded-lg shadow-sm">
            <h2 class="text-xl font-semibold text-gray-800">
                Welcome{{ Auth::check() ? ', ' . e(Auth::user()->name) : '' }}!
            </h2>
            <p class="text-sm text-gray-600 mt-1">
                Here's a quick overview of your recent activity in the Mindful Giving app.
            </p>
        </div>

        {{-- Stats Block --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
            {{-- Total Campaigns Stat --}}
            <div class="bg-white shadow rounded-lg p-4 border border-gray-200 flex items-center space-x-4">
                <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
                    {{-- Tag Icon --}}
                    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.372l2.508-1.447a1.875 1.875 0 00-.372-3.494l-2.508 1.447c-.827.499-1.908.326-2.607-.372L5.25 9.568a2.25 2.25 0 00-.659-1.591V5.25A2.25 2.25 0 016.841 3h2.727z" />
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 6.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                    </svg>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500 truncate">Total Campaigns</dt>
                    <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $totalCampaigns }}</dd>
                </div>
            </div>
            {{-- Total Products Stat --}}
            <div class="bg-white shadow rounded-lg p-4 border border-gray-200 flex items-center space-x-4">
                <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                    {{-- Archive Box Icon --}}
                    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                    </svg>
                </div>
                <div>
                    <dt class="text-sm font-medium text-gray-500 truncate">Total Products Added</dt>
                    <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{{ $totalProducts }}</dd>
                </div>
            </div>
        </div>

        {{-- API Health Check Block (Async) --}}
        <div class="mb-6 p-4 bg-white border border-gray-200 rounded-lg shadow-sm" x-data="{ apiStatus: 'Checking...', statusMessage: 'Attempting connection...' }"
            x-init=" fetch('{{ route('health-check.amazon-business') }}', { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } }).then(response => { if (!response.ok) { return response.json().catch(() => ({ status: 'Error', message: `Server responded with status: ${response.status}` })).then(errData => { throw errData; }); } return response.json(); }).then(data => {
                 apiStatus = data.status || 'Error';
                 statusMessage = (apiStatus === 'Connected') ? 'Connected (Token Refresh Successful)' : 'Connection Error (Check Logs)';
             }).catch(error => {
                 console.error('API Health Check Fetch Failed:', error);
                 apiStatus = 'Error';
                 statusMessage = error.message || 'Connection Error (Check Console/Logs)';
             });">
            <div class="flex items-center space-x-3">
                {{-- Icons based on apiStatus --}}
                <template x-if="apiStatus === 'Checking...'"><span
                        class="flex-shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-100 animate-pulse"><svg
                            class="h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                        </svg></span></template>
                <template x-if="apiStatus === 'Connected'"><span
                        class="flex-shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-full bg-green-100"><svg
                            class="h-5 w-5 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                        </svg></span></template>
                <template x-if="apiStatus === 'Error'"><span
                        class="flex-shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-full bg-red-100"><svg
                            class="h-5 w-5 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg></span></template>
                <template x-if="apiStatus === 'Unknown'"><span
                        class="flex-shrink-0 inline-flex items-center justify-center h-8 w-8 rounded-full bg-yellow-100"><svg
                            class="h-5 w-5 text-yellow-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
                        </svg></span></template>
                {{-- Status Text --}}
                <div>
                    <h3 class="text-sm font-medium text-gray-900">Amazon Business API Status</h3>
                    <p class="text-sm"
                        :class="{ 'text-green-700': apiStatus === 'Connected', 'text-red-700': apiStatus === 'Error', 'text-yellow-700': apiStatus === 'Unknown', 'text-gray-500': apiStatus === 'Checking...' }"
                        x-text="statusMessage">Checking...</p>
                </div>
            </div>
        </div>


        {{-- Main Content Grid (Campaigns & Products) --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

            {{-- Latest Campaigns Section --}}
            <div class="bg-white shadow-md rounded-lg p-6 border border-gray-200 flex flex-col">
                {{-- Header --}}
                <div class="flex justify-between items-center mb-4 flex-shrink-0">
                    <h2 class="text-xl font-semibold text-gray-700">Latest Campaigns</h2>
                    <div class="flex items-center space-x-3"> <a href="{{ route('admin.campaigns.create') }}"
                            class="inline-flex items-center px-3 py-1 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">+
                            Add Campaign</a> <a href="{{ route('admin.campaigns.index') }}"
                            class="text-sm text-indigo-600 hover:underline">View All</a> </div>
                </div>
                {{-- List View Container --}}
                <div x-show="viewMode === 'list'" class="space-y-4 flex-grow overflow-y-auto" x-cloak
                    style="display: none;">
                    @forelse ($latestCampaigns as $campaign)
                        {{-- List item --}} <div
                            class="flex items-center justify-between pb-2 border-b border-gray-100 last:border-b-0">
                            <div class="flex items-center space-x-3 min-w-0">
                                @if ($campaign->image_path)
                                    <img src="{{ asset('storage/' . $campaign->image_path) }}" alt=""
                                        class="h-10 w-10 rounded-md object-cover flex-shrink-0">
                                @else
                                    <div
                                        class="h-10 w-10 rounded-md bg-gray-100 flex items-center justify-center text-gray-400 flex-shrink-0">
                                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                        </svg>
                                    </div>
                                @endif
                                <div class="flex-1 min-w-0"><a href="{{ route('admin.campaigns.show', $campaign) }}"
                                        class="text-sm font-medium text-gray-900 hover:text-indigo-600 block truncate">{{ $campaign->title }}</a><span
                                        class="text-xs text-gray-500">Updated
                                        {{ $campaign->updated_at->diffForHumans() }} - @if ($campaign->enabled)
                                            <span class="text-green-600">Enabled</span>
                                        @else
                                            <span class="text-gray-400">Disabled</span>
                                        @endif
                                    </span>
                                </div>
                            </div><a href="{{ route('admin.campaigns.edit', $campaign) }}"
                                class="text-xs text-blue-600 hover:underline ml-2 flex-shrink-0">Edit</a>
                    </div> @empty <p class="text-sm text-gray-500 py-4">No campaigns found yet.</p><a
                            href="{{ route('admin.campaigns.create') }}"
                            class="text-sm text-indigo-600 hover:underline">Create
                            one?</a>
                    @endforelse
                </div>
                {{-- Grid View Container --}}
                <div x-show="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 gap-4 flex-grow overflow-y-auto"
                    x-cloak>
                    @forelse ($latestCampaigns as $campaign)
                        {{-- Campaign Card --}} <div
                            class="border border-gray-200 rounded-lg shadow-sm bg-white overflow-hidden flex flex-col"><a
                                href="{{ route('admin.campaigns.show', $campaign) }}"
                                class="block h-32 flex-shrink-0 hover:opacity-90 transition-opacity overflow-hidden">
                                @if ($campaign->image_path)
                                    <img src="{{ asset('storage/' . $campaign->image_path) }}"
                                        alt="{{ $campaign->title }}" class="w-full h-full object-cover">
                                @else
                                    <div class="h-full w-full bg-gray-100 flex items-center justify-center"><svg
                                            class="h-16 w-16 text-gray-300" xmlns="http://www.w3.org/2000/svg"
                                            fill="none" viewBox="0 0 24 24" stroke-width="1">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                        </svg></div>
                                @endif
                            </a>
                            <div class="p-3 flex-grow flex flex-col">
                                <h3 class="text-sm font-semibold text-gray-800 mb-1 flex-grow"><a
                                        href="{{ route('admin.campaigns.show', $campaign) }}"
                                        class="hover:text-indigo-600 line-clamp-2"
                                        title="{{ $campaign->title }}">{{ $campaign->title }}</a></h3>
                                <div class="flex items-center justify-between text-xs text-gray-500 mt-1">
                                    @if ($campaign->enabled)
                                        <span
                                            class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 font-medium text-green-800">Enabled</span>
                                    @else
                                        <span
                                            class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 font-medium text-gray-800">Disabled</span>
                                    @endif <span
                                        class="px-2 inline-flex leading-5 font-semibold rounded-full {{ $campaign->type === 'abonly' ? 'bg-blue-100 text-blue-800' : ($campaign->type === 'hybrid' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800') }}">{{ $campaign->type }}</span>
                                </div>
                                <p class="text-xs text-gray-400 mt-1">Updated {{ $campaign->updated_at->diffForHumans() }}
                                </p>
                                <div class="mt-auto pt-2 text-right"><a
                                        href="{{ route('admin.campaigns.edit', $campaign) }}"
                                        class="text-xs text-blue-600 hover:underline">Edit</a></div>
                            </div>
                    </div> @empty <div class="md:col-span-2">
                            <p class="text-sm text-gray-500">No campaigns found yet.</p><a
                                href="{{ route('admin.campaigns.create') }}"
                                class="text-sm text-indigo-600 hover:underline">Create one?</a>
                        </div>
                    @endforelse
                </div>
            </div>

            {{-- Latest Products Section --}}
            <div class="bg-white shadow-md rounded-lg p-6 border border-gray-200 flex flex-col">
                {{-- Header --}}
                <div class="flex justify-between items-center mb-4 flex-shrink-0">
                    <h2 class="text-xl font-semibold text-gray-700">Latest Products Added</h2>
                    <div class="flex items-center space-x-3"> <a href="{{ route('admin.products.create') }}"
                            class="inline-flex items-center px-3 py-1 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out">+
                            Add Product</a> <a href="{{ route('admin.products.index') }}"
                            class="text-sm text-indigo-600 hover:underline">View All</a> </div>
                </div>
                {{-- List View Container --}}
                <div x-show="viewMode === 'list'" class="space-y-4 flex-grow overflow-y-auto" x-cloak
                    style="display: none;">
                    @forelse ($latestProducts as $product)
                        {{-- List item --}} <div
                            class="flex items-center justify-between pb-2 border-b border-gray-100 last:border-b-0">
                            <div class="flex items-center space-x-3 min-w-0">
                                @if ($product->image_url)
                                    <img src="{{ $product->image_url }}" alt=""
                                        class="h-10 w-10 rounded object-cover flex-shrink-0 border">
                                @else
                                    <div
                                        class="h-10 w-10 rounded bg-gray-100 flex items-center justify-center text-gray-400 flex-shrink-0">
                                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                        </svg>
                                    </div>
                                @endif
                                <div class="flex-1 min-w-0"><span
                                        class="text-sm font-medium text-gray-900 block truncate">{{ $product->name }}</span><span
                                        class="text-xs text-gray-500 block">ASIN: {{ $product->asin }} @if ($product->campaign)
                                            | Campaign: <a href="{{ route('admin.campaigns.show', $product->campaign) }}"
                                                class="hover:underline">{{ $product->campaign->title }}</a>
                                        @endif
                                    </span>
                                </div>
                            </div>
                    </div> @empty <p class="text-sm text-gray-500 py-4">No products have been added via the search yet.
                        </p><a href="{{ route('admin.product-search.form') }}"
                            class="text-sm text-indigo-600 hover:underline">Search & Add Products?</a>
                    @endforelse
                </div>
                {{-- Grid View Container --}}
                <div x-show="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 gap-4 flex-grow overflow-y-auto"
                    x-cloak>
                    @forelse ($latestProducts as $product)
                        {{-- Product Card --}} <div
                            class="border border-gray-200 rounded-lg shadow-sm bg-white overflow-hidden flex flex-col">
                            <div class="h-32 flex items-center justify-center flex-shrink-0">
                                @if ($product->image_url)
                                    <img src="{{ $product->image_url }}" alt="{{ $product->name }}"
                                        class="max-h-full max-w-full object-contain">
                                @else
                                    <div class="h-full w-full bg-gray-100 flex items-center justify-center"><svg
                                            class="h-10 w-10 text-gray-300" xmlns="http://www.w3.org/2000/svg"
                                            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                        </svg></div>
                                @endif
                            </div>
                            <div class="p-3 flex-grow flex flex-col">
                                <h3 class="text-sm font-semibold text-gray-800 mb-1 flex-grow"><span class="line-clamp-2"
                                        title="{{ $product->name }}">{{ $product->name }}</span></h3>
                                <div class="text-xs text-gray-500 mt-1"> ASIN: {{ $product->asin }} @if ($product->campaign)
                                        <span class="block">Campaign: <a
                                                href="{{ route('campaigns.show', $product->campaign) }}"
                                                class="hover:underline">{{ $product->campaign->title }}</a></span>
                                    @endif
                                </div>
                            </div>
                    </div> @empty <div class="md:col-span-2">
                            <p class="text-sm text-gray-500">No products have been added via the search yet.</p><a
                                href="{{ route('admin.product-search.form') }}"
                                class="text-sm text-indigo-600 hover:underline">Search & Add Products?</a>
                        </div>
                    @endforelse
                </div>
            </div>

        </div> {{-- End Main Content Grid --}}
    </div> {{-- End Alpine Component --}}

@endsection