'use client';

import { useEffect, useState } from 'react';
import api from '@/utils/api';
import { Mail, MailOpen, Trash2, Eye } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

export default function AdminMessages() {
    const [messages, setMessages] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [selectedMessage, setSelectedMessage] = useState<any>(null);

    const fetchMessages = async () => {
        try {
            const { data } = await api.get('/messages');
            setMessages(data);
        } catch (err) {
            console.error(err);
        } finally {
            setLoading(false);
        }
    };

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

    const handleRead = async (id: number) => {
        try {
            await api.put(`/messages/${id}/read`);
            fetchMessages();
        } catch (err) {
            console.error(err);
        }
    };

    const openMessage = (msg: any) => {
        setSelectedMessage(msg);
        if (!msg.isRead) {
            handleRead(msg.id);
        }
    };

    return (
        <div className="space-y-8">
            <div>
                <h1 className="text-3xl font-bold uppercase tracking-tighter">Inbound <span className="gradient-text">Messages</span></h1>
                <p className="text-white/40 text-sm">Review and respond to inquiries from your portfolio.</p>
            </div>

            <div className="glass rounded-[2rem] overflow-hidden border-white/5">
                <div className="divide-y divide-white/5">
                    {loading ? (
                        <div className="py-20 text-center text-white/20 italic">Loading messages...</div>
                    ) : messages.length === 0 ? (
                        <div className="py-20 text-center text-white/20 italic">No messages found.</div>
                    ) : messages.map((msg) => (
                        <div
                            key={msg.id}
                            onClick={() => openMessage(msg)}
                            className={`flex items-center gap-6 px-8 py-6 cursor-pointer hover:bg-white/[0.02] transition-all ${!msg.isRead ? 'border-l-4 border-blue-500 bg-blue-500/5' : 'border-l-4 border-transparent'}`}
                        >
                            <div className={`p-3 rounded-full ${!msg.isRead ? 'bg-blue-500 text-white' : 'bg-white/5 text-white/20'}`}>
                                {msg.isRead ? <MailOpen size={20} /> : <Mail size={20} />}
                            </div>
                            <div className="flex-1">
                                <div className="flex justify-between items-start mb-1">
                                    <h3 className={`text-lg ${!msg.isRead ? 'font-black' : 'font-medium text-white/60'}`}>{msg.name}</h3>
                                    <span className="text-[10px] uppercase tracking-widest text-white/20 font-bold">{new Date(msg.createdAt).toLocaleDateString()}</span>
                                </div>
                                <p className="text-sm text-white/40 line-clamp-1">{msg.subject || 'No Subject'} — {msg.message}</p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            <AnimatePresence>
                {selectedMessage && (
                    <div className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/90 backdrop-blur-sm">
                        <motion.div
                            initial={{ opacity: 0, scale: 0.9, y: 20 }}
                            animate={{ opacity: 1, scale: 1, y: 0 }}
                            exit={{ opacity: 0, scale: 0.9, y: 20 }}
                            className="glass w-full max-w-2xl p-12 rounded-[3rem] relative"
                        >
                            <button onClick={() => setSelectedMessage(null)} className="absolute top-10 right-10 text-white/20 hover:text-white transition-colors">
                                <Trash2 size={24} />
                            </button>

                            <div className="mb-10">
                                <div className="text-[10px] uppercase tracking-[0.3em] text-blue-400 font-black mb-4">Message Details</div>
                                <h2 className="text-3xl font-black mb-2">{selectedMessage.name}</h2>
                                <p className="text-blue-400/60 font-mono text-sm">{selectedMessage.email}</p>
                            </div>

                            <div className="space-y-6">
                                <div>
                                    <label className="text-[10px] uppercase tracking-widest text-white/20 font-bold mb-2 block">Subject</label>
                                    <p className="text-xl font-bold">{selectedMessage.subject || 'N/A'}</p>
                                </div>
                                <div>
                                    <label className="text-[10px] uppercase tracking-widest text-white/20 font-bold mb-2 block">Message Body</label>
                                    <div className="bg-white/5 p-8 rounded-2xl text-white/70 leading-relaxed italic text-lg">
                                        &quot;{selectedMessage.message}&quot;
                                    </div>
                                </div>
                            </div>

                            <div className="mt-12 flex gap-4">
                                <a href={`mailto:${selectedMessage.email}`} className="flex-1 py-5 bg-white text-black text-center rounded-2xl font-black uppercase tracking-widest hover:scale-[1.02] transition-all">Reply via Email</a>
                                <button onClick={() => setSelectedMessage(null)} className="px-10 py-5 glass rounded-2xl font-black uppercase tracking-widest text-xs">Close</button>
                            </div>
                        </motion.div>
                    </div>
                )}
            </AnimatePresence>
        </div>
    );
}