"use client";

import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/navigation";
import {
  Mail,
  Lock,
  User,
  Phone,
  Hash,
  ArrowRight,
  UserPlus,
  ChevronDown,
  Search,
  CheckCircle2,
} from "lucide-react";
import { useAuth } from "@/hooks/useAuth";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import toast from "react-hot-toast";
import axios from "axios";

interface AssociateRegistrationFormProps {
  title?: string;
  subtitle?: string;
  successHref?: string;
}

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

// ─── Searchable referral code dropdown (admin only) ───────────────────────────
function ReferralDropdown({
  users,
  value,
  onChange,
}: {
  users: ReferralUser[];
  value: string;
  onChange: (code: string) => void;
}) {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const ref = useRef<HTMLDivElement>(null);

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

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

  const selected = users.find((u) => u.referralCode === value);

  return (
    <div className="flex flex-col gap-1.5" ref={ref}>
      <label className="text-[10px] font-black uppercase tracking-widest text-slate-500">
        Sponsor (Referral Code)
      </label>

      {/* Trigger button */}
      <button
        id="admin-referral-dropdown"
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="relative flex items-center gap-3 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-left text-sm shadow-sm transition-all hover:border-indigo-300 focus:outline-none focus:border-indigo-500"
      >
        <Hash className="h-4 w-4 text-slate-400 flex-shrink-0" />
        {selected ? (
          <span className="flex-1 min-w-0">
            <span className="font-black text-black uppercase tracking-tight truncate block">
              {selected.name}
            </span>
            <span className="text-[10px] text-slate-400 font-mono tracking-wider">
              {selected.referralCode}
            </span>
          </span>
        ) : (
          <span className="flex-1 text-slate-400 font-medium">Select associate as sponsor…</span>
        )}
        <ChevronDown
          className={`h-4 w-4 text-slate-400 flex-shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
        />
      </button>

      {/* Dropdown panel */}
      {open && (
        <div className="absolute z-50 mt-1 w-full max-w-sm rounded-2xl border border-slate-100 bg-white shadow-2xl shadow-black/10 overflow-hidden"
          style={{ marginTop: "3.5rem" }}
        >
          {/* Search */}
          <div className="p-3 border-b border-slate-100">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-slate-300" />
              <input
                id="admin-referral-search"
                type="text"
                autoFocus
                placeholder="Search by name or code…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="w-full pl-9 pr-3 py-2 text-xs font-medium text-black placeholder:text-slate-300 bg-slate-50 rounded-xl focus:outline-none focus:ring-1 focus:ring-indigo-300"
              />
            </div>
          </div>

          {/* List */}
          <ul className="max-h-56 overflow-y-auto divide-y divide-slate-50">
            {filtered.length === 0 ? (
              <li className="px-4 py-6 text-center text-[10px] font-black text-slate-300 uppercase tracking-widest">
                No results
              </li>
            ) : (
              filtered.map((u) => (
                <li key={u._id}>
                  <button
                    type="button"
                    onClick={() => {
                      onChange(u.referralCode);
                      setOpen(false);
                      setSearch("");
                    }}
                    className="w-full flex items-center gap-3 px-4 py-3 hover:bg-slate-50 transition-colors text-left group"
                  >
                    {/* Avatar */}
                    <div className="h-8 w-8 rounded-lg bg-slate-900 flex items-center justify-center text-white text-xs font-black flex-shrink-0">
                      {u.name[0]?.toUpperCase()}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-xs font-black text-black uppercase tracking-tight truncate">
                        {u.name}
                      </p>
                      <p className="text-[10px] text-slate-400 font-mono tracking-wider">
                        {u.referralCode}
                      </p>
                    </div>
                    <div className="flex-shrink-0 text-right">
                      <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest">
                        L{u.level + 1}
                      </span>
                    </div>
                    {value === u.referralCode && (
                      <CheckCircle2 className="h-4 w-4 text-indigo-500 flex-shrink-0" />
                    )}
                  </button>
                </li>
              ))
            )}
          </ul>
        </div>
      )}

      {/* Show selected code as text hint */}
      {selected && (
        <p className="text-[10px] text-slate-400 font-medium pl-1">
          Code: <span className="font-mono font-black text-black tracking-wider">{selected.referralCode}</span>
          {" "}· {selected.email}
        </p>
      )}
    </div>
  );
}

// ─── Main Form ────────────────────────────────────────────────────────────────
export default function AssociateRegistrationForm({
  title = "Create an associate account",
  subtitle = "Register a new agent directly from your dashboard.",
  successHref = "/dashboard",
}: AssociateRegistrationFormProps) {
  const router = useRouter();
  const { user } = useAuth();
  const isAdmin = user?.role === "admin";

  const [loading, setLoading] = useState(false);
  const [allUsers, setAllUsers] = useState<ReferralUser[]>([]);
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
    phone: "",
    referralCode: "",
  });
  const [errors, setErrors] = useState<Record<string, string>>({});

  // Pre-fill referral code for non-admin users
  useEffect(() => {
    if (!isAdmin && user?.referralCode) {
      setForm((current) => ({
        ...current,
        referralCode: user.referralCode,
      }));
    }
  }, [user?.referralCode, isAdmin]);

  // Fetch all referral codes for admin dropdown
  useEffect(() => {
    if (!isAdmin) return;
    axios
      .get("/api/admin/referral-codes")
      .then(({ data }) => setAllUsers(data.data ?? []))
      .catch(() => {});
  }, [isAdmin]);

  const validate = () => {
    const errs: Record<string, string> = {};
    if (!form.name.trim()) errs.name = "Full name is required";
    if (!form.email) errs.email = "Email is required";
    else if (!/\S+@\S+\.\S+/.test(form.email))
      errs.email = "Invalid email address";
    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 {
      await axios.post("/api/users/associate", form);
      toast.success("User registered successfully!");
      setForm((current) => ({
        ...current,
        name: "",
        email: "",
        password: "",
        phone: "",
        // keep referralCode for quick back-to-back registrations
      }));
    } catch (err: any) {
      const message =
        err.response?.data?.error || err.message || "Registration failed";
      toast.error(message);
    } finally {
      setLoading(false);
    }
  };

  const field =
    (key: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
      setForm((f) => ({ ...f, [key]: e.target.value }));

  return (
    <div className="relative overflow-hidden rounded-[2.5rem] border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-white p-8 shadow-[0_24px_80px_rgba(15,23,42,0.08)]">
      <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-600 via-slate-900 to-indigo-400" />
      <div className="mb-8 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div className="flex items-start gap-3">
          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-500/20">
            <UserPlus className="h-5 w-5" />
          </div>
          <div>
            <p className="text-[10px] font-black uppercase tracking-[0.3em] text-slate-400">
              Internal onboarding
            </p>
            <h2 className="mt-1 text-2xl font-black tracking-tight text-black">{title}</h2>
            <p className="mt-2 max-w-xl text-sm leading-relaxed text-slate-500">{subtitle}</p>
          </div>
        </div>
        <div className="rounded-2xl border border-indigo-100 bg-indigo-50/70 px-4 py-3 text-sm text-indigo-700 shadow-sm">
          <p className="font-black uppercase tracking-[0.2em] text-[10px]">Secure setup</p>
          <p className="mt-1 font-medium">Creates the account and places them under the selected sponsor.</p>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="grid gap-5 md:grid-cols-2">
          <Input
            id="associate-name"
            label="Full Name"
            type="text"
            placeholder="Rahul Sharma"
            value={form.name}
            onChange={field("name")}
            error={errors.name}
            leftIcon={<User className="h-4 w-4" />}
            autoComplete="name"
          />

          <Input
            id="associate-email"
            label="Email Address"
            type="email"
            placeholder="associate@example.com"
            value={form.email}
            onChange={field("email")}
            error={errors.email}
            leftIcon={<Mail className="h-4 w-4" />}
            autoComplete="email"
          />
        </div>

        <div className="grid gap-5 md:grid-cols-2">
          <Input
            id="associate-password"
            label="Password"
            type="password"
            placeholder="Minimum 6 characters"
            value={form.password}
            onChange={field("password")}
            error={errors.password}
            leftIcon={<Lock className="h-4 w-4" />}
            autoComplete="new-password"
          />

          <Input
            id="associate-phone"
            label="Phone Number (optional)"
            type="tel"
            placeholder="+91 98765 43210"
            value={form.phone}
            onChange={field("phone")}
            leftIcon={<Phone className="h-4 w-4" />}
            autoComplete="tel"
          />
        </div>

        {/* ── Referral Code ── */}
        {isAdmin ? (
          /* Admin: searchable dropdown of all associates */
          <div className="relative">
            <ReferralDropdown
              users={allUsers}
              value={form.referralCode}
              onChange={(code) => setForm((f) => ({ ...f, referralCode: code }))}
            />
          </div>
        ) : (
          /* Non-admin: plain text input pre-filled with own code */
          <Input
            id="associate-referral"
            label="Referral Code"
            type="text"
            placeholder="Enter sponsor code"
            value={form.referralCode}
            onChange={field("referralCode")}
            leftIcon={<Hash className="h-4 w-4" />}
            hint="Use this to place the new associate under your team"
          />
        )}

        <div className="rounded-[1.5rem] border border-slate-200 bg-slate-50/80 p-4">
          <div className="flex items-start gap-3">
            <div className="mt-0.5 h-2.5 w-2.5 rounded-full bg-emerald-500 flex-shrink-0" />
            <p className="text-sm text-slate-600">
              A polished profile is created instantly and the associate can start using the dashboard right away.
            </p>
          </div>
        </div>

        <Button
          id="associate-submit"
          type="submit"
          fullWidth
          loading={loading}
          size="lg"
          className="mt-2 rounded-[1.25rem] bg-slate-900 px-6 py-4 text-sm font-black uppercase tracking-[0.2em] shadow-lg shadow-slate-900/10 hover:bg-slate-700"
          rightIcon={!loading && <ArrowRight className="h-4 w-4" />}
        >
          Create Associate
        </Button>
      </form>
    </div>
  );
}