import { PortalProvider } from "@gorhom/portal";
import React, { useState } from "react";
import { Alert, Platform, StyleSheet, Text, View } from "react-native";

import { BlurView } from "expo-blur";
import { Fonts, Palette, gutters } from "../styles";
import GradientButton from "./GradientButton";
import { LinearGradient } from "./LinearGradient/LinearGradient";
import Overlay from "./Overlay";
const WebAlertModal = ({ title, description, options }) => {
  const [visible, setVisible] = useState(true);

  const confirmOption = options?.find(({ style }) => style !== "cancel");
  const cancelOption = options?.find(({ style }) => style === "cancel");
  const hasSecondaryAction = Boolean(cancelOption);
  const buttonContainerStyle = hasSecondaryAction
    ? styles.actionButton
    : styles.singleActionButton;

  const onConfirm = () => {
    setVisible(false);
    confirmOption?.onPress();
  };

  const onCancel = () => {
    setVisible(false);
    cancelOption?.onPress();
  };

  const renderDescription = () => {
    if (
      typeof description === "string" ||
      typeof description === "number"
    ) {
      return <Text style={styles.description}>{description}</Text>;
    }

    if (!description) {
      return null;
    }

    return <View style={styles.customDescription}>{description}</View>;
  };

  return (
    <PortalProvider>
      <Overlay
        isVisible={visible}
        contentContainerStyle={styles.overlayContent}
      >
        <View style={styles.modalWrapper}>
          <LinearGradient
            colors={["rgba(255,255,255,0.18)", "rgba(255,255,255,0.04)"]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.modalBorder}
          >
            <BlurView intensity={100} tint="dark" style={styles.modalContainer}>
              <Text style={styles.title}>{title}</Text>
              {renderDescription()}
              <View style={styles.divider} />
              <View
                style={hasSecondaryAction ? styles.actionsRow : styles.actions}
              >
                {cancelOption && (
                  <GradientButton
                    title={cancelOption.text}
                    onPress={onCancel}
                    colors={[
                      "rgba(255,255,255,0.16)",
                      "rgba(255,255,255,0.08)",
                    ]}
                    textStyle={styles.secondaryButtonText}
                    gradientStyle={styles.secondaryButtonGradient}
                    containerStyle={buttonContainerStyle}
                  />
                )}
                <GradientButton
                  title={confirmOption?.text || "OK"}
                  onPress={onConfirm}
                  containerStyle={buttonContainerStyle}
                />
              </View>
            </BlurView>
          </LinearGradient>
        </View>
      </Overlay>
    </PortalProvider>
  );
};

const alertPolyfill = (title, description, options, extra) => {
  const rootDiv = document.createElement("div");
  document.body.appendChild(rootDiv);

  const closeModal = () => {
    document.body.removeChild(rootDiv);
  };

  const WebAlertComponent = () => (
    <WebAlertModal
      title={title}
      description={description}
      options={options}
      onDismiss={closeModal}
    />
  );

  // Render the React component into the div
  require("react-dom").render(<WebAlertComponent />, rootDiv);
};

const customAlert = (title, description, options, extra) => {
  // Utilisation de la propriété userInterfaceStyle pour le mettre en mode sombre
  Alert.alert(title, description, options, {
    ...extra,
    userInterfaceStyle: "dark",
  });
};

const alert = Platform.OS === "web" ? alertPolyfill : customAlert;

export const showPremiumRequiredAlert = () =>
  alert(
    "Accès premium requis",
    "Vous devez payer pour créer une nouvelle musique."
    // [{ text: "OK", style: "cancel" }]
  );

export default alert;

const styles = StyleSheet.create({
  overlayContent: {
    justifyContent: "center",
    alignItems: "center",
  },
  modalWrapper: {
    width: "90%",
    maxWidth: 460,
    paddingHorizontal: 12,
  },
  modalBorder: {
    borderRadius: 24,
    padding: 1,
  },
  modalContainer: {
    borderRadius: 23,
    paddingHorizontal: gutters * 1.8,
    paddingVertical: gutters,
    backgroundColor: "rgba(15, 12, 20, 0.9)",
    overflow: "hidden",
    gap: gutters * 0.75,
  },
  title: Fonts({
    type: "mainTitle",
    fontSize: 3,
    style: { textAlign: "center" },
  }),
  description: Fonts({
    type: "default",
    color: Palette.gray,
    fontSize: 2,
    style: { lineHeight: 22, textAlign: "center" },
  }),
  divider: {
    height: 1,
    backgroundColor: "rgba(255,255,255,0.08)",
    marginVertical: 0,
  },
  customDescription: {
    width: "100%",
  },
  actionsRow: {
    flexDirection: "row",
    gap: gutters,
    width: "100%",
  },
  actions: {
    width: "100%",
    gap: gutters,
  },
  actionButton: {
    flex: 1,
  },
  singleActionButton: {
    width: "100%",
  },
  secondaryButtonGradient: {
    borderWidth: 1,
    borderColor: "rgba(255,255,255,0.2)",
  },
  secondaryButtonText: {
    color: Palette.gray,
  },
});