"use client";

import { useState, useEffect } from "react";
import { Mail, Trash2, Loader2, UserCheck, Calendar } from "lucide-react";

export default function AdminNewsletterPage() {
    const [subscribers, setSubscribers] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [actionId, setActionId] = useState<string | null>(null);

    const fetchSubscribers = async () => {
        try {
            const res = await fetch("/api/admin/subscribers");
            const data = await res.json();
            setSubscribers(Array.isArray(data) ? data : []);
        } catch { }
        finally { setLoading(false); }
    };

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

    const handleDelete = async (id: string) => {
        if (!confirm("Supprimer cet abonné ?")) return;
        setActionId(id);
        try {
            const res = await fetch(`/api/admin/subscribers/${id}`, { method: "DELETE" });
            if (res.ok) setSubscribers(prev => prev.filter(s => s.id !== id));
        } catch { }
        finally { setActionId(null); }
    };

    return (
        <div>
            <div style={{ marginBottom: "2.5rem" }}>
                <h1 style={{ fontFamily: "Outfit", fontSize: "2rem", fontWeight: 900, color: "#0f172a" }}>Newsletter Subscribers</h1>
                <p style={{ color: "#64748b" }}>{subscribers.length} abonnés à la newsletter.</p>
            </div>

            <div style={{ background: "#fff", border: "1px solid #e2e8f0", borderRadius: "1.25rem", overflow: "hidden" }}>
                {loading ? (
                    <div style={{ display: "flex", justifyContent: "center", padding: "4rem" }}><Loader2 size={32} className="animate-spin" style={{ color: "#2563eb" }} /></div>
                ) : subscribers.length === 0 ? (
                    <div style={{ padding: "4rem", textAlign: "center" }}>
                        <Mail size={40} style={{ color: "#cbd5e1", margin: "0 auto 1rem" }} />
                        <p style={{ fontWeight: 700, color: "#64748b" }}>Aucun abonné pour le moment.</p>
                    </div>
                ) : (
                    <table style={{ width: "100%", borderCollapse: "collapse", textAlign: "left" }}>
                        <thead>
                            <tr style={{ background: "#f8fafc", borderBottom: "1px solid #e2e8f0" }}>
                                <th style={{ padding: "1rem 1.5rem", fontSize: "0.75rem", fontWeight: 900, textTransform: "uppercase", color: "#64748b" }}>Email</th>
                                <th style={{ padding: "1rem 1.5rem", fontSize: "0.75rem", fontWeight: 900, textTransform: "uppercase", color: "#64748b" }}>Date d'inscription</th>
                                <th style={{ padding: "1rem 1.5rem", fontSize: "0.75rem", fontWeight: 900, textTransform: "uppercase", color: "#64748b", textAlign: "right" }}>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {subscribers.map(sub => (
                                <tr key={sub.id} style={{ borderBottom: "1px solid #f1f5f9" }}>
                                    <td style={{ padding: "1.25rem 1.5rem" }}>
                                        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
                                            <div style={{ width: 32, height: 32, borderRadius: "50%", background: "rgba(37,99,235,0.1)", color: "#2563eb", display: "flex", alignItems: "center", justifyContent: "center" }}><Mail size={16} /></div>
                                            <span style={{ fontWeight: 700, color: "#0f172a" }}>{sub.email}</span>
                                        </div>
                                    </td>
                                    <td style={{ padding: "1.25rem 1.5rem" }}>
                                        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", color: "#64748b", fontSize: "0.9rem" }}>
                                            <Calendar size={14} /> {new Date(sub.createdAt).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" })}
                                        </div>
                                    </td>
                                    <td style={{ padding: "1.25rem 1.5rem", textAlign: "right" }}>
                                        <button onClick={() => handleDelete(sub.id)} disabled={actionId === sub.id} style={{ width: 34, height: 34, borderRadius: 8, background: "rgba(239,68,68,0.06)", border: "none", color: "#ef4444", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", marginLeft: "auto" }}><Trash2 size={15} /></button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                )}
            </div>
        </div>
    );
}