import { Badge, Card, Group, Stack, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import type { LicenseTemplate } from '@ema-platform/api';
import { STATUS_COLOR } from '../config/designer';

interface Props {
  templates: LicenseTemplate[];
  selectedId: string | null;
  onSelect: (id: string) => void;
}

/** The version rail — every design ever authored for this licence type. */
export function TemplateVersionList({ templates, selectedId, onSelect }: Props) {
  const { t } = useTranslation();

  return (
    <Stack gap="xs" w={240} style={{ flexShrink: 0 }}>
      <Text fw={600} size="sm">
        {t('designer.versions', 'Versions')}
      </Text>
      {templates.map((tpl) => (
        <Card
          key={tpl.id}
          withBorder
          padding="xs"
          onClick={() => onSelect(tpl.id)}
          style={{
            cursor: 'pointer',
            borderColor: tpl.id === selectedId ? 'var(--mantine-color-blue-5)' : undefined,
          }}
        >
          <Group justify="space-between" wrap="nowrap">
            <div style={{ minWidth: 0 }}>
              <Text size="sm" fw={500} truncate>
                {tpl.name}
              </Text>
              <Text size="xs" c="dimmed">
                v{tpl.version}
              </Text>
            </div>
            <Badge size="xs" variant="light" color={STATUS_COLOR[tpl.status]}>
              {tpl.status}
            </Badge>
          </Group>
        </Card>
      ))}
    </Stack>
  );
}
