"use client";

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

export default function AdminLanguagesPage() {
    const [items, setItems] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [form, setForm] = useState({ name: "", proficiency: "Langue maternelle" });

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

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

    const handleAdd = async (e: React.FormEvent) => {
        e.preventDefault();
        setSaving(true);
        try {
            const res = await fetch("/api/languages", {
                method: "POST",
                body: JSON.stringify(form),
                headers: { "Content-Type": "application/json" }
            });
            if (res.ok) {
                setForm({ name: "", proficiency: "Langue maternelle" });
                fetchLanguages();
            }
        } catch { }
        finally { setSaving(false); }
    };

    const handleDelete = async (id: string) => {
        if (!confirm("Supprimer ?")) return;
        try {
            await fetch(`/api/languages/${id}`, { method: "DELETE" });
            fetchLanguages();
        } 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" }}>Langues</h1>
                <p style={{ color: "#64748b" }}>Gérez les langues que vous parlez.</p>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: "2rem" }}>
                <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: "1.25rem", padding: "1.5rem" }}>
                    <form onSubmit={handleAdd} style={{ display: "flex", flexWrap: "wrap", gap: "1rem", alignItems: "flex-end" }}>
                        <div style={{ flex: 1, minWidth: 200 }}>
                            <label style={labelStyle}>Langue *</label>
                            <input required value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} style={inputStyle} placeholder="ex: Français" />
                        </div>
                        <div style={{ flex: 1, minWidth: 200 }}>
                            <label style={labelStyle}>Niveau / Maîtrise</label>
                            <input value={form.proficiency} onChange={e => setForm({ ...form, proficiency: e.target.value })} style={inputStyle} placeholder="ex: Langue maternelle" />
                        </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" }}>
                    <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
                        {items.map(item => (
                            <div key={item.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0.8rem 1.25rem", background: "#f8fafc", border: "1px solid #f1f5f9", borderRadius: "0.75rem" }}>
                                <span style={{ fontWeight: 800 }}>{item.name}</span>
                                <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
                                    <span style={{ color: "#2563eb", fontWeight: 700, fontSize: "0.85rem" }}>{item.proficiency}</span>
                                    <button onClick={() => handleDelete(item.id)} style={{ color: "#ef4444", background: "none", border: "none", cursor: "pointer" }}><Trash2 size={16} /></button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}