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

import { Card } from '~/components/ui/card';
import { CopyRow } from '~/components/ui/copy-row';
import { MetricCard } from '~/components/ui/metric-card';
import { formatDate, titleize } from '~/utils/format';

type SpoonOverview = {
  description?: string;
  forkAheadBy?: number;
  forkOwner?: string;
  forkRepo?: string;
  forkUrl?: string;
  lastCheckedAt?: number;
  syncCadence: string;
  upstreamAheadBy?: number;
  upstreamOwner: string;
  upstreamRepo: string;
  upstreamUrl: string;
};

export const SpoonDetailOverview = ({
  effectiveUpstreamAheadBy,
  remotes,
  spoon,
}: {
  effectiveUpstreamAheadBy: number;
  remotes: { _id: string; label: string; url: string }[];
  spoon: SpoonOverview;
}) => (
  <View className='gap-4'>
    <View className='flex-row gap-3'>
      <MetricCard label='Raw upstream' value={spoon.upstreamAheadBy ?? 0} />
      <MetricCard label='Effective' value={effectiveUpstreamAheadBy} />
      <MetricCard label='Fork-only' value={spoon.forkAheadBy ?? 0} />
    </View>
    {spoon.description ? (
      <Card>
        <Text className='text-foreground font-semibold'>Description</Text>
        <Text className='text-muted-foreground mt-2 text-sm leading-5'>
          {spoon.description}
        </Text>
      </Card>
    ) : null}
    <Card>
      <CopyRow label='Upstream' value={spoon.upstreamUrl} />
      <CopyRow label='Fork clone URL' value={spoon.forkUrl} />
      {remotes.map((remote) => (
        <CopyRow key={remote._id} label={remote.label} value={remote.url} />
      ))}
    </Card>
    <Card>
      <Text className='text-foreground font-semibold'>Details</Text>
      <Text className='text-muted-foreground mt-2 text-sm'>
        Last checked: {formatDate(spoon.lastCheckedAt)}
      </Text>
      <Text className='text-muted-foreground mt-1 text-sm'>
        Cadence: {titleize(spoon.syncCadence)}
      </Text>
      <Text className='text-muted-foreground mt-1 text-sm'>
        Upstream: {spoon.upstreamOwner}/{spoon.upstreamRepo}
      </Text>
      {spoon.forkOwner && spoon.forkRepo ? (
        <Text className='text-muted-foreground mt-1 text-sm'>
          Fork: {spoon.forkOwner}/{spoon.forkRepo}
        </Text>
      ) : null}
    </Card>
  </View>
);
