"use client";

import React, { useEffect, useRef } from "react";
import { useChatStore } from "@/hooks/useChatStore";
import { useAuthStore } from "@/hooks/useAuthStore";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Loader2, MapPin, Package, Tag, User, CheckCheck } from "lucide-react";
import { cn, getUserColor } from "@/lib/utils";
import Link from "next/link";

export function ChatMessages() {
  const { messages, isLoading, typingUsers, activeRoomId, rooms } = useChatStore();
  const { user: currentUser } = useAuthStore();
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      const scrollContainer = scrollRef.current.querySelector('[data-radix-scroll-area-viewport]');
      if (scrollContainer) {
        scrollContainer.scrollTop = scrollContainer.scrollHeight;
      }
    }
  }, [messages, typingUsers]);

  const renderMessageContent = (text: string, isOwnMessage: boolean) => {
    const parts: (string | React.JSX.Element)[] = [text];

    const applyRegex = (regex: RegExp, componentFn: (match: any, index: number) => React.JSX.Element) => {
      for (let i = 0; i < parts.length; i++) {
        if (typeof parts[i] !== 'string') continue;
        const currentString = parts[i] as string;
        const newParts: (string | React.JSX.Element)[] = [];
        let lastIndex = 0;
        let match;
        while ((match = regex.exec(currentString)) !== null) {
          if (match.index > lastIndex) newParts.push(currentString.substring(lastIndex, match.index));
          newParts.push(componentFn(match, i + Math.random()));
          lastIndex = regex.lastIndex;
        }
        if (lastIndex < currentString.length) newParts.push(currentString.substring(lastIndex));
        if (newParts.length > 0) {
          parts.splice(i, 1, ...newParts);
          i += newParts.length - 1;
        }
      }
    };

    // 1. Locations
    applyRegex(/📍\s\[([^\]]+)\]\(([^)]+)\)/g, (match, idx) => (
      <Link key={idx} href={match[2]} className={cn(
        "inline-flex items-center gap-1 px-1.5 py-0.5 rounded border transition-all font-semibold text-xs mx-0.5 my-0.5",
        isOwnMessage ? "bg-white/20 border-white/30 text-white" : "bg-primary/10 border-primary/20 text-primary"
      )}>
        <MapPin className="h-2.5 w-2.5" /> {match[1]}
      </Link>
    ));

    // 2. Mentions - MATCH INPUT LOOK (Square-ish, 11px)
    applyRegex(/\[\[@([^|\]]+)\|([^\]]+)\]\]/g, (match, idx) => (
      <span key={idx} className={cn(
        "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] font-semibold text-xs mx-0.5 border shadow-sm align-baseline",
        isOwnMessage 
          ? "bg-white/20 border-white/30 text-white" 
          : "bg-blue-500/10 border-blue-500/20 text-blue-600 dark:text-blue-400"
      )}>
        <User className="h-2.5 w-2.5" /> @{match[2]}
      </span>
    ));

    // 3. Entities - MATCH INPUT LOOK
    applyRegex(/\[\[\/([^:|\]]+):([^|\]]+)\|([^\]]+)\]\]/g, (match, idx) => {
      const type = match[1];
      const icon = type === 'product' 
        ? <Package className="h-2.5 w-2.5" /> 
        : type === 'customer'
          ? <User className="h-2.5 w-2.5" />
          : <Tag className="h-2.5 w-2.5" />;
      
      const href = type === 'customer' 
        ? `/dashboard/customers/overview` // Or a detail page if it exists
        : `/dashboard/${type}s/edit/${match[2]}`;

      return (
        <Link key={idx} href={href} className={cn(
          "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] border transition-all font-semibold text-xs mx-0.5 shadow-sm align-baseline",
          isOwnMessage 
            ? "bg-white/20 border-white/30 text-white" 
            : "bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:text-emerald-400"
        )}>
          {icon} {match[3]}
        </Link>
      );
    });

    return <div className="leading-tight whitespace-pre-wrap break-words inline">{parts}</div>;
  };

  const currentTyping = (typingUsers[activeRoomId] || []).filter(u => u.userId !== currentUser?.id?.toString());
  const activeRoom = rooms.find(r => r.id === activeRoomId);

  return (
    <ScrollArea ref={scrollRef} className="flex-1 w-full bg-background h-full relative border-none">
      {isLoading && messages.length === 0 && (
        <div className="absolute inset-0 flex items-center justify-center bg-background/50 z-20"><Loader2 className="h-6 w-6 animate-spin text-primary" /></div>
      )}

      <div className="p-4 space-y-3 min-h-full flex flex-col justify-end max-w-5xl mx-auto">
        {messages.map((message) => {
          const isOwnMessage = !!(message.sender_id && currentUser?.id && message.sender_id.toString() === currentUser.id.toString());
          
          const senderName = message.sender_name || "Unbekannt";
          const userColor = getUserColor(message.sender_id || "default");
          const userColorOnly = userColor.split(" ")[0];

          // Determine who read this message
          const readBy = activeRoom?.participants.filter(p => 
            p.id.toString() !== currentUser?.id?.toString() && 
            p.last_read_at && 
            new Date(p.last_read_at) >= new Date(message.created_at)
          ) || [];

          return (
            <div key={message.id} className="group/msg flex flex-col gap-1">
              <div className={cn("flex items-start gap-2.5 animate-in fade-in slide-in-from-bottom-1 duration-200", isOwnMessage ? "flex-row-reverse" : "flex-row")}>
                <Avatar className="h-7 w-7 border border-border shadow-sm flex-shrink-0">
                  <AvatarImage src={message.sender_image} />
                  <AvatarFallback className={cn("text-xs font-semibold border", isOwnMessage ? "bg-primary text-primary-foreground" : userColor)}>
                    {senderName.charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                
                <div className={cn("flex flex-col max-w-[85%]", isOwnMessage ? "items-end" : "items-start")}>
                  {!isOwnMessage && (
                    <span className={cn("text-xs font-semibold mb-0.5 px-1", userColorOnly)}>
                      {senderName}
                    </span>
                  )}
                  
                  <div className={cn(
                    "px-2.5 py-1.5 rounded-xl shadow-sm relative transition-all min-w-[60px]",
                    isOwnMessage 
                      ? "bg-primary text-primary-foreground rounded-tr-none" 
                      : "bg-muted/60 text-foreground rounded-tl-none border border-border/10"
                  )}>
                    <div className="pr-12 text-[12.5px] font-medium leading-relaxed">
                      {renderMessageContent(message.message, isOwnMessage)}
                    </div>
                    
                    <div className={cn(
                      "absolute bottom-1 right-1.5 flex items-center gap-0.5 text-xs font-semibold opacity-60",
                      isOwnMessage ? "text-primary-foreground" : "text-muted-foreground"
                    )}>
                      {new Date(message.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                      {isOwnMessage && (
                        readBy.length > 0 ? <CheckCheck className="h-2.5 w-2.5 text-sky-300 ml-0.5" /> : <CheckCheck className="h-2.5 w-2.5 opacity-40 ml-0.5" />
                      )}
                    </div>
                  </div>
                </div>
              </div>
              
              {/* Read indicators (avatars) */}
              {isOwnMessage && readBy.length > 0 && (
                <div className="flex flex-row-reverse gap-0.5 px-10 -mt-0.5 opacity-0 group-hover/msg:opacity-100 transition-opacity">
                  {readBy.map(p => (
                    <div key={p.id} title={`Gesehen von ${p.name}`} className="relative">
                      <Avatar className="h-3 w-3 border-[0.5px] border-background shadow-xs">
                        <AvatarImage src={p.image} />
                        <AvatarFallback className="text-[10px] font-semibold">{p.name?.charAt(0)}</AvatarFallback>
                      </Avatar>
                    </div>
                  ))}
                </div>
              )}
            </div>
          );
        })}

        {currentTyping.length > 0 && (
          <div className="flex items-center gap-2 text-xs text-muted-foreground animate-pulse px-2 py-1 bg-muted/20 rounded-full w-fit">
            <div className="flex gap-0.5"><span className="w-1 h-1 bg-primary rounded-full animate-bounce"></span><span className="w-1 h-1 bg-primary rounded-full animate-bounce [animation-delay:-0.15s]"></span></div>
            <span className="font-semibold tracking-tight">
              {currentTyping.length === 1 ? `${currentTyping[0].name} schreibt...` : 'Mehrere schreiben...'}
            </span>
          </div>
        )}
      </div>
    </ScrollArea>
  );
}