syndarix/frontend/src/features/issues/components/IssueDetailPanel.tsx

'use client';

/**
 * IssueDetailPanel Component
 *
 * Side panel showing issue details (assignee, labels, sprint, etc.)
 *
 * @module features/issues/components/IssueDetailPanel
 */

import { GitBranch, GitPullRequest, Tag, Bot, User } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { cn } from '@/lib/utils';
import type { IssueDetail } from '../types';

interface IssueDetailPanelProps {
  issue: IssueDetail;
  className?: string;
}

export function IssueDetailPanel({ issue, className }: IssueDetailPanelProps) {
  return (
    <div className={cn('space-y-6', className)}>
      {/* Assignment Panel */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Details</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* Assignee */}
          <div>
            <p className="text-sm text-muted-foreground">Assignee</p>
            {issue.assignee ? (
              <div className="mt-1 flex items-center gap-2">
                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
                  {issue.assignee.avatar ||
                    (issue.assignee.type === 'agent' ? (
                      <Bot className="h-4 w-4" aria-hidden="true" />
                    ) : (
                      <User className="h-4 w-4" aria-hidden="true" />
                    ))}
                </div>
                <div>
                  <p className="font-medium">{issue.assignee.name}</p>
                  <p className="text-xs text-muted-foreground capitalize">
                    {issue.assignee.type}
                  </p>
                </div>
              </div>
            ) : (
              <p className="mt-1 text-sm text-muted-foreground">Unassigned</p>
            )}
          </div>

          <Separator />

          {/* Reporter */}
          <div>
            <p className="text-sm text-muted-foreground">Reporter</p>
            <div className="mt-1 flex items-center gap-2">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-sm font-medium">
                {issue.reporter.avatar ||
                  (issue.reporter.type === 'agent' ? (
                    <Bot className="h-4 w-4" aria-hidden="true" />
                  ) : (
                    <User className="h-4 w-4" aria-hidden="true" />
                  ))}
              </div>
              <p className="font-medium">{issue.reporter.name}</p>
            </div>
          </div>

          <Separator />

          {/* Sprint */}
          <div>
            <p className="text-sm text-muted-foreground">Sprint</p>
            <p className="font-medium">{issue.sprint || 'Backlog'}</p>
          </div>

          {/* Story Points */}
          {issue.story_points !== null && (
            <div>
              <p className="text-sm text-muted-foreground">Story Points</p>
              <p className="font-medium">{issue.story_points}</p>
            </div>
          )}

          {/* Due Date */}
          {issue.due_date && (
            <div>
              <p className="text-sm text-muted-foreground">Due Date</p>
              <p className="font-medium">
                {new Date(issue.due_date).toLocaleDateString()}
              </p>
            </div>
          )}

          <Separator />

          {/* Labels */}
          <div>
            <p className="text-sm text-muted-foreground">Labels</p>
            <div className="mt-2 flex flex-wrap gap-1">
              {issue.labels.map((label) => (
                <Badge
                  key={label.id}
                  variant="secondary"
                  className="text-xs"
                  style={
                    label.color
                      ? { backgroundColor: `${label.color}20`, color: label.color }
                      : undefined
                  }
                >
                  <Tag className="mr-1 h-3 w-3" aria-hidden="true" />
                  {label.name}
                </Badge>
              ))}
              {issue.labels.length === 0 && (
                <span className="text-sm text-muted-foreground">No labels</span>
              )}
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Development */}
      {(issue.branch || issue.pull_request) && (
        <Card>
          <CardHeader>
            <CardTitle className="text-lg">Development</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {issue.branch && (
              <div className="flex items-center gap-2">
                <GitBranch
                  className="h-4 w-4 text-muted-foreground"
                  aria-hidden="true"
                />
                <span className="font-mono text-sm">{issue.branch}</span>
              </div>
            )}
            {issue.pull_request && (
              <div className="flex items-center gap-2">
                <GitPullRequest
                  className="h-4 w-4 text-muted-foreground"
                  aria-hidden="true"
                />
                <span className="text-sm">{issue.pull_request}</span>
                <Badge variant="outline" className="text-xs">
                  Open
                </Badge>
              </div>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  );
}