@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">Edit</li>
            </ol>

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

            <!-- Main Panel -->
            <div class="panel panel-inverse">
                <div class="panel-heading">
                    <h4 class="panel-title">Edit: {{ $featureControl->feature_name }}</h4>
                </div>
                <div class="panel-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('feature_controls.update', $featureControl->id) }}" method="POST" id="editForm"
                        novalidate>
                        @csrf
                        @method('PUT')

                        <!-- Feature Key -->
                        <div class="form-group">
                            <label for="feature_key">Feature Key <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="feature_key" name="feature_key"
                                value="{{ old('feature_key', $featureControl->feature_key) }}" required
                                {{ $featureControl->is_system ? 'readonly' : '' }}
                                placeholder="e.g., message, message_limit, customFeature">
                            @if ($featureControl->is_system)
                                <small class="form-text text-warning">
                                    <i class="fa fa-lock"></i> System feature keys cannot be modified.
                                </small>
                            @else
                                <small class="form-text text-muted">
                                    <strong>Important:</strong> Must start with a letter and contain only letters, numbers,
                                    and underscores.
                                    <br>
                                    <strong>Examples:</strong> <code>message</code>, <code>message_limit</code>,
                                    <code>customFeature</code>
                                </small>
                            @endif
                            <div class="invalid-feedback" id="feature_key_error"></div>
                        </div>

                        <!-- Feature Name -->
                        <div class="form-group">
                            <label for="feature_name">Feature Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="feature_name" name="feature_name"
                                value="{{ old('feature_name', $featureControl->feature_name) }}" required
                                placeholder="e.g., Message Display, Message Limit Control">
                            <small class="form-text text-muted">
                                Human-readable name for the feature that will be displayed in the CMS interface.
                            </small>
                        </div>

                        <!-- Description -->
                        <div class="form-group">
                            <label for="description">Description (Optional)</label>
                            <textarea class="form-control" id="description" name="description" rows="3"
                                placeholder="Describe what this feature controls or its purpose...">{{ old('description', $featureControl->description) }}</textarea>
                            <small class="form-text text-muted">
                                Provide a detailed description of what this feature controls for future reference.
                            </small>
                        </div>

                        <!-- Value -->
                        <div class="form-group">
                            <label for="value">Current Value <span class="text-danger">*</span></label>
                            @if (in_array($featureControl->feature_key, ['menu_slider']))
                                <!-- Special handling for menu_slider -->
                                <div class="form-check-container">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="value" id="value_linear"
                                            value="linear"
                                            {{ old('value', $featureControl->value) === 'linear' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="value_linear">
                                            <span class="badge badge-info">linear</span> Linear Animation
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="value" id="value_infinite"
                                            value="infinite"
                                            {{ old('value', $featureControl->value) === 'infinite' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="value_infinite">
                                            <span class="badge badge-warning">infinite</span> Infinite Loop
                                        </label>
                                    </div>
                                </div>
                                <small class="form-text text-muted">
                                    Controls the menu slider animation type. Linear plays once, infinite loops continuously.
                                </small>
                            @else
                                <!-- Standard 0/1 values for other features -->
                                <div class="form-check-container">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="value" id="value_0"
                                            value="0"
                                            {{ old('value', $featureControl->value) === '0' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="value_0">
                                            <span class="badge badge-secondary">0</span> Disabled
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="value" id="value_1"
                                            value="1"
                                            {{ old('value', $featureControl->value) === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="value_1">
                                            <span class="badge badge-success">1</span> Enabled
                                        </label>
                                    </div>
                                </div>
                                <small class="form-text text-muted">
                                    Controls whether this feature is active in API responses. Value is always returned as a
                                    string.
                                </small>
                            @endif
                        </div>

                        <!-- Active Status -->
                        <div class="form-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active"
                                    value="1" {{ old('is_active', $featureControl->is_active) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    <strong>Active in CMS</strong>
                                </label>
                            </div>
                            <small class="form-text text-muted">
                                Controls whether this feature control appears in the CMS interface and API responses.
                                Unchecking this will hide the feature without deleting it.
                            </small>
                        </div>

                        <!-- Sort Order -->
                        <div class="form-group">
                            <label for="sort_order">Sort Order</label>
                            <input type="number" class="form-control" id="sort_order" name="sort_order"
                                value="{{ old('sort_order', $featureControl->sort_order) }}" min="0">
                            <small class="form-text text-muted">
                                Controls the display order in the feature list. Lower numbers appear first.
                            </small>
                        </div>

                        <!-- Feature Type Display -->
                        <div class="form-group">
                            <label>Feature Type</label>
                            <div class="feature-type-display">
                                <span class="badge {{ $featureControl->type_badge_class }}">
                                    {{ $featureControl->type_text }}
                                </span>
                                @if ($featureControl->is_system)
                                    <small class="text-muted ml-2">
                                        <i class="fa fa-info-circle"></i> System features are built-in and cannot be
                                        deleted.
                                    </small>
                                @else
                                    <small class="text-muted ml-2">
                                        <i class="fa fa-info-circle"></i> Custom features can be modified or deleted.
                                    </small>
                                @endif
                            </div>
                        </div>

                        <!-- API Response Preview -->
                        <div class="form-group">
                            <label>API Response Preview</label>
                            <div class="card">
                                <div class="card-body">
                                    <small class="text-muted">Current API response for this feature:</small>
                                    <pre class="mt-2 mb-0" id="api_preview"><code>{
    ...
    "<span id="preview_key">{{ $featureControl->feature_key }}</span>": "<span id="preview_value">{{ $featureControl->value }}</span>"
    ...
}</code></pre>
                                </div>
                            </div>
                        </div>

                        <!-- Timestamps -->
                        <div class="form-group">
                            <label>Information</label>
                            <div class="info-display">
                                <div class="row">
                                    <div class="col-md-6">
                                        <small class="text-muted">
                                            <strong>Created:</strong>
                                            {{ $featureControl->created_at->format('M d, Y \a\t H:i') }}
                                        </small>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted">
                                            <strong>Last Updated:</strong>
                                            {{ $featureControl->updated_at->format('M d, Y \a\t H:i') }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-group">
                            <button type="submit" class="btn btn-custom" id="submitBtn">
                                <i class="fa fa-save"></i> Update Feature Control
                            </button>
                            <a href="{{ route('feature_controls.show', $featureControl->id) }}" class="btn btn-info">
                                <i class="fa fa-eye"></i> View Details
                            </a>
                            <a href="{{ route('feature_controls.index') }}" class="btn btn-secondary">
                                <i class="fa fa-arrow-left"></i> Back to List
                            </a>
                            @if (!$featureControl->is_system)
                                <form action="{{ route('feature_controls.destroy', $featureControl->id) }}"
                                    method="POST" style="display: inline;" class="ml-2"
                                    onsubmit="return confirm('Are you sure you want to delete this feature control? This action cannot be undone.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">
                                        <i class="fa fa-trash"></i> Delete
                                    </button>
                                </form>
                            @endif
                        </div>
                    </form>
                </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>

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

        .card {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
        }

        .card-body {
            padding: 1rem;
            background-color: #f8f9fa;
        }

        pre {
            background-color: #2d3748;
            color: #e2e8f0;
            padding: 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            line-height: 1.5;
        }

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

        #preview_key {
            color: #f6ad55;
            font-weight: bold;
        }

        #preview_value {
            color: #68d391;
            font-weight: bold;
        }

        .invalid-feedback {
            display: block;
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        .form-control.is-invalid {
            border-color: #dc3545;
        }

        .form-check-container {
            padding: 0.5rem;
            background-color: #f8f9fa;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
        }

        .form-check-inline {
            margin-right: 1.5rem;
        }

        .form-check-label {
            cursor: pointer;
            padding: 0.375rem 0.75rem;
            border-radius: 0.25rem;
            transition: background-color 0.15s ease-in-out;
        }

        .form-check-label:hover {
            background-color: #e9ecef;
        }

        .form-check-input:checked+.form-check-label {
            background-color: #e3f2fd;
            border-color: #2196f3;
        }

        .feature-type-display {
            padding: 0.75rem;
            background-color: #f8f9fa;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
        }

        .info-display {
            padding: 0.75rem;
            background-color: #f8f9fa;
            border-radius: 0.375rem;
            border: 1px solid #dee2e6;
        }

        .text-danger {
            color: #dc3545 !important;
        }

        .text-warning {
            color: #ffc107 !important;
        }

        .badge {
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
        }

        /* Read-only input styling */
        .form-control[readonly] {
            background-color: #e9ecef;
            opacity: 1;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const featureKeyInput = document.getElementById('feature_key');
            const previewKey = document.getElementById('preview_key');
            const previewValue = document.getElementById('preview_value');
            const valueRadios = document.querySelectorAll('input[name="value"]');
            const submitBtn = document.getElementById('submitBtn');
            const form = document.getElementById('editForm');

            // Update API preview in real-time
            if (!featureKeyInput.hasAttribute('readonly')) {
                featureKeyInput.addEventListener('input', function() {
                    const value = this.value.trim();
                    previewKey.textContent = value || '{{ $featureControl->feature_key }}';

                    // Validate feature key format
                    validateFeatureKey(value);
                });
            }

            // Update value preview when radio buttons change
            valueRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    previewValue.textContent = this.value;
                });
            });

            // Feature key validation (only if not readonly)
            function validateFeatureKey(key) {
                if (featureKeyInput.hasAttribute('readonly')) {
                    return true;
                }

                const errorElement = document.getElementById('feature_key_error');
                const input = document.getElementById('feature_key');

                // Clear previous validation
                input.classList.remove('is-invalid');
                errorElement.textContent = '';

                if (!key) {
                    return; // Don't validate empty field during typing
                }

                // Validate format: must start with letter, contain only letters, numbers, underscores
                const isValid = /^[a-zA-Z][a-zA-Z0-9_]*$/.test(key);

                if (!isValid) {
                    input.classList.add('is-invalid');
                    errorElement.textContent =
                        'Feature key must start with a letter and contain only letters, numbers, and underscores.';
                    return false;
                }

                // Check for reserved keywords
                const reservedKeys = ['class', 'function', 'var', 'let', 'const', 'if', 'else', 'for', 'while',
                    'return', 'null', 'undefined', 'true', 'false'
                ];
                if (reservedKeys.includes(key.toLowerCase())) {
                    input.classList.add('is-invalid');
                    errorElement.textContent = 'This is a reserved keyword and cannot be used as a feature key.';
                    return false;
                }

                return true;
            }

            // Form validation on submit
            form.addEventListener('submit', function(e) {
                const featureKey = featureKeyInput.value.trim();
                const featureName = document.getElementById('feature_name').value.trim();
                const selectedValue = document.querySelector('input[name="value"]:checked');

                let hasErrors = false;

                // Validate feature key (only if not readonly)
                if (!featureKeyInput.hasAttribute('readonly')) {
                    if (!featureKey) {
                        e.preventDefault();
                        featureKeyInput.classList.add('is-invalid');
                        document.getElementById('feature_key_error').textContent =
                            'Feature key is required.';
                        hasErrors = true;
                    } else if (!validateFeatureKey(featureKey)) {
                        e.preventDefault();
                        hasErrors = true;
                    }
                }

                // Validate feature name
                if (!featureName) {
                    e.preventDefault();
                    document.getElementById('feature_name').classList.add('is-invalid');
                    hasErrors = true;
                }

                // Validate value selection - IMPROVED VERSION
                if (!selectedValue) {
                    e.preventDefault();
                    alert('Please select a value for the feature.');
                    console.log('Available value inputs:', document.querySelectorAll(
                    'input[name="value"]'));
                    console.log('Checked value inputs:', document.querySelectorAll(
                        'input[name="value"]:checked'));
                    hasErrors = true;
                    return; // Stop here to debug
                }

                // Debug logging for menu_slider
                if (featureKey === 'menu_slider') {
                    console.log('Menu slider update:', {
                        selectedValue: selectedValue.value,
                        featureKey: featureKey,
                        formData: new FormData(form)
                    });
                }

                if (hasErrors) {
                    // Scroll to first error
                    const firstError = document.querySelector('.is-invalid');
                    if (firstError) {
                        firstError.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                        firstError.focus();
                    }
                    return;
                }

                // Disable submit button to prevent double submission
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Updating...';
            });

            // Clear validation errors on input
            document.querySelectorAll('.form-control').forEach(input => {
                input.addEventListener('input', function() {
                    this.classList.remove('is-invalid');
                });
            });

            // Auto-generate feature name from key (only for non-system features)
            if (!featureKeyInput.hasAttribute('readonly')) {
                featureKeyInput.addEventListener('blur', function() {
                    const featureNameInput = document.getElementById('feature_name');
                    const key = this.value.trim();

                    // Only auto-generate if feature name is empty or matches the old auto-generated pattern
                    const currentName = featureNameInput.value.trim();
                    const oldKey = '{{ $featureControl->feature_key }}';
                    const oldGeneratedName = oldKey
                        .replace(/([A-Z])/g, ' $1')
                        .replace(/_/g, ' ')
                        .replace(/\b\w/g, l => l.toUpperCase())
                        .trim();

                    if (key && (!currentName || currentName === oldGeneratedName)) {
                        // Convert camelCase and snake_case to Title Case
                        const name = key
                            .replace(/([A-Z])/g, ' $1') // Add space before capital letters
                            .replace(/_/g, ' ') // Replace underscores with spaces
                            .replace(/\b\w/g, l => l.toUpperCase()) // Capitalize first letter of each word
                            .trim();

                        featureNameInput.value = name;
                    }
                });
            }

            // Confirmation for system features
            @if ($featureControl->is_system)
                form.addEventListener('submit', function(e) {
                    const currentValue = '{{ $featureControl->value }}';
                    const selectedValue = document.querySelector('input[name="value"]:checked').value;

                    if (currentValue !== selectedValue) {
                        if (!confirm(
                                'You are changing a system feature value. This may affect core functionality. Are you sure you want to continue?'
                            )) {
                            e.preventDefault();
                            return;
                        }
                    }
                });
            @endif

            // Real-time validation feedback
            featureKeyInput.addEventListener('input', function() {
                const value = this.value.trim();
                if (value && !featureKeyInput.hasAttribute('readonly')) {
                    // Debounce validation
                    clearTimeout(this.validationTimeout);
                    this.validationTimeout = setTimeout(() => {
                        validateFeatureKey(value);
                    }, 300);
                }
            });
        });
    </script>
@endsection