import React from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";

type Props = {
  icon: string;
  title: string;
  subtitle?: string;
  brandColor: string;
  badge?: number | null;
  comingSoon?: boolean;
  onPress?: () => void;
};

// Carte d'action du hub d'accueil. Reprend la grille de cartes du dashboard
// tech coolcare (.actions-grid / .action-card) en version React Native.
export default function FeatureCard({
  icon,
  title,
  subtitle,
  brandColor,
  badge,
  comingSoon,
  onPress,
}: Readonly<Props>) {
  // Une carte sans handler n'est pas cliquable (ex: fonctionnalite a venir non
  // encore branchee). Le pastille "Bientot" est purement visuelle : une carte
  // peut etre "Bientot" et quand meme ouvrir un ecran d'explication.
  const disabled = !onPress;
  const showBadge = !comingSoon && badge != null && badge > 0;

  return (
    <Pressable
      style={({ pressed }) => [
        styles.card,
        disabled && styles.cardDisabled,
        pressed && !disabled && styles.cardPressed,
      ]}
      onPress={onPress}
      disabled={disabled}
    >
      <View style={styles.topRow}>
        <Text style={styles.icon}>{icon}</Text>
        {comingSoon ? (
          <View style={styles.soonPill}>
            <Text style={styles.soonText}>Bientot</Text>
          </View>
        ) : null}
        {showBadge ? (
          <View style={[styles.badge, { backgroundColor: brandColor }]}>
            <Text style={styles.badgeText}>{badge}</Text>
          </View>
        ) : null}
      </View>
      <Text style={[styles.title, disabled && styles.titleDisabled]}>{title}</Text>
      {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    flexBasis: "47%",
    flexGrow: 1,
    minHeight: 118,
    borderWidth: 1,
    borderColor: "#d8e4f6",
    backgroundColor: "#ffffff",
    borderRadius: 14,
    padding: 14,
    gap: 8,
    justifyContent: "flex-start",
  },
  cardDisabled: {
    backgroundColor: "#f4f7fc",
    borderColor: "#e3ebf8",
  },
  cardPressed: {
    transform: [{ translateY: -1 }],
    borderColor: "#9db8e6",
  },
  topRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    minHeight: 28,
  },
  icon: {
    fontSize: 26,
  },
  badge: {
    minWidth: 24,
    height: 24,
    borderRadius: 12,
    paddingHorizontal: 6,
    alignItems: "center",
    justifyContent: "center",
  },
  badgeText: {
    color: "#ffffff",
    fontSize: 12,
    fontWeight: "800",
  },
  soonPill: {
    backgroundColor: "#fef3c7",
    borderColor: "#fcd34d",
    borderWidth: 1,
    borderRadius: 999,
    paddingHorizontal: 8,
    paddingVertical: 2,
  },
  soonText: {
    color: "#92400e",
    fontSize: 10,
    fontWeight: "800",
  },
  title: {
    fontSize: 15,
    fontWeight: "800",
    color: "#16325c",
  },
  titleDisabled: {
    color: "#94a3b8",
  },
  subtitle: {
    fontSize: 12,
    color: "#6a7a96",
    fontWeight: "600",
  },
});