import BottomSheetModal from "@/components/common/BottomSheetModal"; // adjust path
import WhatsappIcon from "../../assets/icons/whatsapp.svg";
import CallIcon from "../../assets/icons/call.svg";
import EmailIcon from "../../assets/icons/mail.svg";
import { Linking, Pressable, StyleSheet, Text, View } from "react-native";
import { SUPPORT } from "@/constants/config";

interface CustomerSupportProps {
  visible: boolean;
  onClose: () => void;
}

export default function CustomerSupport({
  visible,
  onClose,
}: CustomerSupportProps) {
  const openWhatsApp = () => {
    const url = `https://wa.me/${
      SUPPORT.WHATSAPP_NUMBER
    }?text=${encodeURIComponent(SUPPORT.WHATSAPP_PLACEHOLDER)}`;
    Linking.openURL(url).catch((err) =>
      console.log("Failed to open WhatsApp:", err)
    );
  };

  const makePhoneCall = () => {
    Linking.openURL(`tel:${SUPPORT.PHONE}`);
  };

  const sendEmail = () => {
    const url = `mailto:${SUPPORT.EMAIL}?subject=${encodeURIComponent(
      SUPPORT.EMAIL_SUBJECT
    )}&body=${encodeURIComponent(SUPPORT.EMAIL_BODY)}`;
    Linking.openURL(url);
  };

  return (
    <BottomSheetModal
      visible={visible}
      onClose={onClose}
      heading="Customer Support"
    >
      <View style={styles.row}>
        <Pressable style={styles.secondaryButton} onPress={openWhatsApp}>
          <WhatsappIcon />
          <Text style={styles.buttonText}>Whatsapp</Text>
        </Pressable>
        <Pressable style={styles.secondaryButton} onPress={makePhoneCall}>
          <CallIcon />
          <Text style={styles.buttonText}>Call Us</Text>
        </Pressable>
      </View>
      <Pressable
        style={[styles.secondaryButton, styles.fullButton]}
        onPress={sendEmail}
      >
        <EmailIcon />
        <Text style={styles.buttonText}>Email</Text>
      </Pressable>
    </BottomSheetModal>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    gap: 16,
    justifyContent: "space-between",
  },
  secondaryButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 8,
    paddingHorizontal: 16,
    height: 40,
    borderRadius: 4,
    backgroundColor: "#F3F5F8",
    borderWidth: 1,
    borderColor: "#D8DDE7",
    width: 156,
    gap: 8,
  },
  fullButton: {
    width: "100%",
  },
  buttonText: {
    fontSize: 14,
    fontWeight: "500",
    color: "#252A34",
  },
});