"use client";

import React, { useState, useEffect, useRef } from 'react';
import { Send, User as UserIcon, Building2, ChevronLeft, Loader2, MessageSquare, Archive, Inbox, ArchiveRestore, Flag } from 'lucide-react';
import { useUser } from '../UserProvider';
import { toast } from 'react-hot-toast';

interface Message {
    id: string;
    content: string;
    senderId: string;
    createdAt: string;
    sender: {
        name: string;
        email?: string;
        avatar?: string;
    };
}

interface Conversation {
    id: string;
    business: {
        id: string;
        name: string;
        logoUrl: string;
        ownerId: string;
    };
    participants: {
        isArchived: boolean;
        user: {
            id: string;
            name: string;
            email?: string;
            avatar?: string;
        };
    }[];
    messages: Message[];
}

interface DashboardMessagesProps {
    onMessagesRead?: () => void;
    initialConversationId?: string | null;
}

const DashboardMessages = ({ onMessagesRead, initialConversationId }: DashboardMessagesProps) => {
    const { user } = useUser();
    const [conversations, setConversations] = useState<Conversation[]>([]);
    const [selectedConversation, setSelectedConversation] = useState<Conversation | null>(null);
    const [messages, setMessages] = useState<Message[]>([]);
    const [newMessage, setNewMessage] = useState('');
    const [loading, setLoading] = useState(true);
    const [sending, setSending] = useState(false);
    const [isMobileListVisible, setIsMobileListVisible] = useState(true);
    const [showArchived, setShowArchived] = useState(false);
    const messagesEndRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        fetchConversations();
    }, []);

    useEffect(() => {
        if (selectedConversation) {
            fetchMessages(selectedConversation.id);
        }
    }, [selectedConversation]);

    useEffect(() => {
        scrollToBottom();
    }, [messages]);

    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    };

    const fetchConversations = async () => {
        try {
            const res = await fetch('/api/conversations', {
                headers: { 'x-user-id': user?.id || '' }
            });
            const data = await res.json();
            if (!data.error) {
                setConversations(data);
                
                // Handle initial auto-selection
                if (initialConversationId) {
                    const found = data.find((c: Conversation) => c.id === initialConversationId);
                    if (found) {
                        setSelectedConversation(found);
                        setIsMobileListVisible(false);
                    }
                }
            }
        } catch (error) {
            console.error('Error fetching conversations:', error);
        } finally {
            setLoading(false);
        }
    };

    const fetchMessages = async (id: string) => {
        try {
            const res = await fetch(`/api/conversations/${id}`, {
                headers: { 'x-user-id': user?.id || '' }
            });
            const data = await res.json();
            if (!data.error) {
                setMessages(data);
                // After fetching messages (which marks them as read in the backend),
                // notify the parent to refresh the unread count badge
                if (onMessagesRead) onMessagesRead();
            }
        } catch (error) {
            console.error('Error fetching messages:', error);
        }
    };

    const handleSendMessage = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newMessage.trim() || !selectedConversation || sending) return;

        setSending(true);
        try {
            const res = await fetch('/api/messages', {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'x-user-id': user?.id || ''
                },
                body: JSON.stringify({
                    conversationId: selectedConversation.id,
                    content: newMessage
                })
            });
            const data = await res.json();
            if (!data.error) {
                setMessages([...messages, {
                    ...data,
                    sender: { name: user?.name || '' }
                }]);
                setNewMessage('');
                // Refresh conversations list to update last message/order
                fetchConversations();
            } else {
                toast.error(data.error);
            }
        } catch (error) {
            toast.error('Erreur lors de l\'envoi');
        } finally {
            setSending(false);
        }
    };

    const handleToggleArchive = async (conversation: Conversation) => {
        const isCurrentlyArchived = conversation.participants.find(p => p.user.id === user?.id)?.isArchived;
        
        try {
            const res = await fetch(`/api/conversations/${conversation.id}/archive`, {
                method: 'PATCH',
                headers: { 
                    'Content-Type': 'application/json',
                    'x-user-id': user?.id || ''
                },
                body: JSON.stringify({ archived: !isCurrentlyArchived })
            });
            
            if (res.ok) {
                toast.success(isCurrentlyArchived ? 'Conversation désarchivée' : 'Conversation archivée');
                fetchConversations();
                // If we archived the currently selected conversation, close it
                if (!isCurrentlyArchived && selectedConversation?.id === conversation.id) {
                    setSelectedConversation(null);
                }
            }
        } catch (error) {
            toast.error('Erreur lors de l\'archivage');
        }
    };

    const handleReportMessage = async (messageId: string) => {
        if (!window.confirm('Voulez-vous vraiment signaler ce message aux administrateurs ?')) return;

        try {
            const res = await fetch(`/api/messages/${messageId}/report`, {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'x-user-id': user?.id || ''
                },
                body: JSON.stringify({ reason: "Signalement rapide" })
            });
            const data = await res.json();
            
            if (res.ok) {
                toast.success('Message signalé avec succès');
            } else {
                toast.error(data.error || 'Erreur lors du signalement');
            }
        } catch (error) {
            toast.error('Erreur réseau lors du signalement');
        }
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center h-full min-h-[400px]">
                <Loader2 className="w-8 h-8 animate-spin text-brand-600" />
            </div>
        );
    }

    return (
        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden h-[600px] flex">
            {/* 1. Conversations Sidebar */}
            <div className={`${isMobileListVisible ? 'flex' : 'hidden'} md:flex flex-col w-full md:w-80 border-r border-gray-200 h-full`}>
                <div className="p-4 border-b border-gray-200 bg-gray-50">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="font-bold text-gray-900 flex items-center gap-2">
                            <MessageSquare className="w-4 h-4 text-brand-600" />
                            Messages
                        </h3>
                    </div>
                    
                    <div className="flex bg-gray-200/50 p-1 rounded-lg">
                        <button 
                            onClick={() => setShowArchived(false)}
                            className={`flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-bold rounded-md transition-all ${!showArchived ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
                        >
                            <Inbox className="w-3.5 h-3.5" />
                            Actifs
                        </button>
                        <button 
                            onClick={() => setShowArchived(true)}
                            className={`flex-1 flex items-center justify-center gap-2 py-1.5 text-xs font-bold rounded-md transition-all ${showArchived ? 'bg-white text-brand-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}
                        >
                            <Archive className="w-3.5 h-3.5" />
                            Archivés
                        </button>
                    </div>
                </div>
                <div className="flex-1 overflow-y-auto">
                    {(() => {
                        const filtered = conversations.filter(conv => {
                            const myParticipant = conv.participants.find(p => p.user.id === user?.id);
                            return !!myParticipant?.isArchived === showArchived;
                        });

                        if (filtered.length === 0) {
                            return (
                                <div className="p-8 text-center text-gray-500 text-sm">
                                    <p>{showArchived ? 'Aucune conversation archivée.' : 'Aucune conversation pour le moment.'}</p>
                                </div>
                            );
                        }

                        return filtered.map((conv) => {
                            const lastMsg = conv.messages[0];
                            const isSelected = selectedConversation?.id === conv.id;
                            
                            // Determine display name: If current user is business owner, show customer name
                            const isOwner = user?.id === conv.business.ownerId;
                            const partner = conv.participants.find(p => p.user.id !== user?.id)?.user;
                            const displayName = isOwner ? partner?.name : conv.business.name;
                            const displayAvatar = isOwner ? partner?.avatar : conv.business.logoUrl;
                            
                            return (
                                <button
                                    key={conv.id}
                                    onClick={() => {
                                        setSelectedConversation(conv);
                                        setIsMobileListVisible(false);
                                    }}
                                    className={`w-full p-4 flex gap-3 hover:bg-gray-50 transition-colors text-left border-b border-gray-100 ${isSelected ? 'bg-brand-50' : ''}`}
                                >
                                    <div className="w-12 h-12 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0 border border-gray-200">
                                        <img src={displayAvatar || conv.business.logoUrl} alt={displayName} className="w-full h-full object-cover" />
                                    </div>
                                    <div className="flex-1 min-w-0">
                                        <div className="flex justify-between items-start">
                                            <h4 className="font-bold text-gray-900 truncate text-sm">
                                                {displayName}
                                                {isOwner && <span className="ml-2 text-[9px] bg-blue-100 text-blue-600 px-1 rounded">Client</span>}
                                            </h4>
                                            <span className="text-[10px] text-gray-400">
                                                {lastMsg ? new Date(lastMsg.createdAt).toLocaleDateString() : ''}
                                            </span>
                                        </div>
                                        <p className="text-xs text-gray-500 truncate mt-1">
                                            {lastMsg ? lastMsg.content : 'Pas de message'}
                                        </p>
                                    </div>
                                </button>
                            );
                        });
                    })()}
                </div>
            </div>

            {/* 2. Chat Window */}
            <div className={`${!isMobileListVisible ? 'flex' : 'hidden'} md:flex flex-col flex-1 h-full bg-slate-50 relative`}>
                {selectedConversation ? (
                    <>
                        {/* Chat Header */}
                        <div className="p-4 bg-white border-b border-gray-200 flex items-center gap-3">
                            <button onClick={() => setIsMobileListVisible(true)} className="md:hidden p-2 -ml-2 text-gray-500">
                                <ChevronLeft className="w-5 h-5" />
                            </button>
                            
                            {/* Determine header display */}
                            {(() => {
                                const isOwner = user?.id === selectedConversation.business.ownerId;
                                const partner = selectedConversation.participants.find(p => p.user.id !== user?.id)?.user;
                                const displayName = isOwner ? partner?.name : selectedConversation.business.name;
                                const displayAvatar = isOwner ? partner?.avatar : selectedConversation.business.logoUrl;
                                
                                return (
                                    <>
                                        <div className="w-10 h-10 rounded-lg bg-gray-100 overflow-hidden border border-gray-100">
                                            <img src={displayAvatar || selectedConversation.business.logoUrl} alt="" className="w-full h-full object-cover" />
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-gray-900 text-sm">{displayName} {isOwner && "(Client)"}</h4>
                                            <div className="flex items-center gap-1">
                                                <div className="w-2 h-2 rounded-full bg-green-500"></div>
                                                <span className="text-[11px] text-gray-500 italic">En ligne</span>
                                            </div>
                                        </div>
                                        
                                        <div className="ml-auto">
                                            <button 
                                                onClick={() => handleToggleArchive(selectedConversation)}
                                                className="p-2 text-gray-400 hover:text-brand-600 hover:bg-brand-50 rounded-full transition-all title-archive"
                                                title={selectedConversation.participants.find(p => p.user.id === user?.id)?.isArchived ? "Désarchiver" : "Archiver"}
                                            >
                                                {selectedConversation.participants.find(p => p.user.id === user?.id)?.isArchived 
                                                    ? <ArchiveRestore className="w-5 h-5" /> 
                                                    : <Archive className="w-5 h-5" />
                                                }
                                            </button>
                                        </div>
                                    </>
                                );
                            })()}
                        </div>

                        {/* Messages Area */}
                        <div className="flex-1 overflow-y-auto p-4 space-y-4">
                            {messages.map((msg) => {
                                // Triple-check identity: ID, Email, or Name
                                const isMe = user && (
                                    msg.senderId === user.id || 
                                    (msg.sender?.email && msg.sender.email === user.email) ||
                                    (msg.sender?.name && msg.sender.name === user.name)
                                );
                                
                                return (
                                    <div key={msg.id} className={`flex flex-col ${isMe ? 'items-end' : 'items-start'}`}>
                                        <span className={`text-[10px] mb-1 px-1 font-bold ${isMe ? 'text-brand-600' : 'text-gray-500'}`}>
                                            {isMe ? 'Vous' : (user?.id === selectedConversation.business.ownerId 
                                                ? (selectedConversation.participants.find(p => p.user.id !== user?.id)?.user.name || 'Client')
                                                : selectedConversation.business.name
                                            )}
                                        </span>
                                        <div className={`max-w-[80%] rounded-2xl p-3 text-sm shadow-xl border-2 transition-all ${
                                            isMe 
                                            ? 'bg-brand-600 text-white border-brand-500 rounded-tr-none ring-2 ring-brand-100' 
                                            : 'bg-white text-gray-800 border-gray-100 rounded-tl-none ring-2 ring-gray-50 shadow-gray-200/50'
                                        }`}>
                                            <p className="leading-relaxed font-medium">{msg.content}</p>
                                            <div className={`flex items-center gap-1 mt-1 ${isMe ? 'justify-end text-brand-100' : 'justify-start text-gray-400'}`}>
                                                <span className="text-[9px] font-bold">
                                                    {new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                                </span>
                                                {!isMe && (
                                                    <button 
                                                        onClick={() => handleReportMessage(msg.id)}
                                                        className="ml-2 hover:text-red-500 transition-colors p-0.5 rounded"
                                                        title="Signaler ce message"
                                                    >
                                                        <Flag className="w-2.5 h-2.5" />
                                                    </button>
                                                )}
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                            <div ref={messagesEndRef} />
                        </div>

                        {/* Input Area */}
                        <div className="p-4 bg-white border-t border-gray-200">
                            <form onSubmit={handleSendMessage} className="flex gap-2">
                                <input
                                    type="text"
                                    value={newMessage}
                                    onChange={(e) => setNewMessage(e.target.value)}
                                    placeholder="Écrivez votre message..."
                                    className="flex-1 bg-gray-100 border-none rounded-full px-4 py-2 text-sm focus:ring-2 focus:ring-brand-500 outline-none"
                                />
                                <button
                                    type="submit"
                                    disabled={!newMessage.trim() || sending}
                                    className="w-10 h-10 rounded-full bg-brand-600 text-white flex items-center justify-center hover:bg-brand-700 transition-colors disabled:opacity-50"
                                >
                                    {sending ? <Loader2 className="w-5 h-5 animate-spin" /> : <Send className="w-5 h-5" />}
                                </button>
                            </form>
                        </div>
                    </>
                ) : (
                    <div className="flex-1 flex flex-col items-center justify-center text-gray-400 p-8 text-center">
                        <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-sm mb-4">
                            <MessageSquare className="w-8 h-8 text-gray-200" />
                        </div>
                        <h4 className="font-bold text-gray-900 mb-2">Votre messagerie</h4>
                        <p className="text-sm max-w-xs">Sélectionnez une conversation pour commencer à échanger avec vos entrepreneurs préférés.</p>
                    </div>
                )}
            </div>
        </div>
    );
};

export default DashboardMessages;