"use client";

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

export default function AdminInterestsPage() {
    const [items, setItems] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [newName, setNewName] = useState("");

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

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

    const handleAdd = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!newName) return;
        setSaving(true);
        try {
            const res = await fetch("/api/interests", {
                method: "POST",
                body: JSON.stringify({ name: newName }),
                headers: { "Content-Type": "application/json" }
            });
            if (res.ok) {
                setNewName("");
                fetchInterests();
            }
        } catch { }
        finally { setSaving(false); }
    };

    const handleDelete = async (id: string) => {
        try {
            await fetch(`/api/interests/${id}`, { method: "DELETE" });
            fetchInterests();
        } catch { }
    };

    const inputStyle = { width: "100%", padding: "0.75rem", border: "1.5px solid #e2e8f0", borderRadius: "0.875rem", background: "#f8fafc", fontSize: "0.9rem", outline: "none" };

    return (
        <div>
            <div style={{ marginBottom: "2.5rem" }}>
                <h1 style={{ fontFamily: "Outfit", fontSize: "2rem", fontWeight: 900, color: "#0f172a" }}>Centres d'intérêt</h1>
                <p style={{ color: "#64748b" }}>Ajoutez vos passions et hobbies.</p>
            </div>

            <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: "1.25rem", padding: "1.5rem", marginBottom: "2rem" }}>
                <form onSubmit={handleAdd} style={{ display: "flex", gap: "1rem" }}>
                    <input required value={newName} onChange={e => setNewName(e.target.value)} style={inputStyle} placeholder="ex: 🤖 Robotique Éducative" />
                    <button type="submit" disabled={saving} style={{ padding: "0 1.5rem", background: "#2563eb", color: "#fff", border: "none", borderRadius: "0.75rem", 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={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
                {loading ? <Loader2 size={32} className="animate-spin" /> : items.map(item => (
                    <div key={item.id} style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.6rem 1.25rem", background: "rgba(37,99,235,0.05)", border: "1px solid rgba(37,99,235,0.1)", borderRadius: "50px", fontWeight: 700, color: "#2563eb" }}>
                        {item.name}
                        <button onClick={() => handleDelete(item.id)} style={{ padding: 0, background: "none", border: "none", cursor: "pointer", color: "#ef4444", display: "flex", alignItems: "center" }}><Trash2 size={14} /></button>
                    </div>
                ))}
            </div>
        </div>
    );
}