'use client'

import { useState } from 'react'
import { ChevronRight, ChevronDown, FolderOpen, Folder, Building2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { OUNode } from '@/app/api/ad/tree/route'

interface OUTreeProps {
  tree: OUNode[]
  tenantName: string
  baseDn: string
  selectedOU: string | null   // null = todos (raiz)
  onSelect: (dn: string | null) => void
  mode?: 'users' | 'groups' | 'all'
}

interface NodeProps {
  node: OUNode
  depth: number
  selectedOU: string | null
  onSelect: (dn: string | null) => void
  mode: 'users' | 'groups' | 'all'
}

function OUNodeItem({ node, depth, selectedOU, onSelect, mode }: NodeProps) {
  const [open, setOpen] = useState(depth === 0)
  const hasChildren = node.children.length > 0
  const isSelected = selectedOU === node.dn
  const count = mode === 'users' ? node.userCount : mode === 'groups' ? node.groupCount : node.userCount + node.groupCount

  return (
    <div>
      <button
        className={cn(
          'w-full flex items-center gap-1.5 px-2 py-1.5 rounded-md text-left text-sm transition-colors group',
          isSelected
            ? 'bg-primary/10 text-primary font-medium'
            : 'text-foreground/70 hover:bg-muted hover:text-foreground',
        )}
        style={{ paddingLeft: `${(depth + 1) * 12}px` }}
        onClick={() => onSelect(node.dn)}
      >
        {hasChildren ? (
          <span
            className="shrink-0 text-muted-foreground"
            onClick={(e) => { e.stopPropagation(); setOpen((o) => !o) }}
          >
            {open
              ? <ChevronDown className="w-3.5 h-3.5" />
              : <ChevronRight className="w-3.5 h-3.5" />}
          </span>
        ) : (
          <span className="w-3.5 shrink-0" />
        )}
        {open && hasChildren
          ? <FolderOpen className="w-3.5 h-3.5 shrink-0 text-amber-500" />
          : <Folder className="w-3.5 h-3.5 shrink-0 text-amber-400" />
        }
        <span className="truncate flex-1">{node.label}</span>
        {count > 0 && (
          <span className="text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded-full shrink-0">
            {count}
          </span>
        )}
      </button>

      {open && hasChildren && (
        <div>
          {node.children.map((child) => (
            <OUNodeItem
              key={child.dn}
              node={child}
              depth={depth + 1}
              selectedOU={selectedOU}
              onSelect={onSelect}
              mode={mode}
            />
          ))}
        </div>
      )}
    </div>
  )
}

export function OUTree({ tree, tenantName, baseDn, selectedOU, onSelect, mode = 'all' }: OUTreeProps) {
  const isRootSelected = selectedOU === null

  return (
    <div className="space-y-0.5">
      {/* Nó raiz — mostra tudo */}
      <button
        className={cn(
          'w-full flex items-center gap-1.5 px-2 py-1.5 rounded-md text-left text-sm transition-colors',
          isRootSelected
            ? 'bg-primary/10 text-primary font-medium'
            : 'text-foreground/70 hover:bg-muted hover:text-foreground',
        )}
        onClick={() => onSelect(null)}
      >
        <Building2 className="w-3.5 h-3.5 shrink-0 text-primary" />
        <span className="truncate flex-1">{tenantName}</span>
      </button>

      {tree.map((node) => (
        <OUNodeItem
          key={node.dn}
          node={node}
          depth={0}
          selectedOU={selectedOU}
          onSelect={onSelect}
          mode={mode}
        />
      ))}
    </div>
  )
}