@extends('layouts.app')
@section('title', 'Support')

@push('styles')
<style>
:root{--chat-blue:#3b82f6;--chat-blue-light:#60a5fa;}
.chat-widget{max-width:680px;margin:0 auto;}
.chat-hero{background:linear-gradient(135deg,#0a0f1a,#0f1a2e);border:1px solid rgba(96,165,250,.2);border-radius:20px;padding:2rem;margin-bottom:1.75rem;text-align:center;}
.chat-hero h2{font-size:1.3rem;font-weight:900;margin-bottom:.4rem;}
.chat-hero p{color:var(--muted);font-size:.855rem;}

/* FAQ Cards */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.5rem;}
@media(max-width:600px){.faq-grid{grid-template-columns:1fr;}}
.faq-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;cursor:pointer;transition:.2s;text-align:left;}
.faq-card:hover{border-color:rgba(96,165,250,.3);background:rgba(96,165,250,.04);}
.faq-card .fq{font-weight:700;font-size:.82rem;margin-bottom:.25rem;}
.faq-card .fa{font-size:.75rem;color:var(--muted);line-height:1.5;display:none;}
.faq-card.open .fa{display:block;}
.faq-card.open{border-color:rgba(96,165,250,.3);}

/* AI Chat */
.ai-chat{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:1.5rem;}
.ai-header{background:rgba(96,165,250,.08);border-bottom:1px solid var(--border);padding:.85rem 1.25rem;display:flex;align-items:center;gap:.75rem;}
.ai-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1d4ed8,#3b82f6);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.ai-messages{padding:1.25rem;min-height:200px;max-height:350px;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;}
.ai-msg{display:flex;gap:.6rem;align-items:flex-end;}
.ai-msg.user{flex-direction:row-reverse;}
.ai-bubble{max-width:75%;padding:.6rem .9rem;border-radius:14px;font-size:.82rem;line-height:1.5;}
.ai-msg:not(.user) .ai-bubble{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:14px 14px 14px 4px;}
.ai-msg.user .ai-bubble{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border-radius:14px 14px 4px 14px;}
.ai-input{border-top:1px solid var(--border);padding:.85rem 1.25rem;display:flex;gap:.6rem;}
.ai-input input{flex:1;background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:10px;padding:.55rem .85rem;color:var(--text);font-size:.855rem;outline:none;}
.ai-input input:focus{border-color:var(--chat-blue);}
.ai-send{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border:none;border-radius:10px;padding:.55rem 1rem;cursor:pointer;transition:.2s;}
.ai-send:hover{opacity:.9;}
.quick-replies{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1.25rem .85rem;}
.qr-btn{background:rgba(96,165,250,.08);color:var(--chat-blue-light);border:1px solid rgba(96,165,250,.2);border-radius:50px;padding:.28rem .75rem;font-size:.72rem;font-weight:600;cursor:pointer;transition:.2s;}
.qr-btn:hover{background:rgba(96,165,250,.15);}

/* Escalate to agent */
.escalate-card{background:linear-gradient(135deg,rgba(96,165,250,.06),var(--card));border:1px solid rgba(96,165,250,.2);border-radius:16px;padding:1.5rem;text-align:center;}
.esc-title{font-size:.95rem;font-weight:800;color:var(--chat-blue-light);margin-bottom:.5rem;}
.esc-sub{font-size:.82rem;color:var(--muted);margin-bottom:1.25rem;}
.esc-btn{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border:none;border-radius:50px;padding:.7rem 2rem;font-weight:700;font-size:.875rem;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:.4rem;}
.esc-btn:hover{opacity:.9;transform:translateY(-1px);}

/* Existing conversations */
.conv-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin-bottom:.65rem;cursor:pointer;transition:.2s;text-decoration:none;display:block;color:var(--text);}
.conv-card:hover{border-color:rgba(96,165,250,.3);}
.conv-card.unread{border-left:3px solid var(--chat-blue);}
</style>
@endpush

@section('content')
<div class="chat-widget">

  <div class="chat-hero">
    <div style="font-size:2rem;margin-bottom:.5rem;">💬</div>
    <h2>How can we help you?</h2>
    <p>Get instant answers or chat with our support team</p>
  </div>

  @if(session('success'))
  <div class="alert alert-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
  @endif

  {{-- FAQ Quick Answers --}}
  <div style="font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem;"><i class="fas fa-bolt" style="color:#fbbf24;"></i> Quick Answers</div>
  <div class="faq-grid">
    @foreach([
      ['How do I earn coins?','Recycle waste via pickup or machine codes. Confirmed pickups earn 10 NC/kg. Machine codes have fixed values. Premium members earn 2x coins.'],
      ['How do I withdraw?','Go to Wallet → Withdraw. Enter amount, bank details, and your 4-digit PIN. Processed within 1-3 business days.'],
      ['How do I schedule a pickup?','Go to Recycle & Earn → Schedule Pickup. Enter your address and waste details. A collector will be assigned.'],
      ['What is a machine code?','A code from a Nabola recycling machine. Deposit waste, get the code, enter it in Smart Recycle to earn coins instantly.'],
      ['How do I set my PIN?','Go to Wallet or Profile → Transaction PIN section. Set a 4-digit PIN to secure withdrawals and transfers.'],
      ['How do I refer friends?','Go to Referrals page. Share your code or link. You both earn 50 NC when they sign up and recycle.'],
    ] as [$q,$a])
    <div class="faq-card" onclick="toggleFaq(this)">
      <div class="fq"><i class="fas fa-chevron-right" style="font-size:.65rem;color:var(--chat-blue-light);margin-right:.4rem;transition:.2s;"></i>{{ $q }}</div>
      <div class="fa">{{ $a }}</div>
    </div>
    @endforeach
  </div>

  {{-- AI Chat Bot --}}
  <div style="font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem;"><i class="fas fa-robot" style="color:var(--chat-blue-light);"></i> Ask Nabola AI</div>
  <div class="ai-chat">
    <div class="ai-header">
      <div class="ai-av">🤖</div>
      <div>
        <div style="font-weight:700;font-size:.875rem;">Nabola Assistant</div>
        <div style="font-size:.7rem;color:rgba(96,165,250,.6);">● Online · Instant replies</div>
      </div>
    </div>
    <div class="ai-messages" id="aiMessages">
      <div class="ai-msg">
        <div class="ai-av" style="width:28px;height:28px;font-size:.7rem;flex-shrink:0;">🤖</div>
        <div class="ai-bubble">Hi {{ explode(' ', auth()->user()->name)[0] }}! 👋 I'm the Nabola AI assistant. Ask me anything about recycling, coins, withdrawals, or how to use the platform!</div>
      </div>
    </div>
    <div class="quick-replies" id="quickReplies">
      @foreach(['How to earn coins?','Schedule a pickup','Withdraw coins','Machine codes','My account','Talk to agent'] as $qr)
      <button class="qr-btn" onclick="sendQuick('{{ $qr }}')">{{ $qr }}</button>
      @endforeach
    </div>
    <div class="ai-input">
      <input type="text" id="aiInput" placeholder="Ask anything..." onkeydown="if(event.key==='Enter')sendAI()">
      <button class="ai-send" onclick="sendAI()"><i class="fas fa-paper-plane"></i></button>
    </div>
  </div>

  {{-- Escalate to Agent --}}
  <div class="escalate-card" id="escalateSection">
    <div class="esc-title"><i class="fas fa-headset"></i> Need more help?</div>
    <div class="esc-sub">Our support agents are available to assist you with complex issues.</div>
    <button class="esc-btn" onclick="showAgentForm()"><i class="fas fa-comments"></i> Chat with a Support Agent</button>
  </div>

  {{-- Agent Chat Form (hidden by default) --}}
  <div id="agentForm" style="display:none;margin-top:1.25rem;">
    <div class="card" style="border-color:rgba(96,165,250,.2);">
      <div class="card-title" style="color:var(--chat-blue-light);"><i class="fas fa-headset" style="color:var(--chat-blue-light);"></i> Start Agent Chat</div>
      <form method="POST" action="{{ route('chat.start') }}">
        @csrf
        <div class="form-group">
          <label>What do you need help with?</label>
          <select name="subject" class="form-control" required id="agentSubject">
            <option value="">Select topic...</option>
            @foreach(['Withdrawal issue','Pickup not confirmed','Machine code problem','Account issue','KYC verification','Premium subscription','P2P trade issue','General question','Other'] as $s)
            <option value="{{ $s }}">{{ $s }}</option>
            @endforeach
          </select>
        </div>
        <div class="form-group">
          <label>Describe your issue</label>
          <textarea name="message" id="agentMessage" class="form-control" rows="3" placeholder="Tell us what's happening..." required></textarea>
        </div>
        <button type="submit" class="btn" style="width:100%;justify-content:center;background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;">
          <i class="fas fa-paper-plane"></i> Connect with Agent
        </button>
      </form>
    </div>
  </div>

  {{-- Existing Conversations --}}
  @if($conversations->count())
  <div style="margin-top:1.75rem;">
    <div style="font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem;"><i class="fas fa-clock-rotate-left"></i> Previous Conversations</div>
    @foreach($conversations as $conv)
    <a href="{{ route('chat.show', $conv) }}" class="conv-card {{ $conv->unreadCount(auth()->id()) > 0 ? 'unread' : '' }}">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.35rem;">
        <div style="font-weight:700;font-size:.855rem;">{{ $conv->subject ?? 'Support Chat' }}</div>
        <span style="background:{{ ['open'=>'rgba(251,191,36,.12)','assigned'=>'rgba(96,165,250,.12)','resolved'=>'rgba(76,175,80,.12)','closed'=>'rgba(255,255,255,.06)'][$conv->status] ?? 'rgba(255,255,255,.06)' }};color:{{ ['open'=>'#fbbf24','assigned'=>'#60a5fa','resolved'=>'var(--gl)','closed'=>'var(--muted)'][$conv->status] ?? 'var(--muted)' }};border-radius:50px;padding:.15rem .6rem;font-size:.68rem;font-weight:700;">{{ ucfirst($conv->status) }}</span>
      </div>
      @if($conv->lastMessage)
      <div style="font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
        {{ $conv->lastMessage->sender_id === auth()->id() ? 'You: ' : 'Support: ' }}{{ Str::limit($conv->lastMessage->message, 55) }}
      </div>
      @endif
      <div style="font-size:.68rem;color:var(--muted);margin-top:.25rem;">{{ $conv->last_message_at?->diffForHumans() ?? $conv->created_at->diffForHumans() }}</div>
    </a>
    @endforeach
  </div>
  @endif

</div>

@push('scripts')
<script>
// FAQ toggle
function toggleFaq(el) {
  const isOpen = el.classList.contains('open');
  document.querySelectorAll('.faq-card.open').forEach(c => {
    c.classList.remove('open');
    c.querySelector('.fa i, .fq i')?.style && (c.querySelector('.fq i').style.transform = '');
  });
  if (!isOpen) {
    el.classList.add('open');
    el.querySelector('.fq i').style.transform = 'rotate(90deg)';
  }
}

// AI responses
const aiResponses = {
  'earn': 'You earn Nabola Coins (NC) by:\n• Scheduling waste pickups (~10 NC/kg confirmed)\n• Redeeming machine codes (fixed value)\n• Daily check-in streaks (5-20 NC/day)\n• Referring friends (50 NC each)\n\nPremium members earn 2x coins on pickups! 🚀',
  'pickup': 'To schedule a pickup:\n1. Go to Recycle & Earn\n2. Select waste category and enter weight\n3. Enter your address\n4. Choose preferred date/time\n5. Submit — a collector will be assigned!\n\nYou\'ll get real-time tracking updates. 🚛',
  'withdraw': 'To withdraw coins:\n1. Go to Wallet → Withdraw\n2. Enter amount (min 500 NC)\n3. Enter your bank details\n4. Enter your 4-digit PIN\n5. Submit — processed in 1-3 business days\n\nMake sure you\'ve set up your PIN first! 🔐',
  'machine': 'Machine codes work like this:\n1. Find a Nabola machine (use Find Machines)\n2. Deposit your waste\n3. Get the code from the machine display\n4. Go to Smart Recycle → Enter code\n5. Coins credited instantly! 🪙',
  'account': 'For account help:\n• Profile: Update name, photo, address\n• KYC: Submit ID for higher withdrawal limits\n• PIN: Set in Wallet or Profile page\n• Password: Change in Profile → Security\n\nNeed more help? Chat with an agent below! 👇',
  'agent': null, // triggers escalation
  'default': 'I can help with coins, pickups, withdrawals, machine codes, and account settings. Try asking something specific, or tap "Talk to agent" if you need human support! 😊',
};

function getAIResponse(msg) {
  const m = msg.toLowerCase();
  if (m.includes('earn') || m.includes('coin') || m.includes('nc')) return aiResponses.earn;
  if (m.includes('pickup') || m.includes('schedule') || m.includes('collect')) return aiResponses.pickup;
  if (m.includes('withdraw') || m.includes('bank') || m.includes('cash')) return aiResponses.withdraw;
  if (m.includes('machine') || m.includes('code') || m.includes('qr')) return aiResponses.machine;
  if (m.includes('account') || m.includes('profile') || m.includes('kyc') || m.includes('pin')) return aiResponses.account;
  if (m.includes('agent') || m.includes('human') || m.includes('support') || m.includes('help')) return null;
  return aiResponses.default;
}

function addMessage(text, isUser = false) {
  const msgs = document.getElementById('aiMessages');
  const div = document.createElement('div');
  div.className = 'ai-msg' + (isUser ? ' user' : '');
  div.innerHTML = isUser
    ? `<div class="ai-bubble">${text}</div>`
    : `<div class="ai-av" style="width:28px;height:28px;font-size:.7rem;flex-shrink:0;">🤖</div><div class="ai-bubble">${text.replace(/\n/g,'<br>')}</div>`;
  msgs.appendChild(div);
  msgs.scrollTop = msgs.scrollHeight;
}

function sendAI() {
  const inp = document.getElementById('aiInput');
  const msg = inp.value.trim();
  if (!msg) return;
  inp.value = '';
  addMessage(msg, true);

  setTimeout(() => {
    const response = getAIResponse(msg);
    if (response === null) {
      addMessage("I'll connect you with a human agent right away! 👇 Please use the form below to describe your issue.");
      showAgentForm();
    } else {
      addMessage(response);
    }
  }, 600);
}

function sendQuick(text) {
  document.getElementById('aiInput').value = text;
  if (text === 'Talk to agent') {
    addMessage(text, true);
    setTimeout(() => {
      addMessage("Sure! I'll connect you with a support agent. Please fill in the form below. 👇");
      showAgentForm();
    }, 400);
    return;
  }
  sendAI();
}

function showAgentForm() {
  const form = document.getElementById('agentForm');
  form.style.display = 'block';
  form.scrollIntoView({ behavior: 'smooth', block: 'start' });
  document.getElementById('escalateSection').style.display = 'none';
}
</script>
@endpush
@endsection