/**
 * app/admin/add-agent/page.tsx
 * Admin — Register a new associate under any sponsor.
 *
 * ADMIN MODULE — self-contained.
 */

"use client";

import { useEffect, useState, useRef } from "react";
import {
  UserPlus,
  Mail,
  Lock,
  User,
  Phone,
  Hash,
  ArrowRight,
  ChevronDown,
  Search,
  CheckCircle2,
  AlertCircle,
  RefreshCw,
  Sparkles,
} from "lucide-react";
import toast from "react-hot-toast";
import axios from "axios";

interface ReferralUser {
  _id: string;
  name: string;
  email: string;
  referralCode: string;
  level: number;
}

export default function AdminAddAgentPage() {
  const [loading, setLoading] = useState(false);
  const [users, setUsers] = useState<ReferralUser[]>([]);
  const [fetchingUsers, setFetchingUsers] = useState(true);

  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
    phone: "",
    referralCode: "",
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [search, setSearch] = useState("");
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Fetch all agents for sponsor dropdown
  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = () => {
    setFetchingUsers(true);
    axios
      .get("/api/admin/referral-codes")
      .then(({ data }) => setUsers(data.data ?? []))
      .catch(() => toast.error("Failed to load associates list"))
      .finally(() => setFetchingUsers(false));
  };

  // Close dropdown on outside click
  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(e.target as Node)
      ) {
        setDropdownOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const filteredUsers = users.filter(
    (u) =>
      u.name.toLowerCase().includes(search.toLowerCase()) ||
      u.referralCode.toLowerCase().includes(search.toLowerCase()) ||
      u.email.toLowerCase().includes(search.toLowerCase())
  );

  const selectedUser = users.find((u) => u.referralCode === form.referralCode);

  const validate = () => {
    const errs: Record<string, string> = {};
    if (!form.name.trim()) errs.name = "Full name is required";
    if (!form.email.trim()) errs.email = "Email address is required";
    else if (!/\S+@\S+\.\S+/.test(form.email))
      errs.email = "Invalid email format";
    if (!form.password) errs.password = "Password is required";
    else if (form.password.length < 6)
      errs.password = "Password must be at least 6 characters";
    return errs;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const errs = validate();
    if (Object.keys(errs).length > 0) {
      setErrors(errs);
      return;
    }
    setErrors({});
    setLoading(true);

    try {
      const res = await axios.post("/api/users/associate", {
        name: form.name.trim(),
        email: form.email.trim().toLowerCase(),
        password: form.password,
        phone: form.phone.trim() || undefined,
        referralCode: form.referralCode ? form.referralCode.trim().toUpperCase() : undefined,
      });

      if (res.data.success) {
        toast.success(`Associate ${form.name} created successfully!`);
        setForm({
          name: "",
          email: "",
          password: "",
          phone: "",
          referralCode: "",
        });
        fetchUsers(); // Refresh list to include newly created user
      } else {
        toast.error(res.data.error || "Failed to create associate");
      }
    } catch (err: any) {
      const msg =
        err.response?.data?.error || err.message || "Failed to create associate";
      toast.error(msg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      {/* Header */}
      <div>
        <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-1">
          Admin Control
        </p>
        <h1 className="text-3xl font-black text-black tracking-tight">
          Add New Associate
        </h1>
        <p className="text-sm text-slate-500 mt-1">
          Register a new associate account and assign them under any sponsor directly from the admin panel.
        </p>
      </div>

      {/* Main Card */}
      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
        <div className="px-6 py-5 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
          <h2 className="text-[10px] font-black uppercase tracking-widest text-slate-400 flex items-center gap-2">
            <UserPlus className="h-3.5 w-3.5 text-indigo-600" />
            Associate Registration Details
          </h2>
          <span className="text-[10px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full bg-indigo-50 text-indigo-600 border border-indigo-100">
            Instant Placement
          </span>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          {/* Name and Email */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div className="space-y-2">
              <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">
                Full Name *
              </label>
              <div className="relative">
                <User className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                <input
                  type="text"
                  value={form.name}
                  onChange={(e) =>
                    setForm((f) => ({ ...f, name: e.target.value }))
                  }
                  placeholder="e.g. Ramesh Verma"
                  className={`w-full pl-11 pr-4 py-3.5 rounded-xl border ${
                    errors.name ? "border-red-300 ring-1 ring-red-100" : "border-slate-200"
                  } bg-white text-slate-900 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-600/10 focus:border-indigo-300 font-medium transition-all`}
                />
              </div>
              {errors.name && (
                <p className="text-xs text-red-500 font-medium flex items-center gap-1">
                  <AlertCircle className="h-3 w-3" /> {errors.name}
                </p>
              )}
            </div>

            <div className="space-y-2">
              <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">
                Email Address *
              </label>
              <div className="relative">
                <Mail className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) =>
                    setForm((f) => ({ ...f, email: e.target.value }))
                  }
                  placeholder="e.g. ramesh@example.com"
                  className={`w-full pl-11 pr-4 py-3.5 rounded-xl border ${
                    errors.email ? "border-red-300 ring-1 ring-red-100" : "border-slate-200"
                  } bg-white text-slate-900 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-600/10 focus:border-indigo-300 font-medium transition-all`}
                />
              </div>
              {errors.email && (
                <p className="text-xs text-red-500 font-medium flex items-center gap-1">
                  <AlertCircle className="h-3 w-3" /> {errors.email}
                </p>
              )}
            </div>
          </div>

          {/* Password and Phone */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div className="space-y-2">
              <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">
                Account Password *
              </label>
              <div className="relative">
                <Lock className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                <input
                  type="password"
                  value={form.password}
                  onChange={(e) =>
                    setForm((f) => ({ ...f, password: e.target.value }))
                  }
                  placeholder="Minimum 6 characters"
                  className={`w-full pl-11 pr-4 py-3.5 rounded-xl border ${
                    errors.password ? "border-red-300 ring-1 ring-red-100" : "border-slate-200"
                  } bg-white text-slate-900 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-600/10 focus:border-indigo-300 font-medium transition-all`}
                />
              </div>
              {errors.password && (
                <p className="text-xs text-red-500 font-medium flex items-center gap-1">
                  <AlertCircle className="h-3 w-3" /> {errors.password}
                </p>
              )}
            </div>

            <div className="space-y-2">
              <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">
                Phone Number (Optional)
              </label>
              <div className="relative">
                <Phone className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
                <input
                  type="tel"
                  value={form.phone}
                  onChange={(e) =>
                    setForm((f) => ({ ...f, phone: e.target.value }))
                  }
                  placeholder="+91 98765 43210"
                  className="w-full pl-11 pr-4 py-3.5 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 focus:border-indigo-300 font-medium transition-all"
                />
              </div>
            </div>
          </div>

          {/* Sponsor Selection */}
          <div className="space-y-2 relative" ref={dropdownRef}>
            <div className="flex items-center justify-between">
              <label className="block text-[10px] font-black uppercase tracking-widest text-slate-500">
                Assign Sponsor (Referral Placement)
              </label>
              {form.referralCode && (
                <button
                  type="button"
                  onClick={() => setForm((f) => ({ ...f, referralCode: "" }))}
                  className="text-[10px] text-red-500 font-black uppercase tracking-wider hover:underline"
                >
                  Clear (Place at Root Level)
                </button>
              )}
            </div>

            {/* Dropdown trigger */}
            <button
              type="button"
              onClick={() => setDropdownOpen((o) => !o)}
              className="w-full flex items-center justify-between px-4 py-3.5 rounded-xl border border-slate-200 bg-white text-sm hover:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-600/10 transition-all text-left"
            >
              <div className="flex items-center gap-3 min-w-0">
                <Hash className="h-4 w-4 text-slate-400 flex-shrink-0" />
                {selectedUser ? (
                  <div className="min-w-0">
                    <span className="font-bold text-slate-900 block truncate">
                      {selectedUser.name}{" "}
                      <span className="text-xs text-slate-400 font-normal">
                        ({selectedUser.email})
                      </span>
                    </span>
                    <span className="text-[10px] font-mono font-bold text-indigo-600 uppercase">
                      Code: {selectedUser.referralCode} · Tree Level {selectedUser.level}
                    </span>
                  </div>
                ) : (
                  <span className="text-slate-400 font-medium">
                    Select a sponsor (Leave unselected for Root Level)
                  </span>
                )}
              </div>
              <ChevronDown
                className={`h-4 w-4 text-slate-400 transition-transform ${
                  dropdownOpen ? "rotate-180" : ""
                }`}
              />
            </button>

            {/* Dropdown panel */}
            {dropdownOpen && (
              <div className="absolute z-50 left-0 right-0 mt-2 bg-white rounded-2xl border border-slate-100 shadow-2xl overflow-hidden max-h-72 flex flex-col">
                <div className="p-3 border-b border-slate-100 bg-slate-50/50">
                  <div className="relative">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-400" />
                    <input
                      type="text"
                      autoFocus
                      placeholder="Search sponsor by name, email, or code…"
                      value={search}
                      onChange={(e) => setSearch(e.target.value)}
                      className="w-full pl-9 pr-3 py-2 text-xs font-medium text-slate-900 placeholder:text-slate-400 bg-white rounded-xl border border-slate-200 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                    />
                  </div>
                </div>

                <div className="overflow-y-auto divide-y divide-slate-50 flex-1">
                  <button
                    type="button"
                    onClick={() => {
                      setForm((f) => ({ ...f, referralCode: "" }));
                      setDropdownOpen(false);
                    }}
                    className="w-full px-4 py-3 text-left hover:bg-slate-50 transition-colors flex items-center justify-between"
                  >
                    <div>
                      <p className="text-xs font-bold text-slate-700">Root Level (No Sponsor)</p>
                      <p className="text-[10px] text-slate-400">Direct top-level associate</p>
                    </div>
                    {!form.referralCode && (
                      <CheckCircle2 className="h-4 w-4 text-indigo-600" />
                    )}
                  </button>

                  {filteredUsers.length === 0 ? (
                    <div className="p-4 text-center text-xs text-slate-400 font-medium">
                      No matching associates found
                    </div>
                  ) : (
                    filteredUsers.map((u) => (
                      <button
                        key={u._id}
                        type="button"
                        onClick={() => {
                          setForm((f) => ({
                            ...f,
                            referralCode: u.referralCode,
                          }));
                          setDropdownOpen(false);
                          setSearch("");
                        }}
                        className="w-full px-4 py-3 text-left hover:bg-indigo-50/50 transition-colors flex items-center justify-between gap-3 group"
                      >
                        <div className="min-w-0">
                          <p className="text-xs font-bold text-black group-hover:text-indigo-600 truncate">
                            {u.name}
                          </p>
                          <p className="text-[10px] text-slate-400 truncate">
                            {u.email} · Code:{" "}
                            <span className="font-mono font-bold text-slate-600">
                              {u.referralCode}
                            </span>
                          </p>
                        </div>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          <span className="text-[10px] font-black px-2 py-0.5 rounded bg-slate-100 text-slate-600">
                            Level {u.level}
                          </span>
                          {form.referralCode === u.referralCode && (
                            <CheckCircle2 className="h-4 w-4 text-indigo-600" />
                          )}
                        </div>
                      </button>
                    ))
                  )}
                </div>
              </div>
            )}
          </div>

          {/* Hint info */}
          <div className="p-4 rounded-xl bg-slate-50 border border-slate-100 flex items-center gap-3 text-xs text-slate-600">
            <Sparkles className="h-4 w-4 text-indigo-500 flex-shrink-0" />
            <span>
              The new associate will immediately be active and receive a unique referral code.
              They will be positioned at{" "}
              <strong>
                {selectedUser ? `Level ${selectedUser.level + 1}` : "Level 0 (Root)"}
              </strong>.
            </span>
          </div>

          {/* Submit Button */}
          <button
            type="submit"
            disabled={loading}
            className="w-full flex items-center justify-center gap-2 px-6 py-4 rounded-xl bg-indigo-600 text-white text-xs font-black uppercase tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-600/20 disabled:opacity-50 active:scale-[0.99]"
          >
            {loading ? (
              <>
                <RefreshCw className="h-4 w-4 animate-spin" />
                Creating Associate...
              </>
            ) : (
              <>
                <UserPlus className="h-4 w-4" />
                Register Associate Account
                <ArrowRight className="h-4 w-4" />
              </>
            )}
          </button>
        </form>
      </div>
    </div>
  );
}