import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors, font, radius, shadow } from '../theme';
import type { Letter } from '../data/letters';
import { CheckIcon, EnvelopeIcon } from './Icons';

type Props = {
  letter: Letter;
  /** The archive shows "Sender · Kind" and a date prefix; Home shows neither. */
  variant?: 'home' | 'archive';
  onPress?: () => void;
};

export function LetterRow({ letter, variant = 'home', onPress }: Props) {
  const needsAction = letter.deadlineDays !== undefined;

  const title =
    variant === 'archive' && letter.kind ? `${letter.sender} · ${letter.kind}` : letter.sender;
  const subtitle =
    variant === 'archive' ? `${letter.date} · ${letter.summary}` : letter.summary;

  const badge =
    variant === 'archive'
      ? needsAction
        ? `${letter.deadlineDays} Tage`
        : null
      : needsAction
        ? 'Frist'
        : null;

  return (
    <Pressable
      style={({ pressed }) => [styles.row, pressed && styles.pressed]}
      onPress={onPress}
      accessibilityRole="button"
      accessibilityLabel={`${title}. ${subtitle}`}
    >
      <View style={[styles.tile, { backgroundColor: needsAction ? colors.tintStrong : colors.tint }]}>
        {needsAction ? <EnvelopeIcon color={colors.blue} /> : <CheckIcon />}
      </View>
      <View style={styles.text}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.subtitle}>{subtitle}</Text>
      </View>
      {badge ? (
        <View style={styles.badge}>
          <Text style={styles.badgeText}>{badge}</Text>
        </View>
      ) : null}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  row: {
    backgroundColor: colors.surface,
    borderRadius: radius.xl,
    paddingVertical: 14,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    ...shadow.card,
  },
  pressed: { opacity: 0.7 },
  tile: {
    width: 40,
    height: 40,
    borderRadius: radius.md,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { flex: 1 },
  title: { fontFamily: font.extrabold, fontSize: 14.5, color: colors.ink },
  subtitle: { fontFamily: font.semibold, fontSize: 12, color: colors.slate, marginTop: 1 },
  badge: {
    backgroundColor: colors.tintStrong,
    borderRadius: radius.pill,
    paddingVertical: 5,
    paddingHorizontal: 10,
  },
  badgeText: { fontFamily: font.extrabold, fontSize: 11, color: colors.blueInk },
});