import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { 
    getAuth, 
    onAuthStateChanged, 
    createUserWithEmailAndPassword, 
    signInWithEmailAndPassword, 
    signOut 
} from 'firebase/auth';
import { 
    getFirestore, 
    collection, 
    addDoc, 
    query, 
    onSnapshot, 
    serverTimestamp 
} from 'firebase/firestore';

// --- Firebase Configuration ---
// NOTE: This should be replaced with your actual Firebase config object
const firebaseConfig = {
    apiKey: "AIzaSyDB9JWxknIUdoH2-BN7wjnprljjEjiJnX0",
    authDomain: "mispeld-bb947.firebaseapp.com",
    projectId: "mispeld-bb947",
    storageBucket: "mispeld-bb947.appspot.com",
    messagingSenderId: "183875526340",
    appId: "1:183875526340:web:62c8c83cc3ca0bfd73b391",
    measurementId: "G-KVQNM4FDSG"
};

// --- Firebase Initialization ---
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// --- Helper Functions ---
const getInitials = (email) => {
    if (!email) return '?';
    const parts = email.split('@')[0].replace(/[^a-zA-Z]/g, ' ').split(' ');
    if (parts.length > 1) {
        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
    }
    return email.substring(0, 2).toUpperCase();
};

// --- React Components ---

const Message = ({ msg, currentUser, onReply }) => {
    const isOwn = msg.sender.uid === currentUser.uid;

    return (
        <div className={`message ${isOwn ? 'message-own' : ''}`}>
            <div className="avatar avatar-sm">{getInitials(msg.sender.email)}</div>
            <div className="message-content">
                {msg.replyTo && (
                    <div className="reply-indicator">
                        <strong>{msg.replyTo.senderEmail === currentUser.email ? 'You' : msg.replyTo.senderEmail}</strong>
                        <p>{msg.replyTo.text}</p>
                    </div>
                )}
                <div className={`message-bubble ${isOwn ? 'message-bubble-own' : 'message-bubble-other'}`}>
                    {msg.text}
                </div>
                <div className="message-info">
                    <span>{isOwn ? 'You' : msg.sender.email}</span> &bull; <span>{msg.timestamp ? new Date(msg.timestamp.toMillis()).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '...'}</span>
                </div>
            </div>
            {!isOwn && (
                <button className="reply-button" onClick={() => onReply(msg)}>
                    <svg className="icon" style={{ width: '1rem', height: '1rem' }} viewBox="0 0 24 24"><path fill="currentColor" d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"></path></svg>
                </button>
            )}
        </div>
    );
};

const ChatInterface = ({ user, onLogout }) => {
    const [messages, setMessages] = useState([]);
    const [newMessage, setNewMessage] = useState('');
    const [replyingTo, setReplyingTo] = useState(null);
    const messagesEndRef = useRef(null);

    useEffect(() => {
        const messagesRef = collection(db, `public_chats/${firebaseConfig.appId}/messages`);
        const q = query(messagesRef);

        const unsubscribe = onSnapshot(q, (snapshot) => {
            const fetchedMessages = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            fetchedMessages.sort((a, b) => (a.timestamp?.toMillis() || 0) - (b.timestamp?.toMillis() || 0));
            setMessages(fetchedMessages);
        });

        return () => unsubscribe();
    }, []);

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

    const handleSendMessage = async (e) => {
        e.preventDefault();
        const text = newMessage.trim();
        if (!text) return;

        const messagesRef = collection(db, `public_chats/${firebaseConfig.appId}/messages`);
        const messageData = {
            text,
            timestamp: serverTimestamp(),
            sender: { uid: user.uid, email: user.email },
            ...(replyingTo && { 
                replyTo: {
                    id: replyingTo.id,
                    text: replyingTo.text,
                    senderEmail: replyingTo.sender.email
                }
            })
        };

        try {
            await addDoc(messagesRef, messageData);
            setNewMessage('');
            setReplyingTo(null);
        } catch (error) {
            console.error("Error sending message:", error);
        }
    };

    return (
        <div className="app-shell">
            <header className="chat-header">
                <div className="avatar">{getInitials(user.email)}</div>
                <div>
                    <h2 style={{ fontWeight: 500 }}>{user.email}</h2>
                    <p style={{ fontSize: '0.875rem', color: 'var(--muted-foreground)' }}>Online</p>
                </div>
                <button onClick={onLogout} style={{ marginLeft: 'auto', background: 'var(--secondary)', color: 'var(--secondary-foreground)', border: 'none', padding: '0.5rem 1rem', borderRadius: 'var(--radius)', cursor: 'pointer' }}>Logout</button>
            </header>

            <main className="messages-container">
                {messages.map(msg => (
                    <Message key={msg.id} msg={msg} currentUser={user} onReply={setReplyingTo} />
                ))}
                <div ref={messagesEndRef} />
            </main>

            <footer className="message-input-container">
                {replyingTo && (
                    <div className="reply-preview">
                        <div className="reply-preview-content">
                            <div style={{ fontSize: '0.75rem', color: 'var(--muted-foreground)', marginBottom: '0.125rem' }}>
                                Replying to <strong>{replyingTo.sender.email}</strong>
                            </div>
                            <div className="truncate">{replyingTo.text}</div>
                        </div>
                        <button className="close-button" onClick={() => setReplyingTo(null)}>
                            <svg className="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
                        </button>
                    </div>
                )}
                <form className="message-input-form" onSubmit={handleSendMessage}>
                    <input
                        type="text"
                        className="message-input"
                        placeholder="Type a message..."
                        value={newMessage}
                        onChange={(e) => setNewMessage(e.target.value)}
                        autoComplete="off"
                        required
                    />
                    <button type="submit" className="send-button" disabled={!newMessage.trim()}>
                        <svg className="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
                    </button>
                </form>
            </footer>
        </div>
    );
};

const LoginScreen = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const handleLogin = async (e) => {
        e.preventDefault();
        setError('');
        try {
            await signInWithEmailAndPassword(auth, email, password);
        } catch (err) {
            setError(err.message);
        }
    };

    const handleSignUp = async () => {
        setError('');
        try {
            await createUserWithEmailAndPassword(auth, email, password);
        } catch (err) {
            setError(err.message);
        }
    };

    return (
        <div id="login-container">
            <div className="login-card">
                <h2 style={{ fontSize: '1.5rem', fontWeight: 600, textAlign: 'center', marginBottom: '1.5rem' }}>Chat Login</h2>
                {error && <div id="auth-error" style={{ color: '#ef4444', textAlign: 'center', marginBottom: '1rem', fontSize: '0.875rem' }}>{error}</div>}
                <form onSubmit={handleLogin}>
                    <input className="login-input" type="email" placeholder="email@example.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
                    <input className="login-input" type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} required />
                    <div style={{ display: 'flex', gap: '0.75rem', marginTop: '1rem' }}>
                        <button className="login-button login-button-primary" type="submit">Sign In</button>
                        <button className="login-button login-button-secondary" type="button" onClick={handleSignUp}>Sign Up</button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default function App() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
            setUser(currentUser);
        });
        return () => unsubscribe();
    }, []);

    const handleLogout = () => {
        signOut(auth);
    };

    return user ? <ChatInterface user={user} onLogout={handleLogout} /> : <LoginScreen />;
}