@extends('layouts.layoutMaster')

@section('title', __('AI Module Configuration'))

@section('vendor-style')
  @vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/select2/select2.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
  ])
  <style>
    /* Select2 styling to match Bootstrap 5 */
    .select2-container .select2-selection--single {
      height: 38px !important;
      border: 1px solid #d9dee3 !important;
      border-radius: 0.375rem !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
      line-height: 36px !important;
      padding-left: 12px !important;
      color: #697a8d !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
      height: 36px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
      color: #a1acb8 !important;
    }
    .select2-dropdown {
      border-color: #d9dee3 !important;
      border-radius: 0.375rem !important;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
      background-color: #696cff !important;
    }
    .select2-container--default .select2-results__option[aria-selected=true] {
      background-color: #e7e7ff !important;
      color: #696cff !important;
    }
    .select2-container--open .select2-selection--single {
      border-color: #696cff !important;
    }
  </style>
@endsection

@section('vendor-script')
  @vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/select2/select2.js',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
  ])
@endsection

@section('page-script')
  @vite(['Modules/AICore/resources/assets/js/aicore-module-configuration.js'])
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  {{-- Breadcrumb Component --}}
  <x-breadcrumb
    :title="__('AI Module Configuration')"
    :breadcrumbs="[
      ['name' => __('Artificial Intelligence'), 'url' => route('aicore.dashboard')],
      ['name' => __('Module Configuration'), 'url' => '']
    ]"
    :home-url="route('tenant.dashboard')"
  />

  {{-- Sync Button --}}
  <div class="row mb-4">
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0">{{ __('AI-Enabled Modules') }}</h5>
          <button type="button" class="btn btn-primary" id="syncModulesBtn">
            <i class="bx bx-refresh me-1"></i> {{ __('Sync Modules') }}
          </button>
        </div>
        <div class="card-body">
          <p class="text-muted mb-0">
            {{ __('Configure default AI providers and models for each AI-enabled module. Click "Sync Modules" to detect new modules.') }}
          </p>
        </div>
      </div>
    </div>
  </div>

  {{-- Module Configurations --}}
  <div class="row">
    @forelse($configurations as $config)
    <div class="col-md-6 col-lg-4 mb-4">
      <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <h6 class="mb-0">{{ $config->module_display_name }}</h6>
            <small class="text-muted">{{ $config->module_name }}</small>
          </div>
          <div class="form-check form-switch mb-0">
            <input class="form-check-input module-status-toggle" type="checkbox" role="switch"
                   data-module-id="{{ $config->id }}"
                   {{ $config->is_active ? 'checked' : '' }}>
          </div>
        </div>
        <div class="card-body">
          @if($config->description)
          <p class="text-muted small mb-3">{{ $config->description }}</p>
          @endif

          <form class="module-config-form" data-module-id="{{ $config->id }}">
            <div class="mb-3">
              <label class="form-label">{{ __('Default Provider') }}</label>
              <select class="form-select provider-select" name="default_provider_id" data-module-id="{{ $config->id }}">
                <option value="">{{ __('Use Global Default') }}</option>
                @foreach($providers as $provider)
                <option value="{{ $provider->id }}" {{ $config->default_provider_id == $provider->id ? 'selected' : '' }}>
                  {{ $provider->name }}
                </option>
                @endforeach
              </select>
            </div>

            <div class="mb-3">
              <label class="form-label">{{ __('Default Model') }}</label>
              <select class="form-select model-select" name="default_model_id" data-module-id="{{ $config->id }}">
                <option value="">{{ __('Use Provider Default') }}</option>
                @if($config->default_provider_id && isset($modelsByProvider[$config->default_provider_id]))
                  @foreach($modelsByProvider[$config->default_provider_id] as $model)
                  <option value="{{ $model->id }}" {{ $config->default_model_id == $model->id ? 'selected' : '' }}>
                    {{ $model->name }}
                  </option>
                  @endforeach
                @else
                  @foreach($models as $model)
                  <option value="{{ $model->id }}" {{ $config->default_model_id == $model->id ? 'selected' : '' }}>
                    {{ $model->provider->name }} - {{ $model->name }}
                  </option>
                  @endforeach
                @endif
              </select>
            </div>

            <div class="row">
              <div class="col-6 mb-3">
                <label class="form-label">{{ __('Max Tokens') }}</label>
                <input type="number" class="form-control" name="max_tokens_limit"
                       value="{{ $config->max_tokens_limit }}" min="1" max="32000">
              </div>
              <div class="col-6 mb-3">
                <label class="form-label">{{ __('Temperature') }}</label>
                <input type="number" class="form-control" name="temperature_default"
                       value="{{ $config->temperature_default }}" min="0" max="2" step="0.1">
              </div>
            </div>

            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" name="streaming_enabled"
                     id="streaming_{{ $config->id }}" {{ $config->streaming_enabled ? 'checked' : '' }}>
              <label class="form-check-label" for="streaming_{{ $config->id }}">
                {{ __('Enable Streaming') }}
              </label>
            </div>

            <button type="submit" class="btn btn-primary btn-sm">
              <i class="bx bx-save me-1"></i> {{ __('Save') }}
            </button>
          </form>
        </div>
      </div>
    </div>
    @empty
    <div class="col-12">
      <div class="card">
        <div class="card-body text-center py-5">
          <i class="bx bx-folder-open bx-lg text-muted mb-3"></i>
          <h5 class="text-muted">{{ __('No AI Modules Found') }}</h5>
          <p class="text-muted mb-3">{{ __('Click the "Sync Modules" button to detect AI-enabled modules.') }}</p>
          <button type="button" class="btn btn-primary" id="syncModulesBtnEmpty">
            <i class="bx bx-refresh me-1"></i> {{ __('Sync Modules') }}
          </button>
        </div>
      </div>
    </div>
    @endforelse
  </div>
</div>

<script>
  window.pageData = {
    routes: {
      sync: "{{ route('aicore.module-configuration.sync') }}",
      update: "{{ route('aicore.module-configuration.update.ajax', ':id') }}",
      toggleStatus: "{{ route('aicore.module-configuration.toggle-status', ':id') }}",
      getModels: "{{ route('aicore.module-configuration.provider.models', ':providerId') }}"
    },
    translations: {
      syncSuccess: "{{ __('Modules synced successfully') }}",
      syncFailed: "{{ __('Failed to sync modules') }}",
      saveSuccess: "{{ __('Configuration saved successfully') }}",
      saveFailed: "{{ __('Failed to save configuration') }}",
      loadModelsFailed: "{{ __('Failed to load models') }}",
      statusToggleSuccess: "{{ __('Status updated successfully') }}",
      statusToggleFailed: "{{ __('Failed to update status') }}",
      confirm: "{{ __('Are you sure?') }}",
      yes: "{{ __('Yes') }}",
      no: "{{ __('No') }}"
    }
  };
</script>
@endsection