@extends('layouts.app')

@section('title', 'Social Media – Setting')

@section('content')
<div class="setting-page social-media-settings-page">
    <p class="setting-back">
        <a href="{{ route('setting.index') }}">← Setting</a>
    </p>
    <header class="setting-header">
        <h1>Social Media</h1>
        <p class="setting-subtitle">Configure notifications for when users request human assistance (handoff) via WhatsApp or Instagram. Use the global AI toggle below to enable or disable automated replies on both channels at once (each channel also has its own switch).</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

    @php
        // Show the real DB column when the row exists so an empty/failed save is not masked by DEFAULT_HANDOFF_PHONE.
        $handoffPhoneValue = old('handoff_notification_phone');
        if ($handoffPhoneValue === null) {
            $handoffPhoneValue = $setting->exists
                ? trim((string) ($setting->handoff_notification_phone ?? ''))
                : $setting->getHandoffNotificationPhone();
        }
        $handoffPhone2Value = old('handoff_notification_phone_2');
        if ($handoffPhone2Value === null) {
            $handoffPhone2Value = $setting->exists
                ? trim((string) ($setting->handoff_notification_phone_2 ?? ''))
                : '';
        }
        $handoffPhone3Value = old('handoff_notification_phone_3');
        if ($handoffPhone3Value === null) {
            $handoffPhone3Value = $setting->exists
                ? trim((string) ($setting->handoff_notification_phone_3 ?? ''))
                : '';
        }
        $handoffPhone4Value = old('handoff_notification_phone_4');
        if ($handoffPhone4Value === null) {
            $handoffPhone4Value = $setting->exists
                ? trim((string) ($setting->handoff_notification_phone_4 ?? ''))
                : '';
        }
    @endphp
    <section class="setting-section setting-card social-media-main-card">
        <h2 class="setting-subsection-title">Handoff notifications</h2>
        <p class="setting-subtitle">When a user requests to speak with a human, an SMS is sent to the number below to notify staff.</p>
        <form action="{{ route('setting.social-media.store') }}" method="POST" class="marketing-settings-form">
            @csrf
            <div class="marketing-settings-grid">
                <div class="marketing-settings-row">
                    <h2 class="setting-subsection-title" style="margin: 0 0 0.25rem 0;">Global AI bot</h2>
                    <span class="marketing-settings-hint" style="margin-bottom: 0.5rem;">Master switch for automated AI replies on <strong>both</strong> WhatsApp and Instagram. When off, neither channel sends AI replies (incoming messages may still be logged). Each channel has an additional “Enable bot” control under Social Networks.</span>
                    <label class="marketing-settings-label" style="display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 600;">
                        <input type="checkbox" name="global_ai_bot_enabled" value="1" @checked(old('global_ai_bot_enabled', $setting->isGlobalAiBotEnabled())) style="margin-top: 0.2rem;">
                        <span>Enable AI bot globally (WhatsApp + Instagram)</span>
                    </label>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="handoff_notification_phone">Notification phone number</label>
                    <input type="text" name="handoff_notification_phone" id="handoff_notification_phone" class="marketing-settings-input" placeholder="+17866084763" value="{{ $handoffPhoneValue }}" required>
                    <span class="marketing-settings-hint">E.164 format (e.g. +17866084763). Staff will receive an SMS when a customer requests human assistance.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="handoff_notification_phone_2">Secondary notification phone (optional)</label>
                    <input type="text" name="handoff_notification_phone_2" id="handoff_notification_phone_2" class="marketing-settings-input" placeholder="+1…" value="{{ $handoffPhone2Value }}">
                    <span class="marketing-settings-hint">Leave empty to disable. If filled (E.164), receives the same handoff SMS as the primary number.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="handoff_notification_phone_3">Third notification phone (optional)</label>
                    <input type="text" name="handoff_notification_phone_3" id="handoff_notification_phone_3" class="marketing-settings-input" placeholder="+1…" value="{{ $handoffPhone3Value }}">
                    <span class="marketing-settings-hint">Leave empty to disable. If filled (E.164), receives the same handoff SMS as the primary number.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="handoff_notification_phone_4">Fourth notification phone (optional)</label>
                    <input type="text" name="handoff_notification_phone_4" id="handoff_notification_phone_4" class="marketing-settings-input" placeholder="+1…" value="{{ $handoffPhone4Value }}">
                    <span class="marketing-settings-hint">Leave empty to disable. If filled (E.164), receives the same handoff SMS as the primary number.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="handoff_timeout_minutes">Handoff timeout (minutes)</label>
                    <input type="number" name="handoff_timeout_minutes" id="handoff_timeout_minutes" class="marketing-settings-input" min="0" max="1440" placeholder="15" value="{{ old('handoff_timeout_minutes', $setting->getHandoffTimeoutMinutes()) }}" required>
                    <span class="marketing-settings-hint">Minutes of staff inactivity before AI resumes. If no one from your team responds to the customer within this time, the AI automatically takes over again. 0 = resume immediately (for testing). Default: 15.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="handoff_sms_cooldown_minutes">SMS cooldown (minutes)</label>
                    <input type="number" name="handoff_sms_cooldown_minutes" id="handoff_sms_cooldown_minutes" class="marketing-settings-input" min="0" max="10080" placeholder="60" value="{{ old('handoff_sms_cooldown_minutes', $setting->getHandoffSmsCooldownMinutes()) }}" required>
                    <span class="marketing-settings-hint">Do not send another handoff SMS for the same conversation until this many minutes have passed since the last one. 0 = always send (for testing). Default: 60.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="assistant_reply_similarity_percent">Similar assistant reply threshold (%)</label>
                    <input type="number" name="assistant_reply_similarity_percent" id="assistant_reply_similarity_percent" class="marketing-settings-input" min="0" max="100" step="1" placeholder="30" value="{{ old('assistant_reply_similarity_percent', $setting->getAssistantReplySimilarityPercent()) }}" required>
                    <span class="marketing-settings-hint">WhatsApp / Instagram: append the extra line only when <code>similar_text</code> similarity between this reply and the <strong>previous assistant message</strong> is <strong>≥ this %</strong>. <strong>Higher</strong> values = stricter (append only when replies are very alike). <strong>Lower</strong> values (e.g. 5–15) match almost every turn — use <strong>25–40</strong> for typical tuning. If the reply already includes your store WhatsApp and email, only the bot name + AI line is added (contact is not repeated).</span>
                </div>
            </div>

            <hr class="social-media-divider">

            <h2 class="setting-subsection-title social-media-section-title">Bot schedule &amp; handoff by channel</h2>
            <p class="setting-subtitle">Configure separate active hours and agent handoff rules for WhatsApp and Instagram. This is not your store’s opening hours. When the bot is off for a channel, it sends no message on that channel (no AI, no products, no handoff).</p>

            <div class="social-channel-tabs" role="tablist" aria-label="Schedule channel">
                @foreach ($channels as $i => $channel)
                    <button type="button"
                        class="social-channel-tab{{ $i === 0 ? ' is-active' : '' }}"
                        role="tab"
                        aria-selected="{{ $i === 0 ? 'true' : 'false' }}"
                        aria-controls="channel-panel-{{ $channel }}"
                        id="channel-tab-{{ $channel }}"
                        data-channel-tab="{{ $channel }}">
                        {{ $channelLabels[$channel] ?? ucfirst($channel) }}
                    </button>
                @endforeach
            </div>

            @foreach ($channels as $i => $channel)
                @php
                    $ch = $channelSchedules[$channel] ?? [];
                    $botSchedule = $ch['botSchedule'] ?? [];
                    $agentHandoff = $ch['agentHandoff'] ?? [];
                    $tzValue = old('channels.'.$channel.'.schedule_timezone', $ch['timezone'] ?? config('app.deals_display_timezone', 'America/New_York'));
                    $agentMsgValue = old('channels.'.$channel.'.agent_unavailable_message', $ch['agentUnavailableMessage'] ?? '');
                @endphp
                <div id="channel-panel-{{ $channel }}"
                    class="social-channel-panel{{ $i === 0 ? ' is-active' : '' }}"
                    role="tabpanel"
                    aria-labelledby="channel-tab-{{ $channel }}"
                    data-channel-panel="{{ $channel }}"
                    @if($i !== 0) hidden @endif>

                    <h3 class="social-channel-panel-title">{{ $channelLabels[$channel] ?? ucfirst($channel) }} settings</h3>

                    <h4 class="social-channel-subheading">Bot active schedule</h4>
                    <p class="marketing-settings-hint social-channel-intro">Controls when the automated bot may reply on {{ $channelLabels[$channel] ?? $channel }}.</p>
                    <div class="marketing-settings-row">
                        <label class="marketing-settings-label" for="schedule_timezone_{{ $channel }}">Schedule timezone</label>
                        <select name="channels[{{ $channel }}][schedule_timezone]" id="schedule_timezone_{{ $channel }}" class="marketing-settings-input social-media-tz-select" required>
                            @foreach ($timezones as $tz)
                                <option value="{{ $tz }}" @selected($tzValue === $tz)>{{ $tz }}</option>
                            @endforeach
                        </select>
                        <span class="marketing-settings-hint">All day/time checks for {{ $channelLabels[$channel] ?? $channel }} use this timezone.</span>
                    </div>
                    <div class="social-media-schedule-wrap">
                        <table class="social-media-schedule-table">
                            <thead>
                                <tr>
                                    <th>Day</th>
                                    <th>Enable bot</th>
                                    <th>24 hours</th>
                                    <th>Start</th>
                                    <th>End</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($dayKeys as $dayKey)
                                    @php
                                        $row = $botSchedule[$dayKey] ?? ['enabled' => true, 'all_day' => true, 'start' => null, 'end' => null];
                                        $en = (bool) ($row['enabled'] ?? true);
                                        $ad = (bool) ($row['all_day'] ?? true);
                                        $st = $row['start'] ?? '';
                                        $enT = $row['end'] ?? '';
                                        $botPrefix = 'channels.'.$channel.'.bot_active_schedule.'.$dayKey;
                                    @endphp
                                    <tr class="social-media-day-row" data-day="{{ $dayKey }}" data-channel="{{ $channel }}">
                                        <td>{{ $dayLabels[$dayKey] ?? $dayKey }}</td>
                                        <td>
                                            <input type="hidden" name="channels[{{ $channel }}][bot_active_schedule][{{ $dayKey }}][enabled]" value="0">
                                            <input type="checkbox" name="channels[{{ $channel }}][bot_active_schedule][{{ $dayKey }}][enabled]" value="1" class="js-bot-enabled" @checked((string) old($botPrefix.'.enabled', $en ? '1' : '0') === '1')>
                                        </td>
                                        <td>
                                            <input type="hidden" name="channels[{{ $channel }}][bot_active_schedule][{{ $dayKey }}][all_day]" value="0">
                                            <input type="checkbox" name="channels[{{ $channel }}][bot_active_schedule][{{ $dayKey }}][all_day]" value="1" class="js-bot-allday" @checked((string) old($botPrefix.'.all_day', $ad ? '1' : '0') === '1')>
                                        </td>
                                        <td>
                                            <input type="time" name="channels[{{ $channel }}][bot_active_schedule][{{ $dayKey }}][start]" value="{{ old($botPrefix.'.start', $st) }}" class="marketing-settings-input js-bot-start" style="max-width: 9rem;">
                                        </td>
                                        <td>
                                            <input type="time" name="channels[{{ $channel }}][bot_active_schedule][{{ $dayKey }}][end]" value="{{ old($botPrefix.'.end', $enT) }}" class="marketing-settings-input js-bot-end" style="max-width: 9rem;">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <p class="marketing-settings-hint">If 24 hours is off, set start and end (inclusive). If end is earlier than start, the window is treated as overnight (e.g. 22:00–06:00).</p>
                    </div>

                    <hr class="social-media-divider social-channel-inner-divider">

                    <h4 class="social-channel-subheading">Agent handoff by day</h4>
                    <p class="marketing-settings-hint social-channel-intro">When the bot is active on {{ $channelLabels[$channel] ?? $channel }}, you can turn off human handoff for specific days. Users who ask for a person get the message below instead; no SMS is sent.</p>
                    <div class="social-media-schedule-wrap">
                        <table class="social-media-schedule-table social-media-handoff-table">
                            <thead>
                                <tr>
                                    <th>Day</th>
                                    <th>Allow handoff</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($dayKeys as $dayKey)
                                    @php
                                        $ah = (bool) (($agentHandoff[$dayKey] ?? [])['allow_handoff'] ?? true);
                                        $handoffPrefix = 'channels.'.$channel.'.agent_handoff_by_day.'.$dayKey;
                                    @endphp
                                    <tr>
                                        <td>{{ $dayLabels[$dayKey] ?? $dayKey }}</td>
                                        <td>
                                            <input type="hidden" name="channels[{{ $channel }}][agent_handoff_by_day][{{ $dayKey }}][allow_handoff]" value="0">
                                            <input type="checkbox" name="channels[{{ $channel }}][agent_handoff_by_day][{{ $dayKey }}][allow_handoff]" value="1" @checked((string) old($handoffPrefix.'.allow_handoff', $ah ? '1' : '0') === '1')>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="marketing-settings-row">
                        <label class="marketing-settings-label" for="agent_unavailable_message_{{ $channel }}">Message when agents are not available ({{ $channelLabels[$channel] ?? $channel }})</label>
                        <textarea name="channels[{{ $channel }}][agent_unavailable_message]" id="agent_unavailable_message_{{ $channel }}" class="marketing-settings-input" rows="3" maxlength="2000" placeholder="No agents are available at this time.">{{ $agentMsgValue }}</textarea>
                    </div>
                </div>
            @endforeach

            <div class="marketing-settings-actions">
                <button type="submit" class="btn btn-primary">Save settings</button>
            </div>
        </form>

        <div class="marketing-settings-actions social-media-test-actions">
            <form action="{{ route('setting.social-media.reactivate-ai') }}" method="POST" class="social-media-reactivate-form" onsubmit="return confirm('Reactivate AI for all conversations in handoff mode?');">
                @csrf
                <button type="submit" class="btn btn-secondary">Reactivate AI (all conversations)</button>
            </form>
            <span class="marketing-settings-hint social-media-reactivate-hint">For testing: sets all handoff conversations to active, clears handoff timestamps/suppress, and resets intro session timer (24h) so the next bot reply starts a fresh session intro. Ignores timeout.</span>
        </div>
    </section>
</div>
@push('styles')
<style>
.social-media-settings-page .setting-back { margin-bottom: 1rem; }
.social-media-settings-page .setting-back a { color: #4b5563; text-decoration: none; }
.social-media-settings-page .setting-back a:hover { color: #111; text-decoration: underline; }
.social-media-settings-page .setting-subsection-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.setting-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
.marketing-settings-grid { display: flex; flex-direction: column; gap: 1rem; }
.marketing-settings-row { display: flex; flex-direction: column; gap: 0.25rem; }
.marketing-settings-label { font-weight: 600; font-size: 0.9rem; color: #374151; }
.marketing-settings-input { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; max-width: 100%; }
.marketing-settings-hint { font-size: 0.8rem; color: #6b7280; }
.marketing-settings-actions { margin-top: 1.25rem; }
.social-media-test-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.social-media-reactivate-form { display: inline; }
.social-media-reactivate-hint { font-size: 0.8rem; color: #6b7280; }
.social-media-main-card { max-width: 920px; }
.social-media-divider { border: none; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }
.social-media-section-title { margin-top: 0; }
.social-media-tz-select { max-width: 100%; max-height: 220px; }
.social-media-schedule-wrap { overflow-x: auto; margin-top: 0.75rem; }
.social-media-schedule-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.social-media-schedule-table th, .social-media-schedule-table td { border: 1px solid #e5e7eb; padding: 0.5rem 0.6rem; text-align: left; vertical-align: middle; }
.social-media-schedule-table th { background: #f9fafb; font-weight: 600; color: #374151; }
.social-media-schedule-table input[type="time"] { min-height: 2.25rem; }
textarea.marketing-settings-input { min-height: 5rem; resize: vertical; }
.social-channel-tabs { display: flex; gap: 0.5rem; margin: 1rem 0 1.25rem; flex-wrap: wrap; }
.social-channel-tab {
  appearance: none;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.social-channel-tab:hover { background: #fff; border-color: #9ca3af; }
.social-channel-tab.is-active {
  background: #111827;
  border-color: #111827;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.social-channel-panel { display: none; padding: 1rem 1.1rem 0.25rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; }
.social-channel-panel.is-active { display: block; }
.social-channel-panel-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; color: #111827; }
.social-channel-subheading { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; color: #1f2937; }
.social-channel-intro { margin-bottom: 0.75rem; }
.social-channel-inner-divider { margin: 1.25rem 0; }
.social-media-handoff-table { max-width: 28rem; }
</style>
@endpush
@push('scripts')
<script>
(function () {
  function syncRow(row) {
    if (!row) return;
    var en = row.querySelector('.js-bot-enabled');
    var ad = row.querySelector('.js-bot-allday');
    var st = row.querySelector('.js-bot-start');
    var ed = row.querySelector('.js-bot-end');
    var dayOn = en && en.checked;
    var allDay = ad && ad.checked;
    if (ad) { ad.disabled = !dayOn; }
    if (st) {
      st.disabled = !dayOn || allDay;
      ed.disabled = !dayOn || allDay;
    }
  }
  document.querySelectorAll('.social-media-day-row').forEach(function (row) {
    syncRow(row);
    row.querySelectorAll('.js-bot-enabled, .js-bot-allday').forEach(function (el) {
      el.addEventListener('change', function () { syncRow(row); });
    });
  });

  var tabs = document.querySelectorAll('[data-channel-tab]');
  var panels = document.querySelectorAll('[data-channel-panel]');
  tabs.forEach(function (tab) {
    tab.addEventListener('click', function () {
      var channel = tab.getAttribute('data-channel-tab');
      tabs.forEach(function (t) {
        var active = t === tab;
        t.classList.toggle('is-active', active);
        t.setAttribute('aria-selected', active ? 'true' : 'false');
      });
      panels.forEach(function (panel) {
        var show = panel.getAttribute('data-channel-panel') === channel;
        panel.classList.toggle('is-active', show);
        if (show) {
          panel.removeAttribute('hidden');
        } else {
          panel.setAttribute('hidden', 'hidden');
        }
      });
    });
  });
})();
</script>
@endpush
@endsection