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

'use client';

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 { Issue } from '@/lib/api/issues';
import { FolderKanban, FileText, CheckSquare } from 'lucide-react';

interface IssueCardProps {
  issue: Issue;
}

export 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 (replacing emojis with lucide icons)
  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" />;
      case 'Bug':
        return <span className="text-red-600">🐛</span>;
      default:
        return null;
    }
  };

  // Parent breadcrumb (for Story and Task)
  const renderParentBreadcrumb = () => {
    const item = issue as any;

    // Story shows parent Epic
    if (issue.type === 'Story' && item.epicId) {
      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</span>
        </div>
      );
    }

    // Task shows parent Story
    if (issue.type === 'Task' && item.storyId) {
      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</span>
        </div>
      );
    }

    return null;
  };

  // Child count badge (for Epic and Story)
  const renderChildCount = () => {
    const item = issue as any;

    // Epic shows number of stories
    if (issue.type === 'Epic' && item.childCount > 0) {
      return (
        <Badge variant="secondary" className="text-xs">
          {item.childCount} stories
        </Badge>
      );
    }

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

    return null;
  };

  return (
    <Card
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      className="cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
    >
      <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 */}
        <h3 className="text-sm font-medium line-clamp-2">{issue.title}</h3>

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

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