import { Feather } from "@expo/vector-icons";
import { Image } from "expo-image";
import React from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";

import { Mono } from "@/components/Mono";
import {
  AffiliateLink,
  formatINR,
  timeAgo,
} from "@/constants/mockData";
import { sansMedium, sansSemibold } from "@/constants/typography";
import { useColors } from "@/hooks/useColors";

interface LinkRowProps {
  link: AffiliateLink;
  onPress?: () => void;
}

export function LinkRow({ link, onPress }: LinkRowProps) {
  const colors = useColors();
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.row,
        {
          backgroundColor: colors.card,
          borderColor: colors.border,
          opacity: pressed ? 0.85 : 1,
        },
      ]}
    >
      <View style={[styles.thumb, { backgroundColor: colors.elevated }]}>
        {link.productImage ? (
          <Image
            source={link.productImage}
            style={styles.thumbImg}
            contentFit="cover"
          />
        ) : (
          <Feather name="link" size={20} color={colors.mutedForeground} />
        )}
      </View>
      <View style={styles.center}>
        <Text
          numberOfLines={1}
          style={{
            color: colors.text,
            fontFamily: sansSemibold,
            fontSize: 14,
            letterSpacing: -0.2,
          }}
        >
          {link.productTitle}
        </Text>
        <View style={styles.metaRow}>
          <Text
            style={{
              color: colors.mutedForeground,
              fontFamily: sansMedium,
              fontSize: 11,
            }}
          >
            {link.merchant}
          </Text>
          <View style={[styles.bullet, { backgroundColor: colors.borderStrong }]} />
          <Mono size={11} weight="500" color={colors.mutedForeground}>
            {link.shortCode}
          </Mono>
          <View style={[styles.bullet, { backgroundColor: colors.borderStrong }]} />
          <Text
            style={{
              color: colors.mutedForeground,
              fontFamily: sansMedium,
              fontSize: 11,
            }}
          >
            {timeAgo(link.createdAt)}
          </Text>
        </View>
      </View>
      <View style={styles.right}>
        <Mono size={15} weight="700" color={colors.text}>
          {formatINR(link.earnings)}
        </Mono>
        <Text
          style={{
            color: colors.mutedForeground,
            fontFamily: sansMedium,
            fontSize: 11,
            marginTop: 2,
          }}
        >
          {link.conversions}/{link.clicks}
        </Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    alignItems: "center",
    borderRadius: 16,
    borderWidth: 1,
    padding: 12,
    gap: 12,
  },
  thumb: {
    width: 48,
    height: 48,
    borderRadius: 12,
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
  },
  thumbImg: {
    width: "100%",
    height: "100%",
  },
  center: {
    flex: 1,
    gap: 4,
  },
  metaRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  bullet: {
    width: 3,
    height: 3,
    borderRadius: 999,
  },
  right: {
    alignItems: "flex-end",
  },
});