/**
 * app/admin/agents/page.tsx
 * Admin — full agent list with total sales, wallet balance, and enable/disable toggle.
 *
 * ADMIN MODULE — self-contained.
 */

"use client";

import { useEffect, useState, useCallback } from "react";
import Link from "next/link";
import {
  Users, Search, CheckCircle2, XCircle, ToggleLeft, ToggleRight, RefreshCw, UserPlus,
} from "lucide-react";
import toast from "react-hot-toast";

interface Agent {
  _id: string;
  name: string;
  email: string;
  role: string;
  phone?: string;
  isActive: boolean;
  wallet: number;
  totalEarnings: number;
  totalSales: number;
  salesCount: number;
  downlineCount: number;
  referralCode: string;
  createdAt: string;
}

export default function AdminAgentsPage() {
  const [agents, setAgents] = useState<Agent[]>([]);
  const [filtered, setFiltered] = useState<Agent[]>([]);
  const [loading, setLoading] = useState(true);
  const [query, setQuery] = useState("");
  const [toggling, setToggling] = useState<string | null>(null);
  
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;

  const load = useCallback(() => {
    setLoading(true);
    fetch("/api/admin/agents")
      .then((r) => r.json())
      .then((d) => {
        if (d.success) {
          setAgents(d.data);
          setFiltered(d.data);
        } else {
          toast.error(d.error ?? "Failed to load agents");
        }
      })
      .catch(() => toast.error("Server error"))
      .finally(() => setLoading(false));
  }, []);

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

  useEffect(() => {
    const q = query.toLowerCase();
    setFiltered(
      agents.filter(
        (a) =>
          a.name.toLowerCase().includes(q) ||
          a.email.toLowerCase().includes(q) ||
          a.referralCode.toLowerCase().includes(q)
      )
    );
    setCurrentPage(1);
  }, [query, agents]);

  const toggleAccess = async (agent: Agent) => {
    setToggling(agent._id);
    try {
      const res = await fetch("/api/admin/agents", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ userId: agent._id, isActive: !agent.isActive }),
      });
      const d = await res.json();
      if (d.success) {
        toast.success(d.message);
        setAgents((prev) =>
          prev.map((a) => (a._id === agent._id ? { ...a, isActive: !a.isActive } : a))
        );
      } else {
        toast.error(d.error ?? "Failed to update");
      }
    } catch {
      toast.error("Server error");
    } finally {
      setToggling(null);
    }
  };

  const fmt = (n: number) => `₹${n.toLocaleString("en-IN", { maximumFractionDigits: 0 })}`;

  const totalPages = Math.ceil(filtered.length / itemsPerPage);
  const paginatedAgents = filtered.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">Admin</p>
          <h1 className="text-3xl font-black text-black tracking-tight">Associates</h1>
        </div>
        <div className="flex items-center gap-3">
          <Link
            href="/admin/add-agent"
            className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-slate-900 text-white text-xs font-black uppercase tracking-widest hover:bg-slate-800 transition-colors shadow-lg shadow-black/10"
          >
            <UserPlus className="h-3.5 w-3.5 text-indigo-400" /> Add Associate
          </Link>
          <button
            onClick={load}
            className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-indigo-600 text-white text-xs font-black uppercase tracking-widest hover:bg-indigo-700 transition-colors shadow-lg shadow-indigo-600/20"
          >
            <RefreshCw className="h-3.5 w-3.5" /> Refresh
          </button>
        </div>
      </div>

      {/* Summary chips */}
      <div className="flex gap-3 flex-wrap">
        <span className="px-4 py-1.5 rounded-full bg-slate-900 text-white text-xs font-black uppercase tracking-widest">
          {agents.length} Total
        </span>
        <span className="px-4 py-1.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-100 text-xs font-black uppercase tracking-widest">
          {agents.filter((a) => a.isActive).length} Active
        </span>
        <span className="px-4 py-1.5 rounded-full bg-red-50 text-red-600 border border-red-100 text-xs font-black uppercase tracking-widest">
          {agents.filter((a) => !a.isActive).length} Inactive
        </span>
      </div>

      {/* Search */}
      <div className="relative">
        <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search by name, email or referral code…"
          className="w-full pl-11 pr-4 py-3 rounded-xl border border-slate-200 bg-white text-slate-900 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-600/10 font-medium"
        />
      </div>

      {/* Table */}
      <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden">
        {loading ? (
          <div className="space-y-px">
            {[...Array(6)].map((_, i) => (
              <div key={i} className="h-16 bg-slate-50 animate-pulse" />
            ))}
          </div>
        ) : filtered.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-20 gap-3">
            <Users className="h-10 w-10 text-slate-200" />
            <p className="text-slate-400 text-sm font-medium">No agents found</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm min-w-[800px]">
              <thead>
                <tr className="border-b border-slate-100 bg-slate-50/50">
                  {["Agent", "Referral Code", "Total Sales", "Wallet", "Team", "Status", "Access"].map((h) => (
                    <th key={h} className="text-left px-5 py-3 text-[10px] font-black uppercase tracking-widest text-slate-400">
                      {h}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {paginatedAgents.map((agent) => (
                  <tr
                    key={agent._id}
                    className="border-b border-slate-50 last:border-0 hover:bg-slate-50/30 transition-colors"
                  >
                    <td className="px-5 py-4">
                      <p className="font-bold text-black">{agent.name}</p>
                      <p className="text-xs text-slate-400">{agent.email}</p>
                    </td>
                    <td className="px-5 py-4">
                      <span className="font-mono text-xs bg-slate-100 px-2 py-1 rounded-lg text-black font-bold">
                        {agent.referralCode}
                      </span>
                    </td>
                    <td className="px-5 py-4">
                      <p className="font-bold text-black">{fmt(agent.totalSales)}</p>
                      <p className="text-xs text-slate-400">{agent.salesCount} sales</p>
                    </td>
                    <td className="px-5 py-4 font-bold text-black">{fmt(agent.wallet)}</td>
                    <td className="px-5 py-4 text-slate-600 font-medium">{agent.downlineCount}</td>
                    <td className="px-5 py-4">
                      {agent.isActive ? (
                        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[10px] font-black uppercase tracking-wide border border-emerald-100">
                          <CheckCircle2 className="h-3 w-3" /> Active
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-red-50 text-red-600 text-[10px] font-black uppercase tracking-wide border border-red-100">
                          <XCircle className="h-3 w-3" /> Inactive
                        </span>
                      )}
                    </td>
                    <td className="px-5 py-4">
                      <button
                        onClick={() => toggleAccess(agent)}
                        disabled={toggling === agent._id}
                        title={agent.isActive ? "Disable access" : "Enable access"}
                        className={`flex items-center gap-2 px-3 py-1.5 rounded-xl text-xs font-black uppercase tracking-wide transition-all disabled:opacity-50 ${
                          agent.isActive
                            ? "bg-red-50 text-red-600 hover:bg-red-100 border border-red-100"
                            : "bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-100"
                        }`}
                      >
                        {toggling === agent._id ? (
                          <RefreshCw className="h-3.5 w-3.5 animate-spin" />
                        ) : agent.isActive ? (
                          <><ToggleLeft className="h-3.5 w-3.5" /> Disable</>
                        ) : (
                          <><ToggleRight className="h-3.5 w-3.5" /> Enable</>
                        )}
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {!loading && filtered.length > 0 && totalPages > 1 && (
          <div className="flex items-center justify-between px-5 py-4 border-t border-slate-100 bg-slate-50/50">
            <p className="text-xs text-slate-500 font-medium">
              Showing <span className="font-bold text-slate-900">{(currentPage - 1) * itemsPerPage + 1}</span> to <span className="font-bold text-slate-900">{Math.min(currentPage * itemsPerPage, filtered.length)}</span> of <span className="font-bold text-slate-900">{filtered.length}</span> agents
            </p>
            <div className="flex items-center gap-2">
              <button
                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                disabled={currentPage === 1}
                className="px-3 py-1.5 text-xs font-bold text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                Previous
              </button>
              <button
                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                disabled={currentPage === totalPages}
                className="px-3 py-1.5 text-xs font-bold text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                Next
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}