import React from "react";
import { Pressable, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { Text } from "./text";

export interface TagChipProps {
  name: string;
  /** Accent color for the tag. Accepts `rgb(r, g, b)` or `#rrggbb`. */
  color?: string | null;
  selected?: boolean;
  onPress?: () => void;
  size?: "sm" | "md";
}

/**
 * Compact chip used to display a tag — icon + name with a soft accent
 * border. When `selected` is true the border + background pick up the
 * accent at full opacity / 18% fill respectively.
 */
export function TagChip({ name, color, selected, onPress, size = "sm" }: TagChipProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const accent = color ?? (isDark ? "rgb(163, 163, 163)" : "rgb(115, 115, 115)");
  const dims =
    size === "sm"
      ? { paddingH: 8, paddingV: 3, fontSize: 11, iconSize: 10 }
      : { paddingH: 10, paddingV: 5, fontSize: 12, iconSize: 12 };

  const inner = (
    <View
      style={{
        flexDirection: "row",
        alignItems: "center",
        gap: 4,
        paddingHorizontal: dims.paddingH,
        paddingVertical: dims.paddingV,
        borderRadius: 6,
        borderWidth: 1,
        borderColor: selected ? accent : withAlpha(accent, 0.33),
        backgroundColor: selected ? withAlpha(accent, 0.18) : "transparent",
      }}
    >
      <Ionicons name="pricetag-outline" size={dims.iconSize} color={accent} />
      <Text className="text-foreground" style={{ fontSize: dims.fontSize }}>
        {name}
      </Text>
    </View>
  );

  if (!onPress) {
    return inner;
  }

  return (
    <Pressable
      onPress={onPress}
      hitSlop={4}
      style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
    >
      {inner}
    </Pressable>
  );
}

/** Tints an `rgb(...)` or `#rrggbb` color with the given alpha 0..1. */
export function withAlpha(color: string, alpha: number): string {
  const rgb = color.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);
  if (rgb) {
    return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`;
  }
  const hex = color.match(/^#([0-9a-f]{6})$/i);
  if (hex) {
    const h = hex[1] ?? "";
    return `rgba(${parseInt(h.slice(0, 2), 16)}, ${parseInt(h.slice(2, 4), 16)}, ${parseInt(h.slice(4, 6), 16)}, ${alpha})`;
  }
  return color;
}