'use client';

import React, { useState, useEffect } from 'react';
import { useLanguage } from '@/context/LanguageContext';
import styles from './AIChatbot.module.css';

const RESPONSES: Record<string, { en: string; ar: string }> = {
  delivery: {
    en: '🚚 We deliver across all Kuwait! Standard delivery: 1-3 business days. Express delivery available for next-day. Free delivery on orders above 15 KWD.',
    ar: '🚚 نوصّل لجميع مناطق الكويت! التوصيل العادي: 1-3 أيام عمل. خدمة التوصيل السريع متاحة لليوم التالي. توصيل مجاني للطلبات أكثر من 15 د.ك.',
  },
  payment: {
    en: '💳 We accept KNET, Visa, MasterCard, and Apple Pay. All payments are secured by MyFatoorah. You can also pay on delivery in some areas.',
    ar: '💳 نقبل كي نت وفيزا وماستركارد وآبل باي. جميع المدفوعات مؤمّنة عبر MyFatoorah. يمكنك أيضاً الدفع عند الاستلام في بعض المناطق.',
  },
  warranty: {
    en: '🛡️ All products come with official manufacturer warranty (6-24 months). We also offer extended warranty options. Contact us for warranty claims.',
    ar: '🛡️ جميع المنتجات تأتي بضمان الشركة المصنّعة الرسمي (6-24 شهراً). نوفر أيضاً خيارات ضمان ممتد. تواصل معنا للمطالبات.',
  },
  return: {
    en: '↩️ We offer 7-day return policy for unopened items. Items must be in original packaging. Contact us within 7 days of delivery to initiate a return.',
    ar: '↩️ نوفر سياسة إرجاع لمدة 7 أيام للمنتجات غير المفتوحة. يجب أن تكون في عبوتها الأصلية. تواصل معنا خلال 7 أيام من التسليم لبدء الإرجاع.',
  },
  compare: {
    en: '⚖️ You can compare up to 4 phones side by side! Just click the "Compare" button on any product, then visit the Compare page to see the full breakdown.',
    ar: '⚖️ يمكنك مقارنة حتى 4 هواتف جنباً إلى جنب! اضغط على زر "قارن" في أي منتج ثم انتقل إلى صفحة المقارنة لرؤية التفاصيل الكاملة.',
  },
  default: {
    en: 'I\'m not sure about that! Would you like me to connect you to our WhatsApp support for a quicker answer? 💬',
    ar: 'لست متأكداً من ذلك! هل تريد أن أوصّلك بدعم WhatsApp لإجابة أسرع؟ 💬',
  },
};

function getResponse(query: string, lang: 'en' | 'ar'): string {
  const q = query.toLowerCase();
  if (q.includes('deliver') || q.includes('توصيل') || q.includes('شحن') || q.includes('ship')) return RESPONSES.delivery[lang];
  if (q.includes('pay') || q.includes('دفع') || q.includes('knet') || q.includes('visa')) return RESPONSES.payment[lang];
  if (q.includes('warrant') || q.includes('ضمان')) return RESPONSES.warranty[lang];
  if (q.includes('return') || q.includes('إرجاع') || q.includes('refund') || q.includes('استرداد')) return RESPONSES.return[lang];
  if (q.includes('compare') || q.includes('مقارنة') || q.includes('قارن')) return RESPONSES.compare[lang];
  return RESPONSES.default[lang];
}

interface Message {
  from: 'bot' | 'user';
  text: string;
}

export default function AIChatbot() {
  const { t, language } = useLanguage();
  const [open, setOpen] = useState(false);
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [typing, setTyping] = useState(false);

  useEffect(() => {
    if (open && messages.length === 0) {
      setMessages([{ from: 'bot', text: t.chat.greeting }]);
    }
  }, [open]);

  const send = (text: string) => {
    if (!text.trim()) return;
    setMessages(prev => [...prev, { from: 'user', text }]);
    setInput('');
    setTyping(true);
    setTimeout(() => {
      setTyping(false);
      setMessages(prev => [...prev, { from: 'bot', text: getResponse(text, language as 'en' | 'ar') }]);
    }, 900);
  };

  return (
    <>
      {/* Toggle Button */}
      <button className={styles.toggle} onClick={() => setOpen(!open)} aria-label="Chat">
        {open ? '✕' : '🤖'}
        {!open && <span className={styles.togglePulse}></span>}
      </button>

      {/* Chat Window */}
      {open && (
        <div className={styles.window}>
          {/* Header */}
          <div className={styles.header}>
            <div className={styles.headerInfo}>
              <div className={styles.avatar}>🤖</div>
              <div>
                <div className={styles.botName}>{t.chat.title}</div>
                <div className={styles.online}>● Online</div>
              </div>
            </div>
            <button onClick={() => setOpen(false)} className={styles.close}>✕</button>
          </div>

          {/* Messages */}
          <div className={styles.messages}>
            {messages.map((msg, i) => (
              <div key={i} className={`${styles.msg} ${styles[msg.from]}`}>
                {msg.from === 'bot' && <span className={styles.msgAvatar}>🤖</span>}
                <div className={styles.bubble}>{msg.text}</div>
              </div>
            ))}
            {typing && (
              <div className={`${styles.msg} ${styles.bot}`}>
                <span className={styles.msgAvatar}>🤖</span>
                <div className={styles.typing}><span></span><span></span><span></span></div>
              </div>
            )}
          </div>

          {/* Quick Actions */}
          <div className={styles.quickActions}>
            {t.chat.quickActions.map((action: string, i: number) => (
              <button key={i} className={styles.quickBtn} onClick={() => send(action)}>{action}</button>
            ))}
          </div>

          {/* Input */}
          <div className={styles.inputRow}>
            <input
              value={input}
              onChange={e => setInput(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && send(input)}
              placeholder={t.chat.placeholder}
              className={styles.input}
            />
            <button onClick={() => send(input)} className={styles.sendBtn}>➤</button>
          </div>
        </div>
      )}
    </>
  );
}
