resolutionflow/frontend/src/components/library/TreeListView.tsx

import { Link } from 'react-router-dom'
import { Pencil, Globe, Lock, GitBranch, FileText, Trash2, Wrench, Download, ClipboardList } from 'lucide-react'
import type { TreeListItem } from '@/types'
import { TagBadges } from '@/components/common/TagBadges'
import { cn } from '@/lib/utils'
import { usePermissions } from '@/hooks/usePermissions'
import { getTreeEditorPath } from '@/lib/routing'

interface TreeListViewProps {
  trees: TreeListItem[]
  onStartSession: (treeId: string, treeType?: string) => void
  onPrepareSession?: (tree: TreeListItem) => void
  onTagClick: (tag: string) => void
  onFolderCreated: (parentId?: string | null) => void
  onDeleteTree: (tree: TreeListItem) => void
  onForkTree?: (treeId: string) => void
  onExportTree?: (treeId: string) => void
}

export function TreeListView({
  trees,
  onStartSession,
  onPrepareSession,
  onTagClick,
  onDeleteTree,
  onForkTree,
  onExportTree,
}: TreeListViewProps) {
  const { canEditTree } = usePermissions()

  return (
    <div className="space-y-2">
      {trees.map((tree) => (
        <div
          key={tree.id}
          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-xs"
        >
          {/* Left: Name and Description */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <h3 className="font-semibold text-foreground truncate">{tree.name}</h3>
              {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 shrink-0">
                  <FileText className="h-3 w-3" />
                  Draft
                </span>
              )}
              {tree.tree_type === 'maintenance' && (
                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
                  <Wrench className="h-3 w-3" />
                  Maintenance
                </span>
              )}
              {'fork_info' in tree && Boolean((tree as Record<string, unknown>).fork_info) && (
                <span className="shrink-0 rounded-full bg-violet-400/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-violet-400">
                  Fork
                </span>
              )}
              {tree.is_public ? (
                <span title="Public tree">
                  <Globe className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                </span>
              ) : (
                <span title="Private tree">
                  <Lock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                </span>
              )}
            </div>
            <p className="text-sm text-muted-foreground truncate">
              {tree.description || 'No description available'}
            </p>
          </div>

          {/* Center: Category and Tags */}
          <div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
            {tree.category_info && (
              <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground whitespace-nowrap">
                {tree.category_info.name}
              </span>
            )}
            {tree.tags && tree.tags.length > 0 && (
              <div className="min-w-0">
                <TagBadges tags={tree.tags} maxVisible={2} onTagClick={onTagClick} />
              </div>
            )}
          </div>

          {/* Right: Metadata and Actions */}
          <div className="flex items-center gap-3 shrink-0">
            <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
              <span>v{tree.version}</span>
              <span>{tree.usage_count} uses</span>
            </div>

            <div className="flex items-center gap-2">
              {onExportTree && (
                <button
                  type="button"
                  onClick={() => onExportTree(tree.id)}
                  className={cn(
                    'rounded-md border border-border p-1.5 text-muted-foreground',
                    'hover:bg-accent hover:text-foreground'
                  )}
                  title="Export flow"
                  aria-label="Export flow"
                >
                  <Download className="h-4 w-4" />
                </button>
              )}
              {onForkTree && (
                <button
                  type="button"
                  onClick={() => onForkTree(tree.id)}
                  className={cn(
                    'rounded-md border border-border p-1.5 text-muted-foreground',
                    'hover:bg-accent hover:text-foreground'
                  )}
                  title="Fork tree"
                  aria-label="Fork tree"
                >
                  <GitBranch className="h-4 w-4" />
                </button>
              )}
              {canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
                <>
                  <Link
                    to={getTreeEditorPath(tree.id, tree.tree_type)}
                    className={cn(
                      'rounded-md border border-border p-1.5 text-muted-foreground',
                      'hover:bg-accent hover:text-foreground'
                    )}
                    title="Edit tree"
                    aria-label="Edit tree"
                  >
                    <Pencil className="h-4 w-4" />
                  </Link>
                  <button
                    type="button"
                    onClick={() => onDeleteTree(tree)}
                    className={cn(
                      'rounded-md border border-border p-1.5 text-muted-foreground',
                      'hover:bg-red-500/20 hover:text-red-400'
                    )}
                    title="Delete tree"
                    aria-label="Delete tree"
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                </>
              )}
              {onPrepareSession && tree.tree_type !== 'troubleshooting' && (
                <button
                  type="button"
                  onClick={() => onPrepareSession(tree)}
                  className={cn(
                    'rounded-md border border-border p-1.5 text-muted-foreground',
                    'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
                  )}
                  title="Prepare session for engineer"
                  aria-label="Prepare session"
                >
                  <ClipboardList className="h-4 w-4" />
                </button>
              )}
              <button
                type="button"
                onClick={() => onStartSession(tree.id, tree.tree_type)}
                className={cn(
                  'rounded-md border border-primary/40 px-3 py-1.5 text-sm font-medium text-primary',
                  'hover:bg-primary/10 hover:border-primary/60 transition-colors whitespace-nowrap'
                )}
              >
                Start
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}