import { View, Text } from "react-native";
import { useTheme } from "./theme";
import { Avatar } from "./ui/avatar";
import { Rating } from "./ui/rating";

function formatTimeAgo(timestamp: number): string {
  const now = Date.now();
  const diff = now - timestamp;

  const seconds = Math.floor(diff / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);
  const months = Math.floor(days / 30);
  const years = Math.floor(days / 365);

  if (years > 0) return `пред ${years} ${years === 1 ? "година" : "години"}`;
  if (months > 0) return `пред ${months} ${months === 1 ? "месец" : "месеци"}`;
  if (days > 0) return `пред ${days} ${days === 1 ? "ден" : "денови"}`;
  if (hours > 0) return `пред ${hours} ${hours === 1 ? "час" : "часа"}`;
  if (minutes > 0) return `пред ${minutes} ${minutes === 1 ? "минута" : "минути"}`;
  return "пред малку";
}

interface ReviewCardProps {
  review: {
    _id: string;
    rating: number;
    comment?: string;
    createdAt: number;
  };
  customerName: string;
  customerAvatarId?: string;
}

export function ReviewCard({ review, customerName, customerAvatarId }: ReviewCardProps) {
  const theme = useTheme();

  return (
    <View
      accessible
      accessibilityLabel={`Оценка ${review.rating} од 5 од ${customerName}${review.comment ? `, ${review.comment}` : ""}`}
      style={{
        backgroundColor: theme.colors.card,
        borderRadius: theme.radius.lg,
        padding: theme.spacing.lg,
        ...theme.shadows.xs,
        borderWidth: 1,
        borderColor: theme.colors.border,
        gap: theme.spacing.md,
      }}
    >
      <View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.md }}>
        <Avatar uri={customerAvatarId ?? null} name={customerName} size={44} />
        <View style={{ flex: 1 }}>
          <Text selectable style={{ ...theme.typography.bodyBold, color: theme.colors.text, fontSize: 15 }}>
            {customerName}
          </Text>
          <Text style={{ ...theme.typography.label, color: theme.colors.textTertiary }}>
            {formatTimeAgo(review.createdAt)}
          </Text>
        </View>
        <Rating value={review.rating} size={16} />
      </View>

      {review.comment ? (
        <Text selectable style={{ ...theme.typography.body, color: theme.colors.textSecondary, lineHeight: 22 }}>
          {review.comment}
        </Text>
      ) : null}
    </View>
  );
}