"use client"

import React from 'react'
import { Check, Columns, Search } from 'lucide-react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '../ui/dropdown-menu'
import { Button } from '../ui/button'
import { Input } from '../ui/input'
import { cn } from '../../lib/utils'

interface DataTableColumnToggleProps {
  table: any // Table instance from @tanstack/react-table
  trigger?: React.ReactNode
}

export function DataTableColumnToggle({ table, trigger }: DataTableColumnToggleProps) {
  const [search, setSearch] = React.useState('')
  
  // Get all columns that can be hidden
  const columns = table
    .getAllColumns()
    .filter((column: any) => 
      column.getCanHide() && 
      column.id !== 'select' && 
      column.id !== 'actions' &&
      column.id !== 'expander'
    )

  // Filter columns based on search
  const filteredColumns = React.useMemo(() => {
    if (!search) return columns
    
    return columns.filter((column: any) => {
      const header = column.columnDef.header
      const headerText = typeof header === 'string' 
        ? header 
        : column.id
      
      return headerText.toLowerCase().includes(search.toLowerCase())
    })
  }, [columns, search])

  // Count visible columns
  const visibleCount = columns.filter((col: any) => col.getIsVisible()).length

  const handleToggleAll = (visible: boolean) => {
    table.toggleAllColumnsVisible(visible)
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        {trigger || (
          <Button variant="outline" size="sm" className="gap-2">
            <Columns className="h-4 w-4" />
            Columns
            {visibleCount < columns.length && (
              <span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs">
                {visibleCount}/{columns.length}
              </span>
            )}
          </Button>
        )}
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56">
        <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
        
        {/* Search input for many columns */}
        {columns.length > 5 && (
          <>
            <div className="px-2 py-1.5">
              <div className="relative">
                <Search className="absolute left-2 top-2.5 h-3 w-3 text-muted-foreground" />
                <Input
                  placeholder="Search columns..."
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  className="h-8 pl-7 text-xs"
                />
              </div>
            </div>
            <DropdownMenuSeparator />
          </>
        )}
        
        {/* Quick actions */}
        <div className="flex items-center justify-between px-2 py-1.5">
          <Button
            variant="ghost"
            size="sm"
            className="h-7 text-xs"
            onClick={() => handleToggleAll(true)}
          >
            Show all
          </Button>
          <Button
            variant="ghost"
            size="sm"
            className="h-7 text-xs"
            onClick={() => handleToggleAll(false)}
          >
            Hide all
          </Button>
        </div>
        
        <DropdownMenuSeparator />
        
        {/* Column list */}
        <div className="max-h-64 overflow-y-auto">
          {filteredColumns.length === 0 ? (
            <div className="px-2 py-4 text-center text-xs text-muted-foreground">
              No columns found
            </div>
          ) : (
            filteredColumns.map((column: any) => {
              const isVisible = column.getIsVisible()
              const header = column.columnDef.header
              const headerText = typeof header === 'string' 
                ? header 
                : column.id
              
              return (
                <DropdownMenuItem
                  key={column.id}
                  className={cn(
                    "cursor-pointer",
                    !isVisible && "text-muted-foreground"
                  )}
                  onSelect={(e) => {
                    e.preventDefault()
                    column.toggleVisibility()
                  }}
                >
                  <div className="flex items-center gap-2 flex-1">
                    <div className={cn(
                      "flex h-4 w-4 items-center justify-center rounded-sm border",
                      isVisible 
                        ? "border-primary bg-primary text-primary-foreground" 
                        : "border-muted-foreground"
                    )}>
                      {isVisible && <Check className="h-3 w-3" />}
                    </div>
                    <span className="truncate">{headerText}</span>
                  </div>
                </DropdownMenuItem>
              )
            })
          )}
        </div>
        
        {/* Summary */}
        {columns.length > 0 && (
          <>
            <DropdownMenuSeparator />
            <div className="px-2 py-1.5 text-xs text-muted-foreground text-center">
              {visibleCount} of {columns.length} columns visible
            </div>
          </>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}