'use client';

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

export default function AdminSkills() {
    const [skills, setSkills] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [modalOpen, setModalOpen] = useState(false);
    const [currentSkill, setCurrentSkill] = useState<any>(null);

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

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

    const handleDelete = async (id: number) => {
        if (window.confirm('Are you sure you want to delete this skill?')) {
            try {
                await api.delete(`/skills/${id}`);
                fetchSkills();
            } 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 (currentSkill) {
                await api.put(`/skills/${currentSkill.id}`, payload);
            } else {
                await api.post('/skills', payload);
            }
            setModalOpen(false);
            fetchSkills();
        } 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">Skill <span className="gradient-text">Sets</span></h1>
                    <p className="text-white/40 text-sm">Update your expertise and proficiency levels.</p>
                </div>
                <button
                    onClick={() => { setCurrentSkill(null); setModalOpen(true); }}
                    className="flex items-center gap-2 px-6 py-3 bg-pink-600 rounded-xl font-bold hover:shadow-[0_0_20px_rgba(236,72,153,0.4)] transition-all"
                >
                    <Plus size={20} /> Add Skill
                </button>
            </div>

            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {loading ? (
                    <div className="col-span-full py-20 text-center text-white/20 italic">Loading skills...</div>
                ) : skills.length === 0 ? (
                    <div className="col-span-full py-20 text-center text-white/20 italic">No skills added yet.</div>
                ) : skills.map((skill) => (
                    <div key={skill.id} className="glass p-8 rounded-3xl border-white/5 group relative overflow-hidden">
                        <div className="absolute top-4 right-4 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
                            <button onClick={() => { setCurrentSkill(skill); setModalOpen(true); }} className="p-2 hover:bg-white/5 rounded-lg text-white/40 hover:text-white"><Edit size={16} /></button>
                            <button onClick={() => handleDelete(skill.id)} className="p-2 hover:bg-red-500/10 rounded-lg text-red-500/40 hover:text-red-500"><Trash2 size={16} /></button>
                        </div>
                        <h3 className="text-xl font-bold mb-4 uppercase tracking-widest text-xs pr-10">{skill.name}</h3>
                        <div className="flex items-end justify-between mb-2">
                            <span className="text-[10px] uppercase tracking-widest text-white/40">Proficiency</span>
                            <span className="text-pink-400 font-black">{skill.percentage}%</span>
                        </div>
                        <div className="w-full h-1 bg-white/5 rounded-full overflow-hidden">
                            <div className="h-full bg-pink-500" style={{ width: `${skill.percentage}%` }}></div>
                        </div>
                    </div>
                ))}
            </div>

            {modalOpen && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/80 backdrop-blur-sm">
                    <div className="glass w-full max-w-md 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">{currentSkill ? 'Edit' : 'New'} <span className="gradient-text">Skill</span></h2>

                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div>
                                <label className="text-[10px] uppercase font-bold tracking-widest text-white/30 mb-2 block ml-2">Skill Name</label>
                                <input name="name" defaultValue={currentSkill?.name} 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">Percentage (0-100)</label>
                                <input name="percentage" type="number" min="0" max="100" defaultValue={currentSkill?.percentage || 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>

                            <button type="submit" className="w-full py-5 bg-pink-600 rounded-xl font-bold uppercase tracking-widest mt-4">
                                {currentSkill ? 'Update Skill' : 'Add Skill'}
                            </button>
                        </form>
                    </div>
                </div>
            )}
        </div>
    );
}