/**
 * app/(main)/team-levels/page.tsx
 * Team Level-wise Associates — shows all downline members grouped by level
 * displayed as horizontal level columns side by side.
 */

"use client";

import { useState, useEffect } from "react";
import axios from "axios";
import { useAuth } from "@/hooks/useAuth";
import {
  Loader2,
  TrendingUp,
  Wallet,
  CheckCircle2,
  XCircle,
  ChevronLeft,
  ChevronRight,
  LayersIcon,
  Search,
} from "lucide-react";

interface TeamMember {
  _id: string;
  name: string;
  email: string;
  referralCode: string;
  totalEarnings: number;
  wallet: number;
  isActive: boolean;
  joinedAt: string;
  level: number;
}

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

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

const LEVEL_COLORS: Record<number, { bg: string; border: string; badge: string; dot: string; header: string }> = {
  1: {
    bg: "bg-black",
    border: "border-black/20",
    badge: "bg-white text-black",
    dot: "bg-white",
    header: "text-white",
  },
  2: {
    bg: "bg-indigo-600",
    border: "border-indigo-400/30",
    badge: "bg-indigo-100 text-indigo-700",
    dot: "bg-indigo-200",
    header: "text-white",
  },
  3: {
    bg: "bg-violet-600",
    border: "border-violet-400/30",
    badge: "bg-violet-100 text-violet-700",
    dot: "bg-violet-200",
    header: "text-white",
  },
  4: {
    bg: "bg-emerald-600",
    border: "border-emerald-400/30",
    badge: "bg-emerald-100 text-emerald-700",
    dot: "bg-emerald-200",
    header: "text-white",
  },
  5: {
    bg: "bg-amber-500",
    border: "border-amber-400/30",
    badge: "bg-amber-100 text-amber-700",
    dot: "bg-amber-200",
    header: "text-white",
  },
  6: {
    bg: "bg-rose-600",
    border: "border-rose-400/30",
    badge: "bg-rose-100 text-rose-700",
    dot: "bg-rose-200",
    header: "text-white",
  },
  7: {
    bg: "bg-slate-700",
    border: "border-slate-500/30",
    badge: "bg-slate-100 text-slate-700",
    dot: "bg-slate-300",
    header: "text-white",
  },
};

function getColors(level: number) {
  return LEVEL_COLORS[level] ?? LEVEL_COLORS[7];
}

function MemberCard({ member }: { member: TeamMember }) {
  const joinDate = new Date(member.joinedAt).toLocaleDateString("en-IN", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });

  return (
    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm hover:shadow-md hover:border-slate-200 transition-all duration-200 p-4 group">
      {/* Header row */}
      <div className="flex items-start gap-3 mb-3">
        <div className="h-9 w-9 rounded-xl bg-slate-900 flex items-center justify-center text-white text-xs font-black flex-shrink-0 shadow-sm group-hover:scale-105 transition-transform">
          {member.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">
            {member.name}
          </p>
          <p className="text-[10px] text-slate-400 font-medium truncate">
            {member.email}
          </p>
        </div>
        <div className="flex-shrink-0">
          {member.isActive ? (
            <CheckCircle2 className="h-4 w-4 text-emerald-500" />
          ) : (
            <XCircle className="h-4 w-4 text-rose-400" />
          )}
        </div>
      </div>

      {/* Stats */}
      <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 tracking-tight">
            &#8377;{member.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 tracking-tight">
            &#8377;{member.wallet.toLocaleString("en-IN")}
          </p>
        </div>
      </div>

      {/* Footer */}
      <div className="flex items-center justify-between">
        <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest bg-slate-50 px-2 py-1 rounded-lg">
          {member.referralCode}
        </span>
        <span className="text-[9px] text-slate-400 font-medium">{joinDate}</span>
      </div>
    </div>
  );
}

function LevelColumn({ group, searchQuery }: { group: LevelGroup; searchQuery: string }) {
  const colors = getColors(group.level);
  const [page, setPage] = useState(0);
  const PAGE_SIZE = 5;

  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())
  );

  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;

  return (
    <div className="flex-shrink-0 w-72 flex flex-col">
      {/* Column Header */}
      <div className={`${colors.bg} 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 ${colors.dot} animate-pulse`} />
            <p className={`text-[10px] font-black uppercase tracking-widest ${colors.header} opacity-70`}>
              Level {group.level}
            </p>
          </div>
          <span className={`text-[9px] font-black uppercase tracking-widest px-2.5 py-1 rounded-full ${colors.badge}`}>
            {filtered.length} / {group.members.length}
          </span>
        </div>
        <p className={`text-2xl font-black ${colors.header} tracking-tighter leading-none mb-1`}>
          {group.members.length}
          <span className="text-sm font-bold opacity-50 ml-1">members</span>
        </p>
        <p className={`text-[10px] font-bold ${colors.header} opacity-50`}>
          {activeCount} active &middot; {group.members.length - activeCount} inactive
        </p>
      </div>

      {/* Members List */}
      <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((member) => (
            <MemberCard key={member._id} member={member} />
          ))
        )}
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between mt-3 px-1">
          <button
            id={`level-${group.level}-prev`}
            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
            id={`level-${group.level}-next`}
            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>
  );
}

export default function TeamLevelsPage() {
  const { user } = useAuth();
  const [data, setData] = useState<TeamLevelsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState("");

  useEffect(() => {
    if (!user) return;
    setLoading(true);
    axios
      .get("/api/team-levels")
      .then(({ data: res }) => setData(res.data))
      .catch((err) =>
        setError(err instanceof Error ? err.message : "Failed to load team levels")
      )
      .finally(() => setLoading(false));
  }, [user]);

  return (
    <div className="space-y-8">
      {/* Page 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">
            Network
          </p>
          <h1 className="text-3xl md:text-5xl font-jakarta font-black text-black tracking-tighter leading-none">
            Team Level Wise.
          </h1>
          <p className="text-sm text-slate-500 mt-4 font-medium max-w-md">
            All associates organized by network depth &mdash; your complete downline at a glance.
          </p>
        </div>

        {/* Stats */}
        {data && (
          <div className="flex gap-4">
            <div className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-4 text-center min-w-[100px]">
              <p className="text-2xl font-black text-black tracking-tighter">
                {data.totalMembers}
              </p>
              <p className="text-[9px] font-black text-slate-300 uppercase tracking-widest mt-1">
                Total
              </p>
            </div>
            <div className="bg-black rounded-2xl px-6 py-4 text-center min-w-[100px]">
              <p className="text-2xl font-black text-white tracking-tighter">
                {data.levels.length}
              </p>
              <p className="text-[9px] font-black text-slate-500 uppercase tracking-widest mt-1">
                Levels
              </p>
            </div>
          </div>
        )}
      </div>

      {/* Search Bar */}
      <div className="relative max-w-md">
        <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-300" />
        <input
          id="team-levels-search"
          type="text"
          placeholder="Search by name, email or referral code..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full pl-11 pr-4 py-3 bg-white border border-slate-100 rounded-2xl text-xs font-medium text-black placeholder:text-slate-300 focus:outline-none focus:border-black transition-all shadow-sm"
        />
      </div>

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

      {/* Error */}
      {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>
      )}

      {/* Empty */}
      {!loading && !error && data?.levels.length === 0 && (
        <div className="rounded-[3rem] bg-white border border-slate-100 shadow-xl shadow-black/[0.02] p-20 text-center">
          <div className="h-20 w-20 rounded-[2rem] bg-slate-50 border border-slate-100 flex items-center justify-center mx-auto mb-8">
            <LayersIcon className="h-8 w-8 text-slate-200" />
          </div>
          <h3 className="text-2xl font-jakarta font-black text-black uppercase tracking-tight mb-4">
            No Team Members Yet
          </h3>
          <p className="text-sm text-slate-400 font-medium max-w-sm mx-auto leading-relaxed">
            Share your referral code{" "}
            <span className="font-black text-black">{user?.referralCode}</span> to start
            building your network.
          </p>
        </div>
      )}

      {/* Level Columns with horizontal scroll */}
      {!loading && !error && data && data.levels.length > 0 && (
        <div className="relative">
          <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">
            <div className="flex gap-4 w-max">
              {data.levels.map((group) => (
                <LevelColumn
                  key={group.level}
                  group={group}
                  searchQuery={searchQuery}
                />
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}