import { useEffect, useState } from "react";
import { Pressable, Switch, View } from "react-native";
import {
  ControlsData,
  SafetyControlValue,
  getControlsData,
  updateSafetyControl,
} from "../../api";
import { useDevice } from "../../lib/device";
import { t } from "../../lib/locales";
import { colors } from "../../lib/theme";
import {
  Card,
  ConfirmDialog,
  DeviceSelector,
  Divider,
  H2,
  Muted,
  Row,
  Screen,
  SelectDialog,
} from "../../lib/ui";

export default function ControlsScreen() {
  const [data, setData] = useState<ControlsData | null>(null);
  const [state, setState] = useState<Record<string, SafetyControlValue>>({});
  const [communication, setCommunication] = useState<"scan" | "block">("scan");
  const [communicationModalVisible, setCommunicationModalVisible] =
    useState(false);
  const [galleryScanningMode, setGalleryScanningMode] = useState<
    "delete" | "notify" | "none"
  >("none");
  const [galleryScanningModalVisible, setGalleryScanningModalVisible] =
    useState(false);
  const [confirmModalVisible, setConfirmModalVisible] = useState(false);

  const {
    devices,
    selectedDevice,
    selectDevice,
    isLoading: isDeviceLoading,
  } = useDevice();

  const normalizeGalleryScanningMode = (
    value: SafetyControlValue | undefined,
  ): "delete" | "notify" | "none" => {
    if (value === "delete" || value === "notify" || value === "none") {
      return value;
    }

    return "none";
  };

  useEffect(() => {
    if (selectedDevice) {
      getControlsData().then((d) => {
        setData(d);
        setState(
          Object.fromEntries(
            d.safetyControls.map((c) => [c.key, c.defaultValue]),
          ),
        );
        const blockDefault = d.safetyControls.find(
          (c) => c.key === "block_strangers",
        )?.defaultValue;
        setCommunication(blockDefault ? "block" : "scan");
        const galleryDefault = d.safetyControls.find(
          (c) => c.key === "gallery_scanning_mode",
        )?.defaultValue;
        setGalleryScanningMode(normalizeGalleryScanningMode(galleryDefault));
      });
    }
  }, [selectedDevice]);

  const handleToggle = (key: string, value: SafetyControlValue) => {
    setState((prev) => ({ ...prev, [key]: value }));
    updateSafetyControl(key, value);
  };

  const handleGalleryScanningModeChange = (
    value: "delete" | "notify" | "none",
  ) => {
    setGalleryScanningMode(value);
    handleToggle("gallery_scanning_mode", value);
    setGalleryScanningModalVisible(false);
  };

  const galleryScanningLabel =
    galleryScanningMode === "delete"
      ? t("galleryScanningDelete")
      : galleryScanningMode === "notify"
        ? t("galleryScanningNotify")
        : t("galleryScanningNone");

  const openCommunicationOptions = () => {
    setCommunicationModalVisible(true);
  };

  const chooseCommunication = (choice: "scan" | "block") => {
    if (choice === "scan") {
      setCommunication("scan");
      handleToggle("block_strangers", false);
      setCommunicationModalVisible(false);
    } else {
      // block chosen - show confirmation
      setConfirmModalVisible(true);
      setCommunicationModalVisible(false);
    }
  };

  const confirmBlock = () => {
    setCommunication("block");
    handleToggle("block_strangers", true);
    setConfirmModalVisible(false);
  };

  const cancelConfirm = () => {
    setConfirmModalVisible(false);
  };

  if (!selectedDevice && !isDeviceLoading)
    return (
      <Screen>
        <DeviceSelector
          devices={devices}
          selectedDevice={selectedDevice}
          onSelectDevice={selectDevice}
          isLoading={isDeviceLoading}
        />
        <Muted>{t("noDeviceSelected")}</Muted>
      </Screen>
    );

  if (!data)
    return (
      <Screen>
        <DeviceSelector
          devices={devices}
          selectedDevice={selectedDevice}
          onSelectDevice={selectDevice}
          isLoading={isDeviceLoading}
        />
      </Screen>
    );

  return (
    <Screen>
      <DeviceSelector
        devices={devices}
        selectedDevice={selectedDevice}
        onSelectDevice={selectDevice}
        isLoading={isDeviceLoading}
      />

      <Card>
        <H2>{t("disableBuddy")}</H2>
        <Divider />
        <Row
          left={
            <View style={{ gap: 4 }}>
              <H2>{t("disableBuddy")}</H2>
              <Muted>{t("temporarilyDisablesBuddy")}</Muted>
            </View>
          }
          right={
            <Switch
              value={!!state["disable_buddy"]}
              onValueChange={(value) => handleToggle("disable_buddy", value)}
              trackColor={{ false: colors.outline, true: colors.primary }}
              thumbColor={colors.onPrimary}
            />
          }
        />
      </Card>

      <Card>
        <H2>{t("contentBlocking")}</H2>
        <Divider />
        <Row
          left={
            <View style={{ gap: 4 }}>
              <H2>{t("adultSites")}</H2>
              <Muted>{t("blockAdultWebsites")}</Muted>
            </View>
          }
          right={
            <Switch
              value={!!state["adult_sites"]}
              onValueChange={(value) => handleToggle("adult_sites", value)}
              trackColor={{ false: colors.outline, true: colors.primary }}
              thumbColor={colors.onPrimary}
            />
          }
        />
      </Card>

      <Card>
        <H2>{t("familyLink")}</H2>
        <Divider />
        <Row
          left={
            <View style={{ gap: 4 }}>
              <H2>{t("antiCircumvention")}</H2>
              <Muted>{t("preventFamilyLinkBypasses")}</Muted>
            </View>
          }
          right={
            <Switch
              value={!!state["family_link_anti_circumvention"]}
              onValueChange={(value) =>
                handleToggle("family_link_anti_circumvention", value)
              }
              trackColor={{ false: colors.outline, true: colors.primary }}
              thumbColor={colors.onPrimary}
            />
          }
        />
      </Card>

      <Card>
        <H2>{t("communication")}</H2>
        <Divider />
        <Row
          left={<Muted>{t("communicationWithStrangers")}</Muted>}
          right={
            <Pressable onPress={openCommunicationOptions}>
              <Muted>
                {communication === "block"
                  ? t("blockAllCommunications")
                  : t("scanCommunicationsWithAI")}
              </Muted>
            </Pressable>
          }
        />
        <Muted style={{ marginTop: 6 }}>
          {t("chooseHowBuddyShouldHandleStrangers")}
        </Muted>

        <SelectDialog
          visible={communicationModalVisible}
          title={t("communicationWithStrangersTitle")}
          options={[
            {
              label: t("scanCommunicationsWithAI"),
              onPress: () => chooseCommunication("scan"),
            },
            {
              label: t("blockAllCommunications"),
              onPress: () => chooseCommunication("block"),
              destructive: true,
            },
          ]}
          onClose={() => setCommunicationModalVisible(false)}
        />

        <ConfirmDialog
          visible={confirmModalVisible}
          title={t("blockAllCommunications")}
          message={t("blockAllCommunicationsConfirm")}
          confirmLabel={t("okay")}
          cancelLabel={t("cancel")}
          onConfirm={confirmBlock}
          onCancel={cancelConfirm}
          destructive
        />
      </Card>

      <Card>
        <H2>{t("notifications")}</H2>
        <Divider />
        <Row
          left={<Muted>{t("dangerousMessages")}</Muted>}
          right={
            <Switch
              value={!!state["notify_dangerous_messages"]}
              onValueChange={(value) =>
                handleToggle("notify_dangerous_messages", value)
              }
              trackColor={{ false: colors.outline, true: colors.primary }}
              thumbColor={colors.onPrimary}
            />
          }
        />
        <View style={{ paddingVertical: 12 }}>
          <Divider />
        </View>
        <Row
          left={<Muted>{t("newContactAdded")}</Muted>}
          right={
            <Switch
              value={!!state["notify_new_contact_added"]}
              onValueChange={(value) =>
                handleToggle("notify_new_contact_added", value)
              }
              trackColor={{ false: colors.outline, true: colors.primary }}
              thumbColor={colors.onPrimary}
            />
          }
        />
      </Card>

      <Card>
        <H2>{t("galleryScanning")}</H2>
        <Divider />
        <Row
          left={
            <View style={{ gap: 4 }}>
              <H2>{t("galleryScanning")}</H2>
              <Muted>{t("scanGalleryForInappropriateImages")}</Muted>
            </View>
          }
          right={
            <Pressable onPress={() => setGalleryScanningModalVisible(true)}>
              <Muted>{galleryScanningLabel}</Muted>
            </Pressable>
          }
        />

        <SelectDialog
          visible={galleryScanningModalVisible}
          title={t("galleryScanningTitle")}
          options={[
            {
              label: t("galleryScanningNone"),
              onPress: () => handleGalleryScanningModeChange("none"),
            },
            {
              label: t("galleryScanningNotify"),
              onPress: () => handleGalleryScanningModeChange("notify"),
            },
            {
              label: t("galleryScanningDelete"),
              onPress: () => handleGalleryScanningModeChange("delete"),
              destructive: true,
            },
          ]}
          onClose={() => setGalleryScanningModalVisible(false)}
        />
      </Card>
    </Screen>
  );
}