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

interface PostCardProps {
  post: {
    _id: string;
    title: string;
    description: string;
    category?: string;
    location?: string;
    budget?: string;
    status: string;
    createdAt: number;
  };
}

export function PostCard({ post }: PostCardProps) {
  const theme = useTheme();
  const categoryName = post.category ? getCategoryName(post.category) : null;
  const emoji = post.category ? (CATEGORY_EMOJI[post.category] ?? "📋") : "📋";
  const isOpen = post.status === "open";

  return (
    <Link href={`/post/${post._id}` as any} asChild>
      <Pressable
        accessible
        accessibilityLabel={`${post.title}, ${isOpen ? "отворено" : "затворено"}${post.budget ? `, ${post.budget}` : ""}`}
        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", justifyContent: "space-between", alignItems: "flex-start" }}>
            <View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.sm, flex: 1 }}>
              <View
                style={{
                  width: 36,
                  height: 36,
                  borderRadius: theme.radius.md,
                  backgroundColor: isOpen ? theme.colors.successLight : theme.colors.surfaceAlt,
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Text style={{ fontSize: 18 }}>{emoji}</Text>
              </View>
              <Text style={{ ...theme.typography.h3, color: theme.colors.text, flex: 1 }} numberOfLines={1}>
                {post.title}
              </Text>
            </View>
            <Badge label={isOpen ? "Отворено" : "Затворено"} variant={isOpen ? "success" : "error"} size="sm" />
          </View>

          <Text style={{ ...theme.typography.body, color: theme.colors.textSecondary }} numberOfLines={2}>
            {post.description}
          </Text>

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