import React, { useState, lazy, Suspense } from 'react';
import { ChatMessage } from '../store/chatStore';
import { useUser } from '@/features/auth/hooks/useUser';
import { cn } from '@/lib/utils';
import { Smile, MoreHorizontal, Check, CheckCheck } from 'lucide-react';
import { useChat } from '../hooks/useChat';
import { LoadingSpinner } from '@/components/ui/loading-spinner';
import { Theme } from 'emoji-picker-react';

const EmojiPicker = lazy(() =>
  import('emoji-picker-react').then((module) => ({ default: module.default })),
);

interface ChatMessageProps {
  message: ChatMessage;
}

export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
  message,
}) => {
  const { data: user } = useUser();
  const { addReaction } = useChat();
  const isMe = user?.id === message.sender_id;
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);

  const handleEmojiClick = (emojiData: { emoji: string }) => {
    addReaction(message.id, emojiData.emoji);
    setShowEmojiPicker(false);
  };

  return (
    <div
      className={cn(
        'group flex flex-col gap-1 max-w-[80%] mb-4 relative',
        isMe ? 'ml-auto items-end' : 'mr-auto items-start',
      )}
    >
      <div className="flex items-center gap-2 px-1 mb-0.5">
        <span
          className={cn(
            'font-mono text-[10px] uppercase tracking-wider',
            isMe ? 'text-kodo-cyan' : 'text-kodo-magenta',
          )}
        >
          {isMe ? 'You' : message.sender_username || 'Unknown_Signal'}
        </span>
        <span className="text-[9px] text-kodo-secondary/60">
          {new Date(message.created_at).toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit',
          })}
        </span>
      </div>

      <div className="relative flex items-end gap-2 group/bubble">
        {/* Emoji Button (Left for Me) */}
        {isMe && (
          <button
            onClick={() => setShowEmojiPicker(!showEmojiPicker)}
            className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-kodo-secondary hover:text-kodo-cyan"
          >
            <Smile size={14} />
          </button>
        )}

        {/* Message Bubble */}
        <div
          className={cn(
            'px-4 py-2.5 rounded-2xl text-sm backdrop-blur-md shadow-lg transition-all',
            isMe
              ? 'bg-kodo-cyan/10 border border-kodo-cyan/20 text-white rounded-tr-sm shadow-[0_0_15px_rgba(102,252,241,0.05)]'
              : 'bg-white/5 border border-white/10 text-gray-100 rounded-tl-sm hover:bg-white/10',
          )}
        >
          {/* Attachments */}
          {message.attachments && message.attachments.length > 0 && (
            <div className="mb-2 flex flex-wrap gap-2">
              {message.attachments.map((att, i) => (
                <div
                  key={i}
                  className="max-w-full overflow-hidden rounded-lg border border-white/10 bg-black/20"
                >
                  {att.file_type.startsWith('image') ? (
                    <img
                      src={att.file_url}
                      alt={att.file_name}
                      className="max-h-60 object-contain cursor-pointer hover:opacity-90 transition-opacity"
                      onClick={() => window.open(att.file_url, '_blank')}
                    />
                  ) : (
                    <a
                      href={att.file_url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-3 p-3 hover:bg-white/5 transition-colors"
                    >
                      <div className="w-8 h-8 rounded bg-white/10 flex items-center justify-center">
                        <MoreHorizontal size={16} className="text-kodo-cyan" />
                      </div>
                      <span className="truncate max-w-[150px] text-xs font-mono">
                        {att.file_name}
                      </span>
                    </a>
                  )}
                </div>
              ))}
            </div>
          )}

          <p className="whitespace-pre-wrap break-words leading-relaxed">
            {message.content}
          </p>
        </div>

        {/* Emoji Button (Right for Others) */}
        {!isMe && (
          <button
            onClick={() => setShowEmojiPicker(!showEmojiPicker)}
            className="opacity-0 group-hover/bubble:opacity-100 p-1.5 hover:bg-white/10 rounded-full transition-all text-kodo-secondary hover:text-kodo-cyan"
          >
            <Smile size={14} />
          </button>
        )}

        {/* Emoji Picker Popover */}
        {showEmojiPicker && (
          <div
            className={cn(
              'absolute z-50 bottom-full mb-2',
              isMe ? 'right-0' : 'left-0',
            )}
          >
            <div
              className="fixed inset-0"
              onClick={() => setShowEmojiPicker(false)}
            />
            <div className="relative shadow-2xl rounded-xl overflow-hidden border border-white/10 animate-scaleIn">
              <Suspense
                fallback={
                  <div className="w-[300px] h-[400px] bg-kodo-ink flex items-center justify-center">
                    <LoadingSpinner size="sm" />
                  </div>
                }
              >
                <EmojiPicker
                  onEmojiClick={handleEmojiClick}
                  theme={Theme.DARK}
                  lazyLoadEmojis={true}
                  width={300}
                  height={400}
                />
              </Suspense>
            </div>
          </div>
        )}
      </div>

      {/* Footer (Reactions + Status) */}
      <div className="flex items-center justify-between w-full px-1 mt-1">
        <div className="flex flex-wrap gap-1">
          {message.reactions &&
            Object.entries(message.reactions).map(([emoji, users]) => (
              <button
                key={emoji}
                onClick={() => addReaction(message.id, emoji)}
                className={cn(
                  'flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10px] border transition-all animate-scaleIn',
                  users.includes(user?.id || '')
                    ? 'bg-kodo-cyan/20 border-kodo-cyan/40 text-kodo-cyan shadow-[0_0_10px_rgba(102,252,241,0.2)]'
                    : 'bg-white/5 border-white/10 text-kodo-secondary hover:bg-white/10 hover:border-white/20',
                )}
              >
                <span>{emoji}</span>
                {users.length > 1 && (
                  <span className="font-bold">{users.length}</span>
                )}
              </button>
            ))}
        </div>

        {isMe && (
          <div className="text-kodo-secondary/40 ml-auto">
            <CheckCheck size={12} />
          </div>
        )}
      </div>
    </div>
  );
};
