"use client";

import { useState, useEffect } from "react";
import { Plus, Trash2, Loader2, Code, Save } from "lucide-react";

export default function AdminSkillsPage() {
    const [items, setItems] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [form, setForm] = useState({ name: "", level: 80, category: "Hardware" });

    const fetchSkills = async () => {
        try {
            const res = await fetch("/api/skills");
            const data = await res.json();
            setItems(data);
        } catch { }
        finally { setLoading(false); }
    };

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

    const handleAdd = async (e: React.FormEvent) => {
        e.preventDefault();
        setSaving(true);
        try {
            const res = await fetch("/api/skills", {
                method: "POST",
                body: JSON.stringify({ ...form, level: Number(form.level) }),
                headers: { "Content-Type": "application/json" }
            });
            if (res.ok) {
                setForm({ name: "", level: 80, category: "Hardware" });
                fetchSkills();
            }
        } catch { }
        finally { setSaving(false); }
    };

    const handleDelete = async (id: string) => {
        if (!confirm("Supprimer ?")) return;
        try {
            await fetch(`/api/skills/${id}`, { method: "DELETE" });
            fetchSkills();
        } catch { }
    };

    const inputStyle = { width: "100%", padding: "0.75rem", border: "1.5px solid #e2e8f0", borderRadius: "0.5rem", background: "#f8fafc", fontSize: "0.9rem", outline: "none" };
    const labelStyle = { display: "block", marginBottom: "0.3rem", fontSize: "0.7rem", fontWeight: 800, textTransform: "uppercase" as const, color: "#64748b" };

    return (
        <div>
            <div style={{ marginBottom: "2.5rem" }}>
                <h1 style={{ fontFamily: "Outfit", fontSize: "2rem", fontWeight: 900, color: "#0f172a" }}>Compétences</h1>
                <p style={{ color: "#64748b" }}>Gérez votre expertise technique.</p>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "2rem" }}>
                <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: "1.25rem", padding: "1.5rem" }}>
                    <h2 style={{ fontFamily: "Outfit", fontWeight: 900, fontSize: "1.1rem", marginBottom: "1.5rem" }}>Ajouter une compétence</h2>
                    <form onSubmit={handleAdd} style={{ display: "flex", flexWrap: "wrap", gap: "1rem", alignItems: "flex-end" }}>
                        <div style={{ flex: 2, minWidth: 200 }}>
                            <label style={labelStyle}>Nom *</label>
                            <input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} style={inputStyle} placeholder="ex: ESP32" />
                        </div>
                        <div style={{ flex: 1, minWidth: 100 }}>
                            <label style={labelStyle}>Niveau (%)</label>
                            <input type="number" min="0" max="100" value={form.level} onChange={e => setForm({ ...form, level: parseInt(e.target.value) })} style={inputStyle} />
                        </div>
                        <div style={{ flex: 1, minWidth: 150 }}>
                            <label style={labelStyle}>Catégorie</label>
                            <select value={form.category} onChange={e => setForm({ ...form, category: e.target.value })} style={inputStyle}>
                                <option value="Hardware">Hardware</option>
                                <option value="Software">Software</option>
                                <option value="Autre">Autre</option>
                            </select>
                        </div>
                        <button type="submit" disabled={saving} style={{ height: "3rem", padding: "0 1.5rem", background: "#2563eb", color: "#fff", border: "none", borderRadius: "0.5rem", fontWeight: 900, cursor: "pointer", display: "flex", alignItems: "center", gap: "0.5rem" }}>
                            {saving ? <Loader2 size={18} className="animate-spin" /> : <><Plus size={18} /> Ajouter</>}
                        </button>
                    </form>
                </div>

                <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: "1.25rem", padding: "1.5rem" }}>
                    {loading ? <Loader2 size={32} className="animate-spin" /> : (
                        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1rem" }}>
                            {items.map(item => (
                                <div key={item.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1rem", border: "1px solid #f1f5f9", borderRadius: "0.75rem", background: "#f8fafc" }}>
                                    <div style={{ flex: 1 }}>
                                        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "0.4rem" }}>
                                            <span style={{ fontWeight: 800 }}>{item.name}</span>
                                            <span style={{ fontSize: "0.75rem", fontWeight: 700, color: "#2563eb" }}>{item.level}%</span>
                                        </div>
                                        <div style={{ height: 6, background: "#e2e8f0", borderRadius: 10, overflow: "hidden" }}>
                                            <div style={{ height: "100%", background: "#2563eb", width: `${item.level}%` }} />
                                        </div>
                                    </div>
                                    <button onClick={() => handleDelete(item.id)} style={{ marginLeft: "1rem", color: "#ef4444", background: "none", border: "none", cursor: "pointer" }}><Trash2 size={18} /></button>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}