import { View, Text, Pressable } from "react-native";
import { Link } from "expo-router";
import { useTheme } from "./theme";
import { Badge } from "./ui/badge";
import { Rating } from "./ui/rating";
import { getCategoryName, CATEGORY_EMOJI } from "../lib/constants";

interface AdCardProps {
  ad: {
    _id: string;
    title: string;
    category: string;
    location: string;
    priceRange?: string;
    ratingAvg?: number;
    reviewCount: number;
  };
}

export function AdCard({ ad }: AdCardProps) {
  const theme = useTheme();
  const categoryName = getCategoryName(ad.category);
  const emoji = CATEGORY_EMOJI[ad.category] ?? "🔧";

  return (
    <Link href={`/ad/${ad._id}` as any} asChild>
      <Pressable
        accessible
        accessibilityLabel={`${ad.title}, ${categoryName}, ${ad.location}${ad.priceRange ? `, ${ad.priceRange}` : ""}`}
        accessibilityRole="button"
        style={{
          backgroundColor: theme.colors.card,
          borderRadius: theme.radius.lg,
          borderWidth: 1,
          borderColor: theme.colors.borderLight,
          ...theme.shadows.sm,
          overflow: "hidden",
        }}
      >
        <View style={{ padding: theme.spacing.md, gap: theme.spacing.sm }}>
          <View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }}>
            <View
              style={{
                width: 40,
                height: 40,
                borderRadius: theme.radius.md,
                backgroundColor: theme.colors.primaryLight,
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Text style={{ fontSize: 20 }}>{emoji}</Text>
            </View>
            <View style={{ flex: 1, gap: 2 }}>
              <Text style={{ ...theme.typography.h3, color: theme.colors.text }} numberOfLines={1}>
                {ad.title}
              </Text>
              {ad.ratingAvg != null && ad.ratingAvg > 0 && (
                <Rating value={ad.ratingAvg} count={ad.reviewCount} size={13} />
              )}
            </View>
            {ad.priceRange && (
              <View
                style={{
                  backgroundColor: theme.colors.primaryLight,
                  paddingHorizontal: 10,
                  paddingVertical: 4,
                  borderRadius: theme.radius.sm,
                }}
              >
                <Text selectable style={{ fontSize: 13, fontWeight: "700", color: theme.colors.primaryDark }}>
                  {ad.priceRange}
                </Text>
              </View>
            )}
          </View>

          <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <Badge label={categoryName} variant="primary" size="sm" />
            <Text style={{ ...theme.typography.caption, color: theme.colors.textTertiary }}>
              📍 {ad.location}
            </Text>
          </View>
        </View>
      </Pressable>
    </Link>
  );
}