import React from "react";
import { View, Text, TouchableOpacity, StyleSheet, Modal, Linking } from "react-native";
import { useTranslation } from "react-i18next";
import pxToDp from "../helper/pxToDp";

interface UpdateModalProps {
  visible: boolean;
  updateInfo: {
    latestVersion: string;
    downloadUrl: string;
    updateLogs: string[];
  } | null;
  currentVersion: string;
  onClose: () => void;
}

export default function UpdateModal({ visible, updateInfo, currentVersion, onClose }: UpdateModalProps) {
  const { t } = useTranslation();

  const handleUpdatePress = () => {
    if (updateInfo?.downloadUrl) {
      Linking.openURL(updateInfo.downloadUrl);
    }
  };

  if (!updateInfo) return null;

  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}
      statusBarTranslucent
    >
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <Text style={styles.modalTitle}>{t("home.updateTitle")}</Text>
          <Text style={styles.modalVersion}>
            {t("home.latestVersion")}: {updateInfo.latestVersion}
          </Text>
          <Text style={styles.modalVersion}>
            {t("home.currentVersion")}: {currentVersion}
          </Text>

          <View style={styles.updateLogsContainer}>
            <Text style={styles.updateLogsTitle}>{t("home.updateLogs")}</Text>
            {updateInfo.updateLogs.map((log, index) => (
              <Text key={index} style={styles.updateLogItem}>• {log}</Text>
            ))}
          </View>

          <TouchableOpacity
            style={styles.updateButton}
            onPress={handleUpdatePress}
          >
            <Text style={styles.updateButtonText}>{t("home.updateNow")}</Text>
          </TouchableOpacity>

          {/* <TouchableOpacity
            style={styles.laterButton}
            onPress={onClose}
          >
            <Text style={styles.laterButtonText}>{t("home.updateLater")}</Text>
          </TouchableOpacity> */}
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "center",
    alignItems: "center",
  },
  modalContent: {
    width: pxToDp(600),
    backgroundColor: "#fff",
    borderRadius: pxToDp(20),
    padding: pxToDp(40),
    alignItems: "center",
  },
  modalTitle: {
    fontSize: pxToDp(36),
    fontWeight: "bold",
    color: "#333",
    marginBottom: pxToDp(20),
  },
  modalVersion: {
    fontSize: pxToDp(28),
    color: "#666",
    marginBottom: pxToDp(10),
  },
  updateLogsContainer: {
    width: "100%",
    marginTop: pxToDp(20),
    marginBottom: pxToDp(20),
    paddingHorizontal: pxToDp(10),
    maxHeight: pxToDp(300),
  },
  updateLogsTitle: {
    fontSize: pxToDp(28),
    fontWeight: "bold",
    color: "#333",
    marginBottom: pxToDp(10),
  },
  updateLogItem: {
    fontSize: pxToDp(24),
    color: "#666",
    lineHeight: pxToDp(40),
  },
  updateButton: {
    width: "100%",
    backgroundColor: "#E7141E",
    borderRadius: pxToDp(12),
    padding: pxToDp(24),
    alignItems: "center",
    // marginBottom: pxToDp(20),
  },
  updateButtonText: {
    fontSize: pxToDp(32),
    fontWeight: "bold",
    color: "#fff",
  },
  laterButton: {
    padding: pxToDp(20),
  },
  laterButtonText: {
    fontSize: pxToDp(28),
    color: "#999",
  },
});