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

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

function getCategoryIcon(slug?: string): string {
  if (!slug) return "document-text-outline";
  return CATEGORIES.find((c) => c.slug === slug)?.icon ?? "document-text-outline";
}

function getCategoryColor(slug?: string): string {
  if (!slug) return "#6B7280";
  const colors = ["#D4764A", "#4A8C6F", "#2B5797", "#C47A4A", "#8B5CF6", "#E07B5A",
                   "#3B82F6", "#7C3AED", "#06B6D4", "#D97706", "#059669", "#6B7280"];
  const idx = slug.split("").reduce((a, c) => a + c.charCodeAt(0), 0);
  return colors[idx % colors.length];
}

export function PostCard({ post }: PostCardProps) {
  const theme = useTheme();
  const categoryName = post.category ? getCategoryName(post.category) : null;
  const iconName = getCategoryIcon(post.category);
  const catColor = getCategoryColor(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={({ pressed }) => [
          {
            backgroundColor: theme.colors.surface,
            borderRadius: theme.radius.lg,
            padding: theme.spacing.md,
            borderWidth: 1,
            borderColor: theme.colors.border,
            ...theme.shadows.xs,
          },
          pressed && { opacity: 0.82, transform: [{ scale: 0.995 }] },
        ]}
      >
        <View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.md }}>
          <View
            style={{
              width: 52,
              height: 52,
              borderRadius: theme.radius.md,
              backgroundColor: catColor + "14",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Ionicons name={iconName as any} size={24} color={catColor} />
          </View>
          <View style={{ flex: 1, gap: 3 }}>
            <View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }}>
              <Text style={{ ...theme.typography.bodyBold, color: theme.colors.text, flex: 1, fontSize: 15 }} numberOfLines={1}>
                {post.title}
              </Text>
              <Badge label={isOpen ? "Отворено" : "Затворено"} variant={isOpen ? "success" : "error"} size="sm" />
            </View>
            <Text style={{ ...theme.typography.caption, color: theme.colors.textSecondary }} numberOfLines={1}>
              {post.description}
            </Text>
            <View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.sm, marginTop: 2 }}>
              {categoryName && <Badge label={categoryName} variant="default" size="sm" />}
              {post.location && (
                <View style={{ flexDirection: "row", alignItems: "center", gap: 3 }}>
                  <Ionicons name="location-outline" size={12} color={theme.colors.textTertiary} />
                  <Text style={{ ...theme.typography.caption, color: theme.colors.textTertiary }}>
                    {post.location}
                  </Text>
                </View>
              )}
              {post.budget && (
                <Text selectable style={{ ...theme.typography.captionBold, color: theme.colors.primary }}>
                  {post.budget}
                </Text>
              )}
            </View>
          </View>
          <Ionicons name="chevron-forward" size={18} color={theme.colors.textTertiary} />
        </View>
      </Pressable>
    </Link>
  );
}
