'use client';

import { useEffect, useState } from 'react';
import api from '@/utils/api';
import { Plus, Trash2, Edit, Save, X } from 'lucide-react';
import { motion } from 'framer-motion';

export default function AdminBlogs() {
    const [blogs, setBlogs] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [currentBlog, setCurrentBlog] = useState<any>(null);

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

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

    const handleDelete = async (id: number) => {
        if (window.confirm('Are you sure you want to delete this blog post?')) {
            try {
                await api.delete(`/blogs/${id}`);
                fetchBlogs();
            } catch (err) {
                console.error(err);
            }
        }
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        const formData = new FormData(e.target as HTMLFormElement);
        const payload = Object.fromEntries(formData);

        try {
            if (currentBlog) {
                await api.put(`/blogs/${currentBlog.id}`, payload);
            } else {
                await api.post('/blogs', payload);
            }
            setModalOpen(false);
            fetchBlogs();
        } catch (err) {
            console.error(err);
        }
    };

    return (
        <div className="space-y-8">
            <div className="flex justify-between items-center">
                <div>
                    <h1 className="text-3xl font-bold uppercase tracking-tighter">Blog <span className="gradient-text">Management</span></h1>
                    <p className="text-white/40 text-sm">Write and manage your insights and articles.</p>
                </div>
                <button
                    onClick={() => { setCurrentBlog(null); setModalOpen(true); }}
                    className="flex items-center gap-2 px-6 py-3 bg-purple-600 rounded-xl font-bold hover:shadow-[0_0_20px_rgba(147,51,234,0.4)] transition-all"
                >
                    <Plus size={20} /> New Post
                </button>
            </div>

            <div className="glass rounded-[2rem] overflow-hidden border-white/5">
                <table className="w-full text-left">
                    <thead className="bg-white/5 text-xs uppercase tracking-widest text-white/40">
                        <tr>
                            <th className="px-8 py-5">Title</th>
                            <th className="px-8 py-5">Slug</th>
                            <th className="px-8 py-5">Status</th>
                            <th className="px-8 py-5 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-white/5">
                        {loading ? (
                            <tr><td colSpan={4} className="px-8 py-20 text-center text-white/20">Loading blogs...</td></tr>
                        ) : blogs.length === 0 ? (
                            <tr><td colSpan={4} className="px-8 py-20 text-center text-white/20">No blog posts found.</td></tr>
                        ) : blogs.map((blog) => (
                            <tr key={blog.id} className="hover:bg-white/[0.02] transition-colors">
                                <td className="px-8 py-5 font-bold">{blog.title}</td>
                                <td className="px-8 py-5 text-white/40 text-xs font-mono">{blog.slug}</td>
                                <td className="px-8 py-5">
                                    <span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${blog.status === 'published' ? 'bg-green-500/10 text-green-500 border border-green-500/20' : 'bg-orange-500/10 text-orange-500 border border-orange-500/20'}`}>
                                        {blog.status}
                                    </span>
                                </td>
                                <td className="px-8 py-5 text-right space-x-2">
                                    <button onClick={() => { setCurrentBlog(blog); setModalOpen(true); }} className="p-2 hover:bg-white/5 rounded-lg text-white/60 hover:text-white transition-all"><Edit size={18} /></button>
                                    <button onClick={() => handleDelete(blog.id)} className="p-2 hover:bg-red-500/10 rounded-lg text-red-500/60 hover:text-red-500 transition-all"><Trash2 size={18} /></button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

            {modalOpen && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/80 backdrop-blur-sm">
                    <motion.div initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="glass w-full max-w-4xl p-10 rounded-[2.5rem] relative max-h-[90vh] overflow-y-auto">
                        <button onClick={() => setModalOpen(false)} className="absolute top-8 right-8 text-white/20 hover:text-white"><X size={24} /></button>
                        <h2 className="text-2xl font-bold mb-8 uppercase tracking-tighter">{currentBlog ? 'Edit' : 'New'} <span className="gradient-text">Post</span></h2>

                        <form onSubmit={handleSubmit} className="grid grid-cols-2 gap-6">
                            <div className="col-span-2">
                                <label className="text-[10px] uppercase font-bold tracking-widest text-white/30 mb-2 block ml-2">Title</label>
                                <input name="title" defaultValue={currentBlog?.title} className="w-full bg-white/5 border border-white/10 rounded-xl px-6 py-4 focus:neon-border outline-none transition-all" required />
                            </div>
                            <div>
                                <label className="text-[10px] uppercase font-bold tracking-widest text-white/30 mb-2 block ml-2">Slug</label>
                                <input name="slug" defaultValue={currentBlog?.slug} className="w-full bg-white/5 border border-white/10 rounded-xl px-6 py-4 focus:neon-border outline-none transition-all" required />
                            </div>
                            <div>
                                <label className="text-[10px] uppercase font-bold tracking-widest text-white/30 mb-2 block ml-2">Status</label>
                                <select name="status" defaultValue={currentBlog?.status || 'draft'} className="w-full bg-white/10 border border-white/10 rounded-xl px-6 py-4 focus:neon-border outline-none transition-all appearance-none cursor-pointer">
                                    <option value="draft" className="bg-black text-white">Draft</option>
                                    <option value="published" className="bg-black text-white">Published</option>
                                </select>
                            </div>
                            <div className="col-span-2">
                                <label className="text-[10px] uppercase font-bold tracking-widest text-white/30 mb-2 block ml-2">Content (Markdown supported)</label>
                                <textarea name="content" defaultValue={currentBlog?.content} rows={10} className="w-full bg-white/5 border border-white/10 rounded-xl px-6 py-4 focus:neon-border outline-none transition-all" required></textarea>
                            </div>

                            <button type="submit" className="col-span-2 py-5 bg-purple-600 rounded-xl font-bold uppercase tracking-widest mt-4">
                                {currentBlog ? 'Save Changes' : 'Publish Post'}
                            </button>
                        </form>
                    </motion.div>
                </div>
            )}
        </div>
    );
}