/**
 * app/(main)/network/page.tsx
 * MLM network tree visualization page — original professional theme, mobile-responsive.
 */

"use client";

import { useState, useEffect } from "react";
import axios from "axios";
import { useAuth } from "@/hooks/useAuth";
import { Loader2, Users, ChevronDown, ChevronRight, Share2, Network } from "lucide-react";
import type { NetworkNode } from "@/types";
import { clsx } from "clsx";

function NetworkNodeCard({ node, depth = 0 }: { node: NetworkNode; depth?: number }) {
  const [expanded, setExpanded] = useState(depth < 2);
  const hasChildren = node.children && node.children.length > 0;
  const isRoot = depth === 0;

  return (
    <div
      className={clsx(
        "rounded-2xl sm:rounded-[1.5rem] p-3.5 sm:p-6 transition-all duration-300",
        isRoot
          ? "bg-black text-white shadow-2xl shadow-black/20"
          : "bg-white border border-slate-100 shadow-xl shadow-black/[0.02] hover:border-black"
      )}
    >
      <div className="flex items-center gap-2.5 sm:gap-4">
        {/* Avatar */}
        <div
          className={clsx(
            "h-9 w-9 sm:h-12 sm:w-12 rounded-xl sm:rounded-2xl flex items-center justify-center text-xs sm:text-sm font-black flex-shrink-0 shadow-inner",
            isRoot ? "bg-white text-black" : "bg-black text-white"
          )}
        >
          {node.name[0]?.toUpperCase() || "A"}
        </div>

        {/* Name & Email */}
        <div className="flex-1 min-w-0">
          <p
            className={clsx(
              "font-jakarta font-black uppercase tracking-tight text-xs sm:text-base truncate",
              isRoot ? "text-white" : "text-black"
            )}
          >
            {node.name}
          </p>
          <p
            className={clsx(
              "text-[9px] sm:text-[10px] font-bold tracking-tight truncate",
              isRoot ? "text-slate-400" : "text-slate-400"
            )}
          >
            {node.email}
          </p>
        </div>

        {/* Earnings & Level Badge */}
        <div className="text-right flex-shrink-0 flex flex-col items-end">
          <p
            className={clsx(
              "font-jakarta font-black text-xs sm:text-sm uppercase tracking-tight mb-1 sm:mb-2",
              isRoot ? "text-slate-200" : "text-black"
            )}
          >
            ₹{node.totalEarnings.toLocaleString("en-IN")}
          </p>

          {/* Highlighted level + referral code badge */}
          <div
            className={clsx(
              "inline-flex items-center gap-0 rounded-lg sm:rounded-xl overflow-hidden shadow-sm border",
              isRoot ? "border-white/10" : "border-indigo-100"
            )}
          >
            <span
              className={clsx(
                "px-1.5 sm:px-2.5 py-0.5 sm:py-1 text-[8px] sm:text-[9px] font-black uppercase tracking-wider sm:tracking-widest whitespace-nowrap",
                isRoot ? "bg-white/15 text-white" : "bg-indigo-600 text-white"
              )}
            >
              LVL {depth + 1}
            </span>
            <span
              className={clsx(
                "px-1.5 sm:px-2.5 py-0.5 sm:py-1 text-[8px] sm:text-[9px] font-black uppercase tracking-wider sm:tracking-widest font-mono whitespace-nowrap",
                isRoot ? "bg-white/5 text-slate-300" : "bg-indigo-50 text-indigo-700"
              )}
            >
              {node.referralCode}
            </span>
          </div>
        </div>

        {/* Expand / Collapse Button */}
        {hasChildren && (
          <button
            type="button"
            onClick={() => setExpanded((e) => !e)}
            className={clsx(
              "ml-1 sm:ml-2 p-1.5 sm:p-2 rounded-lg sm:rounded-xl transition-all flex-shrink-0",
              isRoot
                ? "hover:bg-white/10 text-slate-400 hover:text-white"
                : "hover:bg-slate-50 text-slate-400 hover:text-black"
            )}
          >
            {expanded ? (
              <ChevronDown className="h-4 w-4 sm:h-5 sm:w-5" />
            ) : (
              <ChevronRight className="h-4 w-4 sm:h-5 sm:w-5" />
            )}
          </button>
        )}
      </div>

      {/* Children downline with responsive indentation */}
      {hasChildren && expanded && (
        <div className="mt-3 sm:mt-4 ml-2 sm:ml-8 space-y-3 sm:space-y-4 border-l border-slate-200 sm:border-slate-100 pl-2 sm:pl-8 relative">
          {/* Subtle connecting dot */}
          <div className="absolute top-0 left-[-1px] w-[2px] h-4 bg-slate-200 sm:bg-slate-100" />
          {node.children.map((child) => (
            <NetworkNodeCard key={child._id} node={child} depth={depth + 1} />
          ))}
        </div>
      )}
    </div>
  );
}

export default function NetworkPage() {
  const { user } = useAuth();
  const [tree, setTree] = useState<NetworkNode | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  return (
    <div className="space-y-6 sm:space-y-10 md:space-y-12">
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 sm:gap-6">
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em] mb-2">
            Connectivity
          </p>
          <h1 className="text-2xl sm:text-3xl md:text-5xl font-jakarta font-black text-black tracking-tighter leading-none">
            Asset Network.
          </h1>
          <p className="text-xs sm:text-sm text-slate-500 mt-2 sm:mt-4 font-medium max-w-md">
            Real-time visualization of your multi-generational downline and revenue source.
          </p>
        </div>
      </div>

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

      {error && (
        <div className="rounded-3xl bg-red-50 border border-red-100 p-8 text-center text-red-700 text-sm font-black uppercase tracking-widest">
          {error}
        </div>
      )}

      {!loading && !tree?.children?.length && !error && (
        <div className="rounded-[2rem] sm:rounded-[3rem] bg-white border border-slate-100 shadow-xl shadow-black/[0.02] p-8 sm:p-20 text-center">
          <div className="h-16 w-16 sm:h-20 sm:w-20 rounded-[1.5rem] sm:rounded-[2rem] bg-slate-50 border border-slate-100 flex items-center justify-center mx-auto mb-6 sm:mb-8">
            <Share2 className="h-7 w-7 sm:h-8 sm:w-8 text-slate-200" />
          </div>
          <h3 className="text-xl sm:text-2xl font-jakarta font-black text-black uppercase tracking-tight mb-3 sm:mb-4">
            No Connections Found
          </h3>
          <p className="text-xs sm:text-sm text-slate-400 font-medium mb-8 sm:mb-10 max-w-sm mx-auto leading-relaxed">
            Expand your earning potential by sharing your unique institutional referral code.
          </p>
          <div className="inline-flex items-center gap-3 sm:gap-4 bg-slate-50 px-5 sm:px-8 py-3 sm:py-4 rounded-full border border-slate-100 shadow-sm">
            <span className="text-[9px] sm:text-[10px] font-black text-slate-300 uppercase tracking-widest">
              Reference Code
            </span>
            <span className="font-jakarta font-black text-black tracking-widest uppercase text-xs sm:text-base">
              {user?.referralCode}
            </span>
          </div>
        </div>
      )}

      {tree && (
        <div className="space-y-3 sm:space-y-4">
          <div className="flex items-center gap-2 sm:gap-3 mb-4 sm:mb-6 px-1 sm:px-4">
            <Network className="h-4 w-4 text-black" />
            <span className="text-[10px] font-black uppercase tracking-widest text-black">
              Root Node: {tree.name.toUpperCase()}
            </span>
          </div>
          <NetworkNodeCard node={tree} depth={0} />
        </div>
      )}
    </div>
  );
}