import { Text, View } from 'react-native';

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

import { Badge } from '~/components/ui/badge';
import { ListRow } from '~/components/ui/list-row';
import { formatDateTime, titleize, truncate } from '~/utils/format';
import { ThreadStatusBadge } from './thread-status-badge';

export const ThreadListRow = ({
  thread,
  onPress,
}: {
  thread: Doc<'threads'>;
  onPress: () => void;
}) => (
  <ListRow
    meta={formatDateTime(thread.updatedAt)}
    subtitle={thread.summary ? truncate(thread.summary, 90) : undefined}
    title={thread.title}
    onPress={onPress}
  >
    <View className='flex-row flex-wrap gap-2'>
      <ThreadStatusBadge status={thread.status} />
      <Badge label={titleize(thread.source)} />
      {thread.maintenanceOutcome ? (
        <Badge label={titleize(thread.maintenanceOutcome)} tone='primary' />
      ) : null}
    </View>
    {thread.upstreamTo ? (
      <Text className='text-muted-foreground mt-3 text-xs'>
        upstream {thread.upstreamTo.slice(0, 12)}
      </Text>
    ) : null}
  </ListRow>
);