'use client';

import * as React from 'react';
import { Folder as FolderIcon, Share2 } from 'lucide-react';
import { TableRow, TableCell } from '@/components/ui/table';
import type { Folder } from '@/app/api/files/route';
import { cn } from '@/lib/utils';
import { Checkbox } from './ui/checkbox';
import { Button } from './ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
import { ShareDialog } from './share-dialog';

interface FolderItemProps extends React.HTMLAttributes<HTMLTableRowElement> {
  folder: Folder;
  onSelectFolder: (path: string) => void;
  isSelected: boolean;
  onSelectItem: (id: string, isSelected: boolean) => void;
  isSelectionActive: boolean;
  isPublicShare?: boolean;
}

export function FolderItem({ folder, onSelectFolder, isSelected, onSelectItem, isSelectionActive, isPublicShare, className, ...props }: FolderItemProps) {
  const [isShareOpen, setIsShareOpen] = React.useState(false);
  
  const handleRowClick = (e: React.MouseEvent<HTMLTableRowElement>) => {
    // Prevent row click from propagating when clicking checkbox or button
    if ((e.target as HTMLElement).closest('[role="checkbox"]') || (e.target as HTMLElement).closest('button')) {
       return;
    }
    
    if (isSelectionActive) {
      onSelectItem(folder.id, !isSelected);
    } else {
      onSelectFolder(folder.path);
    }
  }

  const handleShareClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsShareOpen(true);
  }

  return (
    <>
    <TableRow
      className={cn("group cursor-pointer", className, isSelected && "bg-accent/50")}
      onClick={handleRowClick}
      data-selected={isSelected}
      {...props}
    >
      <TableCell className={cn("w-[40px]", !isSelectionActive && "hidden")} onClick={(e) => e.stopPropagation()}>
          <Checkbox 
            checked={isSelected}
            onCheckedChange={(checked) => onSelectItem(folder.id, Boolean(checked))}
            aria-label={`Select folder ${folder.name}`}
          />
      </TableCell>
      <TableCell className="font-medium">
        <div className="flex items-center gap-3">
          <FolderIcon className="h-5 w-5 text-muted-foreground" />
          <div className="flex-1 flex flex-col gap-1">
              <div className="flex items-center gap-2">
                 <span>{folder.name}</span>
              </div>
              <div />
            </div>
        </div>
      </TableCell>
      <TableCell className="text-muted-foreground max-w-sm truncate">
        <p>Folder</p>
      </TableCell>
      <TableCell className="text-right">
        <div className="flex items-center justify-end gap-2 h-10">
          {!isPublicShare && (
              <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button variant="ghost" size="icon" onClick={handleShareClick}>
                          <Share2 className="h-4 w-4" />
                          <span className="sr-only">Share</span>
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent><p>Share</p></TooltipContent>
                  </Tooltip>
              </TooltipProvider>
          )}
        </div>
      </TableCell>
    </TableRow>
    {!isPublicShare && (
      <ShareDialog
          isOpen={isShareOpen}
          onOpenChange={setIsShareOpen}
          itemName={folder.name}
          itemPath={folder.path}
          itemType="folder"
      />
     )}
    </>
  );
}