pragma-stack/frontend/src/features/issues/components/IssueTable.tsx

'use client';

/**
 * IssueTable Component
 *
 * Sortable table displaying issues with selection support.
 *
 * @module features/issues/components/IssueTable
 */

import { ChevronUp, ChevronDown, MoreVertical, Bot, User, CircleDot } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import { Card } from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import type { IssueSummary, IssueSort, IssueSortField, IssueSortDirection } from '../types';

/**
 * Convert our sort direction to ARIA sort value
 */
function toAriaSortValue(
  field: IssueSortField,
  currentField: IssueSortField,
  direction: IssueSortDirection
): 'ascending' | 'descending' | 'none' | undefined {
  if (field !== currentField) return undefined;
  return direction === 'asc' ? 'ascending' : 'descending';
}

import { StatusBadge } from './StatusBadge';
import { PriorityBadge } from './PriorityBadge';
import { SyncStatusIndicator } from './SyncStatusIndicator';

interface IssueTableProps {
  issues: IssueSummary[];
  selectedIssues: string[];
  onSelectionChange: (ids: string[]) => void;
  onIssueClick: (id: string) => void;
  sort: IssueSort;
  onSortChange: (sort: IssueSort) => void;
  className?: string;
}

export function IssueTable({
  issues,
  selectedIssues,
  onSelectionChange,
  onIssueClick,
  sort,
  onSortChange,
  className,
}: IssueTableProps) {
  const handleSelectAll = () => {
    if (selectedIssues.length === issues.length) {
      onSelectionChange([]);
    } else {
      onSelectionChange(issues.map((i) => i.id));
    }
  };

  const handleSelectIssue = (id: string, e: React.MouseEvent) => {
    e.stopPropagation();
    if (selectedIssues.includes(id)) {
      onSelectionChange(selectedIssues.filter((i) => i !== id));
    } else {
      onSelectionChange([...selectedIssues, id]);
    }
  };

  const handleSort = (field: IssueSortField) => {
    if (sort.field === field) {
      onSortChange({
        field,
        direction: sort.direction === 'asc' ? 'desc' : 'asc',
      });
    } else {
      onSortChange({ field, direction: 'desc' });
    }
  };

  const SortIcon = ({ field }: { field: IssueSortField }) => {
    if (sort.field !== field) return null;
    return sort.direction === 'asc' ? (
      <ChevronUp className="ml-1 inline h-4 w-4" aria-hidden="true" />
    ) : (
      <ChevronDown className="ml-1 inline h-4 w-4" aria-hidden="true" />
    );
  };

  const allSelected = selectedIssues.length === issues.length && issues.length > 0;
  const someSelected = selectedIssues.length > 0 && !allSelected;

  return (
    <Card className={className}>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-12">
              <Checkbox
                checked={allSelected}
                ref={(el) => {
                  if (el) {
                    (el as unknown as HTMLInputElement).indeterminate = someSelected;
                  }
                }}
                onCheckedChange={handleSelectAll}
                aria-label={allSelected ? 'Deselect all issues' : 'Select all issues'}
              />
            </TableHead>
            <TableHead
              className="w-20 cursor-pointer select-none"
              onClick={() => handleSort('number')}
              role="button"
              tabIndex={0}
              aria-sort={toAriaSortValue('number', sort.field, sort.direction)}
              onKeyDown={(e) => e.key === 'Enter' && handleSort('number')}
            >
              #
              <SortIcon field="number" />
            </TableHead>
            <TableHead>Title</TableHead>
            <TableHead className="w-32">Status</TableHead>
            <TableHead
              className="w-24 cursor-pointer select-none"
              onClick={() => handleSort('priority')}
              role="button"
              tabIndex={0}
              aria-sort={toAriaSortValue('priority', sort.field, sort.direction)}
              onKeyDown={(e) => e.key === 'Enter' && handleSort('priority')}
            >
              Priority
              <SortIcon field="priority" />
            </TableHead>
            <TableHead className="w-40">Assignee</TableHead>
            <TableHead className="w-28">Sprint</TableHead>
            <TableHead className="w-10">Sync</TableHead>
            <TableHead className="w-10">
              <span className="sr-only">Actions</span>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {issues.map((issue) => (
            <TableRow
              key={issue.id}
              className="cursor-pointer"
              onClick={() => onIssueClick(issue.id)}
              data-testid={`issue-row-${issue.id}`}
            >
              <TableCell onClick={(e) => handleSelectIssue(issue.id, e)}>
                <Checkbox
                  checked={selectedIssues.includes(issue.id)}
                  onCheckedChange={() => {}}
                  aria-label={`Select issue ${issue.number}`}
                />
              </TableCell>
              <TableCell className="font-mono text-sm text-muted-foreground">
                {issue.number}
              </TableCell>
              <TableCell>
                <div className="space-y-1">
                  <p className="font-medium">{issue.title}</p>
                  <div className="flex flex-wrap gap-1">
                    {issue.labels.slice(0, 3).map((label) => (
                      <Badge key={label} variant="secondary" className="text-xs">
                        {label}
                      </Badge>
                    ))}
                    {issue.labels.length > 3 && (
                      <Badge variant="outline" className="text-xs">
                        +{issue.labels.length - 3}
                      </Badge>
                    )}
                  </div>
                </div>
              </TableCell>
              <TableCell>
                <StatusBadge status={issue.status} />
              </TableCell>
              <TableCell>
                <PriorityBadge priority={issue.priority} />
              </TableCell>
              <TableCell>
                {issue.assignee ? (
                  <div className="flex items-center gap-2">
                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
                      {issue.assignee.type === 'agent' ? (
                        <Bot className="h-3 w-3" aria-hidden="true" />
                      ) : (
                        <User className="h-3 w-3" aria-hidden="true" />
                      )}
                    </div>
                    <span className="text-sm">{issue.assignee.name}</span>
                  </div>
                ) : (
                  <span className="text-sm text-muted-foreground">Unassigned</span>
                )}
              </TableCell>
              <TableCell>
                {issue.sprint ? (
                  <Badge variant="outline" className="text-xs">
                    {issue.sprint}
                  </Badge>
                ) : (
                  <span className="text-xs text-muted-foreground">Backlog</span>
                )}
              </TableCell>
              <TableCell>
                <SyncStatusIndicator status={issue.sync_status} />
              </TableCell>
              <TableCell onClick={(e) => e.stopPropagation()}>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      aria-label={`Actions for issue ${issue.number}`}
                    >
                      <MoreVertical className="h-4 w-4" aria-hidden="true" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem onClick={() => onIssueClick(issue.id)}>
                      View Details
                    </DropdownMenuItem>
                    <DropdownMenuItem>Edit</DropdownMenuItem>
                    <DropdownMenuItem>Assign</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>Sync with Tracker</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      {issues.length === 0 && (
        <div className="py-12 text-center">
          <CircleDot className="mx-auto h-12 w-12 text-muted-foreground" aria-hidden="true" />
          <h3 className="mt-4 font-semibold">No issues found</h3>
          <p className="text-muted-foreground">Try adjusting your search or filters</p>
        </div>
      )}
    </Card>
  );
}