import { Ionicons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import { View } from "react-native";
import {
  Device,
  getDevices,
  getUserProfile,
  requestKidLinkCode,
  renameDevice,
  UserProfile,
  verifyEmail,
} from "../../api";
import { useAuth } from "../../lib/auth";
import { t } from "../../lib/locales";
import { colors } from "../../lib/theme";
import {
  ActionRow,
  AlertDialog,
  Button,
  Card,
  Divider,
  H2,
  Pill,
  PromptDialog,
  Row,
  Screen,
} from "../../lib/ui";

export default function SettingsScreen() {
  const { signOut } = useAuth();
  const [devices, setDevices] = useState<Device[]>([]);
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [alertVisible, setAlertVisible] = useState(false);
  const [renameVisible, setRenameVisible] = useState(false);
  const [selectedDevice, setSelectedDevice] = useState<Device | null>(null);
  const [verifyEmailVisible, setVerifyEmailVisible] = useState(false);
  const [verifyEmailResult, setVerifyEmailResult] = useState<{
    visible: boolean;
    success: boolean;
    message: string;
  }>({ visible: false, success: false, message: "" });
  const [kidLinkCodeResult, setKidLinkCodeResult] = useState<{
    visible: boolean;
    success: boolean;
    title: string;
    message: string;
  }>({ visible: false, success: false, title: "", message: "" });

  const showNotWired = () => setAlertVisible(true);

  const refreshDevices = () => {
    getDevices().then(setDevices);
  };

  const refreshProfile = () => {
    getUserProfile().then(setProfile);
  };

  useEffect(() => {
    refreshDevices();
    refreshProfile();
  }, []);

  const handleRename = async (newName: string) => {
    if (selectedDevice && newName) {
      const success = await renameDevice(selectedDevice.id, newName);
      if (success) {
        refreshDevices();
      }
    }
    setRenameVisible(false);
    setSelectedDevice(null);
  };

  const handleVerifyEmail = async (code: string) => {
    if (code) {
      const result = await verifyEmail(code);
      if (result.success) {
        setVerifyEmailResult({
          visible: true,
          success: true,
          message: t("emailVerifiedSuccessfully"),
        });
        refreshProfile();
      } else {
        setVerifyEmailResult({
          visible: true,
          success: false,
          message: result.error || t("failedToVerifyEmail"),
        });
      }
    }
    setVerifyEmailVisible(false);
  };

  const handleGenerateKidLinkCode = async () => {
    const result = await requestKidLinkCode();

    if (result.success && result.code) {
      const expiresMinutes = Math.max(
        1,
        Math.ceil((result.expiresInSeconds ?? 300) / 60),
      );

      setKidLinkCodeResult({
        visible: true,
        success: true,
        title: t("kidLinkCodeTitle"),
        message: `${result.code}\n${t("kidLinkCodeExpiresIn")} ${expiresMinutes} min`,
      });
      return;
    }

    setKidLinkCodeResult({
      visible: true,
      success: false,
      title: t("error"),
      message: result.error || t("failedToGenerateKidLinkCode"),
    });
  };

  return (
    <Screen>
      <AlertDialog
        visible={alertVisible}
        title={t("notWiredYet")}
        message={t("hookThisUpLater")}
        onClose={() => setAlertVisible(false)}
      />

      <PromptDialog
        visible={renameVisible}
        title={t("renameDevice")}
        message={`${t("enterNewNameFor")} ${selectedDevice?.name}:`}
        onClose={() => setRenameVisible(false)}
        onSubmit={handleRename}
        initialValue={selectedDevice?.name}
      />

      <PromptDialog
        visible={verifyEmailVisible}
        title={t("verifyEmailTitle")}
        message={t("enterVerificationCode")}
        onClose={() => setVerifyEmailVisible(false)}
        onSubmit={handleVerifyEmail}
        initialValue=""
      />

      <AlertDialog
        visible={verifyEmailResult.visible}
        title={verifyEmailResult.success ? t("success") : t("error")}
        message={verifyEmailResult.message}
        onClose={() =>
          setVerifyEmailResult({ ...verifyEmailResult, visible: false })
        }
      />

      <AlertDialog
        visible={kidLinkCodeResult.visible}
        title={kidLinkCodeResult.title}
        message={kidLinkCodeResult.message}
        onClose={() =>
          setKidLinkCodeResult({ ...kidLinkCodeResult, visible: false })
        }
      />

      <Card>
        <Row
          left={
            <View
              style={{ flexDirection: "row", alignItems: "center", gap: 10 }}
            >
              <Ionicons
                name="phone-portrait"
                size={18}
                color={colors.onBackground}
              />
              <H2>{t("devices")}</H2>
            </View>
          }
          right={
            <Pill
              label={`${devices.length} ${
                devices.length !== 1 ? t("devicesPlural") : t("device")
              }`}
            />
          }
        />
        <Divider />
        {devices.map((device, index) => (
          <View key={device.id}>
            <ActionRow
              title={device.name}
              subtitle={`${t("lastSeen")}: ${device.lastCheck}`}
              onPress={() => {
                setSelectedDevice(device);
                setRenameVisible(true);
              }}
              right={
                <View
                  style={{ flexDirection: "row", alignItems: "center", gap: 8 }}
                >
                  <Pill
                    label={
                      device.status === "online" ? t("online") : t("offline")
                    }
                    tone={device.status === "online" ? "good" : "attention"}
                  />
                  <Ionicons
                    name="chevron-forward"
                    size={18}
                    color={colors.onSurfaceVariant}
                  />
                </View>
              }
            />
            {index !== devices.length - 1 && <Divider />}
          </View>
        ))}
        <Divider />
      </Card>

      <Card>
        <H2>{t("transparency")}</H2>
        <Divider />
        <ActionRow
          title={t("privacyAndTerms")}
          subtitle={t("legalAndPrivacyInfo")}
          onPress={showNotWired}
          right={
            <Ionicons
              name="chevron-forward"
              size={18}
              color={colors.onSurfaceVariant}
            />
          }
        />
      </Card>

      <Card>
        <H2>{t("account")}</H2>
        <Divider />
        <ActionRow
          title={t("generateKidLinkCode")}
          subtitle={t("generateKidLinkCodeSubtitle")}
          onPress={handleGenerateKidLinkCode}
          right={
            <Ionicons
              name="key-outline"
              size={18}
              color={colors.onSurfaceVariant}
            />
          }
        />
        <Divider />
        {profile && !profile.emailVerified && (
          <>
            <ActionRow
              title={t("verifyEmail")}
              subtitle={t("verifyYourEmailAddress")}
              onPress={() => setVerifyEmailVisible(true)}
              right={
                <Ionicons
                  name="mail-outline"
                  size={18}
                  color={colors.onSurfaceVariant}
                />
              }
            />
          </>
        )}
        <Button title={t("signOut")} variant="secondary" onPress={signOut} />
      </Card>
    </Screen>
  );
}