import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
import { Badge } from '@spoon/ui';

type Status =
  | NonNullable<Doc<'spoons'>['syncStatus']>
  | Doc<'spoons'>['status'];

const labels: Record<string, string> = {
  up_to_date: 'Up to date',
  behind: 'Behind',
  ahead: 'Ahead',
  diverged: 'Diverged',
  checking: 'Checking',
  conflict: 'Conflict',
  error: 'Error',
  unknown: 'Unknown',
  active: 'Active',
  draft: 'Draft',
  needs_connection: 'Needs connection',
  paused: 'Paused',
  archived: 'Archived',
};

const variants: Record<
  string,
  'default' | 'secondary' | 'destructive' | 'outline'
> = {
  up_to_date: 'default',
  behind: 'secondary',
  ahead: 'outline',
  diverged: 'destructive',
  conflict: 'destructive',
  error: 'destructive',
  checking: 'secondary',
  active: 'default',
};

export const SpoonStatusBadge = ({ status }: { status?: Status }) => {
  const value = status ?? 'unknown';
  return (
    <Badge variant={variants[value] ?? 'outline'}>
      {labels[value] ?? value.replaceAll('_', ' ')}
    </Badge>
  );
};
