@extends('uibuilder::layouts.app')

@section('title', 'UI Structures')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Flash Messages -->
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            ✅ {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            ❌ {{ session('error') }}
        </div>
    @endif

    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">UI Structures</h1>
        <a href="{{ route('ui-builder.structures.create') }}" class="btn btn-primary">
            ➕ Create New Structure
        </a>
    </div>

    <!-- Filters -->
    <div class="mb-6 flex gap-4">
        <form method="GET" class="flex gap-4 flex-1">
            <input 
                type="text" 
                name="search" 
                placeholder="Search structures..."
                value="{{ request('search') }}"
                class="form-input flex-1"
            />
            <select name="component" class="form-select">
                <option value="">All Components</option>
                <option value="footer" {{ request('component') === 'footer' ? 'selected' : '' }}>Footer</option>
                <option value="header" {{ request('component') === 'header' ? 'selected' : '' }}>Header</option>
                <option value="banner" {{ request('component') === 'banner' ? 'selected' : '' }}>Banner</option>
            </select>
            <button type="submit" class="btn btn-outline">🔍 Search</button>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Name
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Component
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Tenant
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Version
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Updated
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($structures as $structure)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">{{ $structure->name }}</div>
                        <div class="text-sm text-gray-500">{{ $structure->slug }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                            {{ $structure->component }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ $structure->tenant->name ?? 'N/A' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        @if($structure->is_active)
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Active
                            </span>
                        @else
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                Inactive
                            </span>
                        @endif
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        v{{ $structure->version }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ $structure->updated_at->diffForHumans() }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ route('ui-builder.structures.edit', $structure->id) }}" class="text-blue-600 hover:text-blue-900 mr-3">
                            Edit
                        </a>
                        <a href="{{ route('ui-builder.structures.preview', $structure->id) }}" target="_blank" class="text-green-600 hover:text-green-900 mr-3">
                            Preview
                        </a>
                        <form method="POST" action="{{ route('ui-builder.structures.destroy', $structure->id) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-red-600 hover:text-red-900">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                        <div class="text-4xl mb-4">📐</div>
                        <p>No structures found</p>
                        <a href="{{ route('ui-builder.structures.create') }}" class="text-blue-600 hover:text-blue-800 mt-2 inline-block">
                            Create your first structure
                        </a>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    @if($structures->hasPages())
    <div class="mt-6">
        {{ $structures->links() }}
    </div>
    @endif
</div>
@endsection