import React from "react";
import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, TextStyle } from "react-native";
import { colors, radii, spacing } from "@/theme";

export function Card({ children, style }: { children: React.ReactNode; style?: ViewStyle }) {
  return <View style={[styles.card, style]}>{children}</View>;
}
export function H1({ children, style }: { children: React.ReactNode; style?: TextStyle }) {
  return <Text style={[styles.h1, style]}>{children}</Text>;
}
export function H2({ children, style }: { children: React.ReactNode; style?: TextStyle }) {
  return <Text style={[styles.h2, style]}>{children}</Text>;
}
export function Muted({ children, style }: { children: React.ReactNode; style?: TextStyle }) {
  return <Text style={[styles.muted, style]}>{children}</Text>;
}
export function Body({ children, style }: { children: React.ReactNode; style?: TextStyle }) {
  return <Text style={[styles.body, style]}>{children}</Text>;
}
export function Pill({ label, tone = "neutral" }: { label: string; tone?: "neutral" | "long" | "short" | "warn" | "primary" }) {
  const map = {
    neutral: { bg: colors.surfaceAlt, fg: colors.textMuted },
    long: { bg: "rgba(16,185,129,0.15)", fg: colors.long },
    short: { bg: "rgba(239,68,68,0.15)", fg: colors.short },
    warn: { bg: "rgba(245,158,11,0.15)", fg: colors.warn },
    primary: { bg: colors.primarySoft, fg: colors.primary },
  } as const;
  const t = map[tone];
  return (
    <View style={[styles.pill, { backgroundColor: t.bg }]}>
      <Text style={[styles.pillText, { color: t.fg }]}>{label}</Text>
    </View>
  );
}
export function PrimaryButton({ label, onPress, disabled, tone = "primary" }: {
  label: string; onPress?: () => void; disabled?: boolean;
  tone?: "primary" | "danger" | "muted";
}) {
  const bg = tone === "danger" ? colors.danger : tone === "muted" ? colors.surfaceAlt : colors.primary;
  const fg = tone === "muted" ? colors.text : "#04120b";
  return (
    <TouchableOpacity
      accessibilityRole="button"
      onPress={onPress}
      disabled={disabled}
      style={[styles.btn, { backgroundColor: bg, opacity: disabled ? 0.5 : 1 }]}
    >
      <Text style={[styles.btnText, { color: fg }]}>{label}</Text>
    </TouchableOpacity>
  );
}
export function Row({ children, style }: { children: React.ReactNode; style?: ViewStyle }) {
  return <View style={[styles.row, style]}>{children}</View>;
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
    borderWidth: 1,
    borderRadius: radii.lg,
    padding: spacing.lg,
    marginBottom: spacing.md,
  },
  h1: { color: colors.text, fontSize: 22, fontWeight: "700", marginBottom: spacing.xs },
  h2: { color: colors.text, fontSize: 16, fontWeight: "600", marginBottom: spacing.xs },
  muted: { color: colors.textMuted, fontSize: 12 },
  body: { color: colors.text, fontSize: 14 },
  pill: { paddingHorizontal: 8, paddingVertical: 3, borderRadius: radii.pill, alignSelf: "flex-start" },
  pillText: { fontSize: 10, fontWeight: "700", letterSpacing: 0.6, textTransform: "uppercase" },
  btn: {
    paddingVertical: 12, paddingHorizontal: 16,
    borderRadius: radii.md, alignItems: "center", justifyContent: "center",
  },
  btnText: { fontSize: 14, fontWeight: "700" },
  row: { flexDirection: "row", alignItems: "center", gap: spacing.sm },
});