import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Pressable,
  Linking,
  Modal,
} from "react-native";
import WhatsappIcon from "../../assets/icons/whatsapp.svg";
import CallIcon from "../../assets/icons/call.svg";
import EmailIcon from "../../assets/icons/mail.svg";
import CloseIcon from "../../assets/icons/close.svg";

import { SUPPORT } from "@/constants/config";
import { StatusBar } from "expo-status-bar";

type Props = {
  visible: boolean;
  onClose: () => void;
};

const CustomerSupportModal: React.FC<Props> = ({ visible, onClose }) => {
  const openWhatsApp = async () => {
    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 (
    <Modal visible={visible} animationType="fade" transparent>
      <StatusBar style="dark" />
      <View style={styles.overlay}>
        <View style={styles.modalContainer}>
          {/* Header */}
          <View style={styles.header}>
            <Text style={styles.headerText}>Customer Support</Text>
            <Pressable onPress={onClose} style={styles.iconButton}>
              <CloseIcon />
            </Pressable>
          </View>

          {/* Buttons */}
          <View style={styles.content}>
            <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>
          </View>
        </View>
      </View>
    </Modal>
  );
};

export default CustomerSupportModal;

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: "flex-end",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalContainer: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 16,
  },
  header: {
    height: 56,
    borderBottomWidth: 1,
    borderBottomColor: "#E5E9F0",
    paddingHorizontal: 16,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  headerText: {
    fontSize: 14,
    fontWeight: "600",
    color: "#252A34",
  },
  iconButton: {
    width: 40,
    height: 40,
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  content: {
    paddingVertical: 16,
    gap: 16,
  },
  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",
  },
});