@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-2">Theme Management</h1>
                    <p class="text-muted">Create and manage themes for your websites</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('admin.theme-builder.import-form') }}" class="btn btn-success">
                        <i class="bi bi-upload me-1"></i> Import Theme
                    </a>
                    <a href="{{ route('admin.theme-builder.builder') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-1"></i> Create New Theme
                    </a>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        @forelse($themes as $theme)
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100 shadow-sm">
                    @if($theme->preview_image)
                        <img src="{{ $theme->preview_image }}" class="card-img-top" alt="{{ $theme->name }}" style="height: 200px; object-fit: cover;">
                    @else
                        <div class="bg-gradient text-white d-flex align-items-center justify-content-center" style="height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <i class="bi bi-palette fs-1"></i>
                        </div>
                    @endif

                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title mb-0">{{ $theme->name }}</h5>
                            <span class="badge {{ $theme->is_active ? 'bg-success' : 'bg-secondary' }}">
                                {{ $theme->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>

                        <p class="text-muted small mb-2">
                            <i class="bi bi-person me-1"></i>{{ $theme->author }} • v{{ $theme->version }}
                        </p>

                        <p class="card-text text-muted small">{{ Str::limit($theme->description, 100) }}</p>

                        <div class="d-flex gap-2 mb-3 flex-wrap">
                            @if($theme->is_premium)
                                <span class="badge bg-warning text-dark">Premium</span>
                            @endif
                            @foreach($theme->industries ?? [] as $industry)
                                <span class="badge bg-light text-dark">{{ $industry }}</span>
                            @endforeach
                        </div>

                        <div class="row text-center mb-3">
                            <div class="col-4">
                                <div class="small text-muted">Components</div>
                                <div class="fw-bold">{{ $theme->components_count ?? 0 }}</div>
                            </div>
                            <div class="col-4">
                                <div class="small text-muted">Presets</div>
                                <div class="fw-bold">{{ $theme->presets_count ?? 0 }}</div>
                            </div>
                            <div class="col-4">
                                <div class="small text-muted">Installations</div>
                                <div class="fw-bold">{{ $theme->website_themes_count ?? 0 }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer bg-white border-top">
                        <div class="d-flex gap-2 mb-2">
                            <a href="{{ route('admin.theme-builder.builder', $theme->id) }}" class="btn btn-sm btn-outline-primary flex-fill">
                                <i class="bi bi-pencil me-1"></i> Edit
                            </a>

                            <button type="button" class="btn btn-sm btn-outline-info" onclick="exportTheme({{ $theme->id }}, '{{ $theme->slug }}')" title="Export theme">
                                <i class="bi bi-download"></i>
                            </button>

                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="cloneTheme({{ $theme->id }})" title="Clone theme">
                                <i class="bi bi-files"></i>
                            </button>

                            <button type="button" class="btn btn-sm btn-outline-{{ $theme->is_active ? 'warning' : 'success' }}" onclick="toggleActive({{ $theme->id }})" title="{{ $theme->is_active ? 'Deactivate' : 'Activate' }}">
                                <i class="bi bi-{{ $theme->is_active ? 'eye-slash' : 'eye' }}"></i>
                            </button>

                            <button type="button" class="btn btn-sm btn-outline-danger"
                                onclick="deleteTheme({{ $theme->id }}, '{{ $theme->name }}', {{ $theme->website_themes_count }})"
                                {{ ($theme->website_themes_count > 0 && auth()->user()->role !== 'super_admin') ? 'disabled' : '' }}
                                title="{{ $theme->website_themes_count > 0 ? (auth()->user()->role === 'super_admin' ? 'Delete theme (will convert ' . $theme->website_themes_count . ' website(s) to legacy)' : 'Cannot delete (in use)') : 'Delete theme' }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card text-center py-5">
                    <div class="card-body">
                        <i class="bi bi-palette fs-1 text-muted mb-3 d-block"></i>
                        <h5>No Themes Yet</h5>
                        <p class="text-muted mb-3">Get started by creating your first theme</p>
                        <a href="{{ route('admin.theme-builder.builder') }}" class="btn btn-primary">
                            <i class="bi bi-plus-circle me-1"></i> Create Your First Theme
                        </a>
                    </div>
                </div>
            </div>
        @endforelse
    </div>
</div>

@push('scripts')
<script>
function exportTheme(themeId, themeSlug) {
    // Show export options modal
    const includeImages = confirm('Do you want to include images in the export?\n\nYes = Images embedded as base64 (larger file)\nNo = Images as URLs (smaller file, requires hosting)');

    const url = `/admin/theme-builder/${themeId}/download-export${includeImages ? '?include_images=1' : ''}`;

    // Create a temporary link to trigger download
    const link = document.createElement('a');
    link.href = url;
    link.download = `${themeSlug}-theme.json`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

function toggleActive(themeId) {
    if (!confirm('Are you sure you want to toggle the active status of this theme?')) {
        return;
    }

    fetch(`/admin/theme-builder/${themeId}/toggle-active`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Failed to toggle theme status: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while toggling theme status');
    });
}

function cloneTheme(themeId) {
    if (!confirm('Are you sure you want to clone this theme?')) {
        return;
    }

    fetch(`/admin/theme-builder/${themeId}/clone`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Theme cloned successfully!');
            location.reload();
        } else {
            alert('Failed to clone theme: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while cloning theme');
    });
}

function deleteTheme(themeId, themeName, websiteCount = 0) {
    let confirmMessage = `Are you sure you want to delete the theme "${themeName}"?`;

    if (websiteCount > 0) {
        confirmMessage = `Are you sure you want to delete the theme "${themeName}"?\n\n`;
        confirmMessage += `⚠️ WARNING: This theme is currently installed on ${websiteCount} website(s).\n\n`;
        confirmMessage += `These websites will be automatically converted to use a legacy version of this theme. `;
        confirmMessage += `They will continue to work but will no longer receive updates from the master theme.\n\n`;
        confirmMessage += `This action cannot be undone.`;
    } else {
        confirmMessage += ` This action cannot be undone.`;
    }

    if (!confirm(confirmMessage)) {
        return;
    }

    fetch(`/admin/theme-builder/${themeId}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            location.reload();
        } else {
            alert('Failed to delete theme: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while deleting theme');
    });
}
</script>
@endpush
@endsection