@extends('layouts.app')

@section('title', 'WhatsApp Bot Settings')

@section('content')
<div class="wa-bot-page">
    @include('whatsapp_bot._nav')

    <header class="setting-header">
        <h1>Bot Settings</h1>
        <p class="setting-subtitle">Configure working hours, handoff to human, anti-spam, and AI reply limits. All replies are generated by the AI using Shopify catalog data.</p>
    </header>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if ($errors->any())
        <div class="alert alert-error">
            <ul style="margin: 0; padding-left: 1.25rem;">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section class="setting-card wa-bot-form-card">
        <form action="{{ route('whatsapp.bot.settings.store') }}" method="POST" class="wa-bot-form">
            @csrf
            <div class="wa-form-grid">
                <div class="wa-form-row wa-form-check">
                    <label class="wa-form-label">
                        <input type="checkbox" name="enable" value="1" {{ old('enable', $settings->enable) ? 'checked' : '' }}>
                        Enable bot
                    </label>
                    <span class="wa-form-hint">When disabled, incoming <strong>WhatsApp</strong> messages are logged but no automatic reply is sent. The master switch for both channels is <strong>Setting → Social Media → Enable AI bot globally</strong>. This checkbox applies only to WhatsApp.</span>
                </div>

                <div class="wa-form-row wa-form-check">
                    <label class="wa-form-label">
                        <input type="checkbox" name="use_working_hours" value="1" {{ old('use_working_hours', $settings->use_working_hours) ? 'checked' : '' }}>
                        Use working hours
                    </label>
                    <span class="wa-form-hint">If unchecked, the bot replies at any time. If checked, outside hours the "message outside hours" is sent.</span>
                </div>

                <div class="wa-form-row">
                    <label class="wa-form-label" for="working_hours_start">Working hours start</label>
                    <input type="time" name="working_hours_start" id="working_hours_start" class="wa-form-input" value="{{ old('working_hours_start', $settings->working_hours_start ? \Carbon\Carbon::parse($settings->working_hours_start)->format('H:i') : '09:00') }}">
                </div>
                <div class="wa-form-row">
                    <label class="wa-form-label" for="working_hours_end">Working hours end</label>
                    <input type="time" name="working_hours_end" id="working_hours_end" class="wa-form-input" value="{{ old('working_hours_end', $settings->working_hours_end ? \Carbon\Carbon::parse($settings->working_hours_end)->format('H:i') : '18:00') }}">
                </div>
                <div class="wa-form-row">
                    <span class="wa-form-label">Open days</span>
                    <span class="wa-form-hint">Select the days the store is open. The bot will use this for "today" and "all the week" so answers stay consistent. Leave all checked for open every day.</span>
                    <div class="wa-form-open-days">
                        @php
                            $days = [0 => 'Sunday', 1 => 'Monday', 2 => 'Tuesday', 3 => 'Wednesday', 4 => 'Thursday', 5 => 'Friday', 6 => 'Saturday'];
                            $selected = old('working_hours_open_days', $openDaysOfWeek ?? [0,1,2,3,4,5,6]);
                        @endphp
                        @foreach($days as $num => $name)
                            <label class="wa-form-label wa-form-check">
                                <input type="checkbox" name="working_hours_open_days[]" value="{{ $num }}" {{ in_array($num, $selected) ? 'checked' : '' }}>
                                {{ $name }}
                            </label>
                        @endforeach
                    </div>
                </div>

                <div class="wa-form-row">
                    <label class="wa-form-label" for="message_outside_hours_en">Message outside working hours</label>
                    <textarea name="message_outside_hours_en" id="message_outside_hours_en" class="wa-form-input" rows="2" maxlength="2000">{{ old('message_outside_hours_en', $settings->message_outside_hours_en) }}</textarea>
                </div>

                <div class="wa-form-row">
                    <label class="wa-form-label" for="handoff_message_en">Handoff message</label>
                    <textarea name="handoff_message_en" id="handoff_message_en" class="wa-form-input" rows="2" maxlength="2000">{{ old('handoff_message_en', $settings->handoff_message_en) }}</textarea>
                    <span class="wa-form-hint">e.g. "An advisor will assist you shortly."</span>
                </div>

                <div class="wa-form-row">
                    <label class="wa-form-label" for="handoff_keywords">Handoff keywords</label>
                    <textarea name="handoff_keywords" id="handoff_keywords" class="wa-form-input" rows="3" maxlength="2000" placeholder="One per line or comma-separated, e.g. asesor, human, agent">{{ old('handoff_keywords', $handoffKeywordsText) }}</textarea>
                    <span class="wa-form-hint">If the user message contains any of these (after normalization), the handoff message is sent and state set to handoff_requested.</span>
                </div>

                <div class="wa-form-row">
                    <label class="wa-form-label" for="antispam_max_replies">Anti-spam: max replies per conversation</label>
                    <input type="number" name="antispam_max_replies" id="antispam_max_replies" class="wa-form-input" min="0" max="50" placeholder="e.g. 5" value="{{ old('antispam_max_replies', $settings->antispam_max_replies) }}">
                </div>
                <div class="wa-form-row">
                    <label class="wa-form-label" for="antispam_window_minutes">Anti-spam: time window (minutes)</label>
                    <input type="number" name="antispam_window_minutes" id="antispam_window_minutes" class="wa-form-input" min="0" max="1440" placeholder="e.g. 10" value="{{ old('antispam_window_minutes', $settings->antispam_window_minutes) }}">
                    <span class="wa-form-hint">If the bot has already sent this many replies in this many minutes, no further reply is sent. Leave both empty to disable.</span>
                </div>

                <h3 class="wa-form-section-title">AI limits</h3>
                <div class="wa-form-row">
                    <label class="wa-form-label" for="ai_max_replies_per_conversation">AI: max replies per conversation</label>
                    <input type="number" name="ai_max_replies_per_conversation" id="ai_max_replies_per_conversation" class="wa-form-input" min="0" max="50" placeholder="e.g. 5" value="{{ old('ai_max_replies_per_conversation', $settings->ai_max_replies_per_conversation) }}">
                </div>
                <div class="wa-form-row">
                    <label class="wa-form-label" for="ai_limit_window_hours">AI: limit time window (hours)</label>
                    <input type="number" name="ai_limit_window_hours" id="ai_limit_window_hours" class="wa-form-input" min="0" max="720" placeholder="e.g. 24" value="{{ old('ai_limit_window_hours', $settings->ai_limit_window_hours) }}">
                    <span class="wa-form-hint">Max AI replies apply within this many hours per conversation. Leave both empty to disable the limit.</span>
                </div>
            </div>
            <div class="wa-form-actions">
                <button type="submit" class="btn btn-primary">Save bot settings</button>
            </div>
        </form>
    </section>
</div>
@push('styles')
<style>
.wa-bot-page { max-width: 720px; }
.wa-bot-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.25rem; font-size: 0.9rem; }
.wa-bot-nav a { color: #2563eb; text-decoration: none; }
.wa-bot-nav a:hover { text-decoration: underline; }
.wa-bot-nav a.active { font-weight: 700; color: #1d4ed8; }
.setting-header { margin-bottom: 1.5rem; }
.setting-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.setting-subtitle { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }
.setting-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
.wa-form-grid { display: flex; flex-direction: column; gap: 1rem; }
.wa-form-row { display: flex; flex-direction: column; gap: 0.25rem; }
.wa-form-check .wa-form-label { display: flex; align-items: center; gap: 0.5rem; }
.wa-form-label { font-weight: 600; font-size: 0.9rem; color: #374151; }
.wa-form-input { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; max-width: 100%; }
.wa-form-hint { font-size: 0.8rem; color: #6b7280; }
.wa-form-section-title { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.5rem 0; color: #111; }
.wa-form-actions { margin-top: 1.25rem; }
.wa-form-open-days { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.25rem; }
.wa-form-open-days .wa-form-check { font-weight: 500; margin: 0; }
</style>
@endpush
@endsection