import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Switch, Text, TouchableOpacity, View } from "react-native";

import { useTheme } from "@/lib/theme";

type IconName = React.ComponentProps<typeof MaterialCommunityIcons>["name"];

type RightKind = "chevron" | "switch" | "value" | "none";

type SettingsRowProps = {
  icon: IconName;
  title: string;
  subtitle?: string;
  right?: RightKind;
  /** For `right: "value"` — the string shown on the trailing side. */
  value?: string;
  /** For `right: "switch"`. */
  switchValue?: boolean;
  onSwitchChange?: (value: boolean) => void;
  onPress?: () => void;
  /** Red accent — used for the emergency-call row. */
  danger?: boolean;
};

/** A single row in the Settings screen. Born dark-aware. */
export const SettingsRow = ({
  icon,
  title,
  subtitle,
  right = "none",
  value,
  switchValue,
  onSwitchChange,
  onPress,
  danger = false,
}: SettingsRowProps) => {
  const { isDark } = useTheme();
  const interactive = right === "chevron" || right === "value";

  const content = (
    <View className="flex-row items-center py-3.5">
      <View
        className={`w-10 h-10 rounded-full items-center justify-center mr-3.5 ${
          danger
            ? "bg-rose-500/15"
            : "bg-neutral-100 dark:bg-neutral-800"
        }`}
      >
        <MaterialCommunityIcons
          name={icon}
          size={20}
          color={danger ? "#e11d48" : isDark ? "#e5e5e5" : "#404040"}
        />
      </View>

      <View className="flex-1">
        <Text
          className={`text-[15px] font-JakartaSemiBold ${
            danger ? "text-rose-600 dark:text-rose-400" : "text-black dark:text-white"
          }`}
        >
          {title}
        </Text>

        {subtitle ? (
          <Text className="text-xs font-Jakarta text-general-200 dark:text-neutral-400 mt-0.5">
            {subtitle}
          </Text>
        ) : null}
      </View>

      {right === "switch" ? (
        <Switch
          value={switchValue}
          onValueChange={onSwitchChange}
          trackColor={{ false: "#d4d4d4", true: "#0286ff" }}
        />
      ) : null}

      {right === "value" ? (
        <Text className="text-sm font-JakartaMedium text-general-200 dark:text-neutral-400 mr-1">
          {value}
        </Text>
      ) : null}

      {right === "chevron" ? (
        <MaterialCommunityIcons
          name="chevron-right"
          size={22}
          color={isDark ? "#737373" : "#a3a3a3"}
        />
      ) : null}
    </View>
  );

  if (right === "switch" || !interactive || !onPress) {
    return <View className="px-4">{content}</View>;
  }

  return (
    <TouchableOpacity
      onPress={onPress}
      activeOpacity={0.6}
      className="px-4"
    >
      {content}
    </TouchableOpacity>
  );
};