import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText } from 'lucide-react'
import type { TreeListItem } from '@/types'
import { TagBadges } from '@/components/common/TagBadges'
import { AddToFolderMenu } from './AddToFolderMenu'
import { cn } from '@/lib/utils'
import { usePermissions } from '@/hooks/usePermissions'

interface TreeTableViewProps {
  trees: TreeListItem[]
  onStartSession: (treeId: string) => void
  onTagClick: (tag: string) => void
  onFolderCreated: (parentId?: string | null) => void
  onDeleteTree: (tree: TreeListItem) => void
  onSortChange?: (sortBy: string) => void
  onForkTree?: (treeId: string) => void
}

type SortColumn = 'name' | 'category' | 'version' | 'usage' | 'updated'

export function TreeTableView({
  trees,
  onStartSession,
  onTagClick,
  onFolderCreated,
  onSortChange,
  onForkTree,
}: TreeTableViewProps) {
  const { canEditTree } = usePermissions()
  const [sortColumn, setSortColumn] = useState<SortColumn | null>(null)
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')

  const handleSort = (column: SortColumn) => {
    const newDirection =
      sortColumn === column && sortDirection === 'asc' ? 'desc' : 'asc'
    setSortColumn(column)
    setSortDirection(newDirection)

    // Map to API sort values
    const sortMap: Record<string, string> = {
      name_asc: 'name',
      name_desc: 'name_desc',
      usage_asc: 'usage_count',
      usage_desc: 'usage_count',
      updated_asc: 'updated_at',
      updated_desc: 'updated_at',
      version_asc: 'version',
      version_desc: 'version',
    }

    const sortKey = `${column}_${newDirection}`
    const apiSort = sortMap[sortKey] || 'usage_count'
    onSortChange?.(apiSort)
  }

  const getSortIcon = (column: SortColumn) => {
    if (sortColumn !== column) return null
    return sortDirection === 'asc' ? (
      <ChevronUp className="h-3.5 w-3.5" />
    ) : (
      <ChevronDown className="h-3.5 w-3.5" />
    )
  }

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
  }

  return (
    <div className="overflow-x-auto rounded-2xl border border-white/[0.06]">
      <table className="w-full">
        <thead className="bg-white/[0.02] sticky top-0 z-10">
          <tr className="border-b border-white/[0.06]">
            <th
              className="px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
              onClick={() => handleSort('name')}
            >
              <div className="flex items-center gap-1">
                Name
                {getSortIcon('name')}
              </div>
            </th>
            <th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-white/50">
              Description
            </th>
            <th
              className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
              onClick={() => handleSort('category')}
            >
              <div className="flex items-center gap-1">
                Category
                {getSortIcon('category')}
              </div>
            </th>
            <th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-white/50">
              Tags
            </th>
            <th
              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-white/50 cursor-pointer hover:text-white"
              onClick={() => handleSort('version')}
            >
              <div className="flex items-center justify-center gap-1">
                Ver.
                {getSortIcon('version')}
              </div>
            </th>
            <th
              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-white/50 cursor-pointer hover:text-white"
              onClick={() => handleSort('usage')}
            >
              <div className="flex items-center justify-center gap-1">
                Uses
                {getSortIcon('usage')}
              </div>
            </th>
            <th
              className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
              onClick={() => handleSort('updated')}
            >
              <div className="flex items-center gap-1">
                Updated
                {getSortIcon('updated')}
              </div>
            </th>
            <th className="px-4 py-3 text-right text-sm font-medium text-white/50">
              Actions
            </th>
          </tr>
        </thead>
        <tbody className="bg-transparent">
          {trees.map((tree) => (
            <tr key={tree.id} className="border-b border-white/[0.06] last:border-0 hover:bg-white/[0.04]">
              <td className="px-4 py-3">
                <div className="flex items-center gap-2">
                  <span className="font-medium text-white truncate max-w-[200px]">
                    {tree.name}
                  </span>
                  {tree.status === 'draft' && (
                    <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 flex-shrink-0">
                      <FileText className="h-3 w-3" />
                      Draft
                    </span>
                  )}
                  {tree.is_public ? (
                    <span title="Public tree">
                      <Globe className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
                    </span>
                  ) : (
                    <span title="Private tree">
                      <Lock className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
                    </span>
                  )}
                </div>
              </td>
              <td className="hidden md:table-cell px-4 py-3 text-sm text-white/70">
                <span className="truncate block max-w-[250px]">
                  {tree.description || 'No description'}
                </span>
              </td>
              <td className="hidden lg:table-cell px-4 py-3">
                {tree.category_info && (
                  <span className="inline-block rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
                    {tree.category_info.name}
                  </span>
                )}
              </td>
              <td className="hidden xl:table-cell px-4 py-3">
                {tree.tags && tree.tags.length > 0 && (
                  <TagBadges tags={tree.tags} maxVisible={2} onTagClick={onTagClick} />
                )}
              </td>
              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-white/70">
                v{tree.version}
              </td>
              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-white/70">
                {tree.usage_count}
              </td>
              <td className="hidden md:table-cell px-4 py-3 text-sm text-white/70">
                {formatDate(tree.updated_at)}
              </td>
              <td className="px-4 py-3">
                <div className="flex items-center justify-end gap-2">
                  <AddToFolderMenu treeId={tree.id} onFolderCreated={onFolderCreated} />
                  {onForkTree && (
                    <button
                      type="button"
                      onClick={() => onForkTree(tree.id)}
                      className={cn(
                        'rounded-md border border-white/10 p-1.5 text-white/60',
                        'hover:bg-white/10 hover:text-white'
                      )}
                      title="Fork tree"
                    >
                      <GitBranch className="h-3.5 w-3.5" />
                    </button>
                  )}
                  {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                    <Link
                      to={`/trees/${tree.id}/edit`}
                      className={cn(
                        'rounded-md border border-white/10 p-1.5 text-white/60',
                        'hover:bg-white/10 hover:text-white'
                      )}
                      title="Edit tree"
                    >
                      <Pencil className="h-3.5 w-3.5" />
                    </Link>
                  )}
                  <button
                    type="button"
                    onClick={() => onStartSession(tree.id)}
                    className={cn(
                      'rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black',
                      'hover:bg-white/90 whitespace-nowrap'
                    )}
                  >
                    Start
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}