import { Pressable, StyleSheet, Text, TextInput, View, type TextInputProps } from "react-native";
import { C } from "../lib/theme";

export function Field({ label, ...props }: TextInputProps & { label: string }) {
  return (
    <View style={{ marginBottom: 14 }}>
      <Text style={u.label}>{label}</Text>
      <TextInput style={u.input} placeholderTextColor={C.muted} {...props} />
    </View>
  );
}

export function Chips<T extends string>({
  label,
  options,
  value,
  onChange,
  labels,
}: {
  label: string;
  options: T[];
  value: T | null;
  onChange: (v: T) => void;
  labels?: Record<string, string>;
}) {
  return (
    <View style={{ marginBottom: 14 }}>
      <Text style={u.label}>{label}</Text>
      <View style={u.chipRow}>
        {options.map((o) => (
          <Pressable
            key={o}
            style={[u.chip, value === o && u.chipActive]}
            onPress={() => onChange(o)}
          >
            <Text style={[u.chipText, value === o && { color: C.text }]}>{labels?.[o] ?? o}</Text>
          </Pressable>
        ))}
      </View>
    </View>
  );
}

export function Button({
  title,
  onPress,
  danger,
}: {
  title: string;
  onPress: () => void;
  danger?: boolean;
}) {
  return (
    <Pressable
      style={[u.button, danger && { backgroundColor: "transparent", borderColor: C.danger, borderWidth: 1 }]}
      onPress={onPress}
    >
      <Text style={[u.buttonText, danger && { color: C.danger }]}>{title}</Text>
    </Pressable>
  );
}

const u = StyleSheet.create({
  label: { color: C.muted, fontSize: 13, marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.5 },
  input: {
    backgroundColor: C.surface,
    color: C.text,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: C.border,
    padding: 12,
    fontSize: 16,
  },
  chipRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
  chip: {
    paddingVertical: 8,
    paddingHorizontal: 14,
    borderRadius: 20,
    backgroundColor: C.surface,
    borderWidth: 1,
    borderColor: C.border,
  },
  chipActive: { backgroundColor: C.surface2, borderColor: C.accent },
  chipText: { color: C.muted, fontSize: 14 },
  button: {
    backgroundColor: C.accent,
    borderRadius: 10,
    padding: 14,
    alignItems: "center",
    marginTop: 8,
    marginBottom: 12,
  },
  buttonText: { color: C.text, fontSize: 16, fontWeight: "600" },
});
