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

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

import { ListRow } from '~/components/ui/list-row';
import { formatDate } from '~/utils/format';
import { SpoonStatusBadge } from './spoon-status-badge';

export const SpoonListRow = ({
  spoon,
  openThreads,
  onPress,
}: {
  spoon: Doc<'spoons'>;
  openThreads?: number;
  onPress: () => void;
}) => (
  <ListRow
    meta={formatDate(spoon.lastCheckedAt)}
    subtitle={`${spoon.upstreamOwner}/${spoon.upstreamRepo}`}
    title={spoon.name}
    onPress={onPress}
  >
    <View className='gap-3'>
      <View className='flex-row flex-wrap items-center gap-2'>
        <SpoonStatusBadge status={spoon.syncStatus ?? spoon.status} />
        {spoon.forkOwner && spoon.forkRepo ? (
          <Text className='text-muted-foreground text-xs'>
            fork {spoon.forkOwner}/{spoon.forkRepo}
          </Text>
        ) : (
          <Text className='text-muted-foreground text-xs'>missing fork</Text>
        )}
      </View>
      <View className='flex-row gap-4'>
        <Text className='text-muted-foreground text-xs'>
          {spoon.upstreamAheadBy ?? 0} upstream
        </Text>
        <Text className='text-muted-foreground text-xs'>
          {spoon.forkAheadBy ?? 0} fork-only
        </Text>
        <Text className='text-muted-foreground text-xs'>
          {openThreads ?? 0} threads
        </Text>
      </View>
    </View>
  </ListRow>
);