'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 AdminProjects() {
    const [projects, setProjects] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [currentProject, setCurrentProject] = useState<any>(null);

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

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

    const handleDelete = async (id: number) => {
        if (window.confirm('Are you sure you want to delete this project?')) {
            try {
                await api.delete(`/projects/${id}`);
                fetchProjects();
            } 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 (currentProject) {
                await api.put(`/projects/${currentProject.id}`, payload);
            } else {
                await api.post('/projects', payload);
            }
            setModalOpen(false);
            fetchProjects();
        } 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">Manage <span className="gradient-text">Projects</span></h1>
                    <p className="text-white/40 text-sm">Create, edit, and organize your portfolio works.</p>
                </div>
                <button
                    onClick={() => { setCurrentProject(null); setModalOpen(true); }}
                    className="flex items-center gap-2 px-6 py-3 bg-blue-600 rounded-xl font-bold hover:shadow-[0_0_20px_rgba(37,99,235,0.4)] transition-all"
                >
                    <Plus size={20} /> Add Project
                </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">Category</th>
                            <th className="px-8 py-5">Technologies</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 projects...</td></tr>
                        ) : projects.length === 0 ? (
                            <tr><td colSpan={4} className="px-8 py-20 text-center text-white/20">No projects found.</td></tr>
                        ) : projects.map((project) => (
                            <tr key={project.id} className="hover:bg-white/[0.02] transition-colors">
                                <td className="px-8 py-5 font-bold">{project.title}</td>
                                <td className="px-8 py-5 text-white/60">{project.category}</td>
                                <td className="px-8 py-5">
                                    <div className="flex gap-2">
                                        {project.technologies.split(',').map((t: string) => (
                                            <span key={t} className="text-[10px] px-2 py-1 glass rounded-md text-blue-400 font-bold">{t.trim()}</span>
                                        ))}
                                    </div>
                                </td>
                                <td className="px-8 py-5 text-right space-x-2">
                                    <button onClick={() => { setCurrentProject(project); 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(project.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-2xl p-10 rounded-[2.5rem] relative">
                        <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">{currentProject ? 'Edit' : 'New'} <span className="gradient-text">Project</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={currentProject?.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">Category</label>
                                <input name="category" defaultValue={currentProject?.category} 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">Order</label>
                                <input name="order" type="number" defaultValue={currentProject?.order || 0} 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 className="col-span-2">
                                <label className="text-[10px] uppercase font-bold tracking-widest text-white/30 mb-2 block ml-2">Technologies (comma separated)</label>
                                <input name="technologies" defaultValue={currentProject?.technologies} className="w-full bg-white/5 border border-white/10 rounded-xl px-6 py-4 focus:neon-border outline-none transition-all" placeholder="React, Next.js, Tailwind..." required />
                            </div>
                            <div className="col-span-2">
                                <label className="text-[10px] uppercase font-bold tracking-widest text-white/30 mb-2 block ml-2">Description</label>
                                <textarea name="description" defaultValue={currentProject?.description} rows={4} 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-blue-600 rounded-xl font-bold uppercase tracking-widest mt-4">
                                {currentProject ? 'Save Changes' : 'Create Project'}
                            </button>
                        </form>
                    </motion.div>
                </div>
            )}
        </div>
    );
}