'use client';

import { Box, Text, Group, Badge } from '@tidbcloud/uikit';
import { Artifact } from '@/lib/workspace';
import dayjs from 'dayjs';

interface ArtifactCardProps {
  artifact: Artifact;
  isSelected: boolean;
  onClick: () => void;
}

const ARTIFACT_TYPE_META: Record<string, { icon: string; color: string; label: string }> = {
  report: { icon: '📊', color: 'blue', label: 'Report' },
  chart: { icon: '📈', color: 'green', label: 'Chart' },
  summary: { icon: '📝', color: 'orange', label: 'Summary' },
  timeline: { icon: '⏱️', color: 'violet', label: 'Timeline' },
  note: { icon: '🗒️', color: 'yellow', label: 'Note' },
};

export default function ArtifactCard({ artifact, isSelected, onClick }: ArtifactCardProps) {
  const meta = ARTIFACT_TYPE_META[artifact.type] || ARTIFACT_TYPE_META.report;

  return (
    <Box
      p="sm"
      onClick={onClick}
      style={{
        borderRadius: '8px',
        border: isSelected ? '2px solid #3b82f6' : '1px solid #e5e7eb',
        backgroundColor: '#fff',
        cursor: 'pointer',
        transition: 'all 0.15s ease',
      }}
    >
      <Group gap={8} align="center" mb={4}>
        <span style={{ fontSize: '16px' }}>{meta.icon}</span>
        <Text size="sm" fw={600} style={{ flex: 1 }}>
          {artifact.title}
        </Text>
        {artifact.issueId && (
          <Badge size="xs" variant="light" color="red">
            {artifact.issueId}
          </Badge>
        )}
        <Badge size="xs" variant="outline" color={meta.color as any}>
          {meta.label}
        </Badge>
      </Group>

      {artifact.description && (
        <Text
          size="xs"
          c="carbon.5"
          style={{
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            paddingLeft: '24px',
          }}
        >
          {artifact.description}
        </Text>
      )}

      <Text size="xs" c="carbon.4" mt={2} style={{ paddingLeft: '24px' }}>
        {dayjs(artifact.createdAt).format('MMM D, HH:mm')}
      </Text>
    </Box>
  );
}