@extends('admin.layouts.app')

@section('title', __('admin/ai-staff.create_title'))

@section('content')
<div class="container-fluid px-4">
    @include('admin.ai-staff._nav')

    <x-admin.page-header
        :title="__('admin/ai-staff.create_title')"
        :subtitle="__('admin/ai-staff.create_subtitle')"
        icon="fas fa-robot"
        :buttons="[
            ['label' => __('admin/ai-staff.buttons_back'), 'route' => route('admin.ai-staff.index'), 'icon' => 'fas fa-arrow-left', 'color' => 'outline-secondary'],
        ]"
    />

    <x-admin.alert />

    <form id="aiStaffForm" method="POST" action="{{ route('admin.ai-staff.store') }}">
        @csrf

        <div class="row">
            <!-- Main Form Column -->
            <div class="col-lg-8">
                <!-- Card 1: Identity -->
                <x-admin.card :title="__('admin/ai-staff.card_identity')" icon="fas fa-id-card" class="mb-4">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">{{ __('admin/ai-staff.fields_name') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                       id="name" name="name" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">{{ __('admin/ai-staff.fields_email') }} <span class="text-danger">*</span></label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                       id="email" name="email" value="{{ old('email') }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="job_title" class="form-label">{{ __('admin/ai-staff.fields_job_title') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('job_title') is-invalid @enderror"
                               id="job_title" name="job_title" value="{{ old('job_title') }}" required>
                        @error('job_title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">{{ __('admin/ai-staff.help_job_title') }}</small>
                    </div>
                </x-admin.card>

                <!-- Card 2: Personality -->
                <x-admin.card :title="__('admin/ai-staff.card_personality')" icon="fas fa-brain" class="mb-4">
                    <div class="mb-3">
                        <label for="personality_tone" class="form-label">{{ __('admin/ai-staff.fields_personality_tone') }} <span class="text-danger">*</span></label>
                        <select class="form-select @error('personality_tone') is-invalid @enderror"
                                id="personality_tone" name="personality_tone" required>
                            <option value="">{{ __('admin/ai-staff.select_personality_tone') }}</option>
                            <option value="professional" @selected(old('personality_tone') == 'professional')>{{ __('admin/ai-staff.tone_professional') }}</option>
                            <option value="friendly" @selected(old('personality_tone') == 'friendly')>{{ __('admin/ai-staff.tone_friendly') }}</option>
                            <option value="formal" @selected(old('personality_tone') == 'formal')>{{ __('admin/ai-staff.tone_formal') }}</option>
                            <option value="casual" @selected(old('personality_tone') == 'casual')>{{ __('admin/ai-staff.tone_casual') }}</option>
                            <option value="empathetic" @selected(old('personality_tone') == 'empathetic')>{{ __('admin/ai-staff.tone_empathetic') }}</option>
                            <option value="technical" @selected(old('personality_tone') == 'technical')>{{ __('admin/ai-staff.tone_technical') }}</option>
                        </select>
                        @error('personality_tone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="system_prompt" class="form-label">{{ __('admin/ai-staff.fields_system_prompt') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('system_prompt') is-invalid @enderror"
                                  id="system_prompt" name="system_prompt" rows="6" required>{{ old('system_prompt') }}</textarea>
                        @error('system_prompt')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">{{ __('admin/ai-staff.help_system_prompt') }}</small>
                    </div>
                </x-admin.card>

                <!-- Card 3: Humanization -->
                <x-admin.card :title="__('admin/ai-staff.card_humanization')" icon="fas fa-user-edit" class="mb-4">
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input type="hidden" name="humanize_enabled" value="0">
                            <input class="form-check-input @error('humanize_enabled') is-invalid @enderror"
                                   type="checkbox" id="humanize_enabled" name="humanize_enabled"
                                   value="1" {{ old('humanize_enabled') ? 'checked' : '' }}>
                            <label class="form-check-label" for="humanize_enabled">
                                {{ __('admin/ai-staff.fields_humanize_enabled') }}
                            </label>
                            @error('humanize_enabled')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <small class="form-text text-muted">{{ __('admin/ai-staff.help_humanize_enabled') }}</small>
                    </div>
                    <div class="mb-3">
                        <label for="typo_frequency" class="form-label">{{ __('admin/ai-staff.fields_typo_frequency') }}</label>
                        <input type="range" class="form-range @error('typo_frequency') is-invalid @enderror"
                               id="typo_frequency" name="typo_frequency"
                               min="0" max="100" step="5" value="{{ old('typo_frequency', 0) }}">
                        <div class="d-flex justify-content-between">
                            <small class="text-muted">0%</small>
                            <small class="text-muted" id="typoFrequencyValue">{{ old('typo_frequency', 0) }}%</small>
                            <small class="text-muted">100%</small>
                        </div>
                        @error('typo_frequency')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </x-admin.card>

                <!-- Card 4: Operations -->
                <x-admin.card :title="__('admin/ai-staff.card_operations')" icon="fas fa-cogs" class="mb-4">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="confidence_threshold" class="form-label">{{ __('admin/ai-staff.fields_confidence_threshold') }}</label>
                            <input type="range" class="form-range @error('confidence_threshold') is-invalid @enderror"
                                   id="confidence_threshold" name="confidence_threshold"
                                   min="0" max="100" step="5" value="{{ old('confidence_threshold', 70) }}">
                            <div class="d-flex justify-content-between">
                                <small class="text-muted">0%</small>
                                <small class="text-muted" id="confidenceThresholdValue">{{ old('confidence_threshold', 70) }}%</small>
                                <small class="text-muted">100%</small>
                            </div>
                            @error('confidence_threshold')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">{{ __('admin/ai-staff.help_confidence_threshold') }}</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="delay_min" class="form-label">{{ __('admin/ai-staff.fields_delay_min') }}</label>
                                <input type="number" class="form-control @error('delay_min') is-invalid @enderror"
                                       id="delay_min" name="response_delay_min" value="{{ old('delay_min', 0) }}" min="0">
                                @error('delay_min')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('admin/ai-staff.help_delay_min') }}</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="delay_max" class="form-label">{{ __('admin/ai-staff.fields_delay_max') }}</label>
                                <input type="number" class="form-control @error('delay_max') is-invalid @enderror"
                                       id="delay_max" name="response_delay_max" value="{{ old('delay_max', 0) }}" min="0">
                                @error('delay_max')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('admin/ai-staff.help_delay_max') }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="working_hours_start" class="form-label">{{ __('admin/ai-staff.fields_working_hours_start') }}</label>
                                <input type="time" class="form-control @error('working_hours_start') is-invalid @enderror"
                                       id="working_hours_start" name="working_hours_start" value="{{ old('working_hours_start', '09:00') }}">
                                @error('working_hours_start')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="working_hours_end" class="form-label">{{ __('admin/ai-staff.fields_working_hours_end') }}</label>
                                <input type="time" class="form-control @error('working_hours_end') is-invalid @enderror"
                                       id="working_hours_end" name="working_hours_end" value="{{ old('working_hours_end', '18:00') }}">
                                @error('working_hours_end')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/ai-staff.fields_working_days') }}</label>
                        <div class="d-flex flex-wrap gap-3">
                            @foreach([1 => 'monday', 2 => 'tuesday', 3 => 'wednesday', 4 => 'thursday', 5 => 'friday', 6 => 'saturday', 7 => 'sunday'] as $dayNum => $dayName)
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input"
                                           id="working_day_{{ $dayNum }}" name="working_days[]"
                                           value="{{ $dayNum }}"
                                           {{ in_array($dayNum, old('working_days', [1,2,3,4,5])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="working_day_{{ $dayNum }}">
                                        {{ __('admin/ai-staff.day_' . $dayName) }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="timezone" class="form-label">{{ __('admin/ai-staff.fields_timezone') }}</label>
                        <select class="form-select @error('timezone') is-invalid @enderror"
                                id="timezone" name="timezone">
                            @foreach(timezone_identifiers_list() as $tz)
                                <option value="{{ $tz }}" @selected(old('timezone', config('app.timezone')) == $tz)>
                                    {{ $tz }}
                                </option>
                            @endforeach
                        </select>
                        @error('timezone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </x-admin.card>

                <!-- Card 5: Waiting Message -->
                <x-admin.card :title="__('admin/ai-staff.card_waiting_message')" icon="fas fa-hourglass-half" class="mb-4">
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input type="hidden" name="waiting_message_enabled" value="0">
                            <input class="form-check-input @error('waiting_message_enabled') is-invalid @enderror"
                                   type="checkbox" id="waiting_message_enabled" name="waiting_message_enabled"
                                   value="1" {{ old('waiting_message_enabled') ? 'checked' : '' }}>
                            <label class="form-check-label" for="waiting_message_enabled">
                                {{ __('admin/ai-staff.fields_waiting_message_enabled') }}
                            </label>
                            @error('waiting_message_enabled')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="waiting_message_text" class="form-label">{{ __('admin/ai-staff.fields_waiting_message_text') }}</label>
                        <textarea class="form-control @error('waiting_message_text') is-invalid @enderror"
                                  id="waiting_message_text" name="waiting_message_text" rows="3">{{ old('waiting_message_text') }}</textarea>
                        @error('waiting_message_text')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">{{ __('admin/ai-staff.help_waiting_message_text') }}</small>
                    </div>
                </x-admin.card>

                <!-- Card 6: Limits -->
                <x-admin.card :title="__('admin/ai-staff.card_limits')" icon="fas fa-sliders-h" class="mb-4">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_autonomous_replies_per_ticket" class="form-label">{{ __('admin/ai-staff.fields_max_autonomous_replies') }}</label>
                                <input type="number" class="form-control @error('max_autonomous_replies_per_ticket') is-invalid @enderror"
                                       id="max_autonomous_replies_per_ticket" name="max_autonomous_replies_per_ticket"
                                       value="{{ old('max_autonomous_replies_per_ticket', 3) }}" min="0">
                                @error('max_autonomous_replies_per_ticket')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">{{ __('admin/ai-staff.help_max_autonomous_replies') }}</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="status" class="form-label">{{ __('admin/ai-staff.fields_status') }}</label>
                                <select class="form-select @error('status') is-invalid @enderror"
                                        id="status" name="status">
                                    <option value="paused" @selected(old('status', 'paused') == 'paused')>{{ __('admin/ai-staff.status_paused') }}</option>
                                    <option value="active" @selected(old('status') == 'active')>{{ __('admin/ai-staff.status_active') }}</option>
                                    <option value="training" @selected(old('status') == 'training')>{{ __('admin/ai-staff.status_training') }}</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </x-admin.card>
            </div>

            <!-- Actions Column -->
            <div class="col-lg-4">
                <x-admin.card :title="__('admin/ai-staff.card_actions')">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>{{ __('admin/ai-staff.buttons_save') }}
                        </button>
                        <a href="{{ route('admin.ai-staff.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>{{ __('admin/ai-staff.buttons_cancel') }}
                        </a>
                    </div>
                </x-admin.card>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    window.aiStaffConfig = {
        routes: {
            store: '{{ route("admin.ai-staff.store") }}'
        },
        translations: {
            validation_error: '{{ __("admin/ai-staff.validation_error") }}',
            created_success: '{{ __("admin/ai-staff.created_success") }}'
        }
    };
</script>
@vite('resources/js/admin/ai-staff/create.js')
@endpush
