'use client';

import { useState, useCallback, useEffect } from 'react';
import Link from 'next/link';
import { useReferralTree } from '../hooks/use-users';
import { usersApi } from '../api/users.api';
import { formatNumber } from '@/lib/utils/format';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import type { ReferralNode } from '@/types/user';
import { cn } from '@/lib/utils';

interface ReferralTreeProps {
  accountSequence: string;
}

export function ReferralTree({ accountSequence }: ReferralTreeProps) {
  const [treeRootUser, setTreeRootUser] = useState<string>(accountSequence);
  const [expandedNodes, setExpandedNodes] = useState<Record<string, ReferralNode[] | null>>({});

  const { data: referralTree, isLoading } = useReferralTree(treeRootUser, 'both', 1);

  // 当 referralTree 数据加载完成后，自动展开当前用户的直推下级
  useEffect(() => {
    if (referralTree?.currentUser && referralTree.directReferrals?.length > 0) {
      setExpandedNodes((prev) => ({
        ...prev,
        [referralTree.currentUser.accountSequence]: referralTree.directReferrals,
      }));
    }
  }, [referralTree]);

  // 切换推荐关系树的根节点
  const handleTreeNodeClick = useCallback((node: ReferralNode) => {
    setTreeRootUser(node.accountSequence);
  }, []);

  // 展开/收起节点的下级
  const handleToggleNode = useCallback(async (nodeSeq: string, hasChildren: boolean) => {
    if (!hasChildren) return;

    // 如果已展开，则收起
    if (expandedNodes[nodeSeq] !== undefined) {
      setExpandedNodes((prev) => {
        const newState = { ...prev };
        delete newState[nodeSeq];
        return newState;
      });
      return;
    }

    // 展开：先标记为 null（加载中），然后获取数据
    setExpandedNodes((prev) => ({ ...prev, [nodeSeq]: null }));

    try {
      const treeData = await usersApi.getReferralTree(nodeSeq, 'down', 1);
      setExpandedNodes((prev) => ({ ...prev, [nodeSeq]: treeData.directReferrals }));
    } catch (error) {
      console.error('获取下级失败:', error);
      setExpandedNodes((prev) => {
        const newState = { ...prev };
        delete newState[nodeSeq];
        return newState;
      });
    }
  }, [expandedNodes]);

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">引荐关系</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {[...Array(3)].map((_, i) => (
              <Skeleton key={i} className="h-16 w-full" />
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!referralTree) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">引荐关系</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-muted-foreground text-center py-8">暂无引荐关系数据</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="text-lg">引荐关系树</CardTitle>
        {treeRootUser !== accountSequence && (
          <Button variant="outline" size="sm" onClick={() => setTreeRootUser(accountSequence)}>
            返回当前用户
          </Button>
        )}
      </CardHeader>
      <CardContent>
        {/* 树形结构容器 - 仿照1.0 admin-web的样式 */}
        <div className="flex flex-col items-center gap-4 p-6 bg-muted/30 rounded-lg">
          {/* 向上的引荐人链 */}
          <div className="flex flex-col items-center gap-2">
            <span className="text-xs text-muted-foreground uppercase tracking-wide mb-2">
              引荐人链 (向上)
            </span>
            {(referralTree.ancestors?.length ?? 0) > 0 ? (
              <>
                <div className="flex flex-col items-center gap-2">
                  {(referralTree.ancestors || []).map((ancestor, index) => (
                    <div key={ancestor.accountSequence} className="flex flex-col items-center">
                      <TreeNodeCard
                        node={ancestor}
                        onClick={() => handleTreeNodeClick(ancestor)}
                      />
                      {index < (referralTree.ancestors?.length ?? 0) - 1 && (
                        <div className="text-muted-foreground text-lg py-1">↓</div>
                      )}
                    </div>
                  ))}
                </div>
                <div className="text-muted-foreground text-lg py-1">↓</div>
              </>
            ) : (
              <>
                {/* 总部节点 */}
                <div className="flex items-center justify-center px-6 py-2 bg-gradient-to-r from-primary/10 to-green-500/10 border-2 border-primary rounded-lg min-w-[100px]">
                  <span className="text-base font-bold text-primary">总部</span>
                </div>
                <div className="text-muted-foreground text-lg py-1">↓</div>
              </>
            )}
          </div>

          {/* 当前用户节点 - 递归组件 */}
          <div className="flex flex-col items-center w-full">
            <ReferralNodeItem
              node={referralTree.currentUser}
              isCurrentUser={true}
              isHighlight={referralTree.currentUser.accountSequence === accountSequence}
              expandedNodes={expandedNodes}
              onToggle={handleToggleNode}
              onClick={handleTreeNodeClick}
            />
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

/**
 * 树节点卡片 - 单个节点的展示
 */
interface TreeNodeCardProps {
  node: ReferralNode;
  isCurrentUser?: boolean;
  isHighlight?: boolean;
  onClick?: () => void;
}

function TreeNodeCard({ node, isCurrentUser, isHighlight, onClick }: TreeNodeCardProps) {
  return (
    <button
      type="button"
      className={cn(
        'flex flex-col items-center px-6 py-3 bg-background border-2 border-border rounded-lg cursor-pointer transition-all',
        'hover:border-primary hover:shadow-md hover:-translate-y-0.5',
        isCurrentUser && 'border-primary bg-primary/5',
        isHighlight && 'border-[3px] ring-4 ring-primary/20'
      )}
      onClick={onClick}
    >
      <span className="font-mono text-base font-bold text-foreground">
        {node.accountSequence}
      </span>
      <span className="text-xs text-muted-foreground mt-1">
        {node.nickname || '未设置'}
      </span>
      <span className="text-xs text-muted-foreground mt-1">
        本人认种: {formatNumber(node.personalAdoptions)} / 团队认种: {formatNumber(node.teamAdoptions)}
      </span>
      {node.directReferralCount > 0 && (
        <span className="text-xs text-primary font-medium mt-1">
          引荐: {formatNumber(node.directReferralCount)}
        </span>
      )}
    </button>
  );
}

/**
 * 递归渲染引荐节点 - 支持展开/收起子节点
 */
interface ReferralNodeItemProps {
  node: ReferralNode;
  isCurrentUser?: boolean;
  isHighlight?: boolean;
  expandedNodes: Record<string, ReferralNode[] | null>;
  onToggle: (nodeSeq: string, hasChildren: boolean) => void;
  onClick: (node: ReferralNode) => void;
}

function ReferralNodeItem({
  node,
  isCurrentUser = false,
  isHighlight = false,
  expandedNodes,
  onToggle,
  onClick,
}: ReferralNodeItemProps) {
  const hasChildren = node.directReferralCount > 0;
  const isExpanded = expandedNodes[node.accountSequence] !== undefined;
  const isLoading = expandedNodes[node.accountSequence] === null;
  const children = expandedNodes[node.accountSequence] || [];

  return (
    <div className="flex flex-col items-center">
      {/* 节点内容 */}
      <div className="flex flex-col items-center">
        <TreeNodeCard
          node={node}
          isCurrentUser={isCurrentUser}
          isHighlight={isHighlight}
          onClick={() => onClick(node)}
        />

        {/* 展开/收起按钮 */}
        {hasChildren && (
          <button
            type="button"
            className={cn(
              'flex items-center justify-center w-7 h-7 mt-2 bg-primary text-white',
              'border-none rounded-full cursor-pointer text-lg font-bold leading-none',
              'transition-all hover:opacity-80 hover:scale-110',
              'disabled:opacity-50 disabled:cursor-not-allowed'
            )}
            onClick={(e) => {
              e.stopPropagation();
              onToggle(node.accountSequence, hasChildren);
            }}
            disabled={isLoading}
          >
            {isLoading ? '...' : isExpanded ? '−' : '+'}
          </button>
        )}
      </div>

      {/* 递归渲染子节点 */}
      {isExpanded && children.length > 0 && (
        <div className="flex flex-col items-center mt-2 w-full">
          <div className="text-muted-foreground text-lg py-1">↓</div>
          <div className="flex flex-wrap gap-4 justify-center mt-2">
            {children.map((child) => (
              <ReferralNodeItem
                key={child.accountSequence}
                node={child}
                expandedNodes={expandedNodes}
                onToggle={onToggle}
                onClick={onClick}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}