import { Ionicons } from "@expo/vector-icons";
import React, { ReactNode } from "react";
import {
  ActivityIndicator,
  Modal,
  Pressable,
  TextInput as RNTextInput,
  ScrollView,
  StyleProp,
  StyleSheet,
  Text,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
} from "react-native";
import { Device } from "../api/types";
import { colors } from "./theme";

export function Screen({
  children,
  contentContainerStyle,
}: {
  children: ReactNode;
  contentContainerStyle?: StyleProp<ViewStyle>;
}) {
  return (
    <ScrollView
      style={styles.screen}
      contentContainerStyle={[styles.screenContent, contentContainerStyle]}
      contentInsetAdjustmentBehavior="automatic"
    >
      {children}
    </ScrollView>
  );
}

export function Card({
  children,
  style,
}: {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
}) {
  return <View style={[styles.card, style]}>{children}</View>;
}

export function H1({ children }: { children: ReactNode }) {
  return <Text style={styles.h1}>{children}</Text>;
}

export function H2({ children }: { children: ReactNode }) {
  return <Text style={styles.h2}>{children}</Text>;
}

export function Body({
  children,
  style,
}: {
  children: ReactNode;
  style?: StyleProp<TextStyle>;
}) {
  return <Text style={[styles.body, style]}>{children}</Text>;
}

export function Muted({
  children,
  style,
}: {
  children: ReactNode;
  style?: StyleProp<TextStyle>;
}) {
  return <Text style={[styles.muted, style]}>{children}</Text>;
}

export function Pill({
  label,
  tone = "neutral",
}: {
  label: string;
  tone?: "neutral" | "good" | "attention";
}) {
  const backgroundColor =
    tone === "good"
      ? colors.surfaceVariant
      : tone === "attention"
        ? colors.primaryContainer
        : colors.surfaceVariant;

  const borderColor = tone === "attention" ? colors.primary : colors.outline;

  const textColor = tone === "attention" ? colors.onPrimary : colors.onSurface;

  return (
    <View style={[styles.pill, { backgroundColor, borderColor }]}>
      <Text style={[styles.pillText, { color: textColor }]}>{label}</Text>
    </View>
  );
}

export function Row({ left, right }: { left: ReactNode; right?: ReactNode }) {
  return (
    <View style={styles.row}>
      <View style={styles.rowLeft}>{left}</View>
      {right ? <View style={styles.rowRight}>{right}</View> : null}
    </View>
  );
}

export function Divider() {
  return <View style={styles.divider} />;
}

export function ActionRow({
  title,
  subtitle,
  onPress,
  right,
}: {
  title: string;
  subtitle?: string;
  onPress?: () => void;
  right?: ReactNode;
}) {
  return (
    <Pressable
      onPress={onPress}
      disabled={!onPress}
      style={({ pressed }) => [
        styles.actionRow,
        pressed && onPress ? styles.actionRowPressed : undefined,
      ]}
    >
      <View style={{ flex: 1, gap: 4 }}>
        <Text style={styles.actionTitle}>{title}</Text>
        {subtitle ? (
          <Text style={styles.actionSubtitle}>{subtitle}</Text>
        ) : null}
      </View>
      {right ? (
        <View style={{ marginLeft: 12, alignItems: "flex-end" }}>{right}</View>
      ) : null}
    </Pressable>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Dialog / Modal Components
// ─────────────────────────────────────────────────────────────────────────────

export type DialogOption = {
  label: string;
  onPress: () => void;
  destructive?: boolean;
};

/**
 * A selection dialog that shows a list of options to choose from.
 */
export function SelectDialog({
  visible,
  title,
  options,
  onClose,
}: {
  visible: boolean;
  title: string;
  options: DialogOption[];
  onClose: () => void;
}) {
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.dialogOverlay}>
        <View style={styles.dialogCard}>
          <Text style={styles.dialogTitle}>{title}</Text>
          {options.map((option, index) => (
            <TouchableOpacity
              key={index}
              onPress={option.onPress}
              style={styles.dialogOption}
            >
              <Text
                style={[
                  styles.dialogOptionText,
                  option.destructive && styles.dialogDestructiveText,
                ]}
              >
                {option.label}
              </Text>
            </TouchableOpacity>
          ))}
          <TouchableOpacity onPress={onClose} style={styles.dialogCancel}>
            <Text style={styles.dialogCancelText}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}

/**
 * A confirmation dialog with a message and OK/Cancel buttons.
 */
export function ConfirmDialog({
  visible,
  title,
  message,
  confirmLabel = "Okay",
  cancelLabel = "Cancel",
  onConfirm,
  onCancel,
  destructive = false,
}: {
  visible: boolean;
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  onConfirm: () => void;
  onCancel: () => void;
  destructive?: boolean;
}) {
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onCancel}
    >
      <View style={styles.dialogOverlay}>
        <View style={styles.dialogCard}>
          <Text style={styles.dialogTitle}>{title}</Text>
          <Text style={styles.dialogBody}>{message}</Text>
          <View style={styles.dialogButtonRow}>
            <TouchableOpacity
              onPress={onCancel}
              style={styles.dialogInlineButton}
            >
              <Text style={styles.dialogButtonText}>{cancelLabel}</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={onConfirm}
              style={styles.dialogInlineButton}
            >
              <Text
                style={[
                  styles.dialogButtonText,
                  destructive && styles.dialogDestructiveText,
                ]}
              >
                {confirmLabel}
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
}

/**
 * A prompt dialog with an input field, message, and Cancel/Submit buttons.
 */
export function PromptDialog({
  visible,
  title,
  message,
  onClose,
  onSubmit,
  initialValue = "",
}: {
  visible: boolean;
  title: string;
  message: string;
  onClose: () => void;
  onSubmit: (value: string) => void;
  initialValue?: string;
}) {
  const [value, setValue] = React.useState(initialValue);

  React.useEffect(() => {
    setValue(initialValue);
  }, [initialValue, visible]);

  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <H2>{title}</H2>
          <Muted>{message}</Muted>

          <View style={{ height: 12 }} />

          <TextInput value={value} onChangeText={setValue} />
          <View style={styles.modalActions}>
            <Button title="Cancel" onPress={onClose} variant="secondary" />
            <Button title="Submit" onPress={() => onSubmit(value)} />
          </View>
        </View>
      </View>
    </Modal>
  );
}

export function AlertDialog({
  visible,
  title,
  message,
  buttonLabel = "OK",
  onClose,
}: {
  visible: boolean;
  title: string;
  message?: string;
  buttonLabel?: string;
  onClose: () => void;
}) {
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.dialogOverlay}>
        <View style={styles.dialogCard}>
          <Text style={styles.dialogTitle}>{title}</Text>
          {message && <Text style={styles.dialogBody}>{message}</Text>}
          <View style={styles.dialogButtonRow}>
            <TouchableOpacity
              onPress={onClose}
              style={styles.dialogInlineButton}
            >
              <Text style={styles.dialogButtonText}>{buttonLabel}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Form Components
// ─────────────────────────────────────────────────────────────────────────────

export function TextInput({
  label,
  value,
  onChangeText,
  placeholder,
  secureTextEntry,
  autoCapitalize = "none",
  keyboardType = "default",
  error,
}: {
  label?: string;
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  secureTextEntry?: boolean;
  autoCapitalize?: "none" | "sentences" | "words" | "characters";
  keyboardType?: "default" | "email-address" | "numeric";
  error?: string;
}) {
  return (
    <View style={styles.inputContainer}>
      {label && <Text style={styles.inputLabel}>{label}</Text>}
      <RNTextInput
        style={[styles.textInput, error && styles.textInputError]}
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        placeholderTextColor={colors.onSurfaceVariant}
        secureTextEntry={secureTextEntry}
        autoCapitalize={autoCapitalize}
        keyboardType={keyboardType}
      />
      {error && <Text style={styles.inputError}>{error}</Text>}
    </View>
  );
}

export function Button({
  title,
  onPress,
  variant = "primary",
  disabled,
  loading,
}: {
  title: string;
  onPress: () => void;
  variant?: "primary" | "secondary" | "text";
  disabled?: boolean;
  loading?: boolean;
}) {
  const isPrimary = variant === "primary";
  const isText = variant === "text";

  return (
    <TouchableOpacity
      onPress={onPress}
      disabled={disabled || loading}
      style={[
        styles.button,
        isPrimary && styles.buttonPrimary,
        !isPrimary && !isText && styles.buttonSecondary,
        isText && styles.buttonText,
        (disabled || loading) && styles.buttonDisabled,
      ]}
    >
      {loading ? (
        <ActivityIndicator
          color={isPrimary ? colors.onPrimary : colors.primary}
          size="small"
        />
      ) : (
        <Text
          style={[
            styles.buttonLabel,
            isPrimary && styles.buttonLabelPrimary,
            !isPrimary && styles.buttonLabelSecondary,
          ]}
        >
          {title}
        </Text>
      )}
    </TouchableOpacity>
  );
}

export function LoadingScreen() {
  return (
    <View style={styles.loadingScreen}>
      <ActivityIndicator size="large" color={colors.primary} />
    </View>
  );
}

/**
 * Device selector dropdown component for selecting a device.
 */
export function DeviceSelector({
  devices,
  selectedDevice,
  onSelectDevice,
  isLoading,
}: {
  devices: Device[];
  selectedDevice: Device | null;
  onSelectDevice: (device: Device) => void;
  isLoading?: boolean;
}) {
  const [visible, setVisible] = React.useState(false);

  if (isLoading) {
    return (
      <View style={styles.deviceSelectorContainer}>
        <ActivityIndicator size="small" color={colors.onSurfaceVariant} />
      </View>
    );
  }

  if (devices.length === 0) {
    return (
      <View style={styles.deviceSelectorContainer}>
        <Text style={styles.deviceSelectorText}>No devices linked</Text>
      </View>
    );
  }

  return (
    <>
      <Pressable
        style={styles.deviceSelectorContainer}
        onPress={() => setVisible(true)}
      >
        <View style={styles.deviceSelectorContent}>
          <View
            style={[
              styles.deviceStatusDot,
              {
                backgroundColor:
                  selectedDevice?.status === "online"
                    ? "#4CAF50"
                    : colors.onSurfaceVariant,
              },
            ]}
          />
          <Text style={styles.deviceSelectorText} numberOfLines={1}>
            {selectedDevice?.name || "Select device"}
          </Text>
          <Ionicons
            name="chevron-down"
            size={16}
            color={colors.onSurfaceVariant}
          />
        </View>
      </Pressable>

      <Modal
        visible={visible}
        transparent
        animationType="fade"
        onRequestClose={() => setVisible(false)}
      >
        <View style={styles.dialogOverlay}>
          <View style={styles.dialogCard}>
            <Text style={styles.dialogTitle}>Select Device</Text>
            {devices.map((device) => (
              <TouchableOpacity
                key={device.id}
                onPress={() => {
                  onSelectDevice(device);
                  setVisible(false);
                }}
                style={[
                  styles.deviceOption,
                  selectedDevice?.id === device.id &&
                    styles.deviceOptionSelected,
                ]}
              >
                <View style={styles.deviceOptionContent}>
                  <View
                    style={[
                      styles.deviceStatusDot,
                      {
                        backgroundColor:
                          device.status === "online"
                            ? "#4CAF50"
                            : colors.onSurfaceVariant,
                      },
                    ]}
                  />
                  <View style={{ flex: 1 }}>
                    <Text style={styles.deviceOptionName}>{device.name}</Text>
                    <Text style={styles.deviceOptionStatus}>
                      {device.status === "online" ? "Online" : "Offline"} •{" "}
                      {device.lastCheck}
                    </Text>
                  </View>
                  {selectedDevice?.id === device.id && (
                    <Ionicons
                      name="checkmark"
                      size={20}
                      color={colors.primary}
                    />
                  )}
                </View>
              </TouchableOpacity>
            ))}
            <TouchableOpacity
              onPress={() => setVisible(false)}
              style={styles.dialogCancel}
            >
              <Text style={styles.dialogCancelText}>Cancel</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: colors.background,
  },
  screenContent: {
    padding: 16,
    gap: 12,
  },
  card: {
    backgroundColor: colors.surface,
    borderColor: colors.outline,
    borderWidth: StyleSheet.hairlineWidth,
    padding: 14,
    gap: 10,
  },
  h1: {
    color: colors.onBackground,
    fontSize: 24,
    fontWeight: "800",
  },
  h2: {
    color: colors.onBackground,
    fontSize: 16,
    fontWeight: "700",
  },
  body: {
    color: colors.onBackground,
    fontSize: 14,
    lineHeight: 20,
  },
  muted: {
    color: colors.onSurfaceVariant,
    fontSize: 13,
    lineHeight: 18,
  },
  pill: {
    alignSelf: "flex-start",
    borderWidth: StyleSheet.hairlineWidth,
    paddingHorizontal: 10,
    paddingVertical: 6,
  },
  pillText: {
    fontSize: 12,
    fontWeight: "700",
    letterSpacing: 0.2,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 12,
  },
  rowLeft: {
    flex: 1,
  },
  rowRight: {
    alignItems: "flex-end",
  },
  divider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: colors.outline,
    opacity: 0.7,
  },
  actionRow: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 10,
    gap: 12,
  },
  actionRowPressed: {
    opacity: 0.85,
  },
  actionTitle: {
    color: colors.onBackground,
    fontSize: 14,
    fontWeight: "700",
  },
  actionSubtitle: {
    color: colors.onSurfaceVariant,
    fontSize: 13,
    lineHeight: 18,
  },
  // Dialog styles
  dialogOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    alignItems: "center",
    padding: 24,
  },
  dialogCard: {
    width: "100%",
    backgroundColor: colors.surface,
    padding: 16,
    borderColor: colors.outline,
    borderWidth: StyleSheet.hairlineWidth,
    gap: 12,
  },
  dialogTitle: {
    fontSize: 16,
    fontWeight: "700",
    color: colors.onBackground,
  },
  dialogBody: {
    color: colors.onSurfaceVariant,
    fontSize: 14,
    marginBottom: 8,
  },
  dialogOption: {
    paddingVertical: 12,
  },
  dialogOptionText: {
    color: colors.onBackground,
    fontSize: 15,
    fontWeight: "700",
  },
  dialogDestructiveText: {
    color: "#b00020",
  },
  dialogCancel: {
    paddingVertical: 12,
    alignItems: "center",
  },
  dialogCancelText: {
    color: colors.onSurfaceVariant,
    fontWeight: "700",
  },
  dialogButtonRow: {
    flexDirection: "row",
    justifyContent: "flex-end",
    gap: 12,
  },
  dialogInlineButton: {
    paddingVertical: 10,
    paddingHorizontal: 12,
  },
  dialogButtonText: {
    color: colors.onBackground,
    fontSize: 15,
    fontWeight: "700",
  },
  // Form styles
  inputContainer: {
    gap: 6,
  },
  inputLabel: {
    color: colors.onBackground,
    fontSize: 14,
    fontWeight: "600",
  },
  textInput: {
    backgroundColor: colors.surfaceVariant,
    borderColor: colors.outline,
    borderWidth: StyleSheet.hairlineWidth,
    color: colors.onBackground,
    fontSize: 16,
    paddingHorizontal: 14,
    paddingVertical: 12,
  },
  textInputError: {
    borderColor: colors.primary,
  },
  inputError: {
    color: colors.primary,
    fontSize: 12,
  },
  button: {
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 14,
    paddingHorizontal: 24,
  },
  buttonPrimary: {
    backgroundColor: colors.primary,
  },
  buttonSecondary: {
    backgroundColor: "transparent",
    borderColor: colors.outline,
    borderWidth: StyleSheet.hairlineWidth,
  },
  buttonText: {
    backgroundColor: "transparent",
  },
  buttonDisabled: {
    opacity: 0.5,
  },
  buttonLabel: {
    fontSize: 16,
    fontWeight: "700",
  },
  buttonLabelPrimary: {
    color: colors.onPrimary,
  },
  buttonLabelSecondary: {
    color: colors.onBackground,
  },
  loadingScreen: {
    flex: 1,
    backgroundColor: colors.background,
    alignItems: "center",
    justifyContent: "center",
  },
  // Device Selector styles
  deviceSelectorContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: colors.surfaceVariant,
    borderColor: colors.outline,
    borderWidth: StyleSheet.hairlineWidth,
    paddingHorizontal: 12,
    paddingVertical: 10,
    marginBottom: 4,
  },
  deviceSelectorContent: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    flex: 1,
  },
  deviceSelectorText: {
    flex: 1,
    color: colors.onBackground,
    fontSize: 14,
    fontWeight: "600",
  },
  deviceStatusDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
  },
  deviceOption: {
    paddingVertical: 12,
    paddingHorizontal: 4,
  },
  deviceOptionSelected: {
    backgroundColor: colors.surfaceVariant,
  },
  deviceOptionContent: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
  },
  deviceOptionName: {
    color: colors.onBackground,
    fontSize: 15,
    fontWeight: "600",
  },
  deviceOptionStatus: {
    color: colors.onSurfaceVariant,
    fontSize: 12,
    marginTop: 2,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.7)",
    justifyContent: "center",
    alignItems: "center",
  },
  modalContent: {
    backgroundColor: colors.surface,
    borderRadius: 20,
    padding: 20,
    width: "80%",
  },
  modalActions: {
    flexDirection: "row",
    justifyContent: "flex-end",
    marginTop: 20,
    gap: 10,
  },
});