"use client";

import { useState, useEffect } from "react";
import { type Lang } from "@/lib/config";

interface Message {
  id: string;
  sender: "customer" | "ai";
  text: string;
  time: string;
  typing?: boolean;
}

const conversations: Record<Lang, { title: string; messages: Message[] }[]> = {
  en: [
    {
      title: "Medical Appointment",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "Hi, I need to book an appointment with Dr. Sarah",
          time: "10:02 AM",
        },
        {
          id: "2",
          sender: "ai",
          text: "Hello! I'd be happy to help you book an appointment with Dr. Sarah. 👋",
          time: "10:02 AM",
        },
        {
          id: "3",
          sender: "ai",
          text: "I can see the following slots available this week:\n📅 Tomorrow 2:30 PM\n📅 Thursday 10:00 AM\n📅 Friday 4:00 PM\n\nWhich works best for you?",
          time: "10:02 AM",
        },
        {
          id: "4",
          sender: "customer",
          text: "Thursday 10am please",
          time: "10:03 AM",
        },
        {
          id: "5",
          sender: "ai",
          text: "Perfect! I've reserved Thursday at 10:00 AM for you. To confirm your booking, I'll need a 50 SAR deposit.",
          time: "10:03 AM",
        },
        {
          id: "6",
          sender: "ai",
          text: "💳 Click here to pay securely: [Payment Link]\n✅ Accepts Mada, Apple Pay & Visa",
          time: "10:03 AM",
        },
      ],
    },
    {
      title: "Real Estate Viewing",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "I want to view the 3BR apartment in Riyadh",
          time: "2:15 PM",
        },
        {
          id: "2",
          sender: "ai",
          text: "Great choice! I can arrange a viewing for the 3BR apartment in Al Olaya. 🏢",
          time: "2:15 PM",
        },
        {
          id: "3",
          sender: "ai",
          text: "Available viewing times:\n🕒 Today 5:00 PM\n🕒 Tomorrow 11:00 AM\n🕒 Tomorrow 3:00 PM",
          time: "2:15 PM",
        },
        {
          id: "4",
          sender: "customer",
          text: "Today 5pm works",
          time: "2:16 PM",
        },
        {
          id: "5",
          sender: "ai",
          text: "Excellent! Before I confirm, please upload your ID for verification:",
          time: "2:16 PM",
        },
        {
          id: "6",
          sender: "ai",
          text: "📎 Secure upload link: [Upload Documents]\n🔒 Your data is encrypted and safe",
          time: "2:16 PM",
        },
      ],
    },
    {
      title: "Maintenance Request",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "AC is not working in unit 405",
          time: "8:30 AM",
        },
        {
          id: "2",
          sender: "ai",
          text: "I'm sorry to hear about the AC issue in unit 405. Let me help you right away! 🔧",
          time: "8:30 AM",
        },
        {
          id: "3",
          sender: "ai",
          text: "Can you share a photo of the AC unit? This helps our technician prepare.",
          time: "8:30 AM",
        },
        {
          id: "4",
          sender: "customer",
          text: "[Photo attached]",
          time: "8:31 AM",
        },
        {
          id: "5",
          sender: "ai",
          text: "Thank you! I can send a technician:\n⚡ Emergency (2 hours) - 150 SAR\n🔧 Today (4-6 PM) - 100 SAR\n📅 Tomorrow morning - 80 SAR",
          time: "8:31 AM",
        },
        {
          id: "6",
          sender: "ai",
          text: "Which option would you prefer?",
          time: "8:31 AM",
        },
      ],
    },
    {
      title: "Salon Appointment",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "I need to book a hair appointment for tomorrow",
          time: "11:15 AM",
        },
        {
          id: "2",
          sender: "ai",
          text: "Hello! I'll help you book your hair appointment. 💇‍♀️",
          time: "11:15 AM",
        },
        {
          id: "3",
          sender: "ai",
          text: "What service would you like?\n✨ Haircut & Style - 120 SAR\n🎨 Hair Color - 350 SAR\n💆‍♀️ Hair Treatment - 200 SAR\n✂️ Trim Only - 60 SAR",
          time: "11:15 AM",
        },
        {
          id: "4",
          sender: "customer",
          text: "Haircut and style please",
          time: "11:16 AM",
        },
        {
          id: "5",
          sender: "ai",
          text: "Great choice! Available times tomorrow:\n⏰ 9:00 AM with Sara\n⏰ 2:30 PM with Maya\n⏰ 5:00 PM with Lina\n\nWhich stylist and time do you prefer?",
          time: "11:16 AM",
        },
        {
          id: "6",
          sender: "customer",
          text: "2:30 PM with Maya",
          time: "11:17 AM",
        },
        {
          id: "7",
          sender: "ai",
          text: "Perfect! Booked with Maya at 2:30 PM tomorrow.\n💳 Total: 120 SAR\n📍 Location: [Salon Address]\n\nPay now to confirm: [Payment Link]",
          time: "11:17 AM",
        },
      ],
    },
    {
      title: "Restaurant Order",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "I want to order food for delivery",
          time: "7:45 PM",
        },
        {
          id: "2",
          sender: "ai",
          text: "Welcome to Quick Bites! 🍔 What would you like to order today?",
          time: "7:45 PM",
        },
        {
          id: "3",
          sender: "customer",
          text: "Show me your burgers menu",
          time: "7:45 PM",
        },
        {
          id: "4",
          sender: "ai",
          text: "🍔 Our Burger Menu:\n• Classic Beef - 45 SAR\n• Cheese Burger - 50 SAR\n• Mushroom Swiss - 55 SAR\n• Spicy Jalapeño - 52 SAR\n\nAll served with fries! What would you like?",
          time: "7:46 PM",
        },
        {
          id: "5",
          sender: "customer",
          text: "2 cheese burgers and 1 classic",
          time: "7:46 PM",
        },
        {
          id: "6",
          sender: "ai",
          text: "Great! Your order:\n• 2x Cheese Burger = 100 SAR\n• 1x Classic Beef = 45 SAR\n📦 Delivery fee = 10 SAR\n\nTotal: 155 SAR\n\n📍 Confirm delivery address?",
          time: "7:46 PM",
        },
        {
          id: "7",
          sender: "customer",
          text: "Yes, Building 5, Apartment 12, Al Olaya",
          time: "7:47 PM",
        },
        {
          id: "8",
          sender: "ai",
          text: "✅ Order confirmed!\n🚗 Delivery time: 30-40 minutes\n💳 Pay on delivery or pay now: [Payment Link]\n\nTrack your order: [Tracking Link]",
          time: "7:47 PM",
        },
      ],
    },
    {
      title: "School Fees",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "I need to pay my daughter's school fees",
          time: "9:00 AM",
        },
        {
          id: "2",
          sender: "ai",
          text: "I'll help you with the school fee payment. 📚 What's your daughter's student ID?",
          time: "9:00 AM",
        },
        {
          id: "3",
          sender: "customer",
          text: "Student ID is 2024-1156",
          time: "9:01 AM",
        },
        {
          id: "4",
          sender: "ai",
          text: "Found it! Student: Sara Ahmed\n🏫 Grade 7 - International School\n\n📋 Outstanding fees:\n• Term 2 Tuition: 8,500 SAR\n• Bus Service: 1,200 SAR\n• Books & Materials: 800 SAR\n\nTotal Due: 10,500 SAR",
          time: "9:01 AM",
        },
        {
          id: "5",
          sender: "customer",
          text: "Can I pay in installments?",
          time: "9:02 AM",
        },
        {
          id: "6",
          sender: "ai",
          text: "Yes! Installment options:\n\n1️⃣ 2 payments: 5,250 SAR each\n2️⃣ 3 payments: 3,500 SAR each\n3️⃣ Pay full now and get 3% discount = 10,185 SAR\n\nWhich option works for you?",
          time: "9:02 AM",
        },
        {
          id: "7",
          sender: "customer",
          text: "I'll take the 3 payment plan",
          time: "9:03 AM",
        },
        {
          id: "8",
          sender: "ai",
          text: "✅ Payment plan activated!\n\n📅 Schedule:\n• 1st payment (Today): 3,500 SAR - [Pay Now]\n• 2nd payment (Feb 1): 3,500 SAR\n• 3rd payment (Mar 1): 3,500 SAR\n\n📧 Receipt will be sent to your email",
          time: "9:03 AM",
        },
      ],
    },
    {
      title: "Repair Service",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "My washing machine is leaking water",
          time: "3:30 PM",
        },
        {
          id: "2",
          sender: "ai",
          text: "I'll help you book a repair technician right away! 🔧 Can you tell me the brand of your washing machine?",
          time: "3:30 PM",
        },
        {
          id: "3",
          sender: "customer",
          text: "It's a Samsung front loader",
          time: "3:31 PM",
        },
        {
          id: "4",
          sender: "ai",
          text: "Got it! For Samsung washing machines, I have specialized technicians available.\n\n🔍 To help diagnose: Is the leak from:\n• Bottom of machine\n• Door seal\n• Back connections\n• Not sure",
          time: "3:31 PM",
        },
        {
          id: "5",
          sender: "customer",
          text: "From the bottom I think",
          time: "3:32 PM",
        },
        {
          id: "6",
          sender: "ai",
          text: "Likely a pump or hose issue. Available service slots:\n\n⚡ Emergency (2 hrs): 250 SAR + parts\n🔧 Today (5-7 PM): 180 SAR + parts\n📅 Tomorrow AM: 150 SAR + parts\n\n✅ All include free diagnosis",
          time: "3:32 PM",
        },
        {
          id: "7",
          sender: "customer",
          text: "Today 5-7 PM please",
          time: "3:33 PM",
        },
        {
          id: "8",
          sender: "ai",
          text: "✅ Technician booked!\n\n🔧 Ahmed (4.8⭐, 500+ repairs)\n⏰ Today 5:00-7:00 PM\n💰 Service: 180 SAR (pay after service)\n\n📱 He'll call 30 min before arrival\n🆔 Tech ID: #TEC-4521 for verification",
          time: "3:33 PM",
        },
      ],
    },
  ],
  ar: [
    {
      title: "حجز طبي",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "السلام عليكم، أريد حجز موعد مع د. سارة",
          time: "10:02 ص",
        },
        {
          id: "2",
          sender: "ai",
          text: "وعليكم السلام! يسعدني مساعدتك في حجز موعد مع د. سارة 👋",
          time: "10:02 ص",
        },
        {
          id: "3",
          sender: "ai",
          text: "المواعيد المتاحة هذا الأسبوع:\n📅 غداً 2:30 م\n📅 الخميس 10:00 ص\n📅 الجمعة 4:00 م\n\nأي وقت يناسبك؟",
          time: "10:02 ص",
        },
        {
          id: "4",
          sender: "customer",
          text: "الخميس الساعة 10 صباحاً",
          time: "10:03 ص",
        },
        {
          id: "5",
          sender: "ai",
          text: "ممتاز! حجزت لك الخميس الساعة 10:00 ص. لتأكيد الحجز، نحتاج عربون 50 ريال.",
          time: "10:03 ص",
        },
        {
          id: "6",
          sender: "ai",
          text: "💳 اضغط هنا للدفع الآمن: [رابط الدفع]\n✅ يقبل مدى وآبل باي وفيزا",
          time: "10:03 ص",
        },
      ],
    },
    {
      title: "معاينة عقار",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "أريد معاينة الشقة 3 غرف في الرياض",
          time: "2:15 م",
        },
        {
          id: "2",
          sender: "ai",
          text: "اختيار موفق! يمكنني ترتيب معاينة للشقة 3 غرف في العليا 🏢",
          time: "2:15 م",
        },
        {
          id: "3",
          sender: "ai",
          text: "أوقات المعاينة المتاحة:\n🕒 اليوم 5:00 م\n🕒 غداً 11:00 ص\n🕒 غداً 3:00 م",
          time: "2:15 م",
        },
        {
          id: "4",
          sender: "customer",
          text: "اليوم الساعة 5 مساءً",
          time: "2:16 م",
        },
        {
          id: "5",
          sender: "ai",
          text: "ممتاز! قبل التأكيد، الرجاء رفع الهوية للتحقق:",
          time: "2:16 م",
        },
        {
          id: "6",
          sender: "ai",
          text: "📎 رابط الرفع الآمن: [رفع المستندات]\n🔒 بياناتك مشفرة وآمنة",
          time: "2:16 م",
        },
      ],
    },
    {
      title: "طلب صيانة",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "المكيف لا يعمل في الوحدة 405",
          time: "8:30 ص",
        },
        {
          id: "2",
          sender: "ai",
          text: "آسف لسماع مشكلة المكيف في الوحدة 405. دعني أساعدك فوراً! 🔧",
          time: "8:30 ص",
        },
        {
          id: "3",
          sender: "ai",
          text: "هل يمكنك مشاركة صورة للمكيف؟ هذا يساعد الفني على الاستعداد.",
          time: "8:30 ص",
        },
        { id: "4", sender: "customer", text: "[صورة مرفقة]", time: "8:31 ص" },
        {
          id: "5",
          sender: "ai",
          text: "شكراً! يمكنني إرسال فني:\n⚡ طوارئ (ساعتين) - 150 ريال\n🔧 اليوم (4-6 م) - 100 ريال\n📅 غداً صباحاً - 80 ريال",
          time: "8:31 ص",
        },
        { id: "6", sender: "ai", text: "أي خيار تفضل؟", time: "8:31 ص" },
      ],
    },
    {
      title: "موعد صالون",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "أريد حجز موعد للشعر غداً",
          time: "11:15 ص",
        },
        {
          id: "2",
          sender: "ai",
          text: "أهلاً! سأساعدك في حجز موعد الشعر 💇‍♀️",
          time: "11:15 ص",
        },
        {
          id: "3",
          sender: "ai",
          text: "ما الخدمة التي تريدينها؟\n✨ قص وتسريحة - 120 ريال\n🎨 صبغة شعر - 350 ريال\n💆‍♀️ علاج الشعر - 200 ريال\n✂️ قص أطراف فقط - 60 ريال",
          time: "11:15 ص",
        },
        {
          id: "4",
          sender: "customer",
          text: "قص وتسريحة من فضلك",
          time: "11:16 ص",
        },
        {
          id: "5",
          sender: "ai",
          text: "ممتاز! المواعيد المتاحة غداً:\n⏰ 9:00 ص مع سارة\n⏰ 2:30 م مع مايا\n⏰ 5:00 م مع لينا\n\nأي مصففة ووقت تفضلين؟",
          time: "11:16 ص",
        },
        {
          id: "6",
          sender: "customer",
          text: "2:30 م مع مايا",
          time: "11:17 ص",
        },
        {
          id: "7",
          sender: "ai",
          text: "رائع! تم الحجز مع مايا الساعة 2:30 م غداً.\n💳 المجموع: 120 ريال\n📍 الموقع: [عنوان الصالون]\n\nادفعي الآن للتأكيد: [رابط الدفع]",
          time: "11:17 ص",
        },
      ],
    },
    {
      title: "طلب مطعم",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "أريد طلب توصيل طعام",
          time: "7:45 م",
        },
        {
          id: "2",
          sender: "ai",
          text: "مرحباً بك في كويك بايتس! 🍔 ماذا تريد أن تطلب اليوم؟",
          time: "7:45 م",
        },
        {
          id: "3",
          sender: "customer",
          text: "أريد قائمة البرجر",
          time: "7:45 م",
        },
        {
          id: "4",
          sender: "ai",
          text: "🍔 قائمة البرجر:\n• كلاسيك لحم - 45 ريال\n• تشيز برجر - 50 ريال\n• سويس مشروم - 55 ريال\n• حار بالهلابينو - 52 ريال\n\nالكل يقدم مع البطاطس! ماذا تريد؟",
          time: "7:46 م",
        },
        {
          id: "5",
          sender: "customer",
          text: "2 تشيز برجر و1 كلاسيك",
          time: "7:46 م",
        },
        {
          id: "6",
          sender: "ai",
          text: "ممتاز! طلبك:\n• 2× تشيز برجر = 100 ريال\n• 1× كلاسيك لحم = 45 ريال\n📦 رسوم التوصيل = 10 ريال\n\nالمجموع: 155 ريال\n\n📍 تأكيد عنوان التوصيل؟",
          time: "7:46 م",
        },
        {
          id: "7",
          sender: "customer",
          text: "نعم، مبنى 5، شقة 12، العليا",
          time: "7:47 م",
        },
        {
          id: "8",
          sender: "ai",
          text: "✅ تم تأكيد الطلب!\n🚗 وقت التوصيل: 30-40 دقيقة\n💳 الدفع عند التوصيل أو ادفع الآن: [رابط الدفع]\n\nتتبع طلبك: [رابط التتبع]",
          time: "7:47 م",
        },
      ],
    },
    {
      title: "رسوم مدرسية",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "أريد دفع الرسوم المدرسية لابنتي",
          time: "9:00 ص",
        },
        {
          id: "2",
          sender: "ai",
          text: "سأساعدك في دفع الرسوم المدرسية. 📚 ما رقم الطالب لابنتك؟",
          time: "9:00 ص",
        },
        {
          id: "3",
          sender: "customer",
          text: "رقم الطالب 2024-1156",
          time: "9:01 ص",
        },
        {
          id: "4",
          sender: "ai",
          text: "وجدتها! الطالبة: سارة أحمد\n🏫 الصف السابع - المدرسة الدولية\n\n📋 الرسوم المستحقة:\n• رسوم الفصل الثاني: 8,500 ريال\n• خدمة الباص: 1,200 ريال\n• الكتب والمواد: 800 ريال\n\nالمجموع المستحق: 10,500 ريال",
          time: "9:01 ص",
        },
        {
          id: "5",
          sender: "customer",
          text: "هل يمكن الدفع بالأقساط؟",
          time: "9:02 ص",
        },
        {
          id: "6",
          sender: "ai",
          text: "نعم! خيارات الأقساط:\n\n1️⃣ دفعتان: 5,250 ريال لكل دفعة\n2️⃣ 3 دفعات: 3,500 ريال لكل دفعة\n3️⃣ ادفع الآن كاملاً واحصل على خصم 3% = 10,185 ريال\n\nأي خيار يناسبك؟",
          time: "9:02 ص",
        },
        {
          id: "7",
          sender: "customer",
          text: "سآخذ خطة 3 دفعات",
          time: "9:03 ص",
        },
        {
          id: "8",
          sender: "ai",
          text: "✅ تم تفعيل خطة الدفع!\n\n📅 الجدول:\n• الدفعة الأولى (اليوم): 3,500 ريال - [ادفع الآن]\n• الدفعة الثانية (1 فبراير): 3,500 ريال\n• الدفعة الثالثة (1 مارس): 3,500 ريال\n\n📧 سيتم إرسال الإيصال لبريدك الإلكتروني",
          time: "9:03 ص",
        },
      ],
    },
    {
      title: "خدمة إصلاح",
      messages: [
        {
          id: "1",
          sender: "customer",
          text: "الغسالة تسرب الماء",
          time: "3:30 م",
        },
        {
          id: "2",
          sender: "ai",
          text: "سأساعدك في حجز فني إصلاح فوراً! 🔧 ما هي ماركة الغسالة؟",
          time: "3:30 م",
        },
        {
          id: "3",
          sender: "customer",
          text: "سامسونج أمامية التحميل",
          time: "3:31 م",
        },
        {
          id: "4",
          sender: "ai",
          text: "فهمت! لغسالات سامسونج، لدي فنيون متخصصون.\n\n🔍 للمساعدة في التشخيص: التسريب من:\n• أسفل الآلة\n• باب الغسالة\n• التوصيلات الخلفية\n• غير متأكد",
          time: "3:31 م",
        },
        {
          id: "5",
          sender: "customer",
          text: "من الأسفل أعتقد",
          time: "3:32 م",
        },
        {
          id: "6",
          sender: "ai",
          text: "غالباً مشكلة في المضخة أو الخرطوم. المواعيد المتاحة:\n\n⚡ طوارئ (ساعتين): 250 ريال + القطع\n🔧 اليوم (5-7 م): 180 ريال + القطع\n📅 غداً صباحاً: 150 ريال + القطع\n\n✅ الكل يشمل الفحص المجاني",
          time: "3:32 م",
        },
        {
          id: "7",
          sender: "customer",
          text: "اليوم 5-7 مساء من فضلك",
          time: "3:33 م",
        },
        {
          id: "8",
          sender: "ai",
          text: "✅ تم حجز الفني!\n\n🔧 أحمد (4.8⭐، 500+ إصلاح)\n⏰ اليوم 5:00-7:00 م\n💰 الخدمة: 180 ريال (ادفع بعد الخدمة)\n\n📱 سيتصل قبل 30 دقيقة من الوصول\n🆔 رقم الفني: #TEC-4521 للتحقق",
          time: "3:33 م",
        },
      ],
    },
  ],
};

export default function ConversationMockup({ lang }: { lang: Lang }) {
  const [activeConvo, setActiveConvo] = useState(0);
  const [visibleMessages, setVisibleMessages] = useState<number>(0);

  // Add safety check for conversations
  const langConversations = conversations[lang] || conversations["en"] || [];
  const convo =
    langConversations.length > 0
      ? langConversations[
          activeConvo >= 0 && activeConvo < langConversations.length
            ? activeConvo
            : 0
        ]
      : null;

  useEffect(() => {
    if (!convo) return;
    setVisibleMessages(0);
    const timer = setInterval(() => {
      setVisibleMessages((prev) => {
        if (prev >= convo.messages.length) {
          clearInterval(timer);
          return prev;
        }
        return prev + 1;
      });
    }, 800);
    return () => clearInterval(timer);
  }, [activeConvo, convo]);

  if (!convo) {
    return null;
  }

  return (
    <div className="w-full mx-auto">
      {/* Conversation Tabs */}
      <div className="relative w-[80%] mx-auto">
        <div className="flex gap-2 mb-4 overflow-x-auto pb-3 scrollbar-thin scrollbar-thumb-brand-green/20 scrollbar-track-transparent hover:scrollbar-thumb-brand-green/40">
          {langConversations.map((conv, i) => (
            <button
              key={i}
              onClick={() => setActiveConvo(i)}
              className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-all flex-shrink-0 ${
                activeConvo === i
                  ? "bg-brand-green text-white shadow-lg scale-105"
                  : "bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700"
              }`}
            >
              {conv.title}
            </button>
          ))}
        </div>
        {/* Scroll Indicator */}
        <div className="text-center text-sm text-slate-500 dark:text-slate-400 -mt-2 mb-4">
          {lang === "ar"
            ? "← مرر للمزيد من المحادثات →"
            : "← Scroll for more conversations →"}
        </div>
      </div>

      {/* Phone Mockup */}
      <div className="relative mx-auto" style={{ maxWidth: "375px" }}>
        <div className="bg-slate-900 rounded-[2.5rem] p-3 shadow-2xl">
          <div className="bg-white dark:bg-slate-800 rounded-[2rem] overflow-hidden">
            {/* WhatsApp Header */}
            <div className="bg-gradient-to-r from-green-600 to-green-500 p-4 flex items-center gap-3">
              <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center">
                <span className="text-lg">🤖</span>
              </div>
              <div className="flex-1">
                <div className="text-white font-semibold">
                  Mawidi AI Assistant
                </div>
                <div className="text-green-100 text-sm">
                  {lang === "ar" ? "متصل الآن" : "Online now"}
                </div>
              </div>
              <div className="flex gap-3 text-white">
                <span>📞</span>
                <span>📹</span>
                <span>⋮</span>
              </div>
            </div>

            {/* Messages */}
            <div className="h-[500px] overflow-y-auto bg-[url('/images/wa-bg.svg')] bg-cover p-4 space-y-3">
              {convo.messages.slice(0, visibleMessages).map((msg) => (
                <div
                  key={msg.id}
                  className={`flex ${msg.sender === "customer" ? "justify-end" : "justify-start"}`}
                >
                  <div
                    className={`max-w-[80%] rounded-2xl px-4 py-2 shadow-sm ${
                      msg.sender === "customer"
                        ? "bg-green-500 text-white rounded-br-sm"
                        : "bg-white dark:bg-slate-700 text-slate-900 dark:text-white rounded-bl-sm"
                    }`}
                  >
                    <div className="whitespace-pre-wrap">{msg.text}</div>
                    <div
                      className={`text-xs mt-1 ${
                        msg.sender === "customer"
                          ? "text-green-100"
                          : "text-slate-500 dark:text-slate-400"
                      }`}
                    >
                      {msg.time}
                    </div>
                  </div>
                </div>
              ))}
              {visibleMessages < convo.messages.length && (
                <div className="flex justify-start">
                  <div className="bg-white dark:bg-slate-700 rounded-2xl px-4 py-3 shadow-sm rounded-bl-sm">
                    <div className="flex gap-1">
                      <span
                        className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"
                        style={{ animationDelay: "0ms" }}
                      ></span>
                      <span
                        className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"
                        style={{ animationDelay: "150ms" }}
                      ></span>
                      <span
                        className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"
                        style={{ animationDelay: "300ms" }}
                      ></span>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Input Bar */}
            <div className="bg-white dark:bg-slate-800 p-3 flex items-center gap-2 border-t border-slate-200 dark:border-slate-700">
              <button className="p-2 text-slate-500">😊</button>
              <button className="p-2 text-slate-500">📎</button>
              <input
                type="text"
                aria-label={lang === "ar" ? "اكتب رسالة" : "Type a message"}
                placeholder={
                  lang === "ar" ? "اكتب رسالة..." : "Type a message..."
                }
                className="flex-1 px-3 py-2 bg-slate-100 dark:bg-slate-700 rounded-full text-sm"
                disabled
              />
              <button className="p-2 text-green-500">🎤</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}