/**
 * app/admin/team-levels/page.tsx
 * Admin — full platform team level-wise view with interactive Team Tree inspector.
 *
 * Features:
 * - Horizontal columns for all platform levels (Level 0, 1, 2, 3...)
 * - Search bar with filter across names, emails, referral codes, sponsors
 * - Dropdown next to search: Select any associate to view their downline team hierarchy as an interactive tree
 * - Displays exact member counts ("Under [Member]: X direct, Y total in team")
 * - View mode toggle: "Level Columns" vs "Member Tree"
 * - Direct "View Team Tree" button on each member card
 */

"use client";

import { useState, useEffect, useRef } from "react";
import {
  Loader2,
  TrendingUp,
  Wallet,
  CheckCircle2,
  XCircle,
  ChevronLeft,
  ChevronRight,
  ChevronDown,
  LayersIcon,
  Search,
  Users,
  RefreshCw,
  User as UserIcon,
  Network,
  ArrowRight,
  GitBranch,
  X,
  Sparkles,
  LayoutGrid,
} from "lucide-react";
import toast from "react-hot-toast";
import type { NetworkNode } from "@/types";
import { clsx } from "clsx";

interface AdminTeamMember {
  _id: string;
  name: string;
  email: string;
  referralCode: string;
  referredBy: string | null;
  sponsorName: string | null;
  totalEarnings: number;
  wallet: number;
  isActive: boolean;
  downlineCount: number;
  joinedAt: string;
  level: number;
}

interface LevelGroup {
  level: number;
  members: AdminTeamMember[];
}

interface TeamLevelsData {
  levels: LevelGroup[];
  totalMembers: number;
}

interface TreeDetailData {
  tree: NetworkNode | null;
  totalTeamCount: number;
  directCount: number;
  user: {
    _id: string;
    name: string;
    email: string;
    referralCode: string;
    level: number;
    totalEarnings: number;
    wallet: number;
  };
}

// ── Color palette per absolute level ──────────────────────────────────────────
const LEVEL_PALETTE: Record<
  number,
  { header: string; badge: string; dot: string; avatar: string; border: string; text: string }
> = {
  0: {
    header: "bg-slate-900",
    badge: "bg-white/20 text-white",
    dot: "bg-white",
    avatar: "bg-white text-slate-900",
    border: "border-slate-800",
    text: "text-slate-900",
  },
  1: {
    header: "bg-black",
    badge: "bg-white/20 text-white",
    dot: "bg-white",
    avatar: "bg-white text-black",
    border: "border-black",
    text: "text-black",
  },
  2: {
    header: "bg-indigo-600",
    badge: "bg-indigo-100 text-indigo-700",
    dot: "bg-indigo-200",
    avatar: "bg-indigo-100 text-indigo-700",
    border: "border-indigo-200",
    text: "text-indigo-600",
  },
  3: {
    header: "bg-violet-600",
    badge: "bg-violet-100 text-violet-700",
    dot: "bg-violet-200",
    avatar: "bg-violet-100 text-violet-700",
    border: "border-violet-200",
    text: "text-violet-600",
  },
  4: {
    header: "bg-emerald-600",
    badge: "bg-emerald-100 text-emerald-700",
    dot: "bg-emerald-200",
    avatar: "bg-emerald-100 text-emerald-700",
    border: "border-emerald-200",
    text: "text-emerald-600",
  },
  5: {
    header: "bg-amber-500",
    badge: "bg-amber-100 text-amber-700",
    dot: "bg-amber-200",
    avatar: "bg-amber-100 text-amber-700",
    border: "border-amber-200",
    text: "text-amber-600",
  },
  6: {
    header: "bg-rose-600",
    badge: "bg-rose-100 text-rose-700",
    dot: "bg-rose-200",
    avatar: "bg-rose-100 text-rose-700",
    border: "border-rose-200",
    text: "text-rose-600",
  },
};

function getPalette(level: number) {
  return LEVEL_PALETTE[level] ?? LEVEL_PALETTE[6];
}

// ── Interactive Tree Node Component ──────────────────────────────────────────
function AdminTreeNodeCard({
  node,
  depth = 0,
  onSelectRoot,
}: {
  node: NetworkNode;
  depth?: number;
  onSelectRoot?: (userId: string) => void;
}) {
  const [expanded, setExpanded] = useState(depth < 3);
  const hasChildren = node.children && node.children.length > 0;
  const isRoot = depth === 0;

  // Count total subtree under this node
  const countSubtree = (n: NetworkNode): number => {
    if (!n.children || !n.children.length) return 0;
    return n.children.length + n.children.reduce((acc, c) => acc + countSubtree(c), 0);
  };
  const totalUnderNode = countSubtree(node);

  return (
    <div
      className={clsx(
        "rounded-2xl p-4 transition-all duration-200 border",
        isRoot
          ? "bg-slate-900 text-white border-slate-800 shadow-xl"
          : "bg-white border-slate-100 shadow-sm hover:border-slate-300"
      )}
    >
      <div className="flex items-center gap-3">
        {/* Avatar */}
        <div
          className={clsx(
            "h-10 w-10 rounded-xl flex items-center justify-center text-xs font-black flex-shrink-0 shadow-sm",
            isRoot ? "bg-white text-slate-900" : "bg-slate-100 text-slate-800 font-bold"
          )}
        >
          {node.name[0]?.toUpperCase()}
        </div>

        {/* Info */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <p
              className={clsx(
                "text-xs font-black uppercase tracking-tight truncate",
                isRoot ? "text-white" : "text-slate-900"
              )}
            >
              {node.name}
            </p>
            <span
              className={clsx(
                "px-2 py-0.5 text-[9px] font-black uppercase tracking-widest rounded-md",
                isRoot ? "bg-white/20 text-white" : "bg-indigo-50 text-indigo-700 border border-indigo-100"
              )}
            >
              L{node.level}
            </span>
          </div>
          <p
            className={clsx(
              "text-[10px] font-medium truncate mt-0.5",
              isRoot ? "text-slate-400" : "text-slate-400"
            )}
          >
            {node.email} · Code: <span className="font-mono font-bold">{node.referralCode}</span>
          </p>
        </div>

        {/* Stats & direct team size */}
        <div className="text-right flex-shrink-0 flex items-center gap-3">
          <div>
            <p
              className={clsx(
                "text-xs font-black",
                isRoot ? "text-emerald-400" : "text-slate-900"
              )}
            >
              ₹{node.totalEarnings.toLocaleString("en-IN")}
            </p>
            <p
              className={clsx(
                "text-[9px] font-black uppercase tracking-wider",
                isRoot ? "text-slate-400" : "text-slate-400"
              )}
            >
              {node.children.length} direct ({totalUnderNode} total)
            </p>
          </div>

          {/* Drill down button (if not root) */}
          {!isRoot && onSelectRoot && (
            <button
              onClick={() => onSelectRoot(node._id)}
              title="Focus this member's tree"
              className="p-1.5 rounded-lg bg-slate-100 hover:bg-indigo-50 hover:text-indigo-600 text-slate-500 transition-colors text-[10px] font-black"
            >
              <ArrowRight className="h-3.5 w-3.5" />
            </button>
          )}

          {/* Expand/Collapse Button */}
          {hasChildren && (
            <button
              onClick={() => setExpanded((e) => !e)}
              className={clsx(
                "p-1.5 rounded-lg transition-all",
                isRoot
                  ? "hover:bg-white/10 text-white"
                  : "hover:bg-slate-100 text-slate-600"
              )}
            >
              {expanded ? (
                <ChevronDown className="h-4 w-4" />
              ) : (
                <ChevronRight className="h-4 w-4" />
              )}
            </button>
          )}
        </div>
      </div>

      {/* Children branches */}
      {hasChildren && expanded && (
        <div className="mt-3 ml-4 pl-4 border-l-2 border-slate-100 space-y-2.5 relative">
          {node.children.map((child) => (
            <AdminTreeNodeCard
              key={child._id}
              node={child}
              depth={depth + 1}
              onSelectRoot={onSelectRoot}
            />
          ))}
        </div>
      )}
    </div>
  );
}

// ── Member Card (Columns View) ────────────────────────────────────────────────
function MemberCard({
  m,
  onInspectTree,
}: {
  m: AdminTeamMember;
  onInspectTree: (member: AdminTeamMember) => void;
}) {
  const palette = getPalette(m.level);
  const joinDate = new Date(m.joinedAt).toLocaleDateString("en-IN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });

  return (
    <div
      className={`bg-white rounded-2xl border ${
        m.isActive ? "border-slate-100" : "border-rose-100 bg-rose-50/30"
      } shadow-sm hover:shadow-md transition-all duration-200 p-4 group flex flex-col justify-between`}
    >
      <div>
        {/* Header */}
        <div className="flex items-start gap-3 mb-3">
          <div
            className={`h-9 w-9 rounded-xl flex items-center justify-center text-xs font-black flex-shrink-0 shadow-sm group-hover:scale-105 transition-transform ${palette.avatar}`}
          >
            {m.name[0]?.toUpperCase()}
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-xs font-black text-black uppercase tracking-tight truncate leading-none mb-1">
              {m.name}
            </p>
            <p className="text-[10px] text-slate-400 font-medium truncate">{m.email}</p>
          </div>
          {m.isActive ? (
            <CheckCircle2 className="h-4 w-4 text-emerald-500 flex-shrink-0" />
          ) : (
            <XCircle className="h-4 w-4 text-rose-400 flex-shrink-0" />
          )}
        </div>

        {/* Stats grid */}
        <div className="grid grid-cols-2 gap-2 mb-3">
          <div className="bg-slate-50 rounded-xl p-2.5">
            <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1">
              <TrendingUp className="h-2.5 w-2.5" /> Earned
            </p>
            <p className="text-xs font-black text-black">
              ₹{m.totalEarnings.toLocaleString("en-IN")}
            </p>
          </div>
          <div className="bg-slate-50 rounded-xl p-2.5">
            <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1 flex items-center gap-1">
              <Wallet className="h-2.5 w-2.5" /> Wallet
            </p>
            <p className="text-xs font-black text-black">
              ₹{m.wallet.toLocaleString("en-IN")}
            </p>
          </div>
        </div>

        {/* Sponsor + referral code */}
        <div className="flex items-center justify-between mb-2">
          <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest bg-slate-50 px-2 py-1 rounded-lg font-mono">
            {m.referralCode}
          </span>
          <span className="text-[9px] text-indigo-600 font-black flex items-center gap-1 bg-indigo-50 px-2 py-1 rounded-lg">
            <Users className="h-2.5 w-2.5" />
            {m.downlineCount} direct
          </span>
        </div>

        {/* Sponsor row */}
        {m.sponsorName && (
          <div className="flex items-center gap-1.5 mt-1">
            <UserIcon className="h-3 w-3 text-slate-300 flex-shrink-0" />
            <p className="text-[9px] text-slate-400 font-medium truncate">
              Under: <span className="font-black text-slate-600">{m.sponsorName}</span>
              {m.referredBy && (
                <span className="font-mono text-slate-400"> ({m.referredBy})</span>
              )}
            </p>
          </div>
        )}
      </div>

      {/* Footer with Tree Inspection Button */}
      <div className="pt-3 mt-3 border-t border-slate-50 flex items-center justify-between">
        <span className="text-[9px] text-slate-300 font-medium">{joinDate}</span>
        <button
          onClick={() => onInspectTree(m)}
          className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-slate-900 text-white text-[9px] font-black uppercase tracking-wider hover:bg-indigo-600 transition-colors shadow-sm"
        >
          <GitBranch className="h-2.5 w-2.5" />
          View Tree
        </button>
      </div>
    </div>
  );
}

// ── Level Column ──────────────────────────────────────────────────────────────
const PAGE_SIZE = 6;

function LevelColumn({
  group,
  searchQuery,
  onInspectTree,
}: {
  group: LevelGroup;
  searchQuery: string;
  onInspectTree: (member: AdminTeamMember) => void;
}) {
  const palette = getPalette(group.level);
  const [page, setPage] = useState(0);

  const filtered = group.members.filter(
    (m) =>
      !searchQuery ||
      m.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      m.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      m.referralCode.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (m.sponsorName ?? "").toLowerCase().includes(searchQuery.toLowerCase())
  );

  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
  const paginated = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);

  useEffect(() => setPage(0), [searchQuery]);

  const activeCount = group.members.filter((m) => m.isActive).length;
  const totalEarnings = group.members.reduce((s, m) => s + m.totalEarnings, 0);

  return (
    <div className="flex-shrink-0 w-[290px] flex flex-col">
      {/* Column header */}
      <div className={`${palette.header} rounded-[1.5rem] p-5 mb-3 shadow-lg`}>
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            <div className={`h-2 w-2 rounded-full ${palette.dot} animate-pulse`} />
            <p className="text-[10px] font-black uppercase tracking-widest text-white opacity-70">
              Level {group.level}
            </p>
          </div>
          <span className={`text-[9px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full ${palette.badge}`}>
            {filtered.length}/{group.members.length}
          </span>
        </div>
        <p className="text-2xl font-black text-white tracking-tighter leading-none mb-1">
          {group.members.length}
          <span className="text-sm font-bold opacity-50 ml-1">members</span>
        </p>
        <div className="flex items-center gap-3 mt-2">
          <p className="text-[10px] font-bold text-white opacity-50">
            {activeCount} active &middot; {group.members.length - activeCount} inactive
          </p>
        </div>
        <div className="mt-3 pt-3 border-t border-white/10">
          <p className="text-[10px] font-black text-white opacity-40 uppercase tracking-widest mb-0.5">
            Total Earned
          </p>
          <p className="text-sm font-black text-white opacity-80">
            ₹{totalEarnings.toLocaleString("en-IN")}
          </p>
        </div>
      </div>

      {/* Members */}
      <div className="flex-1 space-y-2">
        {paginated.length === 0 ? (
          <div className="bg-white rounded-2xl border border-slate-100 p-6 text-center">
            <p className="text-[10px] font-black text-slate-300 uppercase tracking-widest">
              No results
            </p>
          </div>
        ) : (
          paginated.map((m) => (
            <MemberCard key={m._id} m={m} onInspectTree={onInspectTree} />
          ))
        )}
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between mt-3 px-1">
          <button
            onClick={() => setPage((p) => Math.max(0, p - 1))}
            disabled={page === 0}
            className="p-1.5 rounded-lg hover:bg-slate-100 disabled:opacity-30 transition-all"
          >
            <ChevronLeft className="h-4 w-4 text-slate-500" />
          </button>
          <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">
            {page + 1} / {totalPages}
          </span>
          <button
            onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
            disabled={page === totalPages - 1}
            className="p-1.5 rounded-lg hover:bg-slate-100 disabled:opacity-30 transition-all"
          >
            <ChevronRight className="h-4 w-4 text-slate-500" />
          </button>
        </div>
      )}
    </div>
  );
}

// ── Main Page ─────────────────────────────────────────────────────────────────
export default function AdminTeamLevelsPage() {
  const [data, setData] = useState<TeamLevelsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState("");

  // View mode: "columns" or "tree"
  const [viewMode, setViewMode] = useState<"columns" | "tree">("columns");
  const [selectedMemberId, setSelectedMemberId] = useState<string | null>(null);
  const [treeData, setTreeData] = useState<TreeDetailData | null>(null);
  const [treeLoading, setTreeLoading] = useState(false);

  // Dropdown states
  const [teamDropdownOpen, setTeamDropdownOpen] = useState(false);
  const [dropdownSearch, setDropdownSearch] = useState("");
  const dropdownRef = useRef<HTMLDivElement>(null);

  const load = () => {
    setLoading(true);
    setError(null);
    fetch("/api/admin/team-levels")
      .then((r) => r.json())
      .then((res) => {
        if (res.success) setData(res.data);
        else setError(res.error ?? "Failed to load");
      })
      .catch(() => setError("Server error"))
      .finally(() => setLoading(false));
  };

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

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

  // Fetch tree data when a member is selected
  const fetchMemberTree = (userId: string) => {
    setSelectedMemberId(userId);
    setViewMode("tree");
    setTreeLoading(true);
    setTeamDropdownOpen(false);

    fetch(`/api/admin/network-tree?userId=${userId}`)
      .then((r) => r.json())
      .then((res) => {
        if (res.success) {
          setTreeData(res.data);
        } else {
          toast.error(res.error || "Failed to load team tree");
        }
      })
      .catch(() => toast.error("Failed to load team tree"))
      .finally(() => setTreeLoading(false));
  };

  // Collect all flat members for the dropdown
  const allMembers: AdminTeamMember[] = data
    ? data.levels.flatMap((l) => l.members).sort((a, b) => a.name.localeCompare(b.name))
    : [];

  const filteredDropdownMembers = allMembers.filter(
    (m) =>
      m.name.toLowerCase().includes(dropdownSearch.toLowerCase()) ||
      m.email.toLowerCase().includes(dropdownSearch.toLowerCase()) ||
      m.referralCode.toLowerCase().includes(dropdownSearch.toLowerCase())
  );

  const activeSelectedMember = allMembers.find((m) => m._id === selectedMemberId);

  // Summary stats
  const totalActive =
    data?.levels.reduce(
      (s, l) => s + l.members.filter((m) => m.isActive).length,
      0
    ) ?? 0;
  const totalEarnings =
    data?.levels.reduce(
      (s, l) => s + l.members.reduce((ms, m) => ms + m.totalEarnings, 0),
      0
    ) ?? 0;

  return (
    <div className="space-y-8">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-2">
            Admin · Network
          </p>
          <div className="flex items-center gap-4 flex-wrap">
            <h1 className="text-3xl md:text-4xl font-black text-black tracking-tight leading-none">
              Team Level Wise
            </h1>

            {/* View Mode Toggle Switch next to heading */}
            <div className="inline-flex items-center p-1 bg-slate-100 rounded-xl border border-slate-200">
              <button
                onClick={() => setViewMode("columns")}
                className={clsx(
                  "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-black uppercase tracking-wider transition-all",
                  viewMode === "columns"
                    ? "bg-white text-slate-900 shadow-sm"
                    : "text-slate-500 hover:text-slate-900"
                )}
              >
                <LayoutGrid className="h-3.5 w-3.5" />
                Level Columns
              </button>
              <button
                onClick={() => {
                  if (!selectedMemberId && allMembers.length > 0) {
                    fetchMemberTree(allMembers[0]._id);
                  } else {
                    setViewMode("tree");
                  }
                }}
                className={clsx(
                  "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-black uppercase tracking-wider transition-all",
                  viewMode === "tree"
                    ? "bg-slate-900 text-white shadow-sm"
                    : "text-slate-500 hover:text-slate-900"
                )}
              >
                <GitBranch className="h-3.5 w-3.5" />
                Member Tree View
              </button>
            </div>
          </div>

          <p className="text-sm text-slate-500 mt-3 font-medium max-w-lg">
            Inspect all platform associates across every network level or select any member to visualize their full team tree.
          </p>
        </div>

        <button
          onClick={load}
          disabled={loading}
          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 disabled:opacity-50 self-start md:self-auto"
        >
          <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
          Refresh
        </button>
      </div>

      {/* Summary stat chips */}
      {data && (
        <div className="flex flex-wrap gap-3">
          <div className="flex items-center gap-3 px-5 py-3 bg-slate-900 text-white rounded-2xl shadow-sm">
            <LayersIcon className="h-4 w-4 text-slate-400" />
            <div>
              <p className="text-lg font-black leading-none">{data.levels.length}</p>
              <p className="text-[9px] font-black text-slate-500 uppercase tracking-widest">
                Levels
              </p>
            </div>
          </div>
          <div className="flex items-center gap-3 px-5 py-3 bg-white border border-slate-100 rounded-2xl shadow-sm">
            <Users className="h-4 w-4 text-slate-400" />
            <div>
              <p className="text-lg font-black text-black leading-none">{data.totalMembers}</p>
              <p className="text-[9px] font-black text-slate-400 uppercase tracking-widest">
                Total Members
              </p>
            </div>
          </div>
          <div className="flex items-center gap-3 px-5 py-3 bg-emerald-50 border border-emerald-100 rounded-2xl shadow-sm">
            <CheckCircle2 className="h-4 w-4 text-emerald-500" />
            <div>
              <p className="text-lg font-black text-emerald-700 leading-none">{totalActive}</p>
              <p className="text-[9px] font-black text-emerald-500 uppercase tracking-widest">
                Active
              </p>
            </div>
          </div>
          <div className="flex items-center gap-3 px-5 py-3 bg-indigo-50 border border-indigo-100 rounded-2xl shadow-sm">
            <TrendingUp className="h-4 w-4 text-indigo-500" />
            <div>
              <p className="text-lg font-black text-indigo-700 leading-none">
                ₹{totalEarnings.toLocaleString("en-IN")}
              </p>
              <p className="text-[9px] font-black text-indigo-400 uppercase tracking-widest">
                Total Distributed
              </p>
            </div>
          </div>
        </div>
      )}

      {/* ── Search + Team Dropdown Bar ── */}
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
        {/* Search input */}
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-300" />
          <input
            type="text"
            placeholder="Search by name, email, referral code or sponsor…"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-11 pr-4 py-3.5 bg-white border border-slate-200 rounded-2xl text-xs font-medium text-black placeholder:text-slate-300 focus:outline-none focus:border-indigo-400 transition-all shadow-sm"
          />
        </div>

        {/* Dropdown next to search: Select Member Team Tree */}
        <div className="relative w-full sm:w-80" ref={dropdownRef}>
          <button
            type="button"
            onClick={() => setTeamDropdownOpen((o) => !o)}
            className="w-full flex items-center justify-between px-4 py-3.5 rounded-2xl border border-slate-200 bg-white shadow-sm hover:border-indigo-300 transition-all text-left"
          >
            <div className="flex items-center gap-2.5 min-w-0">
              <GitBranch className="h-4 w-4 text-indigo-600 flex-shrink-0" />
              <div className="min-w-0">
                {activeSelectedMember ? (
                  <div>
                    <span className="font-bold text-xs text-slate-900 block truncate leading-tight">
                      {activeSelectedMember.name}
                    </span>
                    <span className="text-[9px] font-mono text-slate-400">
                      {activeSelectedMember.referralCode} · L{activeSelectedMember.level}
                    </span>
                  </div>
                ) : (
                  <span className="text-xs font-bold text-slate-600">
                    Select Member Team Tree…
                  </span>
                )}
              </div>
            </div>
            <ChevronDown
              className={`h-4 w-4 text-slate-400 flex-shrink-0 transition-transform ${
                teamDropdownOpen ? "rotate-180" : ""
              }`}
            />
          </button>

          {/* Dropdown panel */}
          {teamDropdownOpen && (
            <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-80 flex flex-col w-full sm:w-96">
              <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 associate for tree view…"
                    value={dropdownSearch}
                    onChange={(e) => setDropdownSearch(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">
                {filteredDropdownMembers.length === 0 ? (
                  <div className="p-4 text-center text-xs text-slate-400 font-medium">
                    No matching members found
                  </div>
                ) : (
                  filteredDropdownMembers.map((m) => (
                    <button
                      key={m._id}
                      type="button"
                      onClick={() => fetchMemberTree(m._id)}
                      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">
                          {m.name}
                        </p>
                        <p className="text-[10px] text-slate-400 truncate">
                          {m.email} · Code:{" "}
                          <span className="font-mono font-bold text-slate-600">
                            {m.referralCode}
                          </span>
                        </p>
                      </div>
                      <div className="flex items-center gap-2 flex-shrink-0">
                        <span className="text-[9px] font-black px-2 py-0.5 rounded bg-slate-100 text-slate-600">
                          {m.downlineCount} direct
                        </span>
                        {selectedMemberId === m._id && (
                          <CheckCircle2 className="h-4 w-4 text-indigo-600" />
                        )}
                      </div>
                    </button>
                  ))
                )}
              </div>
            </div>
          )}
        </div>

        {/* Clear / Back to columns view button */}
        {viewMode === "tree" && (
          <button
            onClick={() => setViewMode("columns")}
            className="flex items-center gap-1.5 px-4 py-3.5 rounded-2xl bg-slate-100 text-slate-700 text-xs font-black uppercase tracking-wider hover:bg-slate-200 transition-colors"
          >
            <X className="h-3.5 w-3.5" />
            Back to All Levels
          </button>
        )}
      </div>

      {/* Loading state */}
      {loading && (
        <div className="flex items-center justify-center py-32">
          <Loader2 className="h-10 w-10 text-indigo-600 animate-spin opacity-30" />
        </div>
      )}

      {/* Error state */}
      {error && !loading && (
        <div className="rounded-3xl bg-rose-50 border border-rose-100 p-8 text-center text-rose-600 text-sm font-black uppercase tracking-widest">
          {error}
        </div>
      )}

      {/* ── TREE VIEW MODE ── */}
      {!loading && !error && viewMode === "tree" && (
        <div className="space-y-6">
          {treeLoading ? (
            <div className="flex items-center justify-center py-24 bg-white rounded-3xl border border-slate-100">
              <Loader2 className="h-8 w-8 text-indigo-600 animate-spin opacity-40" />
            </div>
          ) : treeData && treeData.tree ? (
            <div className="space-y-6">
              {/* Member Team Summary Card */}
              <div className="p-6 bg-gradient-to-r from-slate-900 to-indigo-950 text-white rounded-3xl shadow-xl flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div className="flex items-center gap-4">
                  <div className="h-14 w-14 rounded-2xl bg-white/10 flex items-center justify-center text-xl font-black shadow-inner">
                    {treeData.user.name[0]?.toUpperCase()}
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <h2 className="text-xl font-black tracking-tight">{treeData.user.name}</h2>
                      <span className="px-2.5 py-0.5 bg-indigo-500/30 border border-indigo-400/30 text-indigo-200 text-[10px] font-black uppercase rounded-lg">
                        Level {treeData.user.level}
                      </span>
                    </div>
                    <p className="text-xs text-slate-300 font-medium mt-1">
                      {treeData.user.email} · Code:{" "}
                      <span className="font-mono font-bold text-white">
                        {treeData.user.referralCode}
                      </span>
                    </p>
                  </div>
                </div>

                {/* Numbers */}
                <div className="flex items-center gap-6 border-t md:border-t-0 md:border-l border-white/10 pt-4 md:pt-0 md:pl-6">
                  <div>
                    <p className="text-[10px] font-black uppercase tracking-widest text-slate-400">
                      Direct Members
                    </p>
                    <p className="text-2xl font-black text-white">{treeData.directCount}</p>
                  </div>
                  <div>
                    <p className="text-[10px] font-black uppercase tracking-widest text-indigo-300">
                      Total Team Size
                    </p>
                    <p className="text-2xl font-black text-indigo-400">
                      {treeData.totalTeamCount}
                    </p>
                  </div>
                  <div>
                    <p className="text-[10px] font-black uppercase tracking-widest text-emerald-400">
                      Total Earnings
                    </p>
                    <p className="text-2xl font-black text-white">
                      ₹{treeData.user.totalEarnings.toLocaleString("en-IN")}
                    </p>
                  </div>
                </div>
              </div>

              {/* Hierarchy Tree Card */}
              <div className="bg-white rounded-3xl border border-slate-100 shadow-sm p-6 space-y-4">
                <div className="flex items-center justify-between pb-3 border-b border-slate-100">
                  <div className="flex items-center gap-2">
                    <Network className="h-4 w-4 text-indigo-600" />
                    <h3 className="text-xs font-black uppercase tracking-widest text-slate-700">
                      Downline Hierarchy Tree
                    </h3>
                  </div>
                  <p className="text-[11px] text-slate-400 font-medium">
                    Showing all levels & sub-teams under {treeData.user.name}
                  </p>
                </div>

                {treeData.tree.children.length === 0 ? (
                  <div className="py-12 text-center text-slate-400 text-xs font-medium">
                    No downline team members found under {treeData.user.name}.
                  </div>
                ) : (
                  <div className="space-y-3">
                    <AdminTreeNodeCard
                      node={treeData.tree}
                      depth={0}
                      onSelectRoot={fetchMemberTree}
                    />
                  </div>
                )}
              </div>
            </div>
          ) : (
            <div className="p-12 text-center bg-white rounded-3xl border border-slate-100 text-slate-400">
              Select an associate from the dropdown above to inspect their team tree.
            </div>
          )}
        </div>
      )}

      {/* ── COLUMNS VIEW MODE ── */}
      {!loading && !error && viewMode === "columns" && data && data.levels.length > 0 && (
        <div className="relative">
          {/* Right fade hint */}
          <div className="pointer-events-none absolute right-0 top-0 bottom-0 w-16 bg-gradient-to-l from-slate-50 to-transparent z-10 rounded-r-3xl" />
          <div className="overflow-x-auto pb-6 -mx-4 px-4 md:-mx-8 md:px-8">
            <div className="flex gap-4 w-max">
              {data.levels.map((group) => (
                <LevelColumn
                  key={group.level}
                  group={group}
                  searchQuery={searchQuery}
                  onInspectTree={(m) => fetchMemberTree(m._id)}
                />
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}