"use client";

import { useEffect, useMemo, useState } from "react";
import { MagnifyingGlass, X, Users, ShoppingBag, CheckCircle, XCircle } from "@phosphor-icons/react";

interface User {
  id:             number;
  name:           string;
  email:          string;
  phone:          string;
  created_at:     string;
  email_verified: boolean;
  order_count:    number;
}

export default function UtilisateursPage() {
  const [users,   setUsers]   = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [search,  setSearch]  = useState("");

  useEffect(() => {
    fetch("/api/admin/users")
      .then(r => r.json())
      .then(d => { setUsers(Array.isArray(d) ? d : []); setLoading(false); });
  }, []);

  const filtered = useMemo(() => {
    const q = search.toLowerCase().trim();
    if (!q) return users;
    return users.filter(u =>
      u.name.toLowerCase().includes(q) ||
      u.email.toLowerCase().includes(q) ||
      (u.phone ?? "").includes(q)
    );
  }, [users, search]);

  const totalOrders = users.reduce((s, u) => s + u.order_count, 0);

  return (
    <main className="max-w-5xl mx-auto px-4 py-6 space-y-5">

      {/* Stats */}
      <div className="grid grid-cols-3 gap-3">
        {[
          { label: "Inscrits",   value: users.length,  bg: "bg-white" },
          { label: "Commandes",  value: totalOrders,   bg: "bg-brand-yellow/15" },
          { label: "Vérifiés",   value: users.filter(u => u.email_verified).length, bg: "bg-white" },
        ].map(s => (
          <div key={s.label} className={`${s.bg} rounded-2xl p-4 border border-brand-dark/8`}>
            <div className="text-2xl font-bold text-brand-dark" style={{ fontFamily: "var(--font-space,sans-serif)" }}>
              {s.value}
            </div>
            <div className="text-[10px] font-bold text-brand-dark/40 tracking-wider uppercase mt-0.5">
              {s.label}
            </div>
          </div>
        ))}
      </div>

      {/* Search */}
      <div className="relative w-full sm:w-72">
        <MagnifyingGlass size={15} weight="bold" className="absolute left-3.5 top-1/2 -translate-y-1/2 text-brand-dark/35 pointer-events-none" />
        <input
          type="search"
          value={search}
          onChange={e => setSearch(e.target.value)}
          placeholder="Rechercher par nom, email, téléphone..."
          className="w-full pl-9 pr-8 py-2.5 rounded-xl bg-white border border-brand-dark/10 text-sm text-brand-dark placeholder:text-brand-dark/30 focus:outline-none focus:border-brand-yellow focus:ring-2 focus:ring-brand-yellow/25 transition-all"
        />
        {search && (
          <button onClick={() => setSearch("")} className="absolute right-3 top-1/2 -translate-y-1/2 text-brand-dark/30 hover:text-brand-dark transition-colors">
            <X size={13} weight="bold" />
          </button>
        )}
      </div>

      {/* Table */}
      {loading ? (
        <LoadingSkeleton />
      ) : users.length === 0 ? (
        <div className="text-center py-20 bg-white rounded-3xl border border-brand-dark/8">
          <Users size={52} weight="light" className="text-brand-dark/20 mx-auto mb-4" />
          <p className="text-brand-dark/40 text-sm">Aucun utilisateur inscrit.</p>
        </div>
      ) : (
        <div className="bg-white rounded-3xl border border-brand-dark/8 overflow-hidden">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-brand-dark/8 bg-brand-sand-light">
                <th className="text-left px-5 py-3 text-[10px] font-bold text-brand-dark/40 tracking-widest uppercase">Nom</th>
                <th className="text-left px-5 py-3 text-[10px] font-bold text-brand-dark/40 tracking-widest uppercase">Téléphone</th>
                <th className="text-left px-5 py-3 text-[10px] font-bold text-brand-dark/40 tracking-widest uppercase hidden md:table-cell">Email</th>
                <th className="text-left px-5 py-3 text-[10px] font-bold text-brand-dark/40 tracking-widest uppercase hidden sm:table-cell">Inscription</th>
                <th className="text-center px-5 py-3 text-[10px] font-bold text-brand-dark/40 tracking-widest uppercase">Commandes</th>
                <th className="text-center px-5 py-3 text-[10px] font-bold text-brand-dark/40 tracking-widest uppercase hidden sm:table-cell">Vérifié</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-brand-dark/5">
              {filtered.length === 0 ? (
                <tr>
                  <td colSpan={6} className="text-center py-10 text-brand-dark/30 text-sm">Aucun résultat</td>
                </tr>
              ) : filtered.map(u => (
                <tr key={u.id} className="hover:bg-brand-sand-light/60 transition-colors">
                  <td className="px-5 py-3.5">
                    <span className="font-semibold text-brand-dark">{u.name}</span>
                  </td>
                  <td className="px-5 py-3.5 text-brand-dark/60 font-mono text-xs">
                    {u.phone || <span className="text-brand-dark/25 italic">—</span>}
                  </td>
                  <td className="px-5 py-3.5 text-brand-dark/50 hidden md:table-cell text-xs">{u.email}</td>
                  <td className="px-5 py-3.5 text-brand-dark/40 text-xs hidden sm:table-cell whitespace-nowrap">
                    {new Date(u.created_at).toLocaleDateString("fr-FR", { day: "2-digit", month: "short", year: "numeric" })}
                  </td>
                  <td className="px-5 py-3.5 text-center">
                    {u.order_count > 0 ? (
                      <span className="inline-flex items-center gap-1 bg-brand-yellow/20 text-brand-dark font-bold text-xs px-2.5 py-0.5 rounded-full">
                        <ShoppingBag size={10} weight="bold" />
                        {u.order_count}
                      </span>
                    ) : (
                      <span className="text-brand-dark/20 text-xs">0</span>
                    )}
                  </td>
                  <td className="px-5 py-3.5 text-center hidden sm:table-cell">
                    {u.email_verified
                      ? <CheckCircle size={16} weight="fill" className="text-green-500 mx-auto" />
                      : <XCircle    size={16} weight="fill" className="text-brand-dark/20 mx-auto" />
                    }
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {filtered.length > 0 && (
            <div className="px-5 py-3 border-t border-brand-dark/5 text-xs text-brand-dark/30">
              {filtered.length} utilisateur{filtered.length > 1 ? "s" : ""}
              {search && ` trouvé${filtered.length > 1 ? "s" : ""} pour « ${search} »`}
            </div>
          )}
        </div>
      )}
    </main>
  );
}

function LoadingSkeleton() {
  return (
    <div className="bg-white rounded-3xl border border-brand-dark/8 overflow-hidden animate-pulse">
      <div className="h-10 bg-brand-dark/5 border-b border-brand-dark/8" />
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex gap-4 px-5 py-4 border-b border-brand-dark/5 last:border-0">
          <div className="h-3 bg-brand-dark/8 rounded-full w-1/4" />
          <div className="h-3 bg-brand-dark/5 rounded-full w-1/6" />
          <div className="h-3 bg-brand-dark/5 rounded-full w-1/4" />
          <div className="h-3 bg-brand-dark/5 rounded-full w-1/6" />
        </div>
      ))}
    </div>
  );
}