import SignOutButton from "@/components-old/sign-out-button/sign-out-button.component";
import { selectDeleteAfterUpload } from "@/redux/app/app.selectors";
import { selectBodyshop, selectCurrentUser } from "@/redux/user/user.selectors";
import { formatBytes } from "@/util/uploadUtils";
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as Application from "expo-application";
import Constants from "expo-constants";
import { useTranslation } from "react-i18next";
import { Alert, ScrollView, StyleSheet, View } from "react-native";
import { Button, Card, Divider, List, Text } from "react-native-paper";
import { SafeAreaView } from "react-native-safe-area-context";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import UploadDeleteSwitch from "./upload-delete-switch";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  deleteAfterUpload: selectDeleteAfterUpload,
  currentUser: selectCurrentUser,
});

const mapDispatchToProps = (dispatch) => ({});
export default connect(mapStateToProps, mapDispatchToProps)(Tab);

function Tab({ bodyshop, currentUser }) {
  const { t } = useTranslation();
  const handleClearStorage = () => {
    Alert.alert(
      "Clear Local Cache",
      "This will remove persisted Redux state. Media already uploaded won't be affected. Continue?",
      [
        { text: "Cancel", style: "cancel" },
        {
          text: "Clear",
          style: "destructive",
          onPress: async () => {
            try {
              await AsyncStorage.removeItem("persist:root");
              Alert.alert("Cleared", "Local cache cleared.");
            } catch (_e) {
              Alert.alert("Error", "Unable to clear local cache.");
            }
          },
        },
      ]
    );
  };

  return (
    <SafeAreaView>
      <ScrollView contentContainerStyle={styles.container}>
        <Text variant="headlineMedium" style={styles.title}>
          Settings
        </Text>

        <Card style={styles.section}>
          <Card.Title title="Storage" />
          <Card.Content>
            <List.Section>
              <View style={styles.inlineRow}>
                <Text style={styles.switchLabel}>
                  {" "}
                  {t("mediabrowser.labels.deleteafterupload")}
                </Text>
                <UploadDeleteSwitch />
              </View>
              <List.Item
                title="Media Storage"
                description={
                  bodyshop?.uselocalmediaserver
                    ? bodyshop.localmediaserverhttp
                    : "Cloud"
                }
                left={(props) => <List.Icon {...props} icon="database" />}
              />
              {!bodyshop?.uselocalmediaserver && (
                <List.Item
                  title="Job Size Limit"
                  description={
                    bodyshop?.jobsizelimit
                      ? formatBytes(bodyshop.jobsizelimit)
                      : "Not specified"
                  }
                  left={(props) => <List.Icon {...props} icon="harddisk" />}
                />
              )}
            </List.Section>
          </Card.Content>
          <Card.Actions>
            <Button
              onPress={handleClearStorage}
              mode="contained-tonal"
              icon="delete-outline"
            >
              Clear Cache
            </Button>
          </Card.Actions>
        </Card>

        <Card style={styles.section}>
          <Card.Content>
            <Text style={styles.paragraph}>
              Signed in to bodyshop:{" "}
              {bodyshop?.shopname || bodyshop?.id || "Unknown"}
            </Text>
            <Text style={styles.paragraph}>
              Signed in to as: {currentUser?.email || "Unknown"}
            </Text>
          </Card.Content>
          <Card.Actions style={styles.actionsRow}>
            <SignOutButton />
          </Card.Actions>
        </Card>

        <Divider style={styles.divider} />
        <Text style={styles.footerNote} variant="bodySmall">
          {t("settings.labels.version", {
            number: `${Constants.expoConfig.version}(${Application.nativeBuildVersion} - ${Constants.expoConfig.extra.expover})`,
          })}
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 24,
    paddingHorizontal: 20,
  },
  title: {
    marginBottom: 12,
    fontWeight: "600",
  },
  section: {
    marginBottom: 20,
  },
  inlineRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingVertical: 8,
    paddingHorizontal: 4,
  },
  switchLabel: {
    fontSize: 16,
    fontWeight: "500",
  },
  paragraph: {
    marginBottom: 8,
  },
  actionsRow: {
    justifyContent: "flex-end",
  },
  divider: {
    marginTop: 8,
  },
  footerNote: {
    textAlign: "center",
    // color: "#666",
    marginTop: 16,
  },
});