import { useState, useEffect, useRef } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { Send, ArrowLeft, FileText, Globe, Bot, UserPlus, CalendarX } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import type { Patient, Communication } from "@repo/db/types";
import { format, isToday, isYesterday, parseISO } from "date-fns";
import { es, pt, zhCN, zhTW, ar, fr } from "date-fns/locale";
import type { Locale } from "date-fns";

// ─── Language config ──────────────────────────────────────────────────────────

export const SUPPORTED_LANGUAGES = [
  "English",
  "Spanish",
  "Portuguese",
  "Mandarin",
  "Cantonese",
  "Arabic",
  "Haitian Creole",
] as const;
export type Language = (typeof SUPPORTED_LANGUAGES)[number];

const LOCALES: Partial<Record<Language, Locale>> = {
  Spanish: es,
  Portuguese: pt,
  Mandarin: zhCN,
  Cantonese: zhTW,
  Arabic: ar,
  "Haitian Creole": fr, // French locale — closest approximation for day/month names
};

// Date pattern per language (date-fns format tokens)
const DATE_FMT: Record<Language, string> = {
  English:          "MMMM do, EEEE",
  Spanish:          "EEEE, d 'de' MMMM",
  Portuguese:       "EEEE, d 'de' MMMM",
  Mandarin:         "M月d日（EEEE）",
  Cantonese:        "M月d日（EEEE）",
  Arabic:           "EEEE d MMMM",
  "Haitian Creole": "EEEE d MMMM",
};

function formatTime(h: number, m: number, lang: Language): string {
  const pad = (n: number) => String(n).padStart(2, "0");
  const h12 = h % 12 || 12;
  if (lang === "Mandarin" || lang === "Cantonese") {
    return `${h >= 12 ? "下午" : "上午"}${h12}:${pad(m)}`;
  }
  if (lang === "Arabic") {
    return `${h12}:${pad(m)} ${h >= 12 ? "مساءً" : "صباحاً"}`;
  }
  if (lang === "Spanish" || lang === "Portuguese") {
    return `${pad(h)}:${pad(m)}`;
  }
  // English, Haitian Creole
  return `${h12}:${pad(m)} ${h >= 12 ? "pm" : "am"}`;
}

function buildApptPhrase(date: string, startTime: string, lang: Language): string {
  const [y, mo, d] = date.split("-").map(Number);
  const dateObj = new Date(y!, mo! - 1, d!);
  const locale = LOCALES[lang];
  const datePart = format(dateObj, DATE_FMT[lang], { locale });
  const [h, m] = startTime.split(":").map(Number);
  const timePart = formatTime(h!, m!, lang);
  switch (lang) {
    case "Spanish":    return `el ${datePart} a las ${timePart}`;
    case "Portuguese": return `na ${datePart} às ${timePart}`;
    case "Mandarin":   return `在${datePart}${timePart}`;
    case "Cantonese":  return `喺${datePart}${timePart}`;
    case "Arabic":          return `في ${datePart} الساعة ${timePart}`;
    case "Haitian Creole":  return `le ${datePart} a ${timePart}`;
    default:                return `on ${datePart} at ${timePart}`;
  }
}

// ─── Office contact ───────────────────────────────────────────────────────────

interface OfficeContact {
  officeName?: string | null;
  phoneNumber?: string | null;
}

// ─── Template builders ────────────────────────────────────────────────────────

export interface AppointmentInfo {
  date: string;      // "YYYY-MM-DD"
  startTime: string; // "HH:MM"
}

const DEFAULT_OFFICE_NAME: Record<Language, string> = {
  English:          "the dental office",
  Spanish:          "la clínica dental",
  Portuguese:       "o consultório dentário",
  Mandarin:         "牙科诊所",
  Cantonese:        "牙科診所",
  Arabic:           "عيادة الأسنان",
  "Haitian Creole": "kabinè dantis la",
};

function callPhrase(phone: string | null | undefined, lang: Language): string {
  if (!phone?.trim()) {
    return { English: "call us", Spanish: "llámenos", Portuguese: "ligue-nos",
             Mandarin: "联系我们", Cantonese: "聯繫我們", Arabic: "اتصل بنا",
             "Haitian Creole": "rele nou" }[lang];
  }
  return {
    English:          `call us at ${phone}`,
    Spanish:          `llámenos al ${phone}`,
    Portuguese:       `ligue-nos pelo ${phone}`,
    Mandarin:         `致电 ${phone}`,
    Cantonese:        `致電 ${phone}`,
    Arabic:           `اتصل بنا على ${phone}`,
    "Haitian Creole": `rele nou nan ${phone}`,
  }[lang];
}

function buildTemplates(
  patient: Patient,
  lang: Language,
  apptInfo?: AppointmentInfo,
  office?: OfficeContact | null,
) {
  const n = patient.firstName;
  const o = office?.officeName?.trim() || DEFAULT_OFFICE_NAME[lang];
  const c = callPhrase(office?.phoneNumber, lang);
  const appt = apptInfo ? buildApptPhrase(apptInfo.date, apptInfo.startTime, lang) : "";

  const T = {
    English: {
      label_reminder:      "Appointment Reminder",
      label_confirmed:     "Appointment Confirmed",
      label_followup:      "Follow-Up",
      label_payment:       "Payment Reminder",
      label_general:       "General",
      reminder: apptInfo
        ? `Hi ${n}, this is ${o}. Reminder: You have an appointment scheduled ${appt}. Please confirm through text messages or ${c} if you need to reschedule.`
        : `Hi ${n}, this is ${o}. Reminder: You have an upcoming appointment. Please confirm through text messages or ${c} if you need to reschedule.`,
      confirmed: `Hi ${n}, this is ${o}. Your appointment has been confirmed. We look forward to seeing you! If you have any questions, please ${c}.`,
      followup:  `Hi ${n}, this is ${o}. Thank you for visiting us. How are you feeling after your treatment? Please let us know if you have any concerns.`,
      payment:   `Hi ${n}, this is ${o}. This is a friendly reminder about your outstanding balance. Please ${c} to discuss payment options.`,
      general:   `Hi ${n}, this is ${o}. `,
    },
    Spanish: {
      label_reminder:      "Recordatorio de cita",
      label_confirmed:     "Cita confirmada",
      label_followup:      "Seguimiento",
      label_payment:       "Recordatorio de pago",
      label_general:       "General",
      reminder: apptInfo
        ? `Hola ${n}, le habla ${o}. Recordatorio: Tiene una cita programada ${appt}. Por favor confirme por mensaje de texto o ${c} si necesita reprogramar.`
        : `Hola ${n}, le habla ${o}. Recordatorio: Tiene una próxima cita. Por favor confirme por mensaje de texto o ${c} si necesita reprogramar.`,
      confirmed: `Hola ${n}, le habla ${o}. Su cita ha sido confirmada. ¡Esperamos verle pronto! Si tiene alguna pregunta, por favor ${c}.`,
      followup:  `Hola ${n}, le habla ${o}. Gracias por visitarnos. ¿Cómo se siente después de su tratamiento? Por favor, háganos saber si tiene alguna inquietud.`,
      payment:   `Hola ${n}, le habla ${o}. Este es un recordatorio amable sobre su saldo pendiente. Por favor ${c} para hablar sobre las opciones de pago.`,
      general:   `Hola ${n}, le habla ${o}. `,
    },
    Portuguese: {
      label_reminder:      "Lembrete de consulta",
      label_confirmed:     "Consulta confirmada",
      label_followup:      "Acompanhamento",
      label_payment:       "Lembrete de pagamento",
      label_general:       "Geral",
      reminder: apptInfo
        ? `Olá ${n}, aqui é ${o}. Lembrete: Você tem uma consulta agendada ${appt}. Por favor confirme por mensagem de texto ou ${c} se precisar reagendar.`
        : `Olá ${n}, aqui é ${o}. Lembrete: Você tem uma consulta próxima. Por favor confirme por mensagem de texto ou ${c} se precisar reagendar.`,
      confirmed: `Olá ${n}, aqui é ${o}. Sua consulta foi confirmada. Aguardamos sua visita! Se tiver alguma dúvida, por favor ${c}.`,
      followup:  `Olá ${n}, aqui é ${o}. Obrigado pela sua visita. Como está se sentindo após o tratamento? Por favor, nos informe se tiver alguma preocupação.`,
      payment:   `Olá ${n}, aqui é ${o}. Este é um lembrete amigável sobre o seu saldo pendente. Por favor ${c} para discutir as opções de pagamento.`,
      general:   `Olá ${n}, aqui é ${o}. `,
    },
    Mandarin: {
      label_reminder:      "预约提醒",
      label_confirmed:     "预约确认",
      label_followup:      "回访",
      label_payment:       "付款提醒",
      label_general:       "一般消息",
      reminder: apptInfo
        ? `您好 ${n}，我们是${o}。提醒：您有一个预约安排${appt}。请通过短信确认，或如需重新安排请${c}。`
        : `您好 ${n}，我们是${o}。提醒：您有一个即将到来的预约。请通过短信确认，或如需重新安排请${c}。`,
      confirmed: `您好 ${n}，我们是${o}。您的预约已确认。期待您的光临！如有疑问，请${c}。`,
      followup:  `您好 ${n}，我们是${o}。感谢您的来访。治疗后您感觉怎么样？如有任何疑虑，请告诉我们。`,
      payment:   `您好 ${n}，我们是${o}。这是关于您未付余额的友好提醒。请${c}讨论付款方案。`,
      general:   `您好 ${n}，我们是${o}。`,
    },
    Cantonese: {
      label_reminder:      "預約提醒",
      label_confirmed:     "預約確認",
      label_followup:      "跟進",
      label_payment:       "付款提醒",
      label_general:       "一般消息",
      reminder: apptInfo
        ? `您好 ${n}，我哋係${o}。提醒：您有一個預約安排${appt}。請透過短訊確認，或如需重新安排請${c}。`
        : `您好 ${n}，我哋係${o}。提醒：您有一個即將到嘅預約。請透過短訊確認，或如需重新安排請${c}。`,
      confirmed: `您好 ${n}，我哋係${o}。您嘅預約已確認。期待見到您！如有疑問，請${c}。`,
      followup:  `您好 ${n}，我哋係${o}。感謝您嘅到訪。治療後您感覺點樣？如有任何疑慮，請告知我們。`,
      payment:   `您好 ${n}，我哋係${o}。呢係關於您未付餘額嘅友好提醒。請${c}討論付款方案。`,
      general:   `您好 ${n}，我哋係${o}。`,
    },
    Arabic: {
      label_reminder:      "تذكير بالموعد",
      label_confirmed:     "تأكيد الموعد",
      label_followup:      "متابعة",
      label_payment:       "تذكير بالدفع",
      label_general:       "رسالة عامة",
      reminder: apptInfo
        ? `مرحباً ${n}، نحن ${o}. تذكير: لديك موعد مجدول ${appt}. يرجى التأكيد عبر الرسائل النصية أو ${c} إذا كنت بحاجة إلى إعادة الجدولة.`
        : `مرحباً ${n}، نحن ${o}. تذكير: لديك موعد قادم. يرجى التأكيد عبر الرسائل النصية أو ${c} إذا كنت بحاجة إلى إعادة الجدولة.`,
      confirmed: `مرحباً ${n}، نحن ${o}. تم تأكيد موعدك. نتطلع إلى رؤيتك! إذا كان لديك أي أسئلة، يرجى ${c}.`,
      followup:  `مرحباً ${n}، نحن ${o}. شكراً لزيارتك. كيف تشعر بعد العلاج؟ يرجى إبلاغنا إذا كان لديك أي مخاوف.`,
      payment:   `مرحباً ${n}، نحن ${o}. هذا تذكير ودي بشأن رصيدك المستحق. يرجى ${c} لمناقشة خيارات الدفع.`,
      general:   `مرحباً ${n}، نحن ${o}. `,
    },
    "Haitian Creole": {
      label_reminder:  "Rapèl randevou",
      label_confirmed: "Randevou konfime",
      label_followup:  "Swivi",
      label_payment:   "Rapèl peman",
      label_general:   "Jeneral",
      reminder: apptInfo
        ? `Bonjou ${n}, se ${o} k'ap pale. Rapèl: Ou gen yon randevou pwograme ${appt}. Tanpri konfime pa mesaj tèks oswa ${c} si ou bezwen repwograme.`
        : `Bonjou ${n}, se ${o} k'ap pale. Rapèl: Ou gen yon randevou k'ap vini. Tanpri konfime pa mesaj tèks oswa ${c} si ou bezwen repwograme.`,
      confirmed: `Bonjou ${n}, se ${o} k'ap pale. Randevou ou a konfime. N'ap tann ou! Si ou gen kesyon, tanpri ${c}.`,
      followup:  `Bonjou ${n}, se ${o} k'ap pale. Mèsi dèske ou te vizite nou. Kijan ou santi ou apre tretman ou? Tanpri fè nou konnen si ou gen nenpòt enkyetid.`,
      payment:   `Bonjou ${n}, se ${o} k'ap pale. Sa se yon rapèl amical sou balans ou ki annatant. Tanpri ${c} pou diskite opsyon peman.`,
      general:   `Bonjou ${n}, se ${o} k'ap pale. `,
    },
  }[lang];

  return [
    { key: "appointment_reminder", label: T.label_reminder, body: T.reminder },
    { key: "appointment_confirmed", label: T.label_confirmed, body: T.confirmed },
    { key: "follow_up",             label: T.label_followup,  body: T.followup },
    { key: "payment_reminder",      label: T.label_payment,   body: T.payment },
    { key: "general",               label: T.label_general,   body: T.general },
  ];
}

// ─── Component ────────────────────────────────────────────────────────────────

interface MessageThreadProps {
  patient: Patient;
  onBack?: () => void;
  appointmentInfo?: AppointmentInfo;
}

export function MessageThread({ patient, onBack, appointmentInfo }: MessageThreadProps) {
  const { toast } = useToast();
  const [messageText, setMessageText] = useState("");
  const [language, setLanguage] = useState<Language>(
    (patient.preferredLanguage as Language | null | undefined) &&
    SUPPORTED_LANGUAGES.includes(patient.preferredLanguage as Language)
      ? (patient.preferredLanguage as Language)
      : "English"
  );
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const [handOffToAI, setHandOffToAI] = useState(true);
  const [pendingStartFlow, setPendingStartFlow] = useState<"new_patient" | "reschedule" | null>(null);

  useQuery<{ enabled: boolean }>({
    queryKey: ["/api/twilio/ai-handoff", patient.id],
    queryFn: async () => {
      const res = await apiRequest("GET", `/api/twilio/ai-handoff/${patient.id}`);
      return res.json();
    },
    onSuccess: (data: { enabled: boolean }) => setHandOffToAI(data.enabled),
  } as any);

  const { data: aiChatTemplates } = useQuery<{ newPatientGreeting: string; rescheduleGreeting: string } | null>({
    queryKey: ["/api/ai/chat-templates"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/ai/chat-templates");
      if (!res.ok) return null;
      return res.json();
    },
    staleTime: 60_000,
  });

  const handoffMutation = useMutation({
    mutationFn: async (enabled: boolean) =>
      apiRequest("PUT", `/api/twilio/ai-handoff/${patient.id}`, { enabled }),
  });

  const handleHandoffToggle = (enabled: boolean) => {
    setHandOffToAI(enabled);
    handoffMutation.mutate(enabled);
  };

  const { data: officeContact } = useQuery<OfficeContact | null>({
    queryKey: ["/api/office-contact"],
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/office-contact");
      if (!res.ok) return null;
      return res.json();
    },
    staleTime: 60_000,
  });

  const { data: communications = [], isLoading } = useQuery<Communication[]>({
    queryKey: ["/api/patients", patient.id, "communications"],
    queryFn: async () => {
      const res = await apiRequest("GET", `/api/patients/${patient.id}/communications`);
      return res.json();
    },
    refetchInterval: 5000,
  });

  const sendMessageMutation = useMutation({
    mutationFn: async (message: string) =>
      apiRequest("POST", "/api/twilio/send-sms", {
        to: patient.phone,
        message,
        patientId: patient.id,
        ...(pendingStartFlow ? { startFlow: pendingStartFlow } : {}),
      }),
    onSuccess: () => {
      setMessageText("");
      setPendingStartFlow(null);
      queryClient.invalidateQueries({ queryKey: ["/api/patients", patient.id, "communications"] });
      toast({ title: "Message sent", description: "Your message has been sent successfully." });
    },
    onError: (error: any) => {
      toast({
        title: "Failed to send message",
        description: error.message || "Unable to send message. Please try again.",
        variant: "destructive",
      });
    },
  });

  const handleSendMessage = () => {
    if (!messageText.trim()) return;
    sendMessageMutation.mutate(messageText);
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [communications]);

  const formatMessageDate = (dateValue: string | Date) => {
    const date = typeof dateValue === "string" ? parseISO(dateValue) : dateValue;
    if (isToday(date)) return format(date, "h:mm a");
    if (isYesterday(date)) return `Yesterday ${format(date, "h:mm a")}`;
    return format(date, "MMM d, h:mm a");
  };

  const getDateDivider = (dateValue: string | Date) => {
    const d = typeof dateValue === "string" ? parseISO(dateValue) : dateValue;
    if (isToday(d)) return "Today";
    if (isYesterday(d)) return "Yesterday";
    return format(d, "MMMM d, yyyy");
  };

  const groupedMessages: { date: string; messages: Communication[] }[] = [];
  communications.forEach((comm) => {
    if (!comm.createdAt) return;
    const messageDate = typeof comm.createdAt === "string" ? parseISO(comm.createdAt) : comm.createdAt;
    const dateKey = format(messageDate, "yyyy-MM-dd");
    const existing = groupedMessages.find((g) => g.date === dateKey);
    if (existing) existing.messages.push(comm);
    else groupedMessages.push({ date: dateKey, messages: [comm] });
  });

  const templates = buildTemplates(patient, language, appointmentInfo, officeContact);

  return (
    <div className="flex flex-col h-full bg-white rounded-lg border">
      {/* Header */}
      <div className="p-4 border-b bg-gray-50 space-y-2">
        {/* Patient identity row */}
        <div className="flex items-center gap-3">
          {onBack && (
            <Button variant="ghost" size="icon" onClick={onBack} data-testid="button-back">
              <ArrowLeft className="h-5 w-5" />
            </Button>
          )}
          <div className="h-10 w-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-semibold flex-shrink-0">
            {patient.firstName[0]}{patient.lastName[0]}
          </div>
          <div>
            <h3 className="font-semibold text-base">
              {patient.firstName} {patient.lastName}
            </h3>
            <p className="text-sm text-muted-foreground">{patient.phone}</p>
          </div>
        </div>

        {/* Controls row: language + template */}
        <div className="flex items-center gap-2 pl-1 flex-wrap">
          {/* Language selector */}
          <div className="flex items-center gap-1.5">
            <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
            <Select
              value={language}
              onValueChange={(v) => setLanguage(v as Language)}
            >
              <SelectTrigger className="h-7 text-xs w-[130px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {SUPPORTED_LANGUAGES.map((l) => (
                  <SelectItem key={l} value={l} className="text-xs">{l}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Template selector */}
          <div className="flex items-center gap-1.5">
            <FileText className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
            <Select
              value=""
              onValueChange={(key) => {
                if (key === "__new_patient__") {
                  const greeting = aiChatTemplates?.newPatientGreeting ||
                    "Hi! My name is Lisa, the dedicated AI assistant at our dental office. I can help you schedule an appointment, check your insurance, and answer general questions 24/7. How can I help you today?";
                  setMessageText(greeting);
                  setPendingStartFlow("new_patient");
                } else if (key === "__reschedule__") {
                  const greeting = aiChatTemplates?.rescheduleGreeting ||
                    "Hi! My name is Lisa, the dedicated AI assistant at our dental office. I can help you find a new appointment time that works for you. Would you like to reschedule your appointment?";
                  setMessageText(greeting);
                  setPendingStartFlow("reschedule");
                } else {
                  const tpl = templates.find((t) => t.key === key);
                  if (tpl) { setMessageText(tpl.body); setPendingStartFlow(null); }
                }
              }}
            >
              <SelectTrigger className="h-7 text-xs border-dashed w-[180px]">
                <SelectValue placeholder="Use a template…" />
              </SelectTrigger>
              <SelectContent>
                {/* New patient scheduling — uses AI New Patient Greeting */}
                <SelectItem value="__new_patient__" className="text-xs font-medium text-primary">
                  <span className="flex items-center gap-1.5">
                    <UserPlus className="h-3 w-3" />
                    Schedule a New Patient
                  </span>
                </SelectItem>
                {/* Reschedule patients — uses AI Reschedule Greeting */}
                <SelectItem value="__reschedule__" className="text-xs font-medium text-primary">
                  <span className="flex items-center gap-1.5">
                    <CalendarX className="h-3 w-3" />
                    Reschedule Patients
                  </span>
                </SelectItem>
                <div className="my-1 border-t" />
                {templates.map((t) => (
                  <SelectItem key={t.key} value={t.key} className="text-xs">
                    {t.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* New-patient flow indicator */}
          {pendingStartFlow === "new_patient" && (
            <div className="flex items-center gap-1 text-xs text-primary bg-primary/5 border border-primary/20 rounded px-2 py-0.5">
              <UserPlus className="h-3 w-3" />
              New patient flow
            </div>
          )}

          {/* Reschedule flow indicator */}
          {pendingStartFlow === "reschedule" && (
            <div className="flex items-center gap-1 text-xs text-primary bg-primary/5 border border-primary/20 rounded px-2 py-0.5">
              <CalendarX className="h-3 w-3" />
              Reschedule flow
            </div>
          )}

          {/* AI handoff toggle */}
          <div className="flex items-center gap-1.5 ml-auto">
            <Bot className={`h-3.5 w-3.5 flex-shrink-0 ${handOffToAI ? "text-primary" : "text-muted-foreground"}`} />
            <span className="text-xs text-muted-foreground">Hand off to AI</span>
            <Switch
              checked={handOffToAI}
              onCheckedChange={handleHandoffToggle}
              className="scale-75 origin-left"
            />
          </div>
        </div>
      </div>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-6 space-y-4" data-testid="messages-container">
        {isLoading ? (
          <div className="flex items-center justify-center h-full">
            <p className="text-muted-foreground">Loading messages...</p>
          </div>
        ) : communications.length === 0 ? (
          <div className="flex items-center justify-center h-full">
            <p className="text-muted-foreground">No messages yet. Start the conversation!</p>
          </div>
        ) : (
          <>
            {groupedMessages.map((group) => (
              <div key={group.date}>
                <div className="flex items-center justify-center my-8">
                  <div className="px-4 py-1 bg-gray-100 rounded-full text-xs text-muted-foreground">
                    {getDateDivider(group.messages[0]?.createdAt!)}
                  </div>
                </div>
                {group.messages.map((comm) => (
                  <div
                    key={comm.id}
                    className={`flex mb-4 ${comm.direction === "outbound" ? "justify-end" : "justify-start"}`}
                    data-testid={`message-${comm.id}`}
                  >
                    <div className={`max-w-md ${comm.direction === "outbound" ? "ml-auto" : "mr-auto"}`}>
                      {comm.direction === "inbound" && (
                        <div className="flex items-start gap-2">
                          <div className="h-8 w-8 rounded-full bg-gray-300 flex items-center justify-center text-xs font-semibold flex-shrink-0">
                            {patient.firstName[0]}{patient.lastName[0]}
                          </div>
                          <div>
                            <div className="p-3 rounded-2xl bg-gray-100 text-gray-900 rounded-tl-md">
                              <p className="text-sm whitespace-pre-wrap break-words">{comm.body}</p>
                            </div>
                            <p className="text-xs text-muted-foreground mt-1">
                              {comm.createdAt && formatMessageDate(comm.createdAt)}
                            </p>
                          </div>
                        </div>
                      )}
                      {comm.direction === "outbound" && (
                        <div>
                          <div className="p-3 rounded-2xl bg-primary text-primary-foreground rounded-tr-md">
                            <p className="text-sm whitespace-pre-wrap break-words">{comm.body}</p>
                          </div>
                          <p className="text-xs text-muted-foreground mt-1 text-right">
                            {comm.createdAt && formatMessageDate(comm.createdAt)}
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            ))}
            <div ref={messagesEndRef} />
          </>
        )}
      </div>

      {/* Input Area */}
      <div className="p-4 border-t bg-gray-50">
        <div className="flex items-center gap-2">
          <Input
            value={messageText}
            onChange={(e) => setMessageText(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="Type your message..."
            className="flex-1 rounded-full"
            disabled={sendMessageMutation.isPending}
            data-testid="input-message"
          />
          <Button
            onClick={handleSendMessage}
            disabled={!messageText.trim() || sendMessageMutation.isPending}
            size="icon"
            className="rounded-full h-10 w-10"
            data-testid="button-send"
          >
            <Send className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}
