'use client';

import { useState } from 'react';
import { ChevronDown, ChevronRight, User, DollarSign, Users } from 'lucide-react';

interface TreeNode {
  userId: string;
  email: string;
  firstName?: string;
  lastName?: string;
  depth: number;
  referralCount: number;
  totalEarned: number;
  children: TreeNode[];
}

interface ReferralTreeViewProps {
  tree: TreeNode | null;
  isLoading?: boolean;
}

function TreeNodeItem({ node, defaultExpanded = false }: { node: TreeNode; defaultExpanded?: boolean }) {
  const [expanded, setExpanded] = useState(defaultExpanded || node.depth === 0);
  const hasChildren = node.children.length > 0;

  return (
    <div className="ml-0">
      <div
        className={`flex items-center gap-3 rounded-lg border border-white/10 px-4 py-3 transition-all hover:bg-white/5 ${
          node.depth === 0 ? 'bg-blue-500/10 border-blue-500/30' : ''
        }`}
      >
        {hasChildren ? (
          <button
            onClick={() => setExpanded(!expanded)}
            className="rounded p-0.5 text-slate-400 hover:bg-white/10 hover:text-slate-200"
            type="button"
          >
            {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
          </button>
        ) : (
          <span className="w-5" />
        )}

        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500/20 text-blue-400">
          <User className="h-4 w-4" />
        </div>

        <div className="flex-1 min-w-0">
          <p className="truncate text-sm font-medium text-slate-200">
            {node.firstName || node.lastName
              ? `${node.firstName ?? ''} ${node.lastName ?? ''}`.trim()
              : 'Anonymous'}
          </p>
          <p className="truncate text-xs text-slate-500">{node.email}</p>
        </div>

        <div className="flex items-center gap-4 text-xs">
          <div className="flex items-center gap-1 text-slate-400">
            <Users className="h-3.5 w-3.5" />
            <span>{node.referralCount}</span>
          </div>
          <div className="flex items-center gap-1 text-emerald-400">
            <DollarSign className="h-3.5 w-3.5" />
            <span>${node.totalEarned.toFixed(2)}</span>
          </div>
        </div>
      </div>

      {expanded && hasChildren && (
        <div className="ml-6 mt-2 space-y-2 border-l border-white/10 pl-4">
          {node.children.map((child) => (
            <TreeNodeItem key={child.userId} node={child} />
          ))}
        </div>
      )}
    </div>
  );
}

export function ReferralTreeView({ tree, isLoading }: ReferralTreeViewProps) {
  if (isLoading) {
    return (
      <div className="space-y-3">
        {[1, 2, 3].map((i) => (
          <div key={i} className="animate-pulse rounded-lg border border-white/10 bg-white/5 p-4">
            <div className="flex items-center gap-3">
              <div className="h-8 w-8 rounded-full bg-white/10" />
              <div className="flex-1 space-y-2">
                <div className="h-3 w-32 rounded bg-white/10" />
                <div className="h-2 w-48 rounded bg-white/10" />
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (!tree) {
    return (
      <div className="rounded-lg border border-white/10 bg-white/5 p-8 text-center">
        <Users className="mx-auto h-12 w-12 text-slate-600" />
        <p className="mt-3 text-sm text-slate-500">No referral tree data available yet.</p>
        <p className="text-xs text-slate-600">Share your referral link to start building your tree.</p>
      </div>
    );
  }

  return (
    <div className="space-y-2">
      <div className="mb-4 flex items-center justify-between text-xs text-slate-500">
        <span>Your Referral Network</span>
        <span>{tree.referralCount} total referrals</span>
      </div>
      <TreeNodeItem node={tree} defaultExpanded />
    </div>
  );
}