'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Folder, FileText } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { ManualTreeNode } from '@/lib/types';

interface TreeNavProps {
  nodes: ManualTreeNode[];
}

/** 递归渲染节点（含子孙） */
function TreeItem({ node, depth = 0 }: { node: ManualTreeNode; depth?: number }) {
  const pathname = usePathname();
  const href = `/manual/${node.id}`;
  const active = pathname === href;

  // ===== 顶层目录 → 分区标题（带分隔线 + 缩进引导线） =====
  if (depth === 0 && node.type === 0) {
    return (
      <div className="border-t border-gray-100 pt-3 first:border-t-0 first:pt-0">
        <div className="flex items-center gap-1.5 px-2 py-1 text-[11px] font-bold uppercase tracking-wider text-slate-400">
          <Folder className="h-3.5 w-3.5 shrink-0 text-amber-500" />
          {node.title}
        </div>
        {node.children.length > 0 && (
          <div className="mt-1 ml-3 space-y-0.5 border-l border-gray-100 pl-2">
            {node.children.map((c) => (
              <TreeItem key={c.id} node={c} depth={depth + 1} />
            ))}
          </div>
        )}
      </div>
    );
  }

  // ===== 嵌套目录 → 子标题（带缩进引导线） =====
  if (node.type === 0) {
    return (
      <div className="pt-2">
        <div className="flex items-center gap-1.5 px-2 py-1 text-sm font-semibold text-slate-700">
          <Folder className="h-3.5 w-3.5 shrink-0 text-amber-400" />
          {node.title}
        </div>
        {node.children.length > 0 && (
          <div className="mt-0.5 ml-3 space-y-0.5 border-l border-gray-100 pl-2">
            {node.children.map((c) => (
              <TreeItem key={c.id} node={c} depth={depth + 1} />
            ))}
          </div>
        )}
      </div>
    );
  }

  // ===== 文档 → 可点击链接 =====
  return (
    <Link
      href={href}
      className={cn(
        'flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors',
        active
          ? 'bg-brand-50 font-medium text-brand-700'
          : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
      )}
    >
      <FileText
        className={cn(
          'h-3.5 w-3.5 shrink-0',
          active ? 'text-brand-600' : 'text-slate-400',
        )}
      />
      <span className="truncate">{node.title}</span>
    </Link>
  );
}

/** 使用手册左侧树形导航（始终展开） */
export function ManualTreeNav({ nodes }: TreeNavProps) {
  if (nodes.length === 0) {
    return (
      <div className="px-3 py-6 text-center text-xs text-slate-400">
        暂无文档
      </div>
    );
  }
  return (
    <nav className="space-y-1">
      {nodes.map((n) => (
        <TreeItem key={n.id} node={n} />
      ))}
    </nav>
  );
}