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

export interface SettingsRowProps {
  icon: keyof typeof Ionicons.glyphMap;
  label: string;
  subtitle?: string;
  onPress?: () => void;
  showChevron?: boolean;
  toggle?: boolean;
  value?: boolean;
  onValueChange?: (value: boolean) => void;
  destructive?: boolean;
}

/**
 * Horizontal row used inside settings dialogs / panels. Combines an icon
 * tile, label + optional subtitle, and a trailing switch *or* chevron.
 * `destructive` recolors the label + icon to the destructive token.
 */
export function SettingsRow({
  icon,
  label,
  subtitle,
  onPress,
  showChevron,
  toggle,
  value,
  onValueChange,
  destructive,
}: SettingsRowProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  const Wrapper = onPress ? Pressable : View;
  // Toggle-mode rows tap-to-switch and also surface the switch
  // itself — both surfaces need the label as their accessible name
  // so a screen reader doesn't announce "Switch, on" with no
  // context. The Switch carries `accessibilityState` so AT can
  // announce the on/off state.
  const wrapperProps = onPress
    ? ({
        onPress,
        accessibilityRole: "button" as const,
        accessibilityLabel: label,
        ...(subtitle ? { accessibilityHint: subtitle } : {}),
      } as const)
    : {};

  let iconColor: string;
  if (destructive) {
    iconColor = "#EF4444";
  } else if (isDark) {
    iconColor = "#FFFFFF";
  } else {
    iconColor = "#000000";
  }

  return (
    <Wrapper
      className="flex-row items-center border-b border-border px-3 py-3 last:border-b-0 dark:border-neutral-800"
      {...wrapperProps}
    >
      <View className="mr-3 h-8 w-8 items-center justify-center rounded-md bg-secondary dark:bg-neutral-800">
        <Ionicons name={icon} size={16} color={iconColor} />
      </View>
      <View className="flex-1">
        <Text
          className={cn(
            "text-sm font-medium",
            destructive ? "text-destructive dark:text-red-900" : "text-foreground"
          )}
        >
          {label}
        </Text>
        {subtitle ? <MutedText className="text-xs">{subtitle}</MutedText> : null}
      </View>
      {toggle ? (
        <Switch
          value={value}
          onValueChange={onValueChange}
          accessibilityLabel={label}
          accessibilityState={{ checked: value === true }}
          trackColor={{
            false: isDark ? "#404040" : "#D4D4D4",
            true: isDark ? "#FFFFFF" : "#000000",
          }}
          thumbColor={isDark ? "#000000" : "#FFFFFF"}
        />
      ) : null}
      {showChevron ? (
        <Ionicons name="chevron-forward" size={16} color={isDark ? "#525252" : "#A3A3A3"} />
      ) : null}
    </Wrapper>
  );
}

export interface SettingsSectionProps {
  title: string;
  destructive?: boolean;
  children: React.ReactNode;
}

/** Group container for `SettingsRow`s. Renders the section title + a
 *  bordered card around its children. */
export function SettingsSection({ title, destructive, children }: SettingsSectionProps) {
  return (
    <View>
      <Text
        className={cn(
          "mb-2 text-xs font-semibold tracking-wider",
          destructive
            ? "text-destructive dark:text-red-900"
            : "text-muted-foreground dark:text-neutral-400"
        )}
      >
        {title}
      </Text>
      <View className="rounded-lg border border-border bg-card dark:border-neutral-800 dark:bg-neutral-900/50">
        {children}
      </View>
    </View>
  );
}