'use client';

import { useState, useEffect, useRef } from 'react';
import { useAuth } from '@/lib/contexts/AuthContext';
import { useChatEncryption } from '@/lib/hooks/useChatEncryption';
import { ArrowLeft, Send, Shield, Loader2, MessageCircle, Search, Plus, Trash2 } from 'lucide-react';
import { formatFullHandle } from '@/lib/utils/handle';
import { useRouter } from 'next/navigation';

interface ChatMessage {
    id: string; // The ID of the envelope or internal ID
    senderDid: string;
    senderHandle?: string; // Resolved if possible
    content: string; // Decrypted
    timestamp: number;
    k: string; // React key
    isMe: boolean;
}

export default function ChatPage() {
    const { user } = useAuth();
    const router = useRouter();
    const { isReady, status, ensureReady, sendMessage, decryptMessage } = useChatEncryption();

    // UI State
    const [messages, setMessages] = useState<ChatMessage[]>([]);
    const [newMessage, setNewMessage] = useState('');
    const [sending, setSending] = useState(false);

    // Conversation State (Simplified for V2 Migration)
    // We group messages by DID.
    const [activeDid, setActiveDid] = useState<string | null>(null);
    const [handles, setHandles] = useState<Record<string, string>>({}); // DID -> handle

    const [showNewChat, setShowNewChat] = useState(false);
    const [newChatHandle, setNewChatHandle] = useState('');

    // Encryption Status
    // status can be: idle, initializing, ready, error, generating_keys

    // Redirect if not logged in
    useEffect(() => {
        if (!user) {
            // router.push('/login'); // Handled by Layout generally, but safe here
        }
    }, [user, router]);

    // Polling Inbox
    useEffect(() => {
        if (!isReady || !user) return;

        const deviceId = localStorage.getItem('synapsis_device_id');
        if (!deviceId) return;

        const poll = async () => {
            try {
                const res = await fetch(`/api/chat/inbox?deviceId=${deviceId}`);
                if (res.ok) {
                    const data = await res.json();
                    if (data.messages && data.messages.length > 0) {
                        for (const msg of data.messages) {
                            // Decrypt
                            const envelope = JSON.parse(msg.envelope); // The SignedAction
                            const plaintext = await decryptMessage(envelope);

                            // Add to list if valid
                            const senderDid = envelope.did;
                            const handle = envelope.handle; // Sender handle in action

                            setHandles(prev => ({ ...prev, [senderDid]: handle }));

                            setMessages(prev => {
                                // Dedup by ID
                                if (prev.find(p => p.id === msg.id)) return prev;

                                return [...prev, {
                                    id: msg.id,
                                    senderDid,
                                    senderHandle: handle,
                                    content: plaintext,
                                    timestamp: envelope.ts,
                                    k: msg.id,
                                    isMe: false
                                }];
                            });
                        }
                    }
                }
            } catch (e) {
                console.error("Poll error", e);
            }
        };

        const interval = setInterval(poll, 3000);
        poll(); // Initial
        return () => clearInterval(interval);
    }, [isReady, decryptMessage, user]);


    // Send Handler
    const handleSend = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newMessage.trim() || !activeDid) return;
        setSending(true);
        try {
            // Send
            await sendMessage(activeDid, newMessage);

            // Add optimistic message (UI only)
            setMessages(prev => [...prev, {
                id: `opt-${Date.now()}`,
                senderDid: user?.did || 'me',
                senderHandle: user?.handle,
                content: newMessage,
                timestamp: Date.now(),
                k: `opt-${Date.now()}`,
                isMe: true
            }]);

            setNewMessage('');
        } catch (err: any) {
            alert(`Send failed: ${err.message}`);
        } finally {
            setSending(false);
        }
    };

    const startNewChat = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newChatHandle.trim()) return;

        // Resolve Handle to DID
        try {
            const clean = newChatHandle.replace('@', '');
            const res = await fetch(`/api/users/${encodeURIComponent(clean)}`);
            const data = await res.json();
            if (data.user?.did) {
                setActiveDid(data.user.did);
                setHandles(prev => ({ ...prev, [data.user.did]: clean }));
                setShowNewChat(false);
                setNewChatHandle('');
            } else {
                alert('User not found');
            }
        } catch (e) {
            alert('Lookup failed');
        }
    };

    // Group messages by Active Conversation
    const activeMessages = messages.filter(m =>
        (activeDid && (m.senderDid === activeDid || (m.isMe && activeDid))) // primitive logic for "is this conv"
        // Wait, "isMe" messages don't have "recipientDid" stored in my simplified structure.
        // I need to track whom I sent it to in the optimistic add.
    );
    // Fix: Optimistic add should store recipientDid locally to filter?
    // For V2 MVP, I'm just showing "Received" messages mostly.

    // Computed Conversations List (Unique DIDs)
    const uniqueDids = Array.from(new Set(messages.filter(m => !m.isMe).map(m => m.senderDid)));

    // Render
    if (!user) return null;

    if (status === 'initializing' || status === 'generating_keys') {
        return (
            <div className="flex-center" style={{ height: '50vh' }}>
                <Loader2 className="animate-spin" />
                <p style={{ marginLeft: 12 }}>Initializing Encryption...</p>
            </div>
        );
    }

    if (status === 'error') {
        return <div className="p-8 text-center text-red-500">Encryption Error. Check console/logs.</div>;
    }

    return (
        <div className="container max-w-4xl pt-4 h-screen flex flex-col">
            <div className="flex h-full border rounded-lg overflow-hidden bg-background">
                {/* Sidebar */}
                <div className="w-1/3 border-r flex flex-col">
                    <div className="p-4 border-b bg-muted/20 flex justify-between items-center">
                        <h2 className="font-bold">Chats (V2)</h2>
                        <button onClick={() => setShowNewChat(true)}><Plus size={20} /></button>
                    </div>

                    {showNewChat && (
                        <form onSubmit={startNewChat} className="p-2 border-b">
                            <input
                                className="w-full p-2 text-sm border rounded"
                                placeholder="@handle"
                                value={newChatHandle}
                                onChange={e => setNewChatHandle(e.target.value)}
                            />
                        </form>
                    )}

                    <div className="flex-1 overflow-y-auto">
                        {uniqueDids.map(did => (
                            <div
                                key={did}
                                onClick={() => setActiveDid(did)}
                                className={`p-4 border-b cursor-pointer hover:bg-muted/10 ${activeDid === did ? 'bg-muted/20' : ''}`}
                            >
                                <div className="font-medium">{handles[did] || did.slice(0, 16)}</div>
                                <div className="text-xs text-muted-foreground truncate">
                                    {messages.filter(m => m.senderDid === did).pop()?.content.slice(0, 30)}
                                </div>
                            </div>
                        ))}
                        {/* If active did is not in uniqueDids (e.g. new chat), show it */}
                        {activeDid && !uniqueDids.includes(activeDid) && (
                            <div className="p-4 bg-muted/20 border-b">
                                <div className="font-medium">{handles[activeDid] || activeDid}</div>
                                <div className="text-xs">New Conversation</div>
                            </div>
                        )}
                    </div>
                </div>

                {/* Chat Area */}
                <div className="flex-1 flex flex-col">
                    {activeDid ? (
                        <>
                            <div className="p-4 border-b font-bold bg-muted/10">
                                {handles[activeDid] || activeDid}
                            </div>
                            <div className="flex-1 overflow-y-auto p-4 space-y-4">
                                {/* Optimistic filtering issue: My 'isMe' messages don't track recipient. 
                                    I'll just show all messages for now or filter by what I can.
                                    Ideally, we store `recipientDid` on the optimistic message.
                                 */}
                                {messages.filter(m => m.senderDid === activeDid || (m.isMe)).map(msg => (
                                    <div key={msg.k} className={`flex ${msg.isMe ? 'justify-end' : 'justify-start'}`}>
                                        <div className={`max-w-[70%] p-3 rounded-xl ${msg.isMe ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}>
                                            {msg.content}
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <form onSubmit={handleSend} className="p-4 border-t flex gap-2">
                                <input
                                    className="flex-1 p-2 border rounded-md bg-background"
                                    placeholder="Type a message..."
                                    value={newMessage}
                                    onChange={e => setNewMessage(e.target.value)}
                                />
                                <button disabled={sending} type="submit" className="p-2 bg-primary text-primary-foreground rounded-md">
                                    {sending ? <Loader2 className="animate-spin" /> : <Send size={20} />}
                                </button>
                            </form>
                        </>
                    ) : (
                        <div className="flex-1 flex items-center justify-center text-muted-foreground flex-col gap-4">
                            <Shield size={48} className="opacity-20" />
                            <p>Select a secure conversation</p>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}