@extends('layouts.app')

@section('content')
    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed page-with-wide-sidebar">
        @include('partials.header')
        @include('partials.sidebar')

        <div id="content" class="content">
            <!-- Breadcrumb -->
            <ol class="breadcrumb float-xl-right">
                <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                <li class="breadcrumb-item"><a href="javascript:;">System Settings</a></li>
                <li class="breadcrumb-item"><a href="{{ route('feature_controls.index') }}">Feature Controls</a></li>
                <li class="breadcrumb-item active">View</li>
            </ol>

            <!-- Page Header -->
            <h1 class="page-header">Feature Control Details</h1>

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="{{ route('feature_controls.edit', $featureControl->id) }}" class="btn btn-sm btn-custom">
                            <i class="fa fa-edit"></i> Edit
                        </a>
                        @if (!$featureControl->is_system)
                            <form action="{{ route('feature_controls.destroy', $featureControl->id) }}" method="POST"
                                style="display: inline;" class="ml-1"
                                onsubmit="return confirm('Are you sure you want to delete this feature control?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">
                                    <i class="fa fa-trash"></i> Delete
                                </button>
                            </form>
                        @endif
                    </div>
                    <h4 class="panel-title">{{ $featureControl->feature_name }}</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <!-- Feature Information -->
                        <div class="col-md-8">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-info-circle"></i> Feature Information
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <label>Feature Key:</label>
                                                <div class="value">
                                                    <code class="feature-key">{{ $featureControl->feature_key }}</code>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <label>Feature Name:</label>
                                                <div class="value">{{ $featureControl->feature_name }}</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <label>Current Value:</label>
                                                <div class="value">
                                                    <span class="badge {{ $featureControl->status_badge_class }} badge-lg">
                                                        {{ $featureControl->value }}
                                                    </span>
                                                    <small
                                                        class="text-muted ml-2">({{ $featureControl->status_text }})</small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <label>Feature Type:</label>
                                                <div class="value">
                                                    <span class="badge {{ $featureControl->type_badge_class }} badge-lg">
                                                        {{ $featureControl->type_text }}
                                                    </span>
                                                    @if ($featureControl->is_system)
                                                        <small class="text-muted ml-2">
                                                            <i class="fa fa-lock"></i> Cannot be deleted
                                                        </small>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <label>Sort Order:</label>
                                                <div class="value">{{ $featureControl->sort_order }}</div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="info-item">
                                                <label>Active in CMS:</label>
                                                <div class="value">
                                                    <span
                                                        class="badge {{ $featureControl->is_active ? 'badge-success' : 'badge-secondary' }} badge-lg">
                                                        {{ $featureControl->is_active ? 'Yes' : 'No' }}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    @if ($featureControl->description)
                                        <div class="row mt-3">
                                            <div class="col-12">
                                                <div class="info-item">
                                                    <label>Description:</label>
                                                    <div class="value description-text">
                                                        {{ $featureControl->description }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- API Response Example -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-code"></i> API Response Example
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <p class="text-muted mb-3">
                                        This feature appears in API responses with the following format:
                                    </p>
                                    <pre><code>{
    "Logo": "1",
    "Bg": "1",
    "adv": "1",
    "runText": "1",
    "PIP": "0",
    "idleHome": "1",
    "<span class="feature-highlight">{{ $featureControl->feature_key }}</span>": "<span class="value-highlight">{{ $featureControl->value }}</span>"
}</code></pre>

                                    <div class="mt-3">
                                        <small class="text-muted">
                                            <strong>API Endpoint:</strong> <code>GET
                                                /api/post-info?deviceName=ROOM_NAME</code>
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Status and Actions -->
                        <div class="col-md-4">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-cogs"></i> Quick Actions
                                    </h5>
                                </div>
                                <div class="card-body text-center">
                                    <!-- Toggle Status -->
                                    <div class="action-item mb-4">
                                        <label class="d-block mb-2">Feature Status</label>
                                        @if ($featureControl->canBeToggled())
                                            <div class="switcher-lg">
                                                <input type="checkbox" id="status_toggle"
                                                    {{ $featureControl->value === '1' ? 'checked' : '' }}
                                                    onchange="toggleFeatureStatus({{ $featureControl->id }}, this.checked)">
                                                <label for="status_toggle"></label>
                                            </div>
                                            <div class="mt-2">
                                                <span id="status_text"
                                                    class="badge {{ $featureControl->status_badge_class }}">
                                                    {{ $featureControl->status_text }}
                                                </span>
                                            </div>
                                        @else
                                            <div class="custom-value-badge">
                                                <span class="badge {{ $featureControl->status_badge_class }} badge-lg">
                                                    {{ $featureControl->value }}
                                                </span>
                                                <div class="mt-2">
                                                    <small class="text-muted">Custom Value (Use Edit to change)</small>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <!-- Action Buttons -->
                                    <div class="action-buttons">
                                        <a href="{{ route('feature_controls.edit', $featureControl->id) }}"
                                            class="btn btn-custom btn-block mb-2">
                                            <i class="fa fa-edit"></i> Edit Feature
                                        </a>

                                        <button type="button" class="btn btn-info btn-block mb-2"
                                            onclick="testApiResponse()">
                                            <i class="fa fa-test-tube"></i> Test API Response
                                        </button>

                                        @if (!$featureControl->is_system)
                                            <form action="{{ route('feature_controls.destroy', $featureControl->id) }}"
                                                method="POST" onsubmit="return confirmDelete()">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-block">
                                                    <i class="fa fa-trash"></i> Delete Feature
                                                </button>
                                            </form>
                                        @else
                                            <button type="button" class="btn btn-secondary btn-block" disabled
                                                title="System features cannot be deleted">
                                                <i class="fa fa-lock"></i> Protected Feature
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Timestamps -->
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fa fa-clock"></i> Timeline
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="timeline-item">
                                        <div class="timeline-label">Created</div>
                                        <div class="timeline-value">
                                            {{ $featureControl->created_at->format('M d, Y') }}
                                            <br>
                                            <small
                                                class="text-muted">{{ $featureControl->created_at->format('g:i A') }}</small>
                                        </div>
                                    </div>

                                    <div class="timeline-item">
                                        <div class="timeline-label">Last Updated</div>
                                        <div class="timeline-value">
                                            {{ $featureControl->updated_at->format('M d, Y') }}
                                            <br>
                                            <small
                                                class="text-muted">{{ $featureControl->updated_at->format('g:i A') }}</small>
                                        </div>
                                    </div>

                                    <div class="timeline-item">
                                        <div class="timeline-label">Time Ago</div>
                                        <div class="timeline-value">
                                            <small
                                                class="text-muted">{{ $featureControl->updated_at->diffForHumans() }}</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Back Button -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <a href="{{ route('feature_controls.index') }}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left"></i> Back to Feature Controls
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scroll to top button -->
        <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
            data-click="scroll-top">
            <i class="fa fa-angle-up"></i>
        </a>
    </div>

    <!-- API Test Modal -->
    <div class="modal fade" id="apiTestModal" tabindex="-1" role="dialog" aria-labelledby="apiTestModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="apiTestModalLabel">
                        <i class="fa fa-test-tube"></i> API Response Test
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="text-muted">Testing API response for feature:
                        <strong>{{ $featureControl->feature_key }}</strong></p>

                    <div class="form-group">
                        <label for="test_device_name">Device Name (Optional):</label>
                        <input type="text" class="form-control" id="test_device_name" placeholder="e.g., ROOM101"
                            value="TEST_ROOM">
                        <small class="form-text text-muted">
                            Leave empty to test without device-specific data.
                        </small>
                    </div>

                    <div id="api_response_container">
                        <!-- API response will be loaded here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="executeApiTest()">
                        <i class="fa fa-refresh"></i> Run Test
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        .panel-title {
            color: #000000 !important;
        }

        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 0.75rem 1rem;
        }

        .card-title {
            color: #000000 !important;
            margin-bottom: 0;
            font-size: 1rem;
            font-weight: 600;
        }

        .card-body {
            padding: 1.25rem;
        }

        .info-item {
            margin-bottom: 1rem;
        }

        .info-item:last-child {
            margin-bottom: 0;
        }

        .info-item label {
            font-weight: 600;
            color: #6c757d;
            margin-bottom: 0.25rem;
            display: block;
            font-size: 0.875rem;
        }

        .info-item .value {
            color: #000000;
            font-size: 0.95rem;
        }

        .feature-key {
            background-color: #f8f9fa;
            color: #e83e8c;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
        }

        .description-text {
            background-color: #f8f9fa;
            padding: 0.75rem;
            border-radius: 0.375rem;
            border-left: 4px solid #007bff;
            font-style: italic;
        }

        .badge-lg {
            font-size: 0.9rem;
            padding: 0.5rem 0.75rem;
        }

        pre {
            background-color: #2d3748;
            color: #e2e8f0;
            padding: 1.25rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            line-height: 1.6;
            overflow-x: auto;
        }

        pre code {
            color: inherit;
            background-color: transparent;
            padding: 0;
        }

        .feature-highlight {
            color: #f6ad55;
            font-weight: bold;
        }

        .value-highlight {
            color: #68d391;
            font-weight: bold;
        }

        .action-item {
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 1rem;
        }

        .action-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .switcher-lg {
            display: inline-block;
            transform: scale(1.5);
        }

        .timeline-item {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0.75rem 0;
            border-bottom: 1px solid #e9ecef;
        }

        .timeline-item:last-child {
            border-bottom: none;
        }

        .timeline-label {
            font-weight: 600;
            color: #6c757d;
            font-size: 0.875rem;
            flex: 1;
        }

        .timeline-value {
            text-align: right;
            flex: 1;
            font-size: 0.875rem;
        }

        /* Modal styling */
        .modal-title {
            color: #000000 !important;
        }

        #api_response_container {
            min-height: 100px;
            max-height: 400px;
            overflow-y: auto;
        }

        .api-loading {
            text-align: center;
            padding: 2rem;
            color: #6c757d;
        }

        .api-error {
            background-color: #f8d7da;
            color: #721c24;
            padding: 1rem;
            border-radius: 0.375rem;
            border: 1px solid #f5c6cb;
        }

        .api-success {
            background-color: #2d3748;
            color: #e2e8f0;
            padding: 1.25rem;
            border-radius: 0.375rem;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            line-height: 1.6;
            overflow-x: auto;
        }
    </style>

    <script>
        /**
         * Toggle feature status
         */
        function toggleFeatureStatus(featureId, isEnabled) {
            const checkbox = document.getElementById('status_toggle');
            const statusText = document.getElementById('status_text');

            // Check if checkbox exists (might not exist for custom values)
            if (!checkbox) {
                showMessage('This feature cannot be toggled. Please use the edit form to change the value.', 'error');
                return;
            }

            checkbox.disabled = true;

            const value = isEnabled ? '1' : '0';

            fetch(`{{ url('feature_controls') }}/${featureId}/toggle`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update status display
                        statusText.className = `badge ${data.badge_class}`;
                        statusText.textContent = data.status_text;

                        // Update API preview
                        const valueHighlight = document.querySelector('.value-highlight');
                        if (valueHighlight) {
                            valueHighlight.textContent = data.new_value;
                        }

                        showMessage(data.message, 'success');
                    } else {
                        throw new Error(data.message || 'Failed to update feature');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    checkbox.checked = !isEnabled;
                    showMessage(error.message || 'An error occurred while updating feature', 'error');
                })
                .finally(() => {
                    checkbox.disabled = false;
                });
        }

        /**
         * Test API response
         */
        function testApiResponse() {
            $('#apiTestModal').modal('show');
            executeApiTest();
        }

        /**
         * Execute API test
         */
        function executeApiTest() {
            const container = document.getElementById('api_response_container');
            const deviceName = document.getElementById('test_device_name').value.trim();

            // Show loading
            container.innerHTML = '<div class="api-loading"><i class="fa fa-spinner fa-spin"></i> Loading...</div>';

            // Build URL
            let url = '{{ route('api.post_info') }}';
            if (deviceName) {
                url += `?deviceName=${encodeURIComponent(deviceName)}`;
            }

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    // Pretty print JSON
                    const prettyJson = JSON.stringify(data, null, 2);

                    // Highlight the current feature
                    const highlightedJson = prettyJson.replace(
                        new RegExp(`"{{ $featureControl->feature_key }}":\\s*"([^"]*)"`, 'g'),
                        `<span style="background-color: #ffeaa7; color: #2d3436; padding: 2px 4px; border-radius: 3px;">"{{ $featureControl->feature_key }}": "$1"</span>`
                    );

                    container.innerHTML = `<pre class="api-success">${highlightedJson}</pre>`;
                })
                .catch(error => {
                    console.error('API test error:', error);
                    container.innerHTML = `
                        <div class="api-error">
                            <strong>Error:</strong> Failed to fetch API response.<br>
                            <small>${error.message}</small>
                        </div>
                    `;
                });
        }

        /**
         * Confirm delete action
         */
        function confirmDelete() {
            return confirm(
                'Are you sure you want to delete this feature control?\n\n' +
                'Feature: {{ $featureControl->feature_name }}\n' +
                'Key: {{ $featureControl->feature_key }}\n\n' +
                'This action cannot be undone and will remove the feature from all API responses.'
            );
        }

        /**
         * Show success/error messages
         */
        function showMessage(message, type) {
            const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
            const alertHtml = `
                <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;

            // Remove existing alerts
            $('.alert:not(.alert-info)').remove();

            // Add new alert at the top of panel body
            $('.panel-body').prepend(alertHtml);

            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                $('.alert:not(.alert-info)').fadeOut();
            }, 5000);
        }
    </script>
@endsection