ColaFlow-Web/components/features/kanban/IssueCard.tsx

'use client';

import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { KanbanItem, isKanbanEpic, isKanbanStory, isKanbanTask, getKanbanItemTitle } from '@/types/kanban';
import { FolderKanban, FileText, CheckSquare } from 'lucide-react';

interface IssueCardProps {
  issue: KanbanItem;
}

export const IssueCard = React.memo(function IssueCard({ issue }: IssueCardProps) {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id: issue.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const priorityColors = {
    Low: 'bg-gray-100 text-gray-700',
    Medium: 'bg-blue-100 text-blue-700',
    High: 'bg-orange-100 text-orange-700',
    Critical: 'bg-red-100 text-red-700',
  };

  // Type icon components - type-safe with discriminated union
  const getTypeIcon = () => {
    switch (issue.type) {
      case 'Epic':
        return <FolderKanban className="w-4 h-4 text-blue-600" />;
      case 'Story':
        return <FileText className="w-4 h-4 text-green-600" />;
      case 'Task':
        return <CheckSquare className="w-4 h-4 text-purple-600" />;
      default:
        return null;
    }
  };

  // Parent breadcrumb (for Story and Task) - type-safe with type guards
  const renderParentBreadcrumb = () => {
    // Story shows parent Epic - TypeScript knows epicId exists
    if (isKanbanStory(issue)) {
      return (
        <div className="flex items-center gap-1 text-xs text-gray-500 mb-1">
          <FolderKanban className="w-3 h-3" />
          <span className="truncate max-w-[150px]">Epic: {issue.epicId}</span>
        </div>
      );
    }

    // Task shows parent Story - TypeScript knows storyId exists
    if (isKanbanTask(issue)) {
      return (
        <div className="flex items-center gap-1 text-xs text-gray-500 mb-1">
          <FileText className="w-3 h-3" />
          <span className="truncate max-w-[150px]">Story: {issue.storyId}</span>
        </div>
      );
    }

    return null;
  };

  // Child count badge (for Epic and Story) - type-safe with type guards
  const renderChildCount = () => {
    // Epic shows number of stories - TypeScript knows childCount exists
    if (isKanbanEpic(issue) && issue.childCount && issue.childCount > 0) {
      return (
        <Badge variant="secondary" className="text-xs">
          {issue.childCount} stories
        </Badge>
      );
    }

    // Story shows number of tasks - TypeScript knows childCount exists
    if (isKanbanStory(issue) && issue.childCount && issue.childCount > 0) {
      return (
        <Badge variant="secondary" className="text-xs">
          {issue.childCount} tasks
        </Badge>
      );
    }

    return null;
  };

  // Get display title - type-safe helper function
  const displayTitle = getKanbanItemTitle(issue);

  return (
    <Card
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      className="cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
      role="button"
      aria-label={`${issue.type}: ${displayTitle}, priority ${issue.priority}, status ${issue.status}`}
      tabIndex={0}
    >
      <CardContent className="p-3 space-y-2">
        {/* Header: Type icon + Child count */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {getTypeIcon()}
            <span className="text-xs font-medium text-gray-600">{issue.type}</span>
          </div>
          {renderChildCount()}
        </div>

        {/* Parent breadcrumb */}
        {renderParentBreadcrumb()}

        {/* Title - type-safe */}
        <h3 className="text-sm font-medium line-clamp-2">{displayTitle}</h3>

        {/* Description (if available) - type-safe */}
        {issue.description && (
          <p className="text-xs text-gray-600 line-clamp-2">{issue.description}</p>
        )}

        {/* Footer: Priority + Hours - type-safe */}
        <div className="flex items-center justify-between pt-2 border-t">
          <Badge variant="outline" className={priorityColors[issue.priority]}>
            {issue.priority}
          </Badge>
          {issue.estimatedHours && (
            <span className="text-xs text-gray-500">
              {issue.estimatedHours}h
            </span>
          )}
        </div>
      </CardContent>
    </Card>
  );
});